Method setupPinInput

chat/components/ShareModals.js:453–560

* Setup PIN input with visual boxes

(container)

        const toggleBtn = container.querySelector('.toggle-pin-visibility');
        const randomBtn = container.querySelector('.random-pin-btn');
        if (!pinInput || !boxes.length) return;

        let isRevealed = true; // Show PIN by default (low-stakes sharing)
        let cursorPos = 0;

        const updateBoxes = () => {
            const value = pinInput.value;
            // Highlight the box that backspace would delete (cursorPos - 1),
            // or box 0 if cursor is at start
            const activeIndex = Math.min(Math.max(cursorPos - 1, 0), 5);
            boxes.forEach((box, i) => {
                const char = value[i] || '';
                box.textContent = char ? (isRevealed ? char : '•') : '';
                box.classList.toggle('filled', !!char);
                box.classList.toggle('active', i === activeIndex);
            });
        };

        const setCursor = (pos) => {
            cursorPos = Math.max(0, Math.min(pos, pinInput.value.length, 6));
            pinInput.setSelectionRange(cursorPos, cursorPos);
            updateBoxes();
        };

        // Handle input
        pinInput.addEventListener('input', () => {
            pinInput.value = sanitizePinInput(pinInput.value);
            cursorPos = pinInput.selectionStart ?? pinInput.value.length;
            updateBoxes();
        });

        // Handle paste
        pinInput.addEventListener('paste', (e) => {
            e.preventDefault();
            const pasted = (e.clipboardData || window.clipboardData).getData('text');
            pinInput.value = sanitizePinInput(pasted);
            cursorPos = pinInput.value.length;
            updateBoxes();
        });

        // Handle arrow keys
        pinInput.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                setCursor(cursorPos - 1);
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                setCursor(cursorPos + 1);
            } else if (e.key === 'Home') {
                e.preventDefault();
                setCursor(0);
            } else if (e.key === 'End') {
                e.preventDefault();
                setCursor(pinInput.value.length);
            }
        });

        // Click on individual box positions cursor after it (so backspace deletes that box)