poslop/palette
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

password reveal: slash through eye icon while password hidden
CI / test (push) Successful in 17s
Details
CI / docker (push) Skipped
Details

Browse Source
This commit is contained in:
poslop
2026-09-08 20:55:25 -05:00
parent 6b21f997b5
commit 9d75d2f80d
3 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
palette
BIN
View File
Binary file not shown.
web/static/app.css
+2
View File
@@ -241,6 +241,8 @@ td a.slug:hover { color: var(--accent); }
flex-shrink: 0; flex-shrink: 0;
} }
.pw-field .reveal:hover { color: var(--fg); } .pw-field .reveal:hover { color: var(--fg); }
.pw-field .reveal .eye-slash { display: none; }
.pw-field .reveal.off .eye-slash { display: block; }
.pw-field svg { width: 20px; height: 20px; display: block; } .pw-field svg { width: 20px; height: 20px; display: block; }
/* custom URL input (#22) */ /* custom URL input (#22) */
web/templates/new.html
+2 -1
View File
@@ -42,7 +42,7 @@
<h3>Protection</h3> <h3>Protection</h3>
<div class="protect"> <div class="protect">
<label class="toggle"><input type="checkbox" id="haspw"> Password lock</label> <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
<div class="pw-row" id="pwrow" style="display:none"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg></button></div></div> <div class="pw-row" id="pwrow" style="display:none"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
<label class="toggle"><input type="checkbox" id="burn"> Burn after read</label> <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
<label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label> <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
</div> </div>
@@ -84,6 +84,7 @@ $('pwreveal').addEventListener('click', () => {
const pw = $('password'); const pw = $('password');
const show = pw.type === 'password'; const show = pw.type === 'password';
pw.type = show ? 'text' : 'password'; pw.type = show ? 'text' : 'password';
$('pwreveal').classList.toggle('off', !show);
$('pwreveal').title = show ? 'Hide password' : 'Show password'; $('pwreveal').title = show ? 'Hide password' : 'Show password';
}); });