* Setup password toggle functionality (uses CSS masking since type="text" to avoid password managers)
(container)
| 429 | // Prevent button from stealing focus |
| 430 | toggleBtn.onmousedown = (e) => e.preventDefault(); |
| 431 | |
| 432 | // Default: password is shown (not masked) |
| 433 | toggleBtn.onclick = () => { |
| 434 | const isMasked = passwordInput.classList.contains('text-masked'); |
| 435 | passwordInput.classList.toggle('text-masked'); |
| 436 | // When masked: show eye-closed, hide eye-open |
| 437 | // When shown: show eye-open, hide eye-closed |
| 438 | toggleBtn.querySelector('.eye-open')?.classList.toggle('hidden', !isMasked); |
| 439 | toggleBtn.querySelector('.eye-closed')?.classList.toggle('hidden', isMasked); |
| 440 | }; |
| 441 | } |
| 442 | |
| 443 | /** |
| 444 | * Setup PIN input with visual boxes |
| 445 | */ |
| 446 | setupPinInput(container) { |
| 447 | const pinInput = container.querySelector('.pin-hidden-input'); |
| 448 | const boxes = container.querySelectorAll('.pin-box'); |
| 449 | const toggleBtn = container.querySelector('.toggle-pin-visibility'); |
| 450 | const randomBtn = container.querySelector('.random-pin-btn'); |
| 451 | if (!pinInput || !boxes.length) return; |
no test coverage detected