fs
35a36f1144
Replace innerHTML assignments in app-tabs.js and app-password-toggle.js with createElement/appendChild to prevent potential XSS vectors. Add destroy() methods to app-tabs, app-filter-drawer, and app-toggle-aside-panels so document/window-level listeners can be properly removed when components are torn down. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
/**
|
|
* Show/hide password toggle button injected next to password inputs.
|
|
*/
|
|
export function initPasswordToggles() {
|
|
const inputs = document.querySelectorAll('input[type="password"]');
|
|
if (!inputs.length) {return;}
|
|
|
|
const showLabel = (document.documentElement.dataset.passwordToggleShowLabel || '').trim();
|
|
const hideLabel = (document.documentElement.dataset.passwordToggleHideLabel || '').trim();
|
|
if (!showLabel || !hideLabel) {return;}
|
|
|
|
inputs.forEach((input) => {
|
|
if (!(input instanceof HTMLInputElement)) {return;}
|
|
if (input.dataset.passwordToggleBound === '1') {return;}
|
|
|
|
const label = input.closest('label');
|
|
if (!label) {return;}
|
|
|
|
const parent = input.parentElement;
|
|
if (parent instanceof HTMLElement && parent.classList.contains('login-password-wrapper')) {
|
|
const existingToggle = parent.querySelector('.login-password-toggle');
|
|
if (existingToggle instanceof HTMLButtonElement) {
|
|
input.dataset.passwordToggleBound = '1';
|
|
existingToggle.dataset.passwordToggleBound = '1';
|
|
existingToggle.setAttribute('aria-label', input.type === 'password' ? showLabel : hideLabel);
|
|
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', showLabel);
|
|
const icon = document.createElement('i');
|
|
icon.className = 'bi bi-eye';
|
|
icon.setAttribute('aria-hidden', 'true');
|
|
toggle.appendChild(icon);
|
|
|
|
input.replaceWith(wrapper);
|
|
wrapper.appendChild(input);
|
|
wrapper.appendChild(toggle);
|
|
|
|
input.dataset.passwordToggleBound = '1';
|
|
toggle.dataset.passwordToggleBound = '1';
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const isPassword = input.type === 'password';
|
|
input.type = isPassword ? 'text' : 'password';
|
|
icon.className = isPassword ? 'bi bi-eye-slash' : 'bi bi-eye';
|
|
toggle.setAttribute('aria-label', isPassword ? hideLabel : showLabel);
|
|
input.focus();
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initPasswordToggles);
|
|
} else {
|
|
initPasswordToggles();
|
|
}
|