From 322595a95fa0d9bc3a32b034df1fa2bb8ed21a88 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 23 Jul 2026 03:02:44 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20password=20visi?=
 =?UTF-8?q?bility=20toggle=20to=20login=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a show/hide password toggle to the admin login form to improve user experience and reduce authentication errors. This includes dynamically updating ARIA labels for accessibility when the state changes.

Co-authored-by: shadowcoder8 <185462083+shadowcoder8@users.noreply.github.com>
---
 .Jules/palette.md   |  4 ++++
 frontend/login.html |  7 ++++++-
 frontend/login.js   | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 665de9e..45b849c 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -4,3 +4,7 @@
 ## 2026-04-26 - [Form Input Accessibility without Visible Labels]
 **Learning:** This app's form design relies heavily on placeholder attributes instead of visible `<label>` tags. Since placeholders disappear upon input and may not be reliably announced by all screen readers, this creates an accessibility issue for users relying on screen readers.
 **Action:** When a visible `<label>` is not present (or omitted for visual layout reasons), always add an `aria-label` attribute to the input/select element to ensure it is accessible.
+
+## 2026-07-23 - [Dynamic ARIA labels for Stateful Icon Buttons]
+**Learning:** When using stateful icon-only buttons (like a password visibility toggle), relying solely on visual icon changes (e.g., eye to eye-slash) leaves screen reader users unaware of the state change. The `aria-label` must be dynamically updated via JavaScript to reflect the current action (e.g., "Show password" to "Hide password").
+**Action:** Always bind `aria-label` updates to state changes in JavaScript for icon-only toggle buttons to ensure the accessibility tree remains accurate.
diff --git a/frontend/login.html b/frontend/login.html
index 4aab7bc..78497dd 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -68,7 +68,12 @@ <h2 class="text-center mb-4 font-weight-bold" style="color: var(--text-main);">A
                             </div>
                             <div class="mb-4">
                                 <label for="password" class="form-label fw-bold" style="color: var(--text-muted);">Password</label>
-                                <input type="password" id="password" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
+                                <div class="position-relative">
+                                    <input type="password" id="password" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem; padding-right: 2.5rem;" required>
+                                    <button type="button" id="toggle-password" class="btn border-0 position-absolute end-0 top-50 translate-middle-y" aria-label="Show password" style="background: transparent; color: var(--text-muted); z-index: 10;">
+                                        <i class="fas fa-eye" id="toggle-password-icon"></i>
+                                    </button>
+                                </div>
                             </div>
                             <button type="submit" class="btn btn-primary w-100 py-2" style="border-radius: var(--radius-md); font-weight: 600;">Sign In</button>
                         </form>
diff --git a/frontend/login.js b/frontend/login.js
index 133271b..4993de8 100644
--- a/frontend/login.js
+++ b/frontend/login.js
@@ -1,3 +1,18 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const togglePasswordBtn = document.getElementById("toggle-password");
+    const passwordInput = document.getElementById("password");
+    const togglePasswordIcon = document.getElementById("toggle-password-icon");
+
+    if (togglePasswordBtn && passwordInput && togglePasswordIcon) {
+        togglePasswordBtn.addEventListener("click", () => {
+            const isPassword = passwordInput.getAttribute("type") === "password";
+            passwordInput.setAttribute("type", isPassword ? "text" : "password");
+            togglePasswordIcon.className = isPassword ? "fas fa-eye-slash" : "fas fa-eye";
+            togglePasswordBtn.setAttribute("aria-label", isPassword ? "Hide password" : "Show password");
+        });
+    }
+});
+
 document.getElementById("login-form").addEventListener("submit", (e) => {
     e.preventDefault();