mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

An eye on the login form, to see what is being typed

Browse Source 
A guest password is read off a message and typed by hand, and from the login
form a mistyped character and a wrong password look identical. Revealed, the
field is a text field, so it also turns off capitalisation and autocorrect,
which a phone keyboard would otherwise offer for it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-27 18:03:26 -07:00
co-authored by Claude Opus 5
parent 179f342a2c
commit ed64aca63b
2 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+6
View File
@@ -20,6 +20,12 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.login input { padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; }
.login button, .primary { padding: 10px 12px; background: var(--accent); color: var(--btn-fg); border-radius: 6px; font-weight: 600; }
.login button:disabled { opacity: .5; }
/* the password field and its show/hide eye, which sits inside the field's right edge */
.login .pwfield { position: relative; display: flex; }
.login .pwfield input { flex: 1; min-width: 0; padding-right: 44px; }
.login button.pweye { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 42px; padding: 0; background: none; color: var(--muted); font-weight: 400; border-radius: 0 6px 6px 0; }
.login button.pweye:hover, .login button.pweye[aria-pressed="true"] { color: var(--fg); }
.login button.pweye:disabled { opacity: .4; }
.error { color: var(--bad); font-size: 13px; }
/* layout */