From e0558e91b406cd7eb158edcb357b6005ba76fa9c Mon Sep 17 00:00:00 2001
From: Sam Rolfe <samuelrolfe@gmail.com>
Date: Tue, 1 Sep 2026 12:47:42 +1000
Subject: [PATCH] Login: password show/hide eye toggle

---
 portal/templates/login.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/portal/templates/login.html b/portal/templates/login.html
index 43850ac..8553b16 100644
--- a/portal/templates/login.html
+++ b/portal/templates/login.html
@@ -16,11 +16,27 @@
         </div>
         <div class="form-field">
           <label for="password">Password</label>
-          <input class="text-input" type="password" id="password" name="password"
-                 required autocomplete="current-password">
+          <div style="position:relative">
+            <input class="text-input" type="password" id="password" name="password"
+                   required autocomplete="current-password" style="padding-right:44px">
+            <button type="button" id="togglePw" tabindex="-1" aria-label="Show password"
+                    title="Show/hide password"
+                    style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:#888;padding:4px">👁</button>
+          </div>
         </div>
         <button class="button button-primary width-full" type="submit">Sign in</button>
       </form>
+      <script>
+        (function () {
+          var b = document.getElementById('togglePw');
+          var p = document.getElementById('password');
+          if (!b || !p) return;
+          b.addEventListener('click', function () {
+            if (p.type === 'password') { p.type = 'text'; b.textContent = '🙈'; }
+            else { p.type = 'password'; b.textContent = '👁'; }
+          });
+        })();
+      </script>
     </div>
   </div>
 </div>