From 97a2456fdcda2f02f4b60a5610b1415ef07743df Mon Sep 17 00:00:00 2001
From: Ken D'Ambrosio <ken@jots.org>
Date: Sat, 9 May 2026 15:46:26 +0000
Subject: Add show/hide password toggle to admin login

SVG eye icon sits inside the right edge of the password field.
Tap/click to reveal; tap again to conceal. Helps mobile users
confirm what they're typing without a separate "show password" step.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/css/style.css  |  5 +++++
 views/admin/login.erb | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/public/css/style.css b/public/css/style.css
index 037b115..bb152aa 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -293,6 +293,11 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
 .admin-login h1 { margin-bottom: 20px; font-size: 1.3rem; }
 .admin-login label { display: block; margin-bottom: 16px; color: var(--text-dim); font-size: .9rem; }
 .admin-login input { display: block; width: 100%; margin-top: 4px; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 1rem; }
+.pw-wrap { position: relative; }
+.pw-wrap input { padding-right: 44px; }
+.pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 8px; line-height: 0; }
+.pw-toggle:hover { color: var(--text); }
+.pw-toggle svg { width: 20px; height: 20px; }
 .form-error { color: #f55; margin-bottom: 12px; font-size: .9rem; }
 
 .admin-album { max-width: 1200px; }
diff --git a/views/admin/login.erb b/views/admin/login.erb
index 16f12d2..901455c 100644
--- a/views/admin/login.erb
+++ b/views/admin/login.erb
@@ -7,7 +7,23 @@
     <input type="hidden" name="return_to" value="<%= ERB::Util.html_escape(params['return_to'].to_s) %>">
     <label>
       Password
-      <input type="password" name="password" autofocus autocomplete="current-password">
+      <div class="pw-wrap">
+        <input type="password" name="password" id="pw-input" autofocus autocomplete="current-password">
+        <button type="button" class="pw-toggle" aria-label="Show password" onclick="
+          var i=document.getElementById('pw-input'),show=i.type==='password';
+          i.type=show?'text':'password';
+          this.querySelector('.eye-off').style.display=show?'':'none';
+          this.querySelector('.eye-on').style.display=show?'none':'';
+          this.setAttribute('aria-label',show?'Hide password':'Show password');
+        ">
+          <svg class="eye-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+          </svg>
+          <svg class="eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>
+          </svg>
+        </button>
+      </div>
     </label>
     <button type="submit" class="btn">Login</button>
   </form>
-- 
cgit v1.2.3