Add password visibility toggle to user and admin forms
This commit is contained in:
1 parent
e68b24e1c7
commit
7c96b952e9
5 files changed
+165
-28
No files matched your search
+45
-5
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user