fix: validation errors in signup form (#1174)

* fix: validation errors in signup form

* fix: setting the state in the right way

* fix: adding suggested edits

---------

Co-authored-by: Tamal Das <tamalcodes@gmail.com>

src/hooks/useFormLogic.js

@@ -37,9 +37,7 @@ export function useFormLogic(
       : [];
 
     if (validationErrors.length > 0) {
-      validationErrors.forEach((error) => {
-        showErrorToast(error.message);
-      });
+      setFormState({ ...formState, errors: validationErrors });
       setTimeout(() => {
         setIsLoading(false);
       }, 1000);

src/hooks/useValidation.js

@@ -7,17 +7,30 @@ const useValidation = (credentials, userSignup, clubSignup) => {
     /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9]+([a-zA-Z0-9-]+)?(\.[a-zA-Z0-9-]+)+([/?#][a-zA-Z0-9-]+)*$/;
 
   if (!credentials.email) {
-    errors.push({ error: true, message: "Please enter your email" });
+    errors.push({
+      error: true,
+      message: "Please enter your email",
+      field: "email",
+    });
   } else if (!emailRegex.test(credentials.email)) {
-    errors.push({ error: true, message: "Please enter a valid email" });
+    errors.push({
+      error: true,
+      message: "Please enter a valid email",
+      field: "email",
+    });
   }
 
   if (!credentials.password) {
-    errors.push({ error: true, message: "Please enter your password" });
+    errors.push({
+      error: true,
+      message: "Please enter your password",
+      field: "password",
+    });
   } else if (credentials.password.length < 6) {
     errors.push({
       error: true,
       message: "Password must be at least 6 characters long",
+      field: "password",
     });
   }
 
@@ -26,68 +39,102 @@ const useValidation = (credentials, userSignup, clubSignup) => {
       errors.push({
         error: true,
         message: "Password and confirm password do not match",
+        field: "confirmPassword",
       });
     }
   }
 
   if (userSignup) {
     if (!credentials.firstname) {
-      errors.push({ error: true, message: "Please enter your first name" });
+      errors.push({
+        error: true,
+        message: "Please enter your first name",
+        field: "firstname",
+      });
     } else if (!nameRegex.test(credentials.firstname)) {
-      errors.push({ error: true, message: "Please enter a valid first name" });
+      errors.push({
+        error: true,
+        message: "Please enter a valid first name",
+        field: "firstname",
+      });
     } else if (
       credentials.firstname.length < 3 ||
       credentials.firstname.length > 30
     ) {
       errors.push({
         error: true,
         message: "First name must be between 3 and 30 characters long",
+        field: "firstname",
       });
     }
 
     if (!credentials.lastname) {
-      errors.push({ error: true, message: "Please enter your last name" });
+      errors.push({
+        error: true,
+        message: "Please enter your last name",
+        field: "lastname",
+      });
     } else if (!nameRegex.test(credentials.lastname)) {
-      errors.push({ error: true, message: "Please enter a valid last name" });
+      errors.push({
+        error: true,
+        message: "Please enter a valid last name",
+        field: "lastname",
+      });
     } else if (
       credentials.lastname.length < 3 ||
       credentials.lastname.length > 30
     ) {
       errors.push({
         error: true,
         message: "Last name must be between 3 and 30 characters long",
+        field: "lastname",
       });
     }
   }
 
   if (clubSignup) {
     if (!credentials.name) {
-      errors.push({ error: true, message: "Please enter your club name" });
+      errors.push({
+        error: true,
+        message: "Please enter your club name",
+        field: "name",
+      });
     } else if (!clubnameRegex.test(credentials.name)) {
-      errors.push({ error: true, message: "Please enter a valid club name" });
+      errors.push({
+        error: true,
+        message: "Please enter a valid club name",
+        field: "name",
+      });
     } else if (credentials.name.length < 3 || credentials.name.length > 30) {
       errors.push({
         error: true,
         message: "Club name must be between 3 and 30 characters long",
+        field: "name",
       });
     }
 
     if (!credentials.tagLine) {
-      errors.push({ error: true, message: "Please enter your club tagline" });
+      errors.push({
+        error: true,
+        message: "Please enter your club tagline",
+        field: "tagLine",
+      });
     } else if (
       credentials.tagLine.length < 20 ||
       credentials.tagLine.length > 220
     ) {
       errors.push({
         error: true,
         message: "Club tagline must be between 20 and 220 characters long.",
+        field: "tagLine",
       });
     }
 
     if (!credentials.description) {
       errors.push({
         error: true,
         message: "Please enter your club description",
+        field: "description",
       });
     } else if (
       credentials.description.length < 100 ||
@@ -97,75 +144,111 @@ const useValidation = (credentials, userSignup, clubSignup) => {
         error: true,
         message:
           "Club description must be between 100 and 1000 characters long",
+        field: "description",
       });
     }
 
     if (!credentials.iframe) {
       errors.push({
         error: true,
         message: "Please enter your club iframe code",
+        field: "iframe",
       });
     }
   }
 
-  if (credentials.website) {
-    if (!urlRegex.test(credentials.website)) {
-      errors.push({ error: true, message: "Please enter a valid website" });
-    }
+  if (credentials.website && !urlRegex.test(credentials.website)) {
+    errors.push({
+      error: true,
+      message: "Please enter a valid website",
+      field: "website",
+    });
   }
   if (userSignup || clubSignup) {
     if (!credentials.slug) {
-      errors.push({ error: true, message: "Please enter your username" });
+      errors.push({
+        error: true,
+        message: "Please enter your username",
+        field: "slug",
+      });
     } else if (
       credentials.slug[0] === "/" ||
       credentials.slug[credentials.slug.length - 1] === "/"
     ) {
       errors.push({
         error: true,
         message: "Username must not start or end with '/'",
+        field: "slug",
       });
     } else if (/[^a-zA-Z0-9-]/.test(credentials.slug)) {
       errors.push({
         error: true,
         message: "Username must contain only letters, numbers and '-'",
+        field: "slug",
       });
     } else if (credentials.slug.length < 3 || credentials.slug.length > 30) {
       errors.push({
         error: true,
         message: "Username must be between 3 and 30 characters long",
+        field: "slug",
       });
     }
 
     if (!credentials.city) {
-      errors.push({ error: true, message: "Please enter your city" });
+      errors.push({
+        error: true,
+        message: "Please enter your city",
+        field: "city",
+      });
     }
 
     if (!credentials.state) {
-      errors.push({ error: true, message: "Please enter your state" });
+      errors.push({
+        error: true,
+        message: "Please enter your state",
+        field: "state",
+      });
     }
 
     if (!credentials.address) {
-      errors.push({ error: true, message: "Please enter your address" });
+      errors.push({
+        error: true,
+        message: "Please enter your address",
+        field: "address",
+      });
     } else if (
       credentials.address.length < 20 ||
       credentials.address.length > 200
     ) {
       errors.push({
         error: true,
         message: "Address must be between 20 and 200 characters long",
+        field: "address",
       });
     }
 
     if (!credentials.country) {
-      errors.push({ error: true, message: "Please enter your country" });
+      errors.push({
+        error: true,
+        message: "Please enter your country",
+        field: "country",
+      });
     }
 
     const pincode = credentials?.pincode?.toString();
 
     if (!credentials.pincode) {
-      errors.push({ error: true, message: "Please enter your pincode" });
+      errors.push({
+        error: true,
+        message: "Please enter your pincode",
+        field: "pincode",
+      });
     } else if (pincode.length !== 6 && pincode.length !== 5) {
-      errors.push({ error: true, message: "Please enter a valid pincode" });
+      errors.push({
+        error: true,
+        message: "Please enter a valid pincode",
+        field: "pincode",
+      });
     }
   }
 

src/pages/Auth/AuthPage.css

@@ -154,6 +154,15 @@ textarea::placeholder {
   display: none;
 }
 
+.authpage_error-div {
+  font-size: 0.8rem;
+  color: red;
+}
+
+.authpage_error-message {
+  margin-top: 5px;
+}
+
 .separator_header {
   font-size: 1.4rem;
   font-weight: 600;