fix: improve forgot password validation flow and UX consistency

[Ushnika09]

Related Issue

Fixes #36

---

Summary

Improved the Forgot Password flow by adding structured realtime validation, inline feedback rendering, disabled button states, and Signup flow consistency across the authentication UX.

---

Changes Made

Email Validation

• Added realtime inline email validation
• Added accessible aria-invalid and aria-describedby handling
• Disabled submit button for invalid/empty email states
• Added validation handling inside submit logic

OTP Validation

• Added realtime OTP length validation
• Added inline error messaging for incomplete OTPs
• Prevented invalid OTP submission states

Password Validation

• Added realtime password length validation
• Added confirm password mismatch validation
• Added inline validation feedback for password errors
• Synced validation handling between UI and submit logic

UX Improvements

• Improved disabled button states across reset flow
• Added noValidate for custom validation consistency
• Maintained responsive brutalist authentication styling

---

Testing Done

• Tested invalid email states
• Tested realtime validation feedback
• Tested OTP validation flow
• Tested password mismatch handling
• Tested disabled button states
• Tested resend OTP flow

---

Preview

Loom walkthrough attached below ⬇️
https://www.loom.com/share/5e2fc591b8b543399888a104eb28c347

Summary by CodeRabbit

• New Features
  • Enhanced password reset form with client-side validation for email addresses, OTP codes, and password requirements
  • Real-time validation feedback with inline error messages for invalid inputs
  • Form submission buttons automatically disable until all validation requirements are met
  • Improved form accessibility with additional descriptive attributes for screen readers

[github-actions]

🚀 PR Received Successfully

Hello @Ushnika09,

Thank you for taking the initiative to contribute to this project.

Please ensure that your PR follows all project guidelines properly before requesting review.

⚠️ Important Instructions

• Maintain proper code quality and structure
• Do not make unnecessary changes/files
• Ensure responsiveness across devices
• Follow existing project conventions strictly
• Attach screenshots/videos for UI-related changes
• Resolve merge conflicts before requesting review
• Avoid AI-generated low quality PRs or copied implementations

📌 Mandatory for GSSoC'26 Participants

Joining the community group and announcement channel is compulsory for all contributors participating through GSSoC'26.

• Telegram Group: https://t.me/c/3991077814/1
• Telegram Channel: https://t.me/+g4esQdo-DyNlZWE1

Failure to follow contribution guidelines may lead to PR rejection.

We appreciate your effort and wish you a great open-source journey ahead. ✨

[coderabbitai]

Warning

Rate limit exceeded

@Ushnika09 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 19 minutes and 52 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8c4aeea3-6a1a-4c55-b2af-7b367a82ff9a

📥 Commits

Reviewing files that changed from the base of the PR and between 4a6818c and 25823d7.

📒 Files selected for processing (1)

• frontend/src/components/auth/ForgotPassword.jsx

📝 Walkthrough

Walkthrough

The ForgotPassword component now enforces client-side validation before submission. Validation state tracks email validity and derived checks for OTP, password length, and password matching. Submission handlers block invalid requests, and the rendered forms display inline error messages with ARIA attributes and disabled button states.

Changes

Forgot Password Client-Side Validation

Layer / File(s)	Summary
Validation state and helpers frontend/src/components/auth/ForgotPassword.jsx	Introduces isEmailValid state and derived boolean validation flags for OTP length, password length, and password matching. The validateEmail helper enforces non-empty and basic domain checks.
Submission handler validation guards frontend/src/components/auth/ForgotPassword.jsx	Send-code handler blocks submission when email is invalid; reset handler blocks submission when OTP is not exactly 6 characters, passwords don't match, or new password is shorter than 6 characters.
Form UI integration with validation rendering frontend/src/components/auth/ForgotPassword.jsx	Step 1 email input updates validation state, includes aria-describedby/aria-invalid, and renders inline email error; Step 2 inputs add aria-invalid attributes and inline alerts for OTP length, password length, and mismatch; reset button disabled until all validation conditions pass.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

enhancement, Frontend, UI/UX, responsive, level:intermediate, quality:clean, type:accessibility

Poem

🐰 A form once fearless, now grows wise,
With validation guards to catch the skies,
Each keystroke checked, each message clear,
The password reset flows without fear,
Accessibility blooms, ARIA sings—
Fine-tuned UX spreads eager wings!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly and accurately describes the main change: improving forgot password validation flow and UX consistency, which aligns with the core objective of adding custom inline validation.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #36: realtime validation feedback with inline error messaging, password length validation, email validation with disabled button states, confirm-password mismatch handling, and validation in both UI and submission logic.
Out of Scope Changes check	✅ Passed	All changes in ForgotPassword.jsx are directly aligned with issue #36 objectives; no out-of-scope modifications detected beyond the validation enhancements and UX consistency updates in scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@frontend/src/components/auth/ForgotPassword.jsx`:
- Around line 46-49: The submit handlers handleSendResetCode and
handleResetPassword currently rely on stale/untrimmed values and can accept
whitespace-only inputs; update both handlers to trim the email and password
inputs at the start, re-run the existing validators (e.g., isEmailValid) against
the trimmed values, and reject empty or whitespace-only strings (use checks like
if (!trimmedEmail || !isEmailValid(trimmedEmail)) and if (!trimmedPassword)
respectively) before proceeding so their logic exactly matches the
disabled-state guards used in the UI.

