@springmicro/auth 0.5.1 → 0.5.2

package/src/components/SignUp.tsx

@@ -1,442 +1,445 @@
-import React from "react";
-import * as Setting from "./forms/util/core";
-import * as AuthBackend from "./forms/util/auth-api";
-import * as ApplicationBackend from "./forms/util/application-api";
-import * as AuthUtil from "./forms/util/auth-util";
-import * as InvitationBackend from "./forms/util/invitation-api";
-import * as UserBackend from "./forms/util/user-api";
-import type { Invitation } from "./forms/util/invitation-api";
-import type { Application } from "./forms/util/provider";
-import { renderFormItem } from "./forms/SignUpFormItem";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import i18n from "../i18n";
-import {
-  type SignupItem,
-  getDefaultValues,
-  getFormProps,
-  getIcon,
-  getZod,
-  getPasswordVisibilityRecord,
-  getKey,
-  getType,
-  requiresCode,
-} from "./util";
-
-export type SignUpFormState = {
-  applicationName?: string | null;
-  name?: string;
-  password?: string;
-  confirm?: string;
-  username?: string;
-  email: string;
-  phone: string;
-  emailOrPhoneMode?: string;
-  countryCode: string;
-  emailCode: string;
-  phoneCode: string;
-  validEmail: boolean;
-  validPhone: boolean;
-  region: string;
-  isTermsOfUseVisible?: boolean;
-  termsOfUseContent: string;
-  invitationCode?: string;
-  invitation?: Invitation;
-  msg?: string;
-  agreement?: boolean;
-};
-
-type SignUpFormProps = {
-  application: Application | null;
-  applicationName?: string;
-
-  // onUpdateAccount: (account: Account) => void;
-  onUpdateApplication: (application: Application | null) => void;
-};
-type Account = any;
-
-function SignUpForm(props: SignUpFormProps) {
-  const { t, i18n } = useTranslation();
-  const [state, setState] = React.useState<SignUpFormState>({
-    applicationName: props.applicationName ?? null,
-    email: "",
-    phone: "",
-    emailOrPhoneMode: "",
-    countryCode: "",
-    emailCode: "",
-    phoneCode: "",
-    validEmail: false,
-    validPhone: false,
-    region: "",
-    isTermsOfUseVisible: false,
-    termsOfUseContent: "",
-  });
-  const form = React.useRef();
-
-  const getApplication = (applicationName?: string) => {
-    if (applicationName === undefined) {
-      return;
-    }
-
-    ApplicationBackend.getApplication("admin", applicationName).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) => {
-      if (res.status === "ok") {
-        const application = res.data;
-        onUpdateApplication(application);
-      } else {
-        onUpdateApplication(null);
-        setState({
-          ...state,
-          msg: res.msg,
-        });
-      }
-    });
-  };
-
-  const getApplicationObj = () => {
-    return props.application;
-  };
-
-  const getInvitationCodeInfo = (
-    invitationCode: string,
-    application: string
-  ) => {
-    InvitationBackend.getInvitationCodeInfo(invitationCode, application).then(
-      (res: any) => {
-        if (res.status === "error") {
-          Setting.showMessage("error", res.msg);
-          return;
-        }
-        setState({ ...state, invitation: res.data });
-      }
-    );
-  };
-
-  // const onUpdateAccount = (account: Account) => {
-  //   props.onUpdateAccount(account);
-  // };
-
-  const onUpdateApplication = (application: Application | null) => {
-    props.onUpdateApplication(application);
-  };
-
-  React.useEffect(() => {
-    const oAuthParams = AuthUtil.getOAuthGetParameters();
-    if (oAuthParams !== null) {
-      const signinUrl = window.location.pathname.replace(
-        "/signup/oauth/authorize",
-        "/login/oauth/authorize"
-      );
-      sessionStorage.setItem("signinUrl", signinUrl + window.location.search);
-    }
-
-    if (getApplicationObj() === undefined) {
-      if (state.applicationName !== null) {
-        getApplication(state.applicationName);
-
-        const sp = new URLSearchParams(window.location.search);
-        if (sp.has("invitationCode")) {
-          const invitationCode = sp.get("invitationCode") ?? "";
-          setState({ ...state, invitationCode });
-          if (invitationCode !== "") {
-            getInvitationCodeInfo(
-              invitationCode,
-              "admin/" + state.applicationName
-            );
-          }
-        }
-      } else if (oAuthParams !== null) {
-        getApplicationLogin(oAuthParams);
-      } else {
-        Setting.showMessage(
-          "error",
-          `Unknown application name: ${state.applicationName}`
-        );
-        onUpdateApplication(null);
-      }
-    }
-  }, []);
-
-  const application = getApplicationObj();
-  if (application === undefined || application === null) {
-    return null;
-  }
-  // return <div>SIGN UP</div>;
-  return application.signupItems?.map((signupItem, idx) => {
-    return (
-      <div key={idx}>
-        {renderFormItem(application, signupItem, state, setState, t)}
-      </div>
-    );
-  });
-}
-
-type SignUpState = {
-  application: Application | null;
-};
-
-type SignUpProps = {
-  applicationName: string;
-  casdoorApiRoot: string;
-  springmicroApiRoot?: string;
-};
-
-export function SignUp({
-  applicationName,
-  casdoorApiRoot,
-  springmicroApiRoot,
-}: SignUpProps) {
-  Setting.ROOT_URLS.casdoor = casdoorApiRoot;
-  if (springmicroApiRoot) {
-    Setting.ROOT_URLS.springmicro = springmicroApiRoot;
-  }
-  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,
-        });
-      }
-    );
-  };
-
-  React.useEffect(() => {
-    // console.log(i18n.t("signup.username"));
-    getApplication();
-  }, []);
-
-  if (state.application === undefined) return <></>;
-  return (
-    <I18nextProvider i18n={i18n}>
-      <SignUpForm
-        application={state.application}
-        onUpdateApplication={(application) => {
-          setState({
-            application: application,
-          });
-        }}
-      />
-    </I18nextProvider>
-  );
-}
-
-interface SignUpContextType {
-  application: Application;
-  getDefaultValues: typeof getDefaultValues;
-  getFormProps: typeof getFormProps;
-  icon: (
-    signupItem: SignupItem,
-    Button: React.JSX.ElementType
-  ) => React.JSX.Element | null;
-  getZod: typeof getZod;
-  getKey: typeof getKey;
-  type: (signupItem: SignupItem) => string;
-  sendCode: typeof UserBackend.sendCode;
-  requiresCode: typeof requiresCode;
-  getCaptcha: typeof UserBackend.getCaptcha;
-  // updateApplication: (updates: Partial<Application>) => void;
-}
-
-const SignUpContext = React.createContext<SignUpContextType | undefined>(
-  undefined
-);
-
-export function SignUpProvider({
-  applicationName,
-  casdoorApiRoot,
-  springmicroApiRoot,
-  children,
-}: React.PropsWithChildren<SignUpProps>) {
-  const { t, i18n } = useTranslation();
-  Setting.ROOT_URLS.casdoor = casdoorApiRoot;
-  if (springmicroApiRoot) {
-    Setting.ROOT_URLS.springmicro = springmicroApiRoot;
-  }
-  const [state, setState] = React.useState<
-    SignUpState & Partial<SignUpFormState>
-  >({ application: null });
-  const [togglePasswordVisibility, setTogglePasswordVisibility] =
-    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,
-        });
-      }
-    );
-  };
-
-  const onUpdateApplication = (application: Application) => {
-    setState({
-      application: application,
-    });
-  };
-
-  const getInvitationCodeInfo = (
-    invitationCode: string,
-    application: string
-  ) => {
-    InvitationBackend.getInvitationCodeInfo(invitationCode, application).then(
-      (res: any) => {
-        if (res.status === "error") {
-          Setting.showMessage("error", res.msg);
-          return;
-        }
-        setState({ ...state, invitation: res.data });
-      }
-    );
-  };
-
-  const getApplicationLogin = (oAuthParams: any) => {
-    AuthBackend.getApplicationLogin(oAuthParams).then((res) => {
-      if (res.status === "ok") {
-        const application = res.data;
-        onUpdateApplication(application);
-      } else {
-        onUpdateApplication(null);
-        setState({
-          ...state,
-          msg: res.msg,
-        });
-      }
-    });
-  };
-
-  const icon = (item: SignupItem, Button: React.JSX.ElementType) => {
-    return getIcon(
-      item,
-      {
-        password: {
-          state: togglePasswordVisibility,
-          setState: setTogglePasswordVisibility,
-        },
-      },
-      Button
-    );
-  };
-
-  const type = (item: SignupItem) => {
-    return getType(item, {
-      hidePassword: togglePasswordVisibility,
-    });
-  };
-
-  const sendCode = UserBackend.sendCode;
-  const getCaptcha = UserBackend.getCaptcha;
-
-  React.useEffect(() => {
-    // console.log(i18n.t("signup.username"));
-    getApplication();
-  }, []);
-
-  React.useEffect(() => {
-    if (state.application) {
-      setTogglePasswordVisibility(
-        getPasswordVisibilityRecord(state.application.signupItems)
-      );
-    }
-  }, [state.application]);
-
-  React.useEffect(() => {
-    const oAuthParams = AuthUtil.getOAuthGetParameters();
-    if (oAuthParams !== null) {
-      const signinUrl = window.location.pathname.replace(
-        "/signup/oauth/authorize",
-        "/login/oauth/authorize"
-      );
-      sessionStorage.setItem("signinUrl", signinUrl + window.location.search);
-    }
-
-    if (state.application === undefined) {
-      if (state.applicationName !== null) {
-        getApplication();
-
-        const sp = new URLSearchParams(window.location.search);
-        if (sp.has("invitationCode")) {
-          const invitationCode = sp.get("invitationCode") ?? "";
-          setState({ ...state, invitationCode });
-          if (invitationCode !== "") {
-            getInvitationCodeInfo(
-              invitationCode,
-              "admin/" + state.applicationName
-            );
-          }
-        }
-      } else if (oAuthParams !== null) {
-        getApplicationLogin(oAuthParams);
-      } else {
-        Setting.showMessage(
-          "error",
-          `Unknown application name: ${state.applicationName}`
-        );
-        onUpdateApplication(null);
-      }
-    }
-  }, []);
-
-  // const application = getApplicationObj();
-  if (state.application === undefined || state.application === null) {
-    return null;
-  }
-  // return <div>SIGN UP</div>;
-  // return state.application.signupItems?.map((signupItem, idx) => {
-  //   return (
-  //     <div key={idx}>
-  //       {renderFormItem(state.application, signupItem, state, setState, t)}
-  //     </div>
-  //   );
-  // });
-
-  return (
-    <SignUpContext.Provider
-      value={{
-        application: state.application,
-        getDefaultValues,
-        getFormProps,
-        icon,
-        getZod,
-        getKey,
-        type,
-        sendCode,
-        requiresCode,
-        getCaptcha,
-      }}
-    >
-      {children}
-    </SignUpContext.Provider>
-  );
-}
-
-export const useSignUp = (): SignUpContextType => {
-  const context = React.useContext(SignUpContext);
-  if (!context) {
-    throw new Error("useSignUp must be used within a SignUpProvider");
-  }
-  return context;
-};
+import React from "react";
+import * as Setting from "./forms/util/core";
+import * as AuthBackend from "./forms/util/auth-api";
+import * as ApplicationBackend from "./forms/util/application-api";
+import * as AuthUtil from "./forms/util/auth-util";
+import * as InvitationBackend from "./forms/util/invitation-api";
+import * as UserBackend from "./forms/util/user-api";
+import type { Invitation } from "./forms/util/invitation-api";
+import type { Application } from "./forms/util/provider";
+import { renderFormItem } from "./forms/SignUpFormItem";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "../i18n";
+import {
+  type SignupItem,
+  getDefaultValues,
+  getFormProps,
+  getIcon,
+  getZod,
+  getPasswordVisibilityRecord,
+  getKey,
+  getType,
+  requiresCode,
+  isVisible,
+} from "./util";
+
+export type SignUpFormState = {
+  applicationName?: string | null;
+  name?: string;
+  password?: string;
+  confirm?: string;
+  username?: string;
+  email: string;
+  phone: string;
+  emailOrPhoneMode?: string;
+  countryCode: string;
+  emailCode: string;
+  phoneCode: string;
+  validEmail: boolean;
+  validPhone: boolean;
+  region: string;
+  isTermsOfUseVisible?: boolean;
+  termsOfUseContent: string;
+  invitationCode?: string;
+  invitation?: Invitation;
+  msg?: string;
+  agreement?: boolean;
+};
+
+type SignUpFormProps = {
+  application: Application | null;
+  applicationName?: string;
+
+  // onUpdateAccount: (account: Account) => void;
+  onUpdateApplication: (application: Application | null) => void;
+};
+type Account = any;
+
+function SignUpForm(props: SignUpFormProps) {
+  const { t, i18n } = useTranslation();
+  const [state, setState] = React.useState<SignUpFormState>({
+    applicationName: props.applicationName ?? null,
+    email: "",
+    phone: "",
+    emailOrPhoneMode: "",
+    countryCode: "",
+    emailCode: "",
+    phoneCode: "",
+    validEmail: false,
+    validPhone: false,
+    region: "",
+    isTermsOfUseVisible: false,
+    termsOfUseContent: "",
+  });
+  const form = React.useRef();
+
+  const getApplication = (applicationName?: string) => {
+    if (applicationName === undefined) {
+      return;
+    }
+
+    ApplicationBackend.getApplication("admin", applicationName).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) => {
+      if (res.status === "ok") {
+        const application = res.data;
+        onUpdateApplication(application);
+      } else {
+        onUpdateApplication(null);
+        setState({
+          ...state,
+          msg: res.msg,
+        });
+      }
+    });
+  };
+
+  const getApplicationObj = () => {
+    return props.application;
+  };
+
+  const getInvitationCodeInfo = (
+    invitationCode: string,
+    application: string
+  ) => {
+    InvitationBackend.getInvitationCodeInfo(invitationCode, application).then(
+      (res: any) => {
+        if (res.status === "error") {
+          Setting.showMessage("error", res.msg);
+          return;
+        }
+        setState({ ...state, invitation: res.data });
+      }
+    );
+  };
+
+  // const onUpdateAccount = (account: Account) => {
+  //   props.onUpdateAccount(account);
+  // };
+
+  const onUpdateApplication = (application: Application | null) => {
+    props.onUpdateApplication(application);
+  };
+
+  React.useEffect(() => {
+    const oAuthParams = AuthUtil.getOAuthGetParameters();
+    if (oAuthParams !== null) {
+      const signinUrl = window.location.pathname.replace(
+        "/signup/oauth/authorize",
+        "/login/oauth/authorize"
+      );
+      sessionStorage.setItem("signinUrl", signinUrl + window.location.search);
+    }
+
+    if (getApplicationObj() === undefined) {
+      if (state.applicationName !== null) {
+        getApplication(state.applicationName);
+
+        const sp = new URLSearchParams(window.location.search);
+        if (sp.has("invitationCode")) {
+          const invitationCode = sp.get("invitationCode") ?? "";
+          setState({ ...state, invitationCode });
+          if (invitationCode !== "") {
+            getInvitationCodeInfo(
+              invitationCode,
+              "admin/" + state.applicationName
+            );
+          }
+        }
+      } else if (oAuthParams !== null) {
+        getApplicationLogin(oAuthParams);
+      } else {
+        Setting.showMessage(
+          "error",
+          `Unknown application name: ${state.applicationName}`
+        );
+        onUpdateApplication(null);
+      }
+    }
+  }, []);
+
+  const application = getApplicationObj();
+  if (application === undefined || application === null) {
+    return null;
+  }
+  // return <div>SIGN UP</div>;
+  return application.signupItems?.map((signupItem, idx) => {
+    return (
+      <div key={idx}>
+        {renderFormItem(application, signupItem, state, setState, t)}
+      </div>
+    );
+  });
+}
+
+type SignUpState = {
+  application: Application | null;
+};
+
+type SignUpProps = {
+  applicationName: string;
+  casdoorApiRoot: string;
+  springmicroApiRoot?: string;
+};
+
+export function SignUp({
+  applicationName,
+  casdoorApiRoot,
+  springmicroApiRoot,
+}: SignUpProps) {
+  Setting.ROOT_URLS.casdoor = casdoorApiRoot;
+  if (springmicroApiRoot) {
+    Setting.ROOT_URLS.springmicro = springmicroApiRoot;
+  }
+  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,
+        });
+      }
+    );
+  };
+
+  React.useEffect(() => {
+    // console.log(i18n.t("signup.username"));
+    getApplication();
+  }, []);
+
+  if (state.application === undefined) return <></>;
+  return (
+    <I18nextProvider i18n={i18n}>
+      <SignUpForm
+        application={state.application}
+        onUpdateApplication={(application) => {
+          setState({
+            application: application,
+          });
+        }}
+      />
+    </I18nextProvider>
+  );
+}
+
+interface SignUpContextType {
+  application: Application;
+  getDefaultValues: typeof getDefaultValues;
+  getFormProps: typeof getFormProps;
+  icon: (
+    signupItem: SignupItem,
+    Button: React.JSX.ElementType
+  ) => React.JSX.Element | null;
+  getZod: typeof getZod;
+  getKey: typeof getKey;
+  type: (signupItem: SignupItem) => string;
+  sendCode: typeof UserBackend.sendCode;
+  requiresCode: typeof requiresCode;
+  getCaptcha: typeof UserBackend.getCaptcha;
+  isVisible: typeof isVisible;
+  // updateApplication: (updates: Partial<Application>) => void;
+}
+
+const SignUpContext = React.createContext<SignUpContextType | undefined>(
+  undefined
+);
+
+export function SignUpProvider({
+  applicationName,
+  casdoorApiRoot,
+  springmicroApiRoot,
+  children,
+}: React.PropsWithChildren<SignUpProps>) {
+  const { t, i18n } = useTranslation();
+  Setting.ROOT_URLS.casdoor = casdoorApiRoot;
+  if (springmicroApiRoot) {
+    Setting.ROOT_URLS.springmicro = springmicroApiRoot;
+  }
+  const [state, setState] = React.useState<
+    SignUpState & Partial<SignUpFormState>
+  >({ application: null });
+  const [togglePasswordVisibility, setTogglePasswordVisibility] =
+    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,
+        });
+      }
+    );
+  };
+
+  const onUpdateApplication = (application: Application) => {
+    setState({
+      application: application,
+    });
+  };
+
+  const getInvitationCodeInfo = (
+    invitationCode: string,
+    application: string
+  ) => {
+    InvitationBackend.getInvitationCodeInfo(invitationCode, application).then(
+      (res: any) => {
+        if (res.status === "error") {
+          Setting.showMessage("error", res.msg);
+          return;
+        }
+        setState({ ...state, invitation: res.data });
+      }
+    );
+  };
+
+  const getApplicationLogin = (oAuthParams: any) => {
+    AuthBackend.getApplicationLogin(oAuthParams).then((res) => {
+      if (res.status === "ok") {
+        const application = res.data;
+        onUpdateApplication(application);
+      } else {
+        onUpdateApplication(null);
+        setState({
+          ...state,
+          msg: res.msg,
+        });
+      }
+    });
+  };
+
+  const icon = (item: SignupItem, Button: React.JSX.ElementType) => {
+    return getIcon(
+      item,
+      {
+        password: {
+          state: togglePasswordVisibility,
+          setState: setTogglePasswordVisibility,
+        },
+      },
+      Button
+    );
+  };
+
+  const type = (item: SignupItem) => {
+    return getType(item, {
+      hidePassword: togglePasswordVisibility,
+    });
+  };
+
+  const sendCode = UserBackend.sendCode;
+  const getCaptcha = UserBackend.getCaptcha;
+
+  React.useEffect(() => {
+    // console.log(i18n.t("signup.username"));
+    getApplication();
+  }, []);
+
+  React.useEffect(() => {
+    if (state.application) {
+      setTogglePasswordVisibility(
+        getPasswordVisibilityRecord(state.application.signupItems)
+      );
+    }
+  }, [state.application]);
+
+  React.useEffect(() => {
+    const oAuthParams = AuthUtil.getOAuthGetParameters();
+    if (oAuthParams !== null) {
+      const signinUrl = window.location.pathname.replace(
+        "/signup/oauth/authorize",
+        "/login/oauth/authorize"
+      );
+      sessionStorage.setItem("signinUrl", signinUrl + window.location.search);
+    }
+
+    if (state.application === undefined) {
+      if (state.applicationName !== null) {
+        getApplication();
+
+        const sp = new URLSearchParams(window.location.search);
+        if (sp.has("invitationCode")) {
+          const invitationCode = sp.get("invitationCode") ?? "";
+          setState({ ...state, invitationCode });
+          if (invitationCode !== "") {
+            getInvitationCodeInfo(
+              invitationCode,
+              "admin/" + state.applicationName
+            );
+          }
+        }
+      } else if (oAuthParams !== null) {
+        getApplicationLogin(oAuthParams);
+      } else {
+        Setting.showMessage(
+          "error",
+          `Unknown application name: ${state.applicationName}`
+        );
+        onUpdateApplication(null);
+      }
+    }
+  }, []);
+
+  // const application = getApplicationObj();
+  if (state.application === undefined || state.application === null) {
+    return null;
+  }
+  // return <div>SIGN UP</div>;
+  // return state.application.signupItems?.map((signupItem, idx) => {
+  //   return (
+  //     <div key={idx}>
+  //       {renderFormItem(state.application, signupItem, state, setState, t)}
+  //     </div>
+  //   );
+  // });
+
+  return (
+    <SignUpContext.Provider
+      value={{
+        application: state.application,
+        getDefaultValues,
+        getFormProps,
+        icon,
+        getZod,
+        getKey,
+        type,
+        sendCode,
+        requiresCode,
+        getCaptcha,
+        isVisible,
+      }}
+    >
+      {children}
+    </SignUpContext.Provider>
+  );
+}
+
+export const useSignUp = (): SignUpContextType => {
+  const context = React.useContext(SignUpContext);
+  if (!context) {
+    throw new Error("useSignUp must be used within a SignUpProvider");
+  }
+  return context;
+};