hereisSwapnil / ExamTime

Share/Download notes PDF helps during exams
https://exam-time.vercel.app
MIT License
58 stars 120 forks source link

added the ZOD validation in the signUp component #180

Closed SPraveenKumar-spk closed 1 month ago

SPraveenKumar-spk commented 1 month ago

Description

This PR enhances the signup component by adding ZOD validation to improve form validation and user feedback.

Changes Made:

ZOD Validation Integration:

  1. Added ZOD to the project for schema-based form validation.
  2. Created a validation schema for the signup form, including fields for email, username, password, and confirm password.

Validation Schema Details:

Email:

  1. Must be a valid email format.
  2. Minimum length of 6 characters.
  3. Maximum length of 255 characters.
  4. Username:
  5. Must contain at least one lowercase letter, one uppercase letter, and one special character.
  6. Minimum length of 5 characters.
  7. Maximum length of 10 characters.

Password: Must contain at least one lowercase letter, one uppercase letter, one number, and one special character. Minimum length of 8 characters.

Confirm Password: Must match the password field.

Form Validation Enhancements:

  1. Integrated zodResolver from @hookform/resolvers/zod to use the ZOD schema for form validation.
  2. Improved error handling to display appropriate error messages next to the respective form fields.

UI Updates:

  1. Updated the signup form to display validation errors directly under the corresponding input fields.
  2. Adjusted the layout to ensure that the password toggle button stays inside the input field even when validation errors are displayed.

How to Test:

  1. Navigate to the signup page:
  2. Open the signup form in your browser.
  3. Test with invalid data:
  4. Enter invalid email formats (e.g., user@domain) to check email validation.
  5. Enter usernames that do not meet the criteria (e.g., missing special characters, less than 5 characters, more than 10 characters) to test username validation.
  6. Enter passwords that do not meet the complexity requirements (e.g., missing uppercase letters, digits, special characters, or less than 8 characters) to test password validation.
  7. Enter different values for the password and confirm password fields to test confirm password validation.

Check error messages:

  1. Ensure that appropriate error messages are displayed for each validation rule.
  2. Verify that the password toggle button stays inside the input field even when errors are displayed.
  3. Test with valid data:
  4. Enter valid data for all fields and submit the form.
  5. Ensure that the form submits successfully without errors and redirects to the login page upon successful registration.

Resolves: [Issue Number] #23

Checklist

  1. I have tested my changes locally to ensure they work as expected.
  2. I have documented my changes and provided instructions for testing.
  3. The UI properly displays validation errors and maintains layout integrity.

Screenshots

Error screenshot :

image

Invalid email screenshot:

image

Invalid username screenshot : image

Password error screenshot : image

image

Valid Input :

image

Additional Notes/Comments

Any additional remarks or suggestion s concerning this pull request are welcome.


I certify that I have carried out the relevant checks and provided the requisite screenshot for validation by submitting this pull request. I appreciate your contribution.

vercel[bot] commented 1 month ago

Someone is attempting to deploy a commit to the swapnilsingh99's projects Team on Vercel.

A member of the Team first needs to authorize it.

hereisSwapnil commented 1 month ago

@SPraveenKumar-spk Resolve conflicts