Function SignupForm

src/components/auth/SignupForm.tsx:16–183

()

const PASSWORD_LENGTH_MAX_LIMIT = 126

const SignupForm: FC = () => {
  const {
    onSignupSuccess,
    onSignupError,
    onGoogleSignupSucess,
    onGoogleSignupError,
    setAuthDialogState,
  } = useContext(AuthContext);

  const handleGoogleSignIn = () => {
    authService.signUpWithGoogle(onGoogleSignupSucess, onGoogleSignupError);
  };

  const formSchema = z.object({
    email: z.string({
      required_error: "Email is required",
      invalid_type_error: "Email should be a string"
    }).email("Invalid email address"),
    password: z.string({
      required_error: "Password is required",
      invalid_type_error: "Password should be a string"
    }).min(PASSWORD_LENGTH_MIN_LIMIT, `Password length should be at least ${PASSWORD_LENGTH_MIN_LIMIT} characters`)
      .max(PASSWORD_LENGTH_MAX_LIMIT, `Password cannot exceed more than ${PASSWORD_LENGTH_MAX_LIMIT} characters`),
    confirm_password: z.string({
      required_error: "Confirm Password is required",
      invalid_type_error: "Confirm Password should be a string"
    }).min(PASSWORD_LENGTH_MIN_LIMIT, `Password length should be at least ${PASSWORD_LENGTH_MIN_LIMIT} characters`)
      .max(PASSWORD_LENGTH_MAX_LIMIT, `Password cannot exceed more than ${PASSWORD_LENGTH_MAX_LIMIT} characters`),
  }).refine((data) => data.password === data.confirm_password, {
    message: "Passwords don't match",
    path: ["confirm_password"], // path of error
    // Password has to have:
    // At least 1 uppercase letter
    // At least 1 lowercase letter
    // At least 1 number
    // At least 1 special character
  }).superRefine(({ password }, checkPasswordComplexity) => {
    // Password has to have:
    // At least 1 uppercase letter
    const uppercaseRegex = new RegExp("(?=.*[A-Z])")

    // At least 1 lowercase letter
    const lowercaseRegex = new RegExp("(?=.*[a-z])")

    // At least 1 number
    const numberRegex = new RegExp("(?=.*[0-9])")

    // At least 1 special character
    const specialCharacters = "!@#\$%\^&\*+-=~"
    const specialCharacterRegex = new RegExp(`(?=.*[${specialCharacters}])`)

    if (!uppercaseRegex.test(password)) {
      checkPasswordComplexity.addIssue({
        code: "custom",
        message: "Password should contain at least 1 uppercase letter",
        path: ["password"]
      })
      return