Login: password show/hide eye toggle
This commit is contained in:
@@ -16,11 +16,27 @@
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="password">Password</label>
|
||||
<input class="text-input" type="password" id="password" name="password"
|
||||
required autocomplete="current-password">
|
||||
<div style="position:relative">
|
||||
<input class="text-input" type="password" id="password" name="password"
|
||||
required autocomplete="current-password" style="padding-right:44px">
|
||||
<button type="button" id="togglePw" tabindex="-1" aria-label="Show password"
|
||||
title="Show/hide password"
|
||||
style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:#888;padding:4px">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button button-primary width-full" type="submit">Sign in</button>
|
||||
</form>
|
||||
<script>
|
||||
(function () {
|
||||
var b = document.getElementById('togglePw');
|
||||
var p = document.getElementById('password');
|
||||
if (!b || !p) return;
|
||||
b.addEventListener('click', function () {
|
||||
if (p.type === 'password') { p.type = 'text'; b.textContent = '🙈'; }
|
||||
else { p.type = 'password'; b.textContent = '👁'; }
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user