Merge pull request #1300 from dacadeorg/fix/email-validation-regex

fix: change the regex to validate emails according to RFC 1034 standard

Author: musayann

package.json

@@ -32,6 +32,7 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.1",
+    "email-validator": "^2.0.4",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eslint-plugin-prettier": "^5.0.0",

src/components/ui/EmailInput.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "next-i18next";
 import { ReactElement } from "react";
 import { FieldErrors, UseFormRegister } from "react-hook-form";
 import { FormValues } from "@/pages/signup";
+import * as EmailValidator from "email-validator";
 
 interface EmailInputProps {
   register: UseFormRegister<FormValues>;
@@ -38,13 +39,10 @@ export default function EmailInput({ errors, register, emailValue, testId = "ema
       placeholder={`${t("login-page.email.placeholder")}`}
       label={`${t("login-page.email.label")}`}
       value={emailValue}
-      error={errors?.email?.message || error?.error?.data.details.email}
+      error={errors?.email?.message || error?.error?.data?.details?.email}
       {...register("email", {
         required: "This field is required",
-        pattern: {
-          value: /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/i,
-          message: "This must be a valid email address",
-        },
+        validate: (value) => EmailValidator.validate(value) || "This must be a valid email address",
       })}
     />
   );

src/components/ui/UsernameInput.tsx

@@ -36,7 +36,7 @@ export default function UsernameInput({ register, errors, usernameValue, testId
       placeholder={`${t("login-page.username.placeholde")}`}
       label={`${t("login-page.username.label")}`}
       value={usernameValue}
-      error={errors.username?.message || (error?.error?.data.details.username as string)}
+      error={errors.username?.message || (error?.error?.data?.details?.username as string)}
       {...register("username", {
         required: "This field is required",
         minLength: {

src/pages/signup.tsx

@@ -9,7 +9,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { GetServerSideProps } from "next";
 import i18Translate from "@/utilities/I18Translate";
-import { useSelector } from "@/hooks/useTypedSelector";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import classNames from "classnames";
 import Checkbox from "@/components/ui/Checkbox";
@@ -19,6 +19,8 @@ import LayoutWithoutFooter from "@/layouts/WithoutFooter";
 import EmailInput from "@/components/ui/EmailInput";
 import UsernameInput from "@/components/ui/UsernameInput";
 import { setError } from "@/store/feature/index.slice";
+import { IRootState } from "@/store";
+import { Referral } from "@/types/community";
 
 /**
  * Signup form values
@@ -36,6 +38,20 @@ export interface FormValues {
   checkTerms: boolean;
 }
 
+interface ErrorDetails {
+  error: {
+    data: {
+      details: {
+        password?: string;
+      };
+    };
+  };
+}
+interface MultiSelector {
+  referrals: Referral[];
+  error: ErrorDetails;
+}
+
 /**
  * signup page
  * @date 4/6/2023 - 4:15:13 PM
@@ -56,7 +72,10 @@ export default function SignupWithInvite(): ReactElement {
   const referralCodeValue = watch("referralCode") || "";
   const { query, locale } = useRouter();
   const referrer = query.invite;
-  const referrals = useSelector((state) => state.referrals.list);
+  const { referrals, error } = useMultiSelector<unknown, MultiSelector>({
+    referrals: (state: IRootState) => state.referrals.list,
+    error: (state: IRootState) => state.store.error,
+  });
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
@@ -73,7 +92,7 @@ export default function SignupWithInvite(): ReactElement {
     };
     try {
       if (!checkTerms) return;
-      await dispatch(signUp({ locale, payload: { ...signupData } }));
+      dispatch(signUp({ locale, payload: { ...signupData } }));
     } catch (error) {
       setError(error);
       console.error(error);
@@ -122,7 +141,7 @@ export default function SignupWithInvite(): ReactElement {
                 value={passwordValue}
                 placeholder={`${t("login-page.password.placeholde")}`}
                 label={`${t("login-page.password.label")}`}
-                error={errors.password?.message}
+                error={error?.error?.data?.details?.password}
                 {...register("password", {
                   required: "This field is required",
                   minLength: { value: 3, message: "The password is too short" },

yarn.lock

@@ -6527,6 +6527,11 @@ elliptic@^6.4.0, elliptic@^6.5.4:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"