β¨ Improve Signup Form: Show specific password validation errors #152
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
π Summary:
This PR Fixes #61 the password validation in the Signup page by:
β Displaying specific password validation errors (length, uppercase, lowercase) only when the user clicks SIGN-UP.
β Preventing signup if any validation fails.
π Showing field errors (name, email, avatar) alongside password errors for better UX.
π Changes Made:
Password Validation Refactor
Each failing password rule now generates a specific error message.
Example: Password must contain at least one uppercase letter.
Validation Trigger
Errors are shown only on SIGN-UP click, keeping UI clean.
Prevents form submission until all rules are satisfied.
Error Display
Field and password errors are displayed individually in red, improving clarity.
Removed old checklist with green/red ticks.
Code Clean-Up
Simplified error state handling with errors object.
Removed unnecessary showErrors state for cleaner logic.
π¨ UI/UX Improvements:
Users now see exactly which password rule failed.
Errors appear after clicking SIGN-UP, avoiding confusion.
Form submission is blocked until all validations pass.
πΈ Screenshots / GIFs:
β‘ How to Test:
Navigate to /signup.
Try submitting an empty form β field errors should appear.
Enter password failing each rule β see specific password error messages.
Fill all fields correctly β signup should succeed and redirect to /landing.
Try Google signup β avatar selection required; error appears if missing.