feat: add password visibility toggle to login form#376
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. 📝 WalkthroughWalkthroughThe Login page now includes a password visibility toggle feature. Icon imports ( ChangesPassword Visibility Toggle
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~10 minutes 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 @shrey2597 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: 1
🧹 Nitpick comments (1)
src/pages/Login/Login.tsx (1)
111-134: 💤 Low valueInconsistent indentation in the password field block.
This block uses a different indentation style (mix of 1-space and 2-space) than the rest of the form (e.g., the email block at lines 94–109 uses consistent 14-space/JSX indentation). Re-formatting to match the surrounding code will keep diffs clean and avoid churn from formatters.
🎨 Suggested reformat
- <div className="relative"> - <input - type={showPassword ? "text" : "password"} - name="password" - autoComplete="current-password" - placeholder="Enter your password" - value={formData.password} - onChange={handleChange} - required - className={`w-full pl-4 pr-12 py-4 rounded-2xl focus:outline-none transition-all ${ - mode === "dark" - ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" - : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" - }`} - /> - - <button - type="button" - onClick={() => setShowPassword(!showPassword)} - className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500" - > - {showPassword ? <EyeOff size={20} /> : <Eye size={20} />} - </button> -</div> + <div className="relative"> + <input + type={showPassword ? "text" : "password"} + name="password" + autoComplete="current-password" + placeholder="Enter your password" + value={formData.password} + onChange={handleChange} + required + className={`w-full pl-4 pr-12 py-4 rounded-2xl focus:outline-none transition-all ${ + mode === "dark" + ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" + : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" + }`} + /> + <button + type="button" + onClick={() => setShowPassword(!showPassword)} + className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500" + > + {showPassword ? <EyeOff size={20} /> : <Eye size={20} />} + </button> + </div>🤖 Prompt for 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. In `@src/pages/Login/Login.tsx` around lines 111 - 134, The password input block in Login.tsx has inconsistent indentation compared to the email block; reformat the JSX inside the <div className="relative"> that contains the password <input> and the visibility <button> so its opening tag, props (type, name, autoComplete, placeholder, value, onChange, required, className), and the button JSX align with the rest of the form's indentation style (match the email field's spacing), preserving the same attribute order and keeping references to showPassword and setShowPassword unchanged; run the project's formatter after adjusting to ensure consistent diffs.
🤖 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/Login/Login.tsx`:
- Around line 127-133: The password visibility toggle button in Login.tsx (the
button using showPassword and setShowPassword and rendering Eye/EyeOff) lacks
accessible labeling; update that button to include an aria-label that describes
its action (e.g., "Show password" vs "Hide password") and add aria-pressed
reflecting the boolean showPassword state, and ensure the same change is applied
to the equivalent toggle in the Sign Up page for parity.
---
Nitpick comments:
In `@src/pages/Login/Login.tsx`:
- Around line 111-134: The password input block in Login.tsx has inconsistent
indentation compared to the email block; reformat the JSX inside the <div
className="relative"> that contains the password <input> and the visibility
<button> so its opening tag, props (type, name, autoComplete, placeholder,
value, onChange, required, className), and the button JSX align with the rest of
the form's indentation style (match the email field's spacing), preserving the
same attribute order and keeping references to showPassword and setShowPassword
unchanged; run the project's formatter after adjusting to ensure consistent
diffs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
mehul-m-prajapati
added
type:accessibility
level:beginner
and removed
level:intermediate
labels
|
🎉🎉 Thank you for your contribution! Your PR #376 has been merged! 🎉🎉 |
2 participants
Description
Added a password visibility toggle (eye icon) to the Login form for better usability and consistency with the Sign Up page.
Changes Made
Fixes #361
Summary by CodeRabbit