fix: restore password visibility toggle on login page#598
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 54 minutes and 5 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. 📝 WalkthroughWalkthroughThe login form gains password visibility toggling by importing icon assets, tracking visibility in local state, and conditionally rendering the password input type alongside a clickable toggle button. Existing authentication and form submission logic remain unchanged. ChangesPassword Visibility Toggle
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
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 |
![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)
129-129: ⚡ Quick winMake button color theme-aware for consistency.
The toggle button uses a fixed
text-gray-500color while the rest of the component adapts its colors based on the theme mode. Consider making the button color conditional to maintain visual consistency and ensure adequate contrast in both themes.🎨 Proposed fix for theme consistency
- className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500" + className={`absolute right-4 top-1/2 -translate-y-1/2 ${mode === "dark" ? "text-slate-400" : "text-gray-600"}`}🤖 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` at line 129, The toggle button in Login.tsx currently uses a fixed class string "absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"; make its color theme-aware by replacing the single-tone text class with a theme-aware class or conditional (e.g., add a dark: variant or pick based on the component/theme state) so the button uses an appropriate color in both light and dark modes (for example use text-gray-500 dark:text-gray-300 or derive from the existing theme state used by the Login component).
🤖 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 126-132: The password visibility toggle button (the button using
onClick={() => setShowPassword(!showPassword)} and rendering {showPassword ?
<EyeOff .../> : <Eye .../>}) lacks an accessible label; add an aria-label
attribute that reflects the action and state (e.g., "Show password" when
showPassword is false and "Hide password" when showPassword is true) so screen
readers announce its purpose, and ensure the aria-label dynamically updates
based on the showPassword boolean.
---
Nitpick comments:
In `@src/pages/Login/Login.tsx`:
- Line 129: The toggle button in Login.tsx currently uses a fixed class string
"absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"; make its color
theme-aware by replacing the single-tone text class with a theme-aware class or
conditional (e.g., add a dark: variant or pick based on the component/theme
state) so the button uses an appropriate color in both light and dark modes (for
example use text-gray-500 dark:text-gray-300 or derive from the existing theme
state used by the Login component).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 participant
Related Issue
Description
This PR restores the password visibility toggle functionality on the login page.
Screenshots
Type of Change
Issue Fixed
The password visibility feature was previously missing from the current login page implementation.
Summary by CodeRabbit