From e211c14836c2df4c4bdd4d54ab99dd4f796e3b5b Mon Sep 17 00:00:00 2001
From: parh0m2007 <romeo190107@gmail.com>
Date: Sun, 13 Sep 2026 18:03:53 +0500
Subject: [PATCH 1/2] feat(auth): Add show/hide password toggle to sign-in page

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
---
 src/sentry/templates/sentry/login.html       | 48 +++++++++++++++++++-
 src/sentry/web/forms/accounts.py             |  4 +-
 static/less/fonts.less                       |  4 ++
 static/less/layout.less                      | 33 ++++++++++++++
 tests/sentry/web/frontend/test_auth_login.py | 12 +++++
 5 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/src/sentry/templates/sentry/login.html b/src/sentry/templates/sentry/login.html
index 1bfb79dec5ee..65d083e50670 100644
--- a/src/sentry/templates/sentry/login.html
+++ b/src/sentry/templates/sentry/login.html
@@ -40,7 +40,19 @@ <h3>{% trans "Sign in to continue" %}</h3>
             {{ login_form|as_crispy_errors }}
 
             {% for field in login_form %}
-              {{ field|as_crispy_field }}
+              <div class="login-form-field{% if field.name == 'password' %} password-field{% endif %}">
+                {{ field|as_crispy_field }}
+                {% if field.name == 'password' %}
+                  <button
+                    type="button"
+                    class="password-visibility-toggle"
+                    aria-label="Show password"
+                    aria-pressed="false"
+                  >
+                    <span class="icon-eye"></span>
+                  </button>
+                {% endif %}
+              </div>
             {% endfor %}
 
             <div class="auth-footer m-t-1">
@@ -165,6 +177,40 @@ <h3>{% trans "Sign in to continue" %}</h3>
     document.cookie = `sentry_react_auth=1; Path=/auth/; SameSite=None; Secure${domainAttribute}`;
     window.location.reload();
   };
+
+  (function() {
+    function bindPasswordVisibilityToggles() {
+      document
+        .querySelectorAll('.password-visibility-toggle:not([data-bound])')
+        .forEach(function(button) {
+          button.setAttribute('data-bound', 'true');
+          button.addEventListener('click', function() {
+            var container = button.closest('.password-field');
+            if (!container) {
+              return;
+            }
+            var input = container.querySelector('input');
+            if (!input) {
+              return;
+            }
+            var isHidden = input.type === 'password';
+            input.type = isHidden ? 'text' : 'password';
+            button.setAttribute('aria-pressed', String(!isHidden));
+            var label = button.getAttribute('aria-label');
+            button.setAttribute(
+              'aria-label',
+              label === 'Show password' ? 'Hide password' : 'Show password'
+            );
+          });
+        });
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bindPasswordVisibilityToggles);
+    } else {
+      bindPasswordVisibilityToggles();
+    }
+  })();
 </script>
 {% endscript %}
 {% endblock %}
diff --git a/src/sentry/web/forms/accounts.py b/src/sentry/web/forms/accounts.py
index 98dd9f54be83..5a9560840e2c 100644
--- a/src/sentry/web/forms/accounts.py
+++ b/src/sentry/web/forms/accounts.py
@@ -32,7 +32,9 @@ class AuthenticationForm(forms.Form):
     )
     password = forms.CharField(
         label=_("Password"),
-        widget=forms.PasswordInput(attrs={"placeholder": _("password"), "tabindex": 2}),
+        widget=forms.PasswordInput(
+            attrs={"placeholder": _("password"), "tabindex": 2, "class": "password-input"}
+        ),
     )
 
     error_messages = {
diff --git a/static/less/fonts.less b/static/less/fonts.less
index 72de6e3924f0..c66fab63f670 100644
--- a/static/less/fonts.less
+++ b/static/less/fonts.less
@@ -201,6 +201,10 @@
   content: '\e611';
 }
 
+.icon-eye:before {
+  content: '\e60d';
+}
+
 // Used by plugins in getsentry
 .icon-checkmark:before {
   content: '\e60a';
diff --git a/static/less/layout.less b/static/less/layout.less
index 6250a6708cd9..607bdb31a25f 100644
--- a/static/less/layout.less
+++ b/static/less/layout.less
@@ -176,6 +176,39 @@ body.auth {
     flex: 1;
   }
 
+  .login-form-field {
+    &.password-field {
+      position: relative;
+
+      .password-visibility-toggle {
+        position: absolute;
+        top: 34px;
+        right: 10px;
+        z-index: 3;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: @gray;
+        cursor: pointer;
+        line-height: 1;
+        font-size: 16px;
+
+        &:hover,
+        &:focus {
+          color: @gray-dark;
+        }
+
+        .icon-eye {
+          font-size: 16px;
+        }
+      }
+
+      input.password-input {
+        padding-right: 34px;
+      }
+    }
+  }
+
   .auth-provider-column {
     width: 46%;
     padding-left: 30px;
diff --git a/tests/sentry/web/frontend/test_auth_login.py b/tests/sentry/web/frontend/test_auth_login.py
index 741d36aac1d2..251bdbd45802 100644
--- a/tests/sentry/web/frontend/test_auth_login.py
+++ b/tests/sentry/web/frontend/test_auth_login.py
@@ -50,6 +50,18 @@ def test_renders_correct_template(self) -> None:
         assert resp.status_code == 200
         self.assertTemplateUsed("sentry/login.html")
 
+    def test_login_page_includes_password_visibility_toggle(self) -> None:
+        resp = self.client.get(self.path)
+
+        assert resp.status_code == 200
+        content = resp.content.decode()
+        # The password field is wrapped in a container with a toggle button
+        assert 'class="login-form-field password-field"' in content
+        assert 'class="password-visibility-toggle"' in content
+        assert 'aria-label="Show password"' in content
+        # The client-side behavior for the toggle is present
+        assert "bindPasswordVisibilityToggles" in content
+
     def test_renders_legacy_login_banner(self) -> None:
         banner = 'Banner message <a href="https://example.com">Learn more</a>.'
         with mock.patch.object(

From b9630055ba193655ce0a291bbb288d081b3f0212 Mon Sep 17 00:00:00 2001
From: parh0m2007 <romeo190107@gmail.com>
Date: Mon, 14 Sep 2026 00:37:57 +0500
Subject: [PATCH 2/2] fix(auth): Correct inverted aria-pressed on password
 visibility toggle

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.
---
 src/sentry/templates/sentry/login.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/sentry/templates/sentry/login.html b/src/sentry/templates/sentry/login.html
index 65d083e50670..2d3ac5008578 100644
--- a/src/sentry/templates/sentry/login.html
+++ b/src/sentry/templates/sentry/login.html
@@ -195,7 +195,9 @@ <h3>{% trans "Sign in to continue" %}</h3>
             }
             var isHidden = input.type === 'password';
             input.type = isHidden ? 'text' : 'password';
-            button.setAttribute('aria-pressed', String(!isHidden));
+            // "pressed" means the password is currently visible. isHidden is
+            // the pre-toggle state, so after flipping to visible it is true.
+            button.setAttribute('aria-pressed', String(isHidden));
             var label = button.getAttribute('aria-label');
             button.setAttribute(
               'aria-label',