Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: validation errors in signup form #1174

Merged
merged 4 commits into from
Nov 30, 2023
Merged

fix: validation errors in signup form #1174

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bafe168
fix: validation errors in signup form
Endless8 Nov 20, 2023
856161a
fix: setting the state in the right way
Endless8 Nov 20, 2023
37736d1
fix: adding suggested edits
Endless8 Nov 28, 2023
07fff4b
Merge branch 'main' into fix/signup-validation-error
tamalCodes Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions src/hooks/useFormLogic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
tamalCodes marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
125 changes: 104 additions & 21 deletions src/hooks/useValidation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-]+)*$/;
tamalCodes marked this conversation as resolved.
Show resolved Hide resolved

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",
});
}

Expand All @@ -26,68 +39,102 @@ const useValidation = (credentials, userSignup, clubSignup) => {
errors.push({
error: true,
message: "Password and confirm password do not match",
field: "confirmPassword",
});
tamalCodes marked this conversation as resolved.
Show resolved Hide resolved
}
}

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 ||
Expand All @@ -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",
});
}
}

Expand Down
9 changes: 9 additions & 0 deletions src/pages/Auth/AuthPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading
Loading