david/theoldfitz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add password visibility toggle to user and admin forms

Browse Source
This commit is contained in:
David Dyer committed 2026-08-30 23:07:24 -04:00
1 parent e68b24e1c7
commit 7c96b952e9
5 files changed
+165 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/login.php
+28 -1
View File
@@ -45,12 +45,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-input" required autocomplete="current-password">
<div class="password-input-wrap">
<input type="password" id="password" name="password" class="form-input" required autocomplete="current-password">
<button type="button" class="password-toggle-btn" aria-label="Show password" id="btn-toggle-login-password">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div>
<button type="submit" class="btn btn-primary login-btn">Sign In</button>
</form>
<a href="../" class="back-link">← Return to Pub Website</a>
</div>
<script>
(function() {
var btn = document.getElementById('btn-toggle-login-password');
var input = document.getElementById('password');
if (!btn || !input) return;
var eyeOpen = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
var eyeOff = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye-off"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
btn.addEventListener('click', function() {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
btn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
btn.innerHTML = isPassword ? eyeOff : eyeOpen;
input.focus();
});
})();
</script>
</body>
</html>