@springmicro/auth 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springmicro/auth",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": false,
   "publishConfig": {
     "access": "public",
@@ -54,5 +54,5 @@
     "react-social-login-buttons": "^4.1.0",
     "uuid": "^9.0.1"
   },
-  "gitHead": "431413a6efc5c939e85c79309967bdc6c88c9ee2"
+  "gitHead": "049eb0491834ffa64dd66a1d965ccd3e5751d085"
 }

package/src/components/SignUp.tsx

@@ -49,6 +49,8 @@ export type SignUpFormState = {
 type SignUpFormProps = {
   application: Application | null;
   applicationName?: string;
+  CLIENT_ID: string;
+  CLIENT_SECRET: string;
 
   // onUpdateAccount: (account: Account) => void;
   onUpdateApplication: (application: Application | null) => void;
@@ -78,16 +80,19 @@ function SignUpForm(props: SignUpFormProps) {
       return;
     }
 
-    ApplicationBackend.getApplication("admin", applicationName).then(
-      (res: any) => {
-        if (res.status === "error") {
-          Setting.showMessage("error", res.msg);
-          return;
-        }
-
-        onUpdateApplication(res.data);
+    ApplicationBackend.getApplication(
+      "admin",
+      applicationName,
+      props.CLIENT_ID,
+      props.CLIENT_SECRET
+    ).then((res: any) => {
+      if (res.status === "error") {
+        Setting.showMessage("error", res.msg);
+        return;
       }
-    );
+
+      onUpdateApplication(res.data);
+    });
   };
   const getApplicationLogin = (oAuthParams: any) => {
     AuthBackend.getApplicationLogin(oAuthParams).then((res) => {
@@ -176,7 +181,15 @@ function SignUpForm(props: SignUpFormProps) {
   return application.signupItems?.map((signupItem, idx) => {
     return (
       <div key={idx}>
-        {renderFormItem(application, signupItem, state, setState, t)}
+        {renderFormItem(
+          application,
+          signupItem,
+          state,
+          setState,
+          t,
+          props.CLIENT_ID,
+          props.CLIENT_SECRET
+        )}
       </div>
     );
   });
@@ -190,12 +203,16 @@ type SignUpProps = {
   applicationName: string;
   casdoorApiRoot: string;
   springmicroApiRoot?: string;
+  CLIENT_ID: string;
+  CLIENT_SECRET: string;
 };
 
 export function SignUp({
   applicationName,
   casdoorApiRoot,
   springmicroApiRoot,
+  CLIENT_ID,
+  CLIENT_SECRET,
 }: SignUpProps) {
   Setting.ROOT_URLS.casdoor = casdoorApiRoot;
   if (springmicroApiRoot) {
@@ -204,19 +221,22 @@ export function SignUp({
   const [state, setState] = React.useState<SignUpState>({ application: null });
 
   const getApplication = () => {
-    ApplicationBackend.getApplication("admin", applicationName).then(
-      (res: any) => {
-        console.log(res);
-        if (res.status === "error") {
-          Setting.showMessage("error", res.msg);
-          return;
-        }
-
-        setState({
-          application: res.data,
-        });
+    ApplicationBackend.getApplication(
+      "admin",
+      applicationName,
+      CLIENT_ID,
+      CLIENT_SECRET
+    ).then((res: any) => {
+      console.log(res);
+      if (res.status === "error") {
+        Setting.showMessage("error", res.msg);
+        return;
       }
-    );
+
+      setState({
+        application: res.data,
+      });
+    });
   };
 
   React.useEffect(() => {
@@ -234,6 +254,8 @@ export function SignUp({
             application: application,
           });
         }}
+        CLIENT_ID={CLIENT_ID}
+        CLIENT_SECRET={CLIENT_SECRET}
       />
     </I18nextProvider>
   );
@@ -265,6 +287,8 @@ export function SignUpProvider({
   applicationName,
   casdoorApiRoot,
   springmicroApiRoot,
+  CLIENT_ID,
+  CLIENT_SECRET,
   children,
 }: React.PropsWithChildren<SignUpProps>) {
   const { t, i18n } = useTranslation();
@@ -279,19 +303,22 @@ export function SignUpProvider({
     React.useState<Record<string, boolean>>({});
 
   const getApplication = () => {
-    ApplicationBackend.getApplication("admin", applicationName).then(
-      (res: any) => {
-        console.log(res);
-        if (res.status === "error") {
-          Setting.showMessage("error", res.msg);
-          return;
-        }
-
-        setState({
-          application: res.data,
-        });
+    ApplicationBackend.getApplication(
+      "admin",
+      applicationName,
+      CLIENT_ID,
+      CLIENT_SECRET
+    ).then((res: any) => {
+      console.log(res);
+      if (res.status === "error") {
+        Setting.showMessage("error", res.msg);
+        return;
       }
-    );
+
+      setState({
+        application: res.data,
+      });
+    });
   };
 
   const onUpdateApplication = (application: Application) => {

package/src/components/forms/SendCodeInput.tsx

@@ -1,149 +1,155 @@
-// Copyright 2021 The Casdoor Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from "react";
-import i18next from "i18next";
-import * as UserBackend from "./util/user-api";
-import { CaptchaModal } from "./CaptchaModal";
-import type { Application } from "./util/provider";
-import { useTranslation } from "react-i18next";
-
-type ButtonClickArgsTuple = [
-  dest: any,
-  type: any,
-  applicationId: any,
-  checkUser?: string
-];
-
-export type SendCodeInputProps = {
-  value?: any;
-  disabled: boolean;
-  textBefore?: string;
-  onChange: Function;
-  onButtonClickArgs: ButtonClickArgsTuple;
-  application: Application;
-  method: string;
-  countryCode: string;
-};
-
-export const SendCodeInput = ({
-  value,
-  disabled,
-  textBefore,
-  onChange,
-  onButtonClickArgs,
-  application,
-  method,
-  countryCode,
-}: SendCodeInputProps) => {
-  const { t } = useTranslation();
-  const [visible, setVisible] = React.useState(false);
-  const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
-  const [buttonLoading, setButtonLoading] = React.useState(false);
-  const dialogRef = React.useRef<HTMLElement | null>(null);
-
-  const handleCountDown = (leftTime = 60) => {
-    let leftTimeSecond = leftTime;
-    setButtonLeftTime(leftTimeSecond);
-    const countDown = () => {
-      leftTimeSecond--;
-      setButtonLeftTime(leftTimeSecond);
-      if (leftTimeSecond === 0) {
-        return;
-      }
-      setTimeout(countDown, 1000);
-    };
-    setTimeout(countDown, 1000);
-  };
-
-  const handleOk = (
-    captchaType: string,
-    captchaToken: string,
-    clientSecret: string
-  ) => {
-    setVisible(false);
-    setButtonLoading(true);
-    UserBackend.sendCode(
-      captchaType,
-      captchaToken,
-      clientSecret,
-      method,
-      countryCode,
-      ...onButtonClickArgs
-    ).then((res: any) => {
-      setButtonLoading(false);
-      if (res) {
-        handleCountDown(60);
-      }
-    });
-  };
-
-  const handleCancel = () => {
-    setVisible(false);
-  };
-
-  React.useEffect(() => {
-    dialogRef.current = document.getElementById("captcha-modal");
-  }, []);
-
-  React.useEffect(() => {
-    if (dialogRef.current) {
-      if (visible) {
-        // @ts-ignore
-        dialogRef.current.showModal();
-      } else {
-        // @ts-ignore
-        dialogRef.current.close();
-      }
-    }
-  }, [visible]);
-
-  return (
-    <React.Fragment>
-      <div className="flex">
-        <input
-          className="input"
-          // addonBefore={textBefore}
-          disabled={disabled}
-          value={value}
-          // prefix={<SafetyOutlined />}
-          placeholder={"Enter your code"}
-          onChange={(e: any) => onChange(e.target.value)}
-          // onBlur={() => setVisible(true)}
-          autoComplete="one-time-code"
-        />
-        <button
-          className="btn"
-          disabled={disabled || buttonLeftTime > 0}
-          // loading={buttonLoading}
-          onClick={() => setVisible(true)}
-        >
-          {buttonLeftTime > 0
-            ? `${buttonLeftTime} s`
-            : buttonLoading
-            ? t("code.sending")
-            : t("code.sendCode")}
-        </button>
-      </div>
-      <CaptchaModal
-        owner={application.owner}
-        name={application.name}
-        visible={visible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        isCurrentProvider={false}
-      />
-    </React.Fragment>
-  );
-};
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import i18next from "i18next";
+import * as UserBackend from "./util/user-api";
+import { CaptchaModal } from "./CaptchaModal";
+import type { Application } from "./util/provider";
+import { useTranslation } from "react-i18next";
+
+type ButtonClickArgsTuple = [
+  dest: any,
+  type: any,
+  applicationId: any,
+  checkUser?: string
+];
+
+export type SendCodeInputProps = {
+  value?: any;
+  disabled: boolean;
+  textBefore?: string;
+  onChange: Function;
+  onButtonClickArgs: ButtonClickArgsTuple;
+  application: Application;
+  method: string;
+  countryCode: string;
+  CLIENT_ID: string;
+  CLIENT_SECRET: string;
+};
+
+export const SendCodeInput = ({
+  value,
+  disabled,
+  textBefore,
+  onChange,
+  onButtonClickArgs,
+  application,
+  method,
+  countryCode,
+  CLIENT_ID,
+  CLIENT_SECRET,
+}: SendCodeInputProps) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = React.useState(false);
+  const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
+  const [buttonLoading, setButtonLoading] = React.useState(false);
+  const dialogRef = React.useRef<HTMLElement | null>(null);
+
+  const handleCountDown = (leftTime = 60) => {
+    let leftTimeSecond = leftTime;
+    setButtonLeftTime(leftTimeSecond);
+    const countDown = () => {
+      leftTimeSecond--;
+      setButtonLeftTime(leftTimeSecond);
+      if (leftTimeSecond === 0) {
+        return;
+      }
+      setTimeout(countDown, 1000);
+    };
+    setTimeout(countDown, 1000);
+  };
+
+  const handleOk = (
+    captchaType: string,
+    captchaToken: string,
+    clientSecret: string
+  ) => {
+    setVisible(false);
+    setButtonLoading(true);
+    UserBackend.sendCode(
+      captchaType,
+      captchaToken,
+      clientSecret,
+      method,
+      countryCode,
+      ...onButtonClickArgs,
+      CLIENT_ID,
+      CLIENT_SECRET
+    ).then((res: any) => {
+      setButtonLoading(false);
+      if (res) {
+        handleCountDown(60);
+      }
+    });
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  React.useEffect(() => {
+    dialogRef.current = document.getElementById("captcha-modal");
+  }, []);
+
+  React.useEffect(() => {
+    if (dialogRef.current) {
+      if (visible) {
+        // @ts-ignore
+        dialogRef.current.showModal();
+      } else {
+        // @ts-ignore
+        dialogRef.current.close();
+      }
+    }
+  }, [visible]);
+
+  return (
+    <React.Fragment>
+      <div className="flex">
+        <input
+          className="input"
+          // addonBefore={textBefore}
+          disabled={disabled}
+          value={value}
+          // prefix={<SafetyOutlined />}
+          placeholder={"Enter your code"}
+          onChange={(e: any) => onChange(e.target.value)}
+          // onBlur={() => setVisible(true)}
+          autoComplete="one-time-code"
+        />
+        <button
+          className="btn"
+          disabled={disabled || buttonLeftTime > 0}
+          // loading={buttonLoading}
+          onClick={() => setVisible(true)}
+        >
+          {buttonLeftTime > 0
+            ? `${buttonLeftTime} s`
+            : buttonLoading
+            ? t("code.sending")
+            : t("code.sendCode")}
+        </button>
+      </div>
+      <CaptchaModal
+        owner={application.owner}
+        name={application.name}
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        isCurrentProvider={false}
+      />
+    </React.Fragment>
+  );
+};