Skip to content

feat: add show/hide password toggle to login page#5241

Merged
maidul98 merged 2 commits intomainfrom
devin/1769119401-add-password-toggle
Jan 22, 2026
Merged

feat: add show/hide password toggle to login page#5241
maidul98 merged 2 commits intomainfrom
devin/1769119401-add-password-toggle

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Jan 22, 2026 •
edited
Loading

Context

Adds a show/hide password toggle (eye icon) to the password input field on the Login page. This allows users to verify their password input before submitting, which helps prevent typos.

Fixes #5095

Note: The Signup page (UserInfoStep component) already has this functionality built into the InputField component it uses, which automatically shows the toggle when the label includes "Password".

Screenshots

N/A - Unable to run the frontend locally, but the implementation follows the exact same pattern used in PasswordSetupPage.tsx.

Steps to verify the change

  1. Navigate to the login page (/login)
  2. Enter text in the password field
  3. Click the eye icon on the right side of the password input
  4. Verify the password becomes visible (input type changes to "text")
  5. Click the eye icon again to hide the password

Updates since last revision

  • Added aria-label attribute to the toggle button for screen reader accessibility (addresses Greptile review feedback)

Human review checklist

  • Verify the eye icon toggle appears and functions correctly on the login page
  • Confirm styling matches other password toggles in the app (e.g., PasswordSetupPage)
  • Test accessibility with screen reader if possible

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

Checklist

  • Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
  • Tested locally
  • Updated docs (if needed)
  • Read the contributing guide

Link to Devin run: https://app.devin.ai/sessions/52879d760ed54741beff622404de9e19
Requested by: Vlad Matsiiako (@vmatsiiako)

Open with Devin

@devin-ai-integration @vmatsiiako
feat: add show/hide password toggle to login page
edf1c1f 
- Add eye icon toggle button to password input field on login page
- Uses existing faEye/faEyeSlash icons from FontAwesome
- Follows existing pattern from PasswordSetupPage

Fixes #5095

Co-Authored-By: Vlad Matsiiako <vm265@cornell.edu>
@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Jan 22, 2026

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@maidul98
Copy link
Collaborator

maidul98 commented Jan 22, 2026 •
edited
Loading

✅ Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 22, 2026

Greptile Summary

Added show/hide password toggle button to the login page password field. The implementation follows the pattern used in PasswordSetupPage.tsx with proper state management and icon toggling.

  • Imported faEye and faEyeSlash icons
  • Added showPassword state to toggle input type between "password" and "text"
  • Added toggle button in rightIcon prop with appropriate icon switching
  • Missing aria-label attribute for screen reader accessibility

Confidence Score: 4/5

  • This PR is safe to merge with one minor accessibility fix needed
  • The implementation correctly follows existing patterns in the codebase (PasswordSetupPage.tsx). The logic is simple and isolated, with proper state management. One syntax issue exists: the toggle button lacks an aria-label attribute for accessibility compliance
  • No files require special attention after addressing the accessibility improvement

Important Files Changed

Filename Overview
frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx Added password toggle functionality, missing aria-label for accessibility

greptile-apps[bot]
greptile-apps bot reviewed Jan 22, 2026
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file reviewed, 1 comment

Edit Code Review Agent Settings | Greptile

@devin-ai-integration @vmatsiiako
fix: add aria-label for accessibility on password toggle button
72d39b5 
Co-Authored-By: Vlad Matsiiako <vm265@cornell.edu>
maidul98
maidul98 approved these changes Jan 22, 2026
View reviewed changes
Copy link
Collaborator

@maidul98 maidul98 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@maidul98 maidul98 merged commit 397ffa2 into main Jan 22, 2026
9 checks passed
devin-ai-integration[bot]
devin-ai-integration bot commented Jan 22, 2026
View reviewed changes
Copy link
Contributor Author

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional flags.

Open in Devin Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maidul98 maidul98 maidul98 approved these changes

@vmatsiiako vmatsiiako vmatsiiako approved these changes

+1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add Show/Hide Password Toggle to Auth Screens

2 participants

@maidul98 @vmatsiiako