diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-09 15:46:26 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-09 15:46:26 +0000 |
| commit | 97a2456fdcda2f02f4b60a5610b1415ef07743df (patch) | |
| tree | 21b81e795bec4272056ea237cf08be7b66e75b83 /views | |
| parent | 476ee20573490b65cd19b25ed037a1b8b174104d (diff) | |
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>
Diffstat (limited to 'views')
| -rw-r--r-- | views/admin/login.erb | 18 |
1 files changed, 17 insertions, 1 deletions
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> |