Add password visibility toggle to user and admin forms

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

No files matched your search

+45 -5
View File
@@ -255,12 +255,28 @@ $users = get_all_users();
<div class="form-group">
<label for="user-field-password">Password</label>
<input type="password" id="user-field-password" name="password" class="form-control" autocomplete="new-password" minlength="8" required>
<div class="password-input-wrap">
<input type="password" id="user-field-password" name="password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="user-field-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>
<div class="form-group">
<label for="user-field-confirm">Confirm Password</label>
<input type="password" id="user-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<div class="password-input-wrap">
<input type="password" id="user-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="user-field-confirm">
<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>
</div>
@@ -287,17 +303,41 @@ $users = get_all_users();
<div class="form-grid">
<div class="form-group full-width" id="password-current-group">
<label for="password-field-current">Current Password</label>
<input type="password" id="password-field-current" name="current_password" class="form-control" autocomplete="current-password">
<div class="password-input-wrap">
<input type="password" id="password-field-current" name="current_password" class="form-control" autocomplete="current-password">
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-current">
<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>
<div class="form-group">
<label for="password-field-new">New Password</label>
<input type="password" id="password-field-new" name="new_password" class="form-control" autocomplete="new-password" minlength="8" required>
<div class="password-input-wrap">
<input type="password" id="password-field-new" name="new_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-new">
<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>
<div class="form-group">
<label for="password-field-confirm">Confirm New Password</label>
<input type="password" id="password-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<div class="password-input-wrap">
<input type="password" id="password-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-confirm">
<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>
</div>