feat(auth): Add show/hide password toggle to sign-in page - #124252
parh0m2007 wants to merge 2 commits into
Conversation
Add an eye button inside the password field on the Django-rendered sign-in page that toggles between masked and visible password. - Wrap the password field in a relative container and render a password-visibility-toggle button (uses the existing `eye` glyph from the sentry-simple icon font) - Vanilla JS toggles the input type and updates aria-pressed and aria-label for accessibility - The React authV2 email login already ships this toggle; this brings the legacy template to parity
github-actions
Bot
added
Scope: Frontend
|
🚨 Warning: This pull request contains Frontend and Backend changes! It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently. Have questions? Please ask in the |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e211c14. Configure here.
After clicking to reveal, the toggle reported aria-pressed=false; after hiding it reported true. aria-pressed should signal that the password is visible, which is the pre-toggle hidden state, so bind it to isHidden directly.
1 participant
Summary
Adds an eye button inside the password field of the Django-rendered sign-in page that lets users toggle between the masked and visible password. Fixes #79692.
The React authV2 email login (
static/app/views/authV2/authLogin/components/emailAuth.tsx) already ships a show/hide password toggle; this brings the legacy server-renderedsentry/login.htmltemplate to parity for users who don't have the React auth experiment cookie enabled.Implementation
sentry/login.htmlwraps each field in alogin-form-fieldcontainer; for thepasswordfield it also renders apassword-visibility-togglebutton using the existingeyeglyph (\e60d) from thesentry-simpleicon font (no new assets needed).typebetweenpasswordandtextand updatearia-pressed/aria-label(Show password/Hide password) for screen readers. Idempotent binding viadata-boundso it is safe with the tab-switching on the page.PasswordInputwidget gains apassword-inputclass used forpadding-rightso text doesn't run under the button.body.authblock instatic/less/layout.less; the.icon-eyeglyph class is added tostatic/less/fonts.lessalongside the other Django-view icons.Tests
test_login_page_includes_password_visibility_toggleasserts the toggle markup (login-form-field password-field,password-visibility-toggle,aria-label) and the client-side binder are present on the rendered login page.