From 4e81edf807bb80baa6637511908d4601a82e6eec Mon Sep 17 00:00:00 2001 From: Endless8 <63299434+Endless8@users.noreply.github.com> Date: Thu, 30 Nov 2023 07:30:34 +0100 Subject: [PATCH] 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 --- src/hooks/useFormLogic.js | 4 +- src/hooks/useValidation.js | 125 ++++++++++++++++++++++++++++------ src/pages/Auth/AuthPage.css | 9 +++ src/pages/Auth/AuthSignup.jsx | 35 ++++++++++ 4 files changed, 149 insertions(+), 24 deletions(-) diff --git a/src/hooks/useFormLogic.js b/src/hooks/useFormLogic.js index e374c74c..21911a34 100644 --- a/src/hooks/useFormLogic.js +++ b/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); diff --git a/src/hooks/useValidation.js b/src/hooks/useValidation.js index ef9e96eb..ad94725f 100644 --- a/src/hooks/useValidation.js +++ b/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,15 +39,24 @@ 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 @@ -42,13 +64,22 @@ const useValidation = (credentials, userSignup, clubSignup) => { 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 @@ -56,24 +87,38 @@ const useValidation = (credentials, userSignup, clubSignup) => { 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 @@ -81,6 +126,7 @@ const useValidation = (credentials, userSignup, clubSignup) => { errors.push({ error: true, message: "Club tagline must be between 20 and 220 characters long.", + field: "tagLine", }); } @@ -88,6 +134,7 @@ const useValidation = (credentials, userSignup, clubSignup) => { errors.push({ error: true, message: "Please enter your club description", + field: "description", }); } else if ( credentials.description.length < 100 || @@ -97,6 +144,7 @@ const useValidation = (credentials, userSignup, clubSignup) => { error: true, message: "Club description must be between 100 and 1000 characters long", + field: "description", }); } @@ -104,18 +152,25 @@ const useValidation = (credentials, userSignup, clubSignup) => { 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] === "/" @@ -123,29 +178,44 @@ const useValidation = (credentials, userSignup, clubSignup) => { 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 @@ -153,19 +223,32 @@ const useValidation = (credentials, userSignup, clubSignup) => { 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", + }); } } diff --git a/src/pages/Auth/AuthPage.css b/src/pages/Auth/AuthPage.css index cd3f1ea1..6f43afff 100644 --- a/src/pages/Auth/AuthPage.css +++ b/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; diff --git a/src/pages/Auth/AuthSignup.jsx b/src/pages/Auth/AuthSignup.jsx index 22897c0f..d412e98c 100644 --- a/src/pages/Auth/AuthSignup.jsx +++ b/src/pages/Auth/AuthSignup.jsx @@ -53,6 +53,24 @@ const AuthSignup = () => { ); }; + const renderErrorMessage = (fieldName) => { + return ( + formState?.errors?.length > 0 && ( +
+ {formState.errors.map( + (error, index) => + // Check if the error is related to the email field + error.field === fieldName && ( +
+ {error.message} +
+ ), + )} +
+ ) + ); + }; + return ( <> @@ -136,6 +154,7 @@ const AuthSignup = () => { userType === "individual" ? "john-doe" : "abc-club" } /> + {renderErrorMessage("slug")} {userType === "individual" ? ( @@ -154,6 +173,7 @@ const AuthSignup = () => { id="firstname" placeholder="John" /> + {renderErrorMessage("firstname")}
@@ -170,6 +190,7 @@ const AuthSignup = () => { id="lastname" placeholder="Doe" /> + {renderErrorMessage("lastname")}
) : ( @@ -188,6 +209,7 @@ const AuthSignup = () => { id="name" placeholder="The Life corporation" /> + {renderErrorMessage("name")}
)} @@ -221,7 +244,9 @@ const AuthSignup = () => { id="email" placeholder="john@example.com" /> + {renderErrorMessage("email")} +
+ {renderErrorMessage("confirmPassword")}
@@ -283,6 +310,7 @@ const AuthSignup = () => { id="description" placeholder="Tell us in details about what you are, and what you do" /> + {renderErrorMessage("description")}
@@ -297,6 +325,7 @@ const AuthSignup = () => { id="website" placeholder="Tell us your website" /> + {renderErrorMessage("website")}
)} @@ -319,6 +348,7 @@ const AuthSignup = () => { id="city" placeholder="New York" /> + {renderErrorMessage("city")}
@@ -350,6 +381,7 @@ const AuthSignup = () => { id="address" placeholder="22/B Baker Street" /> + {renderErrorMessage("address")}
@@ -357,6 +389,7 @@ const AuthSignup = () => { Country