Oxicloud/static/js/views/device-verify/device-verify.js

// device-verify.js — Extracted from inline <script> in device-verify.html
import { getCsrfHeaders } from '../../core/csrf.js';
import { oxiIconsInit } from '../../core/icons.js';

(() => {
    var API_BASE = window.location.origin;
    var codeInput = /** @type {HTMLInputElement} */ (document.getElementById('user-code'));
    var deviceInfo = document.getElementById('device-info');
    var actionButtons = document.getElementById('action-buttons');
    var errorText = document.getElementById('error-text');
    var btnApprove = /** @type {HTMLButtonElement} */ (document.getElementById('btn-approve'));
    var btnDeny = /** @type {HTMLButtonElement} */ (document.getElementById('btn-deny'));

    /** @type {ReturnType<typeof setTimeout>} */
    var debounceTimer = null;
    var currentCode = '';

    oxiIconsInit();

    // Pre-fill from URL query param (?code=ABCD-1234)
    var params = new URLSearchParams(window.location.search);
    if (params.get('code')) {
        codeInput.value = params.get('code');
        lookupCode(params.get('code'));
    }

    // Auto-insert hyphen and lookup on input
    codeInput.addEventListener('input', (e) => {
        const target = /** @type {HTMLInputElement} */ (e.target);
        var val = target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
        // Auto-insert hyphen after 4 chars
        if (val.length === 4 && val.indexOf('-') === -1) {
            val = `${val}-`;
        }
        target.value = val;
        errorText.classList.add('hidden');

        // Debounce lookup
        clearTimeout(debounceTimer);
        if (val.length >= 9) {
            debounceTimer = setTimeout(() => {
                lookupCode(val);
            }, 300);
        } else {
            deviceInfo.classList.add('hidden');
            actionButtons.classList.add('hidden');
        }
    });

    // Wire up approve / deny buttons (replaces inline onclick)
    btnApprove.addEventListener('click', () => {
        handleAction('approve');
    });
    btnDeny.addEventListener('click', () => {
        handleAction('deny');
    });

    /**
     *
     * @param {string} code
     * @returns
     */
    async function lookupCode(code) {
        try {
            const resp = await fetch(`${API_BASE}/api/auth/device/verify?code=${encodeURIComponent(code)}`, {
                credentials: 'same-origin'
            });
            if (resp.status === 401) {
                showError('You must be logged in to authorize a device. Please log in first.');
                return;
            }
            if (!resp.ok) throw new Error('Lookup failed');
            const data = await resp.json();

            if (data.valid) {
                currentCode = code;
                document.getElementById('info-client').textContent = data.client_name || 'Unknown';
                document.getElementById('info-scopes').textContent = data.scopes || 'all';
                deviceInfo.classList.remove('hidden');
                actionButtons.classList.remove('hidden');
                errorText.classList.add('hidden');
            } else {
                deviceInfo.classList.add('hidden');
                actionButtons.classList.add('hidden');
                showError('Code not found or expired. Please check and try again.');
            }
        } catch (_err) {
            showError('Failed to verify code. Please try again.');
        }
    }

    /**
     *
     * @param {'approve' | 'deny'} action
     */
    async function handleAction(action) {
        btnApprove.disabled = true;
        btnDeny.disabled = true;

        try {
            const resp = await fetch(`${API_BASE}/api/auth/device/verify`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: Object.assign({ 'Content-Type': 'application/json' }, getCsrfHeaders()),
                body: JSON.stringify({ user_code: currentCode, action: action })
            });

            if (!resp.ok) {
                const err = await resp.json().catch(() => {
                    return {};
                });
                throw new Error(err.message || 'Action failed');
            }

            document.getElementById('step-code').classList.add('hidden');
            if (action === 'approve') {
                document.getElementById('status-success').classList.remove('hidden');
            } else {
                document.getElementById('status-denied').classList.remove('hidden');
            }
        } catch (err) {
            btnApprove.disabled = false;
            btnDeny.disabled = false;
            showError(/** @type {Error} */ (err).message || 'Failed to process action.');
        }
    }

    /**
     *
     * @param {string} msg
     */
    function showError(msg) {
        errorText.textContent = msg;
        errorText.classList.remove('hidden');
    }
})();