@springmicro/auth 0.3.0 → 0.3.5

package/src/components/forms/SignUpFormItem.tsx

@@ -1,704 +1,704 @@
-// https://github.com/casdoor/casdoor/blob/master/web/src/auth/SignupPage.js
-
-import React, {
-  type FormEvent,
-  type InputHTMLAttributes,
-  type ReactElement,
-} from "react";
-import type { Application } from "./util/provider";
-import type { SignUpFormState } from "../SignUp";
-import { useTranslation } from "react-i18next";
-import * as Setting from "./util/core";
-import * as AuthBackend from "./util/auth-api";
-import { SendCodeInput } from "./SendCodeInput";
-import * as ProviderButton from "../provider/ProviderButton";
-import * as PasswordChecker from "./PasswordChecker";
-import { AgreementModal } from "./AgreementModal";
-import { signIn } from "auth-astro/client";
-import { TFunction } from "i18next";
-
-type Rule = {
-  required?: boolean;
-  message?: string;
-  whitespace?: boolean;
-  pattern?: RegExp | string;
-  validator?: (ev: any, value: string) => Promise<any>;
-  validateTrigger?: string;
-};
-
-type FormItemProps = {
-  label: string;
-  name: string;
-  inputEl?: ReactElement;
-  rules: Array<Rule>;
-  setFieldValue: (name: string, value: any) => void;
-};
-
-function FormItem({
-  label,
-  name,
-  rules,
-  inputEl,
-  setFieldValue,
-  onChange,
-  ...rest
-}: FormItemProps & Partial<InputHTMLAttributes<HTMLInputElement>>) {
-  // if (inputEl) {
-  //   inputEl.props.name = name;
-  // }
-  return (
-    <label className="form-control w-full max-w-xs" htmlFor={name}>
-      <div className="label">
-        <span className="label-text">{label}</span>
-      </div>
-      {inputEl ? (
-        inputEl
-      ) : (
-        <input
-          type="text"
-          {...rest}
-          name={name}
-          className="input input-bordered w-full max-w-xs"
-          onChange={(e) => {
-            setFieldValue(name, e.target.value);
-            onChange?.(e);
-          }}
-        />
-      )}
-
-      <div className="label flex-col">
-        {rules?.map((rule, i) => (
-          <span className="label-text-alt" key={name + i}>
-            {rule.message}
-          </span>
-        ))}
-      </div>
-    </label>
-  );
-}
-
-const getValues = (state: SignUpFormState, application: Application) => {
-  // example state
-  // const s = {
-  //   applicationName: null,
-  //   email: "runalldayandnight@gmail.com",
-  //   phone: "",
-  //   emailOrPhoneMode: "",
-  //   countryCode: "",
-  //   emailCode: "985028",
-  //   phoneCode: "",
-  //   validEmail: true,
-  //   validPhone: false,
-  //   region: "",
-  //   isTermsOfUseVisible: false,
-  //   termsOfUseContent: "",
-  //   agreement: true,
-  //   password: "password",
-  //   confirm: "password",
-  //   username: "db",
-  // };
-  delete state.applicationName;
-  delete state.emailOrPhoneMode;
-  delete state.isTermsOfUseVisible;
-  return {
-    application: application.name,
-    organization: application.organization,
-    plan: null,
-    pricing: null,
-    ...state,
-  };
-};
-
-// values is formData json
-const onSubmit = (
-  e: FormEvent<HTMLFormElement>,
-  state: SignUpFormState,
-  application: Application
-) => {
-  e.preventDefault();
-
-  const values = getValues(state, application);
-  console.log(values);
-  AuthBackend.signup(values).then((res) => {
-    if (res.status === "ok") {
-      // the user's id will be returned by `signup()`, if user signup by phone, the `username` in `values` is undefined.
-      values.username = res.data.split("/")[1];
-      // has prompt page is for like oauth with Google
-      if (application && Setting.hasPromptPage(application)) {
-        // TODO
-        AuthBackend.getAccount("").then((res) => {
-          let account = null;
-          if (res.status === "ok") {
-            account = res.data;
-            account.organization = res.data2;
-            console.log("account", account);
-            // TODO log in
-            // Webhooks
-            // this.onUpdateAccount(account);
-            //Setting.goToLinkSoft(this, this.getResultPath(application, values));
-            alert("redirect");
-          } else {
-            Setting.showMessage("error", `Failed to sign in: ${res.msg}`);
-          }
-        });
-      } else {
-        alert("redirect");
-        signIn();
-        // Setting.goToLinkSoft(this, this.getResultPath(application, values));
-      }
-    } else {
-      Setting.showMessage("error", res.msg);
-    }
-  });
-};
-
-export function renderFormItem(
-  application: Application,
-  signupItem: any,
-  state: SignUpFormState,
-  setState: React.Dispatch<React.SetStateAction<SignUpFormState>>,
-  t: TFunction<"translation", undefined>
-) {
-  if (!signupItem.visible) {
-    return null;
-  }
-
-  const setFieldValue = (name: string, value: any) => {
-    //@ts-ignore
-    state[name] = value;
-    setState(state);
-  };
-  const required = signupItem.required;
-
-  if (signupItem.name === "Username") {
-    return (
-      <FormItem
-        name="username"
-        className="signup-username"
-        label={signupItem.label ? signupItem.label : t("signup.username")}
-        rules={[
-          {
-            required: required,
-            message: t("forget.username"),
-            whitespace: true,
-          },
-        ]}
-        placeholder={signupItem.placeholder}
-        disabled={
-          state.invitation !== undefined && state.invitation.username !== ""
-        }
-        setFieldValue={setFieldValue}
-      />
-    );
-  } else if (signupItem.name === "Display name") {
-    if (signupItem.rule === "First, last" && Setting.getLanguage() !== "zh") {
-      return (
-        <React.Fragment>
-          <FormItem
-            name="firstName"
-            className="signup-first-name"
-            label={signupItem.label ? signupItem.label : t("general.firstName")}
-            rules={[
-              {
-                required: required,
-                message: t("forget.firstName"),
-                whitespace: true,
-              },
-            ]}
-            placeholder={signupItem.placeholder}
-            setFieldValue={setFieldValue}
-          />
-
-          <FormItem
-            name="lastName"
-            className="signup-last-name"
-            label={signupItem.label ? signupItem.label : t("general.lastName")}
-            rules={[
-              {
-                required: required,
-                message: t("forget.lastName"),
-                whitespace: true,
-              },
-            ]}
-            placeholder={signupItem.placeholder}
-            setFieldValue={setFieldValue}
-          />
-        </React.Fragment>
-      );
-    } else {
-      return (
-        <FormItem
-          name="name"
-          className="signup-name"
-          label={
-            signupItem.label
-              ? signupItem.label
-              : signupItem.rule === "Real name" ||
-                  signupItem.rule === "First, last"
-                ? t("general.realName")
-                : t("general.displayName")
-          }
-          rules={[
-            {
-              required: required,
-              message:
-                signupItem.rule === "Real name" ||
-                signupItem.rule === "First, last"
-                  ? t("forget.realName")
-                  : t("forget.displayName"),
-              whitespace: true,
-            },
-          ]}
-          placeholder={signupItem.placeholder}
-          setFieldValue={setFieldValue}
-        />
-      );
-    }
-  } else if (signupItem.name === "Affiliation") {
-    return (
-      <FormItem
-        name="affiliation"
-        className="signup-affiliation"
-        label={signupItem.label ? signupItem.label : t("user.affiliation")}
-        rules={[
-          {
-            required: required,
-            message: t("forget.affiliation"),
-            whitespace: true,
-          },
-        ]}
-        placeholder={signupItem.placeholder}
-        setFieldValue={setFieldValue}
-      />
-    );
-  } else if (signupItem.name === "ID card") {
-    return (
-      <FormItem
-        name="idCard"
-        className="signup-idcard"
-        label={signupItem.label ? signupItem.label : t("user.idCard")}
-        rules={[
-          {
-            required: required,
-            message: t("forget.idCard"),
-            whitespace: true,
-          },
-          {
-            required: required,
-            pattern: new RegExp(
-              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
-              "g"
-            ),
-            message: t("format.idCard"),
-          },
-        ]}
-        placeholder={signupItem.placeholder}
-        setFieldValue={setFieldValue}
-      />
-    );
-  } else if (
-    signupItem.name === "Email" ||
-    signupItem.name === "Phone" ||
-    signupItem.name === "Email or Phone" ||
-    signupItem.name === "Phone or Email"
-  ) {
-    const renderEmailItem = () => {
-      return (
-        <React.Fragment>
-          <FormItem
-            name="email"
-            // className="signup-email"
-            label={signupItem.label ? signupItem.label : t("general.email")}
-            rules={[
-              {
-                required: required,
-                message: t("forget.email"),
-              },
-            ]}
-            placeholder={signupItem.placeholder}
-            disabled={
-              state.invitation !== undefined && state.invitation.email !== ""
-            }
-            onChange={(e: any) => {
-              const email = e.target.value;
-              console.log("email", email, Setting.isValidEmail(email));
-              if (email !== "" && !Setting.isValidEmail(email)) {
-                setState({ ...state, email, validEmail: false });
-              } else {
-                setState({ ...state, email, validEmail: true });
-              }
-            }}
-            setFieldValue={setFieldValue}
-          />
-
-          {signupItem.rule !== "No verification" && (
-            <FormItem
-              name="emailCode"
-              className="signup-email-code"
-              label={signupItem.label ? signupItem.label : t("code.email")}
-              rules={[
-                {
-                  required: required,
-                  message: t("forget.code"),
-                },
-              ]}
-              inputEl={
-                <SendCodeInput
-                  // className="signup-email-code-input"
-                  disabled={!state.validEmail}
-                  method={"signup"}
-                  onButtonClickArgs={[state.email, "email", application.name]}
-                  application={application}
-                  countryCode="US"
-                  onChange={(value: string) =>
-                    setState({ ...state, emailCode: value })
-                  }
-                />
-              }
-              setFieldValue={setFieldValue}
-            />
-          )}
-        </React.Fragment>
-      );
-    };
-
-    const renderPhoneItem = () => {
-      return <></>;
-      // return (
-      //   <React.Fragment>
-      //     <FormItem
-      //       className="signup-phone"
-      //       label={
-      //         signupItem.label ? signupItem.label : t("general:Phone")
-      //       }
-      //       required={required}
-      //     >
-      //       <Input.Group compact>
-      //         <FormItem
-      //           name="countryCode"
-      //           noStyle
-      //           rules={[
-      //             {
-      //               required: required,
-      //               message: t(
-      //                 "signup:Please select your country code!"
-      //               ),
-      //             },
-      //           ]}
-      //         >
-      //           <CountryCodeSelect
-      //             style={{ width: "35%" }}
-      //             countryCodes={
-      //               this.getApplicationObj().organizationObj.countryCodes
-      //             }
-      //           />
-
-      //         <FormItem
-      //           name="phone"
-      //           dependencies={["countryCode"]}
-      //           noStyle
-      //           rules={[
-      //             {
-      //               required: required,
-      //               message: t(
-      //                 "signup:Please input your phone number!"
-      //               ),
-      //             },
-      //             ({ getFieldValue }) => ({
-      //               validator: (_, value) => {
-      //                 if (!required && !value) {
-      //                   return Promise.resolve();
-      //                 }
-
-      //                 if (
-      //                   value &&
-      //                   !Setting.isValidPhone(
-      //                     value,
-      //                     getFieldValue("countryCode")
-      //                   )
-      //                 ) {
-      //                   setState({ ...state, validPhone: false });
-      //                   return Promise.reject(
-      //                     t("signup:The input is not valid Phone!")
-      //                   );
-      //                 }
-
-      //                 setState({ ...state, validPhone: true });
-      //                 return Promise.resolve();
-      //               },
-      //             }),
-      //           ]}
-      //         >
-      //           <Input
-      //             className="signup-phone-input"
-      //             placeholder={signupItem.placeholder}
-      //             style={{ width: "65%" }}
-      //             disabled={
-      //               state.invitation !== undefined &&
-      //               state.invitation.phone !== ""
-      //             }
-      //             onChange={(e) =>
-      //               setState({ ...state, phone: e.target.value })
-      //             }
-      //           />
-
-      //       </Input.Group>
-
-      //     {signupItem.rule !== "No verification" && (
-      //       <FormItem
-      //         name="phoneCode"
-      //         className="phone-code"
-      //         label={
-      //           signupItem.label
-      //             ? signupItem.label
-      //             : t("code:Phone code")
-      //         }
-      //         rules={[
-      //           {
-      //             required: required,
-      //             message: t(
-      //               "code:Please input your phone verification code!"
-      //             ),
-      //           },
-      //         ]}
-      //       >
-      //         <SendCodeInput
-      //           className="signup-phone-code-input"
-      //           disabled={!state.validPhone}
-      //           method={"signup"}
-      //           onButtonClickArgs={[
-      //             state.phone,
-      //             "phone",
-      //             Setting.getApplicationName(application),
-      //           ]}
-      //           application={application}
-      //           countryCode={this.form.current?.getFieldValue("countryCode")}
-      //         />
-
-      //     )}
-      //   </React.Fragment>
-      // );
-    };
-
-    if (signupItem.name === "Email") {
-      return renderEmailItem();
-    } else if (signupItem.name === "Phone") {
-      return renderPhoneItem();
-    } else if (
-      signupItem.name === "Email or Phone" ||
-      signupItem.name === "Phone or Email"
-    ) {
-      let emailOrPhoneMode = state.emailOrPhoneMode;
-      if (emailOrPhoneMode === "") {
-        emailOrPhoneMode =
-          signupItem.name === "Email or Phone" ? "Email" : "Phone";
-      }
-
-      return (
-        <React.Fragment>
-          <div style={{ marginTop: "30px", marginBottom: "20px" }}>
-            {/* <Radio.Group
-              style={{ width: "400px" }}
-              buttonStyle="solid"
-              onChange={(e) => {
-                setState({ ...state, emailOrPhoneMode: e.target.value });
-              }}
-              value={emailOrPhoneMode}
-            >
-              {signupItem.name === "Email or Phone" ? (
-                <React.Fragment>
-                  <Radio.Button value={"Email"}>
-                    {t("general:Email")}
-                  </Radio.Button>
-                  <Radio.Button value={"Phone"}>
-                    {t("general:Phone")}
-                  </Radio.Button>
-                </React.Fragment>
-              ) : (
-                <React.Fragment>
-                  <Radio.Button value={"Phone"}>
-                    {t("general:Phone")}
-                  </Radio.Button>
-                  <Radio.Button value={"Email"}>
-                    {t("general:Email")}
-                  </Radio.Button>
-                </React.Fragment>
-              )}
-            </Radio.Group> */}
-          </div>
-          {emailOrPhoneMode === "Email" ? renderEmailItem() : renderPhoneItem()}
-        </React.Fragment>
-      );
-    } else {
-      return null;
-    }
-  } else if (signupItem.name === "Password") {
-    return (
-      <FormItem
-        name="password"
-        className="signup-password"
-        label={signupItem.label ? signupItem.label : t("general.password")}
-        rules={[
-          {
-            required: required,
-            validateTrigger: "onChange",
-            validator: (rule, value) => {
-              const errorMsg = PasswordChecker.checkPasswordComplexity(
-                value,
-                application.organizationObj.passwordOptions
-              );
-              if (errorMsg === "") {
-                return Promise.resolve();
-              } else {
-                return Promise.reject(errorMsg);
-              }
-            },
-          },
-        ]}
-        setFieldValue={setFieldValue}
-        // hasFeedback
-        type="password"
-        placeholder={signupItem.placeholder}
-      />
-    );
-  } else if (signupItem.name === "Confirm password") {
-    return (
-      <FormItem
-        name="confirm"
-        className="signup-confirm"
-        label={signupItem.label ? signupItem.label : t("signup.confirm")}
-        // dependencies={["password"]}
-        // hasFeedback
-        rules={[
-          {
-            required: required,
-            message: t("forget.confirm"),
-          },
-          // ({ getFieldValue }) => ({
-          //   validator(rule, value) {
-          //     if (!value || getFieldValue("password") === value) {
-          //       return Promise.resolve();
-          //     }
-
-          //     return Promise.reject(
-          //       t(
-          //         "signup:Your confirmed password is inconsistent with the password!"
-          //       )
-          //     );
-          //   },
-          // }),
-        ]}
-        type="password"
-        placeholder={signupItem.placeholder}
-        setFieldValue={setFieldValue}
-      />
-    );
-  } else if (signupItem.name === "Invitation code") {
-    return (
-      <FormItem
-        name="invitationCode"
-        className="signup-invitation-code"
-        label={
-          signupItem.label ? signupItem.label : t("application.invitationCode")
-        }
-        rules={[
-          {
-            required: required,
-            message: t("forget.invitationCode"),
-          },
-        ]}
-        placeholder={signupItem.placeholder}
-        disabled={state.invitation !== undefined && state.invitation !== ""}
-        setFieldValue={setFieldValue}
-      />
-    );
-  } else if (signupItem.name === "Agreement") {
-    return (
-      <AgreementModal
-        state={state}
-        setState={setState}
-        application={application}
-      />
-    );
-    // return AgreementModal.renderAgreementFormItem(
-    //   application,
-    //   required,
-    //   tailFormItemLayout,
-    //   this
-    // );
-  } else if (signupItem.name.startsWith("Text ")) {
-    return <div dangerouslySetInnerHTML={{ __html: signupItem.label }} />;
-  } else if (signupItem.name === "Signup button") {
-    return (
-      <form onSubmit={(e) => onSubmit(e, state, application)}>
-        <button className="btn btn-primary" type="submit">
-          {t("signup.signUp")}
-        </button>
-        &nbsp;&nbsp;{t("signup.haveAccount")}&nbsp;
-        <a
-          className="signup-link"
-          onClick={() => {
-            const linkInStorage = sessionStorage.getItem("signinUrl");
-            if (linkInStorage !== null && linkInStorage !== "") {
-              alert("redirect");
-              // Setting.goToLinkSoft(this, linkInStorage);
-            } else {
-              alert("redirect");
-              // Setting.redirectToLoginPage(application, this.props.history);
-            }
-          }}
-        >
-          {t("signup.signInNow")}
-        </a>
-      </form>
-    );
-  } else if (signupItem.name === "Providers" && application.providers) {
-    const showForm =
-      Setting.isPasswordEnabled(application) ||
-      Setting.isCodeSigninEnabled(application) ||
-      Setting.isWebAuthnEnabled(application) ||
-      Setting.isLdapEnabled(application);
-    if (signupItem.rule === "None" || signupItem.rule === "") {
-      signupItem.rule = showForm ? "small" : "big";
-    }
-    return application.providers
-      .filter((providerItem) => Setting.isProviderVisible(providerItem))
-      .map((providerItem) => {
-        return ProviderButton.renderProviderLogo(
-          providerItem.provider,
-          application,
-          null,
-          null,
-          signupItem.rule,
-          { search: window.location.search }
-        );
-      });
-  }
-
-  return signupItem.name;
-
-  // // else if (signupItem.name === "Country/Region") {
-  // //   return (
-  // //     <FormItem
-  // //       name="country_region"
-  // //       className="signup-country-region"
-  // //       label={
-  // //         signupItem.label ? signupItem.label : t("user:Country/Region")
-  // //       }
-  // //       rules={[
-  // //         {
-  // //           required: required,
-  // //           message: t("signup:Please select your country/region!"),
-  // //         },
-  // //       ]}
-  // //     >
-  // //       <RegionSelect
-  // //         className="signup-region-select"
-  // //         onChange={(value) => {
-  // //           setState({ ...state, region: value });
-  // //         }}
-  // //       />
-
-  // //   );
-  // //}
-}
+// https://github.com/casdoor/casdoor/blob/master/web/src/auth/SignupPage.js
+
+import React, {
+  type FormEvent,
+  type InputHTMLAttributes,
+  type ReactElement,
+} from "react";
+import type { Application } from "./util/provider";
+import type { SignUpFormState } from "../SignUp";
+import { useTranslation } from "react-i18next";
+import * as Setting from "./util/core";
+import * as AuthBackend from "./util/auth-api";
+import { SendCodeInput } from "./SendCodeInput";
+import * as ProviderButton from "../provider/ProviderButton";
+import * as PasswordChecker from "./PasswordChecker";
+import { AgreementModal } from "./AgreementModal";
+import { signIn } from "auth-astro/client";
+import { TFunction } from "i18next";
+
+type Rule = {
+  required?: boolean;
+  message?: string;
+  whitespace?: boolean;
+  pattern?: RegExp | string;
+  validator?: (ev: any, value: string) => Promise<any>;
+  validateTrigger?: string;
+};
+
+type FormItemProps = {
+  label: string;
+  name: string;
+  inputEl?: ReactElement;
+  rules: Array<Rule>;
+  setFieldValue: (name: string, value: any) => void;
+};
+
+function FormItem({
+  label,
+  name,
+  rules,
+  inputEl,
+  setFieldValue,
+  onChange,
+  ...rest
+}: FormItemProps & Partial<InputHTMLAttributes<HTMLInputElement>>) {
+  // if (inputEl) {
+  //   inputEl.props.name = name;
+  // }
+  return (
+    <label className="form-control w-full max-w-xs" htmlFor={name}>
+      <div className="label">
+        <span className="label-text">{label}</span>
+      </div>
+      {inputEl ? (
+        inputEl
+      ) : (
+        <input
+          type="text"
+          {...rest}
+          name={name}
+          className="input input-bordered w-full max-w-xs"
+          onChange={(e) => {
+            setFieldValue(name, e.target.value);
+            onChange?.(e);
+          }}
+        />
+      )}
+
+      <div className="label flex-col">
+        {rules?.map((rule, i) => (
+          <span className="label-text-alt" key={name + i}>
+            {rule.message}
+          </span>
+        ))}
+      </div>
+    </label>
+  );
+}
+
+const getValues = (state: SignUpFormState, application: Application) => {
+  // example state
+  // const s = {
+  //   applicationName: null,
+  //   email: "runalldayandnight@gmail.com",
+  //   phone: "",
+  //   emailOrPhoneMode: "",
+  //   countryCode: "",
+  //   emailCode: "985028",
+  //   phoneCode: "",
+  //   validEmail: true,
+  //   validPhone: false,
+  //   region: "",
+  //   isTermsOfUseVisible: false,
+  //   termsOfUseContent: "",
+  //   agreement: true,
+  //   password: "password",
+  //   confirm: "password",
+  //   username: "db",
+  // };
+  delete state.applicationName;
+  delete state.emailOrPhoneMode;
+  delete state.isTermsOfUseVisible;
+  return {
+    application: application.name,
+    organization: application.organization,
+    plan: null,
+    pricing: null,
+    ...state,
+  };
+};
+
+// values is formData json
+const onSubmit = (
+  e: FormEvent<HTMLFormElement>,
+  state: SignUpFormState,
+  application: Application
+) => {
+  e.preventDefault();
+
+  const values = getValues(state, application);
+  console.log(values);
+  AuthBackend.signup(values).then((res) => {
+    if (res.status === "ok") {
+      // the user's id will be returned by `signup()`, if user signup by phone, the `username` in `values` is undefined.
+      values.username = res.data.split("/")[1];
+      // has prompt page is for like oauth with Google
+      if (application && Setting.hasPromptPage(application)) {
+        // TODO
+        AuthBackend.getAccount("").then((res) => {
+          let account = null;
+          if (res.status === "ok") {
+            account = res.data;
+            account.organization = res.data2;
+            console.log("account", account);
+            // TODO log in
+            // Webhooks
+            // this.onUpdateAccount(account);
+            //Setting.goToLinkSoft(this, this.getResultPath(application, values));
+            alert("redirect");
+          } else {
+            Setting.showMessage("error", `Failed to sign in: ${res.msg}`);
+          }
+        });
+      } else {
+        alert("redirect");
+        signIn();
+        // Setting.goToLinkSoft(this, this.getResultPath(application, values));
+      }
+    } else {
+      Setting.showMessage("error", res.msg);
+    }
+  });
+};
+
+export function renderFormItem(
+  application: Application,
+  signupItem: any,
+  state: SignUpFormState,
+  setState: React.Dispatch<React.SetStateAction<SignUpFormState>>,
+  t: TFunction<"translation", undefined>
+) {
+  if (!signupItem.visible) {
+    return null;
+  }
+
+  const setFieldValue = (name: string, value: any) => {
+    //@ts-ignore
+    state[name] = value;
+    setState(state);
+  };
+  const required = signupItem.required;
+
+  if (signupItem.name === "Username") {
+    return (
+      <FormItem
+        name="username"
+        className="signup-username"
+        label={signupItem.label ? signupItem.label : t("signup.username")}
+        rules={[
+          {
+            required: required,
+            message: t("forget.username"),
+            whitespace: true,
+          },
+        ]}
+        placeholder={signupItem.placeholder}
+        disabled={
+          state.invitation !== undefined && state.invitation.username !== ""
+        }
+        setFieldValue={setFieldValue}
+      />
+    );
+  } else if (signupItem.name === "Display name") {
+    if (signupItem.rule === "First, last" && Setting.getLanguage() !== "zh") {
+      return (
+        <React.Fragment>
+          <FormItem
+            name="firstName"
+            className="signup-first-name"
+            label={signupItem.label ? signupItem.label : t("general.firstName")}
+            rules={[
+              {
+                required: required,
+                message: t("forget.firstName"),
+                whitespace: true,
+              },
+            ]}
+            placeholder={signupItem.placeholder}
+            setFieldValue={setFieldValue}
+          />
+
+          <FormItem
+            name="lastName"
+            className="signup-last-name"
+            label={signupItem.label ? signupItem.label : t("general.lastName")}
+            rules={[
+              {
+                required: required,
+                message: t("forget.lastName"),
+                whitespace: true,
+              },
+            ]}
+            placeholder={signupItem.placeholder}
+            setFieldValue={setFieldValue}
+          />
+        </React.Fragment>
+      );
+    } else {
+      return (
+        <FormItem
+          name="name"
+          className="signup-name"
+          label={
+            signupItem.label
+              ? signupItem.label
+              : signupItem.rule === "Real name" ||
+                  signupItem.rule === "First, last"
+                ? t("general.realName")
+                : t("general.displayName")
+          }
+          rules={[
+            {
+              required: required,
+              message:
+                signupItem.rule === "Real name" ||
+                signupItem.rule === "First, last"
+                  ? t("forget.realName")
+                  : t("forget.displayName"),
+              whitespace: true,
+            },
+          ]}
+          placeholder={signupItem.placeholder}
+          setFieldValue={setFieldValue}
+        />
+      );
+    }
+  } else if (signupItem.name === "Affiliation") {
+    return (
+      <FormItem
+        name="affiliation"
+        className="signup-affiliation"
+        label={signupItem.label ? signupItem.label : t("user.affiliation")}
+        rules={[
+          {
+            required: required,
+            message: t("forget.affiliation"),
+            whitespace: true,
+          },
+        ]}
+        placeholder={signupItem.placeholder}
+        setFieldValue={setFieldValue}
+      />
+    );
+  } else if (signupItem.name === "ID card") {
+    return (
+      <FormItem
+        name="idCard"
+        className="signup-idcard"
+        label={signupItem.label ? signupItem.label : t("user.idCard")}
+        rules={[
+          {
+            required: required,
+            message: t("forget.idCard"),
+            whitespace: true,
+          },
+          {
+            required: required,
+            pattern: new RegExp(
+              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
+              "g"
+            ),
+            message: t("format.idCard"),
+          },
+        ]}
+        placeholder={signupItem.placeholder}
+        setFieldValue={setFieldValue}
+      />
+    );
+  } else if (
+    signupItem.name === "Email" ||
+    signupItem.name === "Phone" ||
+    signupItem.name === "Email or Phone" ||
+    signupItem.name === "Phone or Email"
+  ) {
+    const renderEmailItem = () => {
+      return (
+        <React.Fragment>
+          <FormItem
+            name="email"
+            // className="signup-email"
+            label={signupItem.label ? signupItem.label : t("general.email")}
+            rules={[
+              {
+                required: required,
+                message: t("forget.email"),
+              },
+            ]}
+            placeholder={signupItem.placeholder}
+            disabled={
+              state.invitation !== undefined && state.invitation.email !== ""
+            }
+            onChange={(e: any) => {
+              const email = e.target.value;
+              console.log("email", email, Setting.isValidEmail(email));
+              if (email !== "" && !Setting.isValidEmail(email)) {
+                setState({ ...state, email, validEmail: false });
+              } else {
+                setState({ ...state, email, validEmail: true });
+              }
+            }}
+            setFieldValue={setFieldValue}
+          />
+
+          {signupItem.rule !== "No verification" && (
+            <FormItem
+              name="emailCode"
+              className="signup-email-code"
+              label={signupItem.label ? signupItem.label : t("code.email")}
+              rules={[
+                {
+                  required: required,
+                  message: t("forget.code"),
+                },
+              ]}
+              inputEl={
+                <SendCodeInput
+                  // className="signup-email-code-input"
+                  disabled={!state.validEmail}
+                  method={"signup"}
+                  onButtonClickArgs={[state.email, "email", application.name]}
+                  application={application}
+                  countryCode="US"
+                  onChange={(value: string) =>
+                    setState({ ...state, emailCode: value })
+                  }
+                />
+              }
+              setFieldValue={setFieldValue}
+            />
+          )}
+        </React.Fragment>
+      );
+    };
+
+    const renderPhoneItem = () => {
+      return <></>;
+      // return (
+      //   <React.Fragment>
+      //     <FormItem
+      //       className="signup-phone"
+      //       label={
+      //         signupItem.label ? signupItem.label : t("general:Phone")
+      //       }
+      //       required={required}
+      //     >
+      //       <Input.Group compact>
+      //         <FormItem
+      //           name="countryCode"
+      //           noStyle
+      //           rules={[
+      //             {
+      //               required: required,
+      //               message: t(
+      //                 "signup:Please select your country code!"
+      //               ),
+      //             },
+      //           ]}
+      //         >
+      //           <CountryCodeSelect
+      //             style={{ width: "35%" }}
+      //             countryCodes={
+      //               this.getApplicationObj().organizationObj.countryCodes
+      //             }
+      //           />
+
+      //         <FormItem
+      //           name="phone"
+      //           dependencies={["countryCode"]}
+      //           noStyle
+      //           rules={[
+      //             {
+      //               required: required,
+      //               message: t(
+      //                 "signup:Please input your phone number!"
+      //               ),
+      //             },
+      //             ({ getFieldValue }) => ({
+      //               validator: (_, value) => {
+      //                 if (!required && !value) {
+      //                   return Promise.resolve();
+      //                 }
+
+      //                 if (
+      //                   value &&
+      //                   !Setting.isValidPhone(
+      //                     value,
+      //                     getFieldValue("countryCode")
+      //                   )
+      //                 ) {
+      //                   setState({ ...state, validPhone: false });
+      //                   return Promise.reject(
+      //                     t("signup:The input is not valid Phone!")
+      //                   );
+      //                 }
+
+      //                 setState({ ...state, validPhone: true });
+      //                 return Promise.resolve();
+      //               },
+      //             }),
+      //           ]}
+      //         >
+      //           <Input
+      //             className="signup-phone-input"
+      //             placeholder={signupItem.placeholder}
+      //             style={{ width: "65%" }}
+      //             disabled={
+      //               state.invitation !== undefined &&
+      //               state.invitation.phone !== ""
+      //             }
+      //             onChange={(e) =>
+      //               setState({ ...state, phone: e.target.value })
+      //             }
+      //           />
+
+      //       </Input.Group>
+
+      //     {signupItem.rule !== "No verification" && (
+      //       <FormItem
+      //         name="phoneCode"
+      //         className="phone-code"
+      //         label={
+      //           signupItem.label
+      //             ? signupItem.label
+      //             : t("code:Phone code")
+      //         }
+      //         rules={[
+      //           {
+      //             required: required,
+      //             message: t(
+      //               "code:Please input your phone verification code!"
+      //             ),
+      //           },
+      //         ]}
+      //       >
+      //         <SendCodeInput
+      //           className="signup-phone-code-input"
+      //           disabled={!state.validPhone}
+      //           method={"signup"}
+      //           onButtonClickArgs={[
+      //             state.phone,
+      //             "phone",
+      //             Setting.getApplicationName(application),
+      //           ]}
+      //           application={application}
+      //           countryCode={this.form.current?.getFieldValue("countryCode")}
+      //         />
+
+      //     )}
+      //   </React.Fragment>
+      // );
+    };
+
+    if (signupItem.name === "Email") {
+      return renderEmailItem();
+    } else if (signupItem.name === "Phone") {
+      return renderPhoneItem();
+    } else if (
+      signupItem.name === "Email or Phone" ||
+      signupItem.name === "Phone or Email"
+    ) {
+      let emailOrPhoneMode = state.emailOrPhoneMode;
+      if (emailOrPhoneMode === "") {
+        emailOrPhoneMode =
+          signupItem.name === "Email or Phone" ? "Email" : "Phone";
+      }
+
+      return (
+        <React.Fragment>
+          <div style={{ marginTop: "30px", marginBottom: "20px" }}>
+            {/* <Radio.Group
+              style={{ width: "400px" }}
+              buttonStyle="solid"
+              onChange={(e) => {
+                setState({ ...state, emailOrPhoneMode: e.target.value });
+              }}
+              value={emailOrPhoneMode}
+            >
+              {signupItem.name === "Email or Phone" ? (
+                <React.Fragment>
+                  <Radio.Button value={"Email"}>
+                    {t("general:Email")}
+                  </Radio.Button>
+                  <Radio.Button value={"Phone"}>
+                    {t("general:Phone")}
+                  </Radio.Button>
+                </React.Fragment>
+              ) : (
+                <React.Fragment>
+                  <Radio.Button value={"Phone"}>
+                    {t("general:Phone")}
+                  </Radio.Button>
+                  <Radio.Button value={"Email"}>
+                    {t("general:Email")}
+                  </Radio.Button>
+                </React.Fragment>
+              )}
+            </Radio.Group> */}
+          </div>
+          {emailOrPhoneMode === "Email" ? renderEmailItem() : renderPhoneItem()}
+        </React.Fragment>
+      );
+    } else {
+      return null;
+    }
+  } else if (signupItem.name === "Password") {
+    return (
+      <FormItem
+        name="password"
+        className="signup-password"
+        label={signupItem.label ? signupItem.label : t("general.password")}
+        rules={[
+          {
+            required: required,
+            validateTrigger: "onChange",
+            validator: (rule, value) => {
+              const errorMsg = PasswordChecker.checkPasswordComplexity(
+                value,
+                application.organizationObj.passwordOptions
+              );
+              if (errorMsg === "") {
+                return Promise.resolve();
+              } else {
+                return Promise.reject(errorMsg);
+              }
+            },
+          },
+        ]}
+        setFieldValue={setFieldValue}
+        // hasFeedback
+        type="password"
+        placeholder={signupItem.placeholder}
+      />
+    );
+  } else if (signupItem.name === "Confirm password") {
+    return (
+      <FormItem
+        name="confirm"
+        className="signup-confirm"
+        label={signupItem.label ? signupItem.label : t("signup.confirm")}
+        // dependencies={["password"]}
+        // hasFeedback
+        rules={[
+          {
+            required: required,
+            message: t("forget.confirm"),
+          },
+          // ({ getFieldValue }) => ({
+          //   validator(rule, value) {
+          //     if (!value || getFieldValue("password") === value) {
+          //       return Promise.resolve();
+          //     }
+
+          //     return Promise.reject(
+          //       t(
+          //         "signup:Your confirmed password is inconsistent with the password!"
+          //       )
+          //     );
+          //   },
+          // }),
+        ]}
+        type="password"
+        placeholder={signupItem.placeholder}
+        setFieldValue={setFieldValue}
+      />
+    );
+  } else if (signupItem.name === "Invitation code") {
+    return (
+      <FormItem
+        name="invitationCode"
+        className="signup-invitation-code"
+        label={
+          signupItem.label ? signupItem.label : t("application.invitationCode")
+        }
+        rules={[
+          {
+            required: required,
+            message: t("forget.invitationCode"),
+          },
+        ]}
+        placeholder={signupItem.placeholder}
+        disabled={state.invitation !== undefined && state.invitation !== ""}
+        setFieldValue={setFieldValue}
+      />
+    );
+  } else if (signupItem.name === "Agreement") {
+    return (
+      <AgreementModal
+        state={state}
+        setState={setState}
+        application={application}
+      />
+    );
+    // return AgreementModal.renderAgreementFormItem(
+    //   application,
+    //   required,
+    //   tailFormItemLayout,
+    //   this
+    // );
+  } else if (signupItem.name.startsWith("Text ")) {
+    return <div dangerouslySetInnerHTML={{ __html: signupItem.label }} />;
+  } else if (signupItem.name === "Signup button") {
+    return (
+      <form onSubmit={(e) => onSubmit(e, state, application)}>
+        <button className="btn btn-primary" type="submit">
+          {t("signup.signUp")}
+        </button>
+        &nbsp;&nbsp;{t("signup.haveAccount")}&nbsp;
+        <a
+          className="signup-link"
+          onClick={() => {
+            const linkInStorage = sessionStorage.getItem("signinUrl");
+            if (linkInStorage !== null && linkInStorage !== "") {
+              alert("redirect");
+              // Setting.goToLinkSoft(this, linkInStorage);
+            } else {
+              alert("redirect");
+              // Setting.redirectToLoginPage(application, this.props.history);
+            }
+          }}
+        >
+          {t("signup.signInNow")}
+        </a>
+      </form>
+    );
+  } else if (signupItem.name === "Providers" && application.providers) {
+    const showForm =
+      Setting.isPasswordEnabled(application) ||
+      Setting.isCodeSigninEnabled(application) ||
+      Setting.isWebAuthnEnabled(application) ||
+      Setting.isLdapEnabled(application);
+    if (signupItem.rule === "None" || signupItem.rule === "") {
+      signupItem.rule = showForm ? "small" : "big";
+    }
+    return application.providers
+      .filter((providerItem) => Setting.isProviderVisible(providerItem))
+      .map((providerItem) => {
+        return ProviderButton.renderProviderLogo(
+          providerItem.provider,
+          application,
+          null,
+          null,
+          signupItem.rule,
+          { search: window.location.search }
+        );
+      });
+  }
+
+  return signupItem.name;
+
+  // // else if (signupItem.name === "Country/Region") {
+  // //   return (
+  // //     <FormItem
+  // //       name="country_region"
+  // //       className="signup-country-region"
+  // //       label={
+  // //         signupItem.label ? signupItem.label : t("user:Country/Region")
+  // //       }
+  // //       rules={[
+  // //         {
+  // //           required: required,
+  // //           message: t("signup:Please select your country/region!"),
+  // //         },
+  // //       ]}
+  // //     >
+  // //       <RegionSelect
+  // //         className="signup-region-select"
+  // //         onChange={(value) => {
+  // //           setState({ ...state, region: value });
+  // //         }}
+  // //       />
+
+  // //   );
+  // //}
+}