🪄 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: 0711e538-0bad-4dde-bb97-a49fef0e3f78

📥 Commits

Reviewing files that changed from the base of the PR and between 4879f17 and 4a6818c.

📒 Files selected for processing (1)

• frontend/src/components/auth/ForgotPassword.jsx

[Ushnika09]

@coderabbitai Thanks for the review , just wanted to confirm — are there any additional improvements you’d recommend for this flow beyond the trimmed input checks mentioned above?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
fd "ForgotPassword.jsx" --exec cat {}

Length of output: 10743

---

@Ushnika09 Great work on this PR! Here are the additional improvements I'd recommend, grouped by category:

---

♿ Accessibility (a11y)

1. Missing id/htmlFor pairing on all inputs — Labels are visually correct but not programmatically linked. Screen readers rely on this:

   <label htmlFor="email" className="...">Email</label>
   <input id="email" type="email" ... />

2. aria-describedby is only on the email input — The OTP, new-password, and confirm-password inputs have aria-invalid but no aria-describedby pointing to their inline error <p> tags. Add ids to those error paragraphs and link them the same way you did for email.

---

🔒 Validation & Security

3. OTP input accepts non-alphanumeric characters — You apply .toUpperCase() but don't strip symbols or spaces. A user can type "ABC !@" and reach 6 characters. Add a filter:

   onChange={(e) => setOtp(e.target.value.replace(/[^A-Z0-9]/gi, '').toUpperCase())}

4. Validation order in handleResetPassword — The current order is OTP → match → length. This means two 5-character matching passwords would pass the match check but fail on length. Reordering to length → match is more intuitive and catches the weaker condition first.

---

🧩 UX

5. No way to go back and correct the email on Step 2 — If a user mistyped their email and clicks "Send Reset Code", they're stuck. A simple "Change email" link that calls setStep(1) would fix this.

6. Abrupt navigation after success — After resetPassword resolves, the app immediately calls navigate('/login') with no feedback. A brief success message or toast ("Password reset! Redirecting…") improves trust.

7. No autocomplete attributes — Helps both password managers and mobile keyboards:

   <input type="email" autoComplete="email" ... />
   <input type="password" autoComplete="new-password" ... />

8. No show/hide password toggle — A standard eye-icon button on password fields reduces mistyping errors and is especially helpful when a confirm-mismatch error appears.

9. OTP auto-submit on 6 characters — Since maxLength={6} is already set and the OTP is validated at exactly 6, you could trigger handleResetPassword automatically once the user completes the OTP field (common pattern for OTP UX).

---

🧹 Code Quality

10. Global error banner and inline errors can appear simultaneously — e.g., if the server returns an error after submission, the banner shows while inline validation messages are still visible. You could clear inline state on server error or consolidate into a single error source.

11. inputMode on OTP — Add inputMode="text" (or inputMode="numeric" if your OTPs are digits-only) to improve the mobile keyboard experience.

These are all relatively contained changes that would meaningfully improve the robustness and accessibility of the flow. Happy to help with any of these if needed! 🐇

[kunalverma2512]

@Ushnika09 provide reasoning about what coderabbit said
is it neccessary or not and reason behind your answer

[Ushnika09]

Hi @kunalverma2512 👋

I reviewed CodeRabbit’s suggestions carefully and implemented the improvements that were directly related to validation, accessibility, and overall UX consistency for the Forgot Password flow.

Implemented improvements:

• proper id/htmlFor accessibility pairing
• aria-invalid handling
• improved email validation
• OTP sanitization and validation improvements
• better password validation order
• autoComplete attributes
• inputMode support for OTP input
• realtime inline validation feedback
• disabled button states
• submit-level validation handling

For the remaining suggestions, I considered them optional enhancements outside the current issue scope:

• show/hide password toggle → not implemented because other auth pages currently do not use password visibility toggles, so adding it only here could make the UI inconsistent
• OTP auto-submit → not implemented because it may feel abrupt and reduce user control during password reset
• success toast before redirect → current redirect flow already works properly after successful reset
• change email option → useful improvement, but not strictly necessary for the requested validation-focused issue
• global/inline error consolidation → current implementation intentionally keeps inline validation errors and server-side errors separate for clearer feedback handling

I mainly focused on keeping the implementation aligned with the existing authentication flow while improving validation handling, accessibility, and UX consistency

[kunalverma2512]

Excellent response and extremely well-handled reasoning.

You clearly understood the difference between critical improvements and optional enhancements instead of blindly applying every suggestion. The way you justified architectural and UX consistency across the authentication flow shows strong practical thinking and mature decision-making.

This level of implementation clarity, communication, and ownership is exactly what high-quality contributions should look like.

Moving this towards merge now.
Thanks, @Ushnika09 🚀

[Ushnika09]

Thank you so much @kunalverma2512 🚀
Really appreciated the detailed feedback and review process throughout this PR.
Learned a lot while working on the validation flow and reasoning through the implementation decisions 🙌

Grateful for the merge and the encouraging words ✨