Enhance signup form validation and user feedback handling#265
Enhance signup form validation and user feedback handling#265DeepakGhenyar wants to merge 4 commits into
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe signup form now validates username, email, and password fields on input with inline error messages. Password visibility is toggled via eye/eye-off icons. Form submission is blocked if validation errors exist; otherwise, a POST to the backend signup endpoint is attempted with proper navigation or error feedback. ChangesForm validation and password visibility
Sequence DiagramsequenceDiagram
participant User
participant SignupComponent as Signup Component
participant Backend as POST /api/auth/signup
participant Router as Navigation (/login)
User->>SignupComponent: type username/email/password
SignupComponent->>SignupComponent: validate field, update `errors`
SignupComponent-->>User: show or clear inline field error
User->>SignupComponent: click submit
SignupComponent->>SignupComponent: revalidate all fields
alt validation errors exist
SignupComponent-->>User: prevent submit, show errors
else no validation errors
SignupComponent->>Backend: POST {username,email,password}
Backend-->>SignupComponent: response {message}
alt message == "User created successfully"
SignupComponent->>Router: navigate to /login
else
SignupComponent-->>User: show backend message or generic error
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @DeepakGhenyar for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 41-45: The email validation in the Signup component uses an
unanchored regex against untrimmed input which permits malformed emails; update
the logic in the block where name === "email" to first use const trimmed =
value.trim() and validate trimmed (not raw value), and replace the regex
/\S+@\S+\.\S+/ with an anchored, stricter pattern (e.g. start/end anchors and
better local/domain checks) when setting errorMessage so malformed values are
rejected; ensure errorMessage is set based on trimmed input and the
function/handler (the code that references name, value, and errorMessage) uses
the trimmed, validated value thereafter.
- Around line 166-172: The password visibility toggle button is icon-only and
lacks an accessible name; update the button (the element using setShowPassword
and showPassword that renders Eye/EyeOff) to provide an accessible label and
state, e.g., add an aria-label that changes with showPassword (e.g., "Show
password" vs "Hide password") and consider adding aria-pressed or title for
additional context so screen readers announce its purpose and current state.
- Around line 65-70: The submit handler handleSubmit currently only checks the
existing errors object, so untouched invalid fields let bad payloads through;
update handleSubmit to re-run validation against current formData on submit
(e.g., call your validate/validateAll function or validateField for each field
with formData.username, formData.email, formData.password), update/set the
errors state with any returned issues, and abort submission if any validation
errors are present before posting the payload; ensure this revalidation handles
async validators by awaiting the validator if needed and then returning early
when errors exist.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d7c43668-cf1c-4f48-9185-77390d004381
📒 Files selected for processing (1)
src/pages/Signup/Signup.tsx
|
all bg colors are bad, use simple colors -> white and black @DeepakGhenyar |
|
Hey @mehul-m-prajapati , I have resolved all merge conflicts and addressed all the CodeRabbit review comments:
Could you please re-add the |
2 participants
Related Issue
Description
Enhanced the signup form validation and improved the overall user experience by adding real-time validation and better feedback handling.
Changes Made
How Has This Been Tested?
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit