55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
/**
|
|
* Password Visibility Toggle
|
|
* Targets elements with class .password-toggle
|
|
* Robust implementation that works with or without .input-group container.
|
|
*/
|
|
document.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.password-toggle');
|
|
if (!btn) return;
|
|
|
|
// Search for input:
|
|
// 1. Inside same .input-group
|
|
// 2. Inside same parent
|
|
// 3. As a sibling
|
|
let container = btn.closest('.input-group');
|
|
let input = null;
|
|
|
|
if (container) {
|
|
input = container.querySelector('input[type="password"], input[type="text"]');
|
|
}
|
|
|
|
if (!input) {
|
|
input = btn.parentElement.querySelector('input[type="password"], input[type="text"]');
|
|
}
|
|
|
|
if (!input) {
|
|
// Look at previous siblings
|
|
let prev = btn.previousElementSibling;
|
|
while (prev) {
|
|
if (prev.tagName === 'INPUT') {
|
|
input = prev;
|
|
break;
|
|
}
|
|
prev = prev.previousElementSibling;
|
|
}
|
|
}
|
|
|
|
if (input) {
|
|
const icon = btn.querySelector('i');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
if (icon) {
|
|
icon.classList.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
}
|
|
} else {
|
|
input.type = 'password';
|
|
if (icon) {
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
}
|
|
}
|
|
});
|