@springmicro/auth 0.1.8 → 0.2.0-alpha.0

package/src/components/forms/SignUpFormItem.tsx

@@ -0,0 +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 });
+  // //         }}
+  // //       />
+
+  // //   );
+  // //}
+}