41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
export function initPasswordToggles() {
|
|
const inputs = document.querySelectorAll('input[type="password"]');
|
|
if (!inputs.length) {return;}
|
|
|
|
inputs.forEach((input) => {
|
|
if (!(input instanceof HTMLInputElement)) {return;}
|
|
const label = input.closest('label');
|
|
if (!label) {return;}
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'login-password-wrapper';
|
|
|
|
const toggle = document.createElement('button');
|
|
toggle.type = 'button';
|
|
toggle.className = 'login-password-toggle';
|
|
toggle.setAttribute('aria-label', 'Show password');
|
|
toggle.tabIndex = -1;
|
|
toggle.innerHTML = '<i class="bi bi-eye" aria-hidden="true"></i>';
|
|
|
|
input.replaceWith(wrapper);
|
|
wrapper.appendChild(input);
|
|
wrapper.appendChild(toggle);
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const isPassword = input.type === 'password';
|
|
input.type = isPassword ? 'text' : 'password';
|
|
toggle.innerHTML = isPassword
|
|
? '<i class="bi bi-eye-slash" aria-hidden="true"></i>'
|
|
: '<i class="bi bi-eye" aria-hidden="true"></i>';
|
|
toggle.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
|
|
input.focus();
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initPasswordToggles);
|
|
} else {
|
|
initPasswordToggles();
|
|
}
|