@qrauth/web-components 0.1.0 → 0.3.0

package/dist/login.js

@@ -1,769 +0,0 @@
-import { QRAuthElement } from './base.js';
-// Same shield SVG as the browser SDK
-const SHIELD_SVG = `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-  <path d="M48 24 H152 Q166 24 166 38 V108 Q166 156 100 182 Q34 156 34 108 V38 Q34 24 48 24 Z"
-        fill="none" stroke="#fff" stroke-width="5"/>
-  <g fill="#fff" opacity="0.2">
-    <rect x="52" y="40" width="18" height="18" rx="3"/>
-    <rect x="78" y="40" width="18" height="18" rx="3"/>
-    <rect x="130" y="40" width="18" height="18" rx="3"/>
-    <rect x="52" y="66" width="18" height="18" rx="3"/>
-    <rect x="104" y="66" width="18" height="18" rx="3"/>
-    <rect x="78" y="92" width="18" height="18" rx="3"/>
-    <rect x="130" y="92" width="18" height="18" rx="3"/>
-    <rect x="52" y="118" width="18" height="18" rx="3"/>
-    <rect x="104" y="118" width="18" height="18" rx="3"/>
-  </g>
-  <path d="M62 104 L88 134 L144 64"
-        fill="none" stroke="#fff" stroke-width="15"
-        stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;
-// Check icon for success state
-const CHECK_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
-</svg>`;
-// Spinner SVG
-const SPINNER_SVG = `<svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"
-          stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
-</svg>`;
-/**
- * <qrauth-login> — Drop-in QR authentication button / inline widget.
- *
- * Attributes:
- *   tenant        — Your QRAuth App client ID (required)
- *   theme         — "light" (default) | "dark"
- *   base-url      — API base URL (default: https://qrauth.io)
- *   scopes        — Space-separated scopes (default: "identity")
- *   redirect-url  — Optional redirect after successful auth
- *   on-auth       — Name of a global callback function to call on success
- *   display       — "button" (default) | "inline"
- *   animated      — If present, enables subtle QR pulse animation
- *
- * Events (bubbles + composed, cross shadow-DOM):
- *   qrauth:authenticated  — detail: { sessionId, user, signature }
- *   qrauth:expired        — fired when session times out
- *   qrauth:error          — detail: { message }
- *   qrauth:scanned        — fired when QR is scanned (before approval)
- *
- * @example
- *   <qrauth-login tenant="qrauth_app_xxx"></qrauth-login>
- *   <qrauth-login tenant="qrauth_app_xxx" display="inline" theme="dark"></qrauth-login>
- */
-export class QRAuthLogin extends QRAuthElement {
-    static get observedAttributes() {
-        return [...super.observedAttributes, 'scopes', 'redirect-url', 'on-auth', 'display', 'animated'];
-    }
-    _sessionId = null;
-    _codeVerifier = null;
-    _status = 'idle';
-    _expiresAt = null;
-    _timerInterval = null;
-    _pollTimeout = null;
-    get scopes() { return this.getAttribute('scopes') || 'identity'; }
-    get redirectUrl() { return this.getAttribute('redirect-url'); }
-    get onAuth() { return this.getAttribute('on-auth'); }
-    get display() { return this.getAttribute('display') || 'button'; }
-    get animated() { return this.hasAttribute('animated'); }
-    // ---- Lifecycle ---------------------------------------------------------
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._clearTimers();
-    }
-    // ---- Render ------------------------------------------------------------
-    render() {
-        if (this.display === 'inline') {
-            this._renderInline();
-        }
-        else {
-            this._renderButton();
-        }
-    }
-    _renderButton() {
-        this.shadow.innerHTML = `
-      <style>
-        ${this.getBaseStyles()}
-        :host { display: inline-block; }
-
-        .btn {
-          display: inline-flex;
-          align-items: center;
-          gap: 10px;
-          padding: 12px 24px;
-          background: var(--_btn-bg);
-          color: #fff;
-          border: none;
-          border-radius: var(--_radius);
-          font-size: 15px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
-          user-select: none;
-          line-height: 1.4;
-          font-family: inherit;
-        }
-        .btn:hover:not(:disabled) {
-          background: var(--_btn-hover);
-          transform: translateY(-1px);
-          box-shadow: 0 4px 12px rgba(27,42,74,0.3);
-        }
-        .btn:active:not(:disabled) { transform: translateY(0); }
-        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
-        .btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
-
-        /* Modal overlay */
-        .overlay {
-          position: fixed;
-          inset: 0;
-          background: rgba(0,0,0,0.55);
-          z-index: 99999;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          animation: fade-in 0.2s ease;
-        }
-        .overlay.hidden { display: none; }
-
-        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
-        @keyframes slide-up {
-          from { transform: translateY(24px); opacity: 0; }
-          to   { transform: translateY(0); opacity: 1; }
-        }
-
-        .modal {
-          background: var(--_bg);
-          border-radius: 16px;
-          padding: 32px 28px 24px;
-          max-width: 380px;
-          width: 90vw;
-          box-shadow: var(--_shadow);
-          text-align: center;
-          animation: slide-up 0.3s ease;
-          position: relative;
-        }
-
-        ${this._sharedModalStyles()}
-      </style>
-
-      <button class="btn" id="open-btn" aria-label="Sign in with QRAuth">
-        <span class="btn-icon">${SHIELD_SVG}</span>
-        Sign in with QRAuth
-      </button>
-
-      <div class="overlay hidden" id="overlay" role="dialog" aria-modal="true" aria-label="QRAuth sign-in">
-        <div class="modal">
-          ${this._modalContent()}
-        </div>
-      </div>
-    `;
-        this._bindButtonEvents();
-    }
-    _renderInline() {
-        this.shadow.innerHTML = `
-      <style>
-        ${this.getBaseStyles()}
-        :host { display: block; }
-
-        .inline-container {
-          background: var(--_bg);
-          border: 1px solid var(--_border);
-          border-radius: 16px;
-          padding: 28px 24px 20px;
-          text-align: center;
-          max-width: 360px;
-          margin: 0 auto;
-        }
-
-        /* Idle state: show start button */
-        .start-btn {
-          display: inline-flex;
-          align-items: center;
-          gap: 10px;
-          padding: 12px 24px;
-          background: var(--_btn-bg);
-          color: #fff;
-          border: none;
-          border-radius: var(--_radius);
-          font-size: 15px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
-          font-family: inherit;
-          width: 100%;
-          justify-content: center;
-        }
-        .start-btn:hover:not(:disabled) {
-          background: var(--_btn-hover);
-          transform: translateY(-1px);
-        }
-        .start-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-        .btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
-
-        ${this._sharedModalStyles()}
-      </style>
-
-      <div class="inline-container">
-        <div id="inline-body">
-          ${this._inlineIdleContent()}
-        </div>
-      </div>
-    `;
-        this._bindInlineEvents();
-    }
-    _inlineIdleContent() {
-        return `
-      <button class="start-btn" id="start-btn" aria-label="Sign in with QRAuth">
-        <span class="btn-icon">${SHIELD_SVG}</span>
-        Sign in with QRAuth
-      </button>
-    `;
-    }
-    // ---- Shared modal HTML -------------------------------------------------
-    _modalContent() {
-        return `
-      <button class="close-btn" id="close-btn" aria-label="Close">&times;</button>
-      <div id="modal-body">
-        ${this._bodyForStatus('idle')}
-      </div>
-    `;
-    }
-    _bodyForStatus(status, data) {
-        switch (status) {
-            case 'idle':
-                return `
-          <div class="state-header">
-            <div class="brand-icon">${SHIELD_SVG}</div>
-            <h3>Sign in with QRAuth</h3>
-            <p>Secure, passwordless authentication</p>
-          </div>
-        `;
-            case 'loading':
-                return `
-          <div class="state-loading">
-            <div class="spinner-wrap">${SPINNER_SVG}</div>
-            <p class="status-text">Generating QR code...</p>
-          </div>
-        `;
-            case 'pending':
-            case 'SCANNED': {
-                const qrImageUrl = data?.qrUrl
-                    ? `https://api.qrserver.com/v1/create-qr-code/?size=440x440&data=${encodeURIComponent(data.qrUrl)}`
-                    : '';
-                const isScanned = status === 'SCANNED';
-                const scanClass = isScanned ? 'scanned' : '';
-                return `
-          <h3>Sign in with QRAuth</h3>
-          <p class="subtitle">Scan this QR code with your phone camera</p>
-          <div class="qr-frame ${scanClass}${this.animated ? ' animated' : ''}">
-            <img src="${qrImageUrl}" alt="QR Code for authentication" width="220" height="220" loading="lazy"/>
-            <div class="qr-badge">${SHIELD_SVG}</div>
-            ${isScanned ? '<div class="scanned-overlay"><span class="scanned-check">' + CHECK_SVG + '</span></div>' : ''}
-          </div>
-          <div class="status-text ${isScanned ? 'status-scanned' : ''}">
-            ${isScanned
-                    ? '&#10003; QR code scanned &mdash; waiting for approval...'
-                    : 'Waiting for scan...'}
-          </div>
-          <div class="timer" id="timer">${data?.timerHtml ?? ''}</div>
-          <div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
-        `;
-            }
-            case 'APPROVED':
-                return `
-          <div class="state-approved">
-            <div class="success-icon">${CHECK_SVG}</div>
-            <h3>Identity verified!</h3>
-            <p class="subtitle">You are now signed in</p>
-          </div>
-        `;
-            case 'DENIED':
-                return `
-          <div class="state-denied">
-            <div class="error-icon">&#10007;</div>
-            <h3>Authentication denied</h3>
-            <p class="subtitle">The request was declined on your device.</p>
-            <button class="retry-btn" id="retry-btn">Try again</button>
-          </div>
-        `;
-            case 'EXPIRED':
-                return `
-          <div class="state-expired">
-            <div class="expired-icon">&#8987;</div>
-            <h3>Session expired</h3>
-            <p class="subtitle">The QR code has timed out.</p>
-            <button class="retry-btn" id="retry-btn">Try again</button>
-          </div>
-        `;
-            case 'error':
-                return `
-          <div class="state-error">
-            <div class="error-icon">&#9888;</div>
-            <h3>Something went wrong</h3>
-            <p class="subtitle">${data?.errorMessage ?? 'Failed to start authentication.'}</p>
-            <button class="retry-btn" id="retry-btn">Try again</button>
-          </div>
-        `;
-            default:
-                return '';
-        }
-    }
-    // ---- Shared CSS for modal content --------------------------------------
-    _sharedModalStyles() {
-        return `
-      /* Typography */
-      h3 {
-        font-size: 18px;
-        font-weight: 700;
-        color: var(--_text);
-        margin: 0 0 6px;
-      }
-      .subtitle {
-        font-size: 13px;
-        color: var(--_text-muted);
-        margin: 0 0 20px;
-        line-height: 1.5;
-      }
-
-      /* Close button */
-      .close-btn {
-        position: absolute;
-        top: 12px;
-        right: 14px;
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: var(--_text-muted);
-        font-size: 22px;
-        line-height: 1;
-        padding: 4px 6px;
-        border-radius: 6px;
-        transition: color 0.15s, background 0.15s;
-        font-family: inherit;
-      }
-      .close-btn:hover { color: var(--_text); background: var(--_surface); }
-
-      /* Brand icon in idle state */
-      .state-header { padding: 8px 0 4px; }
-      .brand-icon {
-        width: 56px;
-        height: 56px;
-        background: var(--_btn-bg);
-        border-radius: 14px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 14px;
-        padding: 10px;
-      }
-      .brand-icon svg { width: 36px; height: 36px; }
-
-      /* Loading state */
-      .state-loading {
-        padding: 32px 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 16px;
-      }
-      .spinner-wrap { color: var(--_primary); }
-      .spinner {
-        width: 40px;
-        height: 40px;
-        animation: spin 0.8s linear infinite;
-      }
-      @keyframes spin { to { transform: rotate(360deg); } }
-
-      /* QR frame */
-      .qr-frame {
-        display: inline-block;
-        padding: 14px;
-        background: #fff;
-        border: 2px solid var(--_border);
-        border-radius: var(--_radius);
-        margin-bottom: 14px;
-        position: relative;
-        transition: border-color 0.3s;
-      }
-      .qr-frame.scanned { border-color: var(--_success); }
-      .qr-frame.animated { animation: qr-pulse 2s ease-in-out infinite; }
-      @keyframes qr-pulse {
-        0%, 100% { box-shadow: 0 0 0 0 rgba(0,167,111,0); }
-        50% { box-shadow: 0 0 0 8px rgba(0,167,111,0.15); }
-      }
-      .qr-frame img { display: block; width: 220px; height: 220px; border-radius: 4px; }
-      .qr-badge {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 52px;
-        height: 52px;
-        background: #1b2a4a;
-        border-radius: 10px;
-        padding: 6px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .qr-badge svg { width: 100%; height: 100%; }
-
-      /* Scanned overlay on QR */
-      .scanned-overlay {
-        position: absolute;
-        inset: 0;
-        background: rgba(0,167,111,0.08);
-        border-radius: calc(var(--_radius) - 2px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .scanned-check {
-        width: 48px;
-        height: 48px;
-        background: var(--_success);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        opacity: 0;
-        animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s forwards;
-      }
-      .scanned-check svg { width: 28px; height: 28px; }
-      @keyframes pop-in {
-        from { transform: scale(0.5); opacity: 0; }
-        to   { transform: scale(1); opacity: 1; }
-      }
-
-      /* Status text */
-      .status-text {
-        font-size: 13px;
-        color: var(--_text-muted);
-        min-height: 20px;
-      }
-      .status-scanned {
-        color: var(--_success);
-        font-weight: 600;
-      }
-
-      /* Timer */
-      .timer {
-        font-size: 12px;
-        color: var(--_disabled);
-        margin-top: 8px;
-        font-variant-numeric: tabular-nums;
-        min-height: 18px;
-      }
-
-      /* Success state */
-      .state-approved {
-        padding: 24px 0 12px;
-        animation: fade-scale-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      }
-      @keyframes fade-scale-in {
-        from { transform: scale(0.85); opacity: 0; }
-        to   { transform: scale(1); opacity: 1; }
-      }
-      .success-icon {
-        width: 64px;
-        height: 64px;
-        background: var(--_success);
-        border-radius: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        margin-bottom: 16px;
-      }
-      .success-icon svg { width: 36px; height: 36px; }
-
-      /* Denied / expired / error states */
-      .state-denied, .state-expired, .state-error {
-        padding: 20px 0 8px;
-      }
-      .error-icon, .expired-icon {
-        font-size: 48px;
-        margin-bottom: 12px;
-        line-height: 1;
-        display: block;
-      }
-      .state-denied .error-icon   { color: var(--_error); }
-      .state-expired .expired-icon { color: var(--_disabled); }
-      .state-error .error-icon    { color: var(--_warning); }
-
-      /* Retry button */
-      .retry-btn {
-        margin-top: 14px;
-        padding: 9px 22px;
-        background: var(--_surface);
-        border: 1px solid var(--_border);
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-        color: var(--_text-muted);
-        font-family: inherit;
-        transition: background 0.15s, border-color 0.15s;
-      }
-      .retry-btn:hover { background: var(--_border); color: var(--_text); }
-
-      /* Footer */
-      .footer {
-        margin-top: 18px;
-        font-size: 10px;
-        color: #c4cdd5;
-      }
-      .footer a { color: var(--_disabled); text-decoration: none; }
-      .footer a:hover { text-decoration: underline; }
-    `;
-    }
-    // ---- Event binding -----------------------------------------------------
-    _bindButtonEvents() {
-        const openBtn = this.shadow.getElementById('open-btn');
-        openBtn?.addEventListener('click', () => {
-            this._openModal();
-            this._startAuth();
-        });
-        // Close on overlay click
-        const overlay = this.shadow.getElementById('overlay');
-        overlay?.addEventListener('click', (e) => {
-            if (e.target === overlay)
-                this._closeModal();
-        });
-        this._bindModalButtons();
-    }
-    _bindInlineEvents() {
-        const startBtn = this.shadow.getElementById('start-btn');
-        startBtn?.addEventListener('click', () => {
-            this._startAuth();
-        });
-    }
-    _bindModalButtons() {
-        this.shadow.getElementById('close-btn')?.addEventListener('click', () => this._closeModal());
-        this.shadow.getElementById('retry-btn')?.addEventListener('click', () => this._retry());
-    }
-    // ---- Modal open / close (button display mode) --------------------------
-    _openModal() {
-        const overlay = this.shadow.getElementById('overlay');
-        overlay?.classList.remove('hidden');
-        this._updateBody(this._bodyForStatus('idle'));
-    }
-    _closeModal() {
-        const overlay = this.shadow.getElementById('overlay');
-        overlay?.classList.add('hidden');
-        this._clearTimers();
-        this._sessionId = null;
-        this._codeVerifier = null;
-        this._status = 'idle';
-        this._expiresAt = null;
-    }
-    // ---- Auth flow ---------------------------------------------------------
-    async _startAuth() {
-        this._status = 'loading';
-        this._updateBody(this._bodyForStatus('loading'));
-        try {
-            this._codeVerifier = await this.generateCodeVerifier();
-            const challenge = await this.computeCodeChallenge(this._codeVerifier);
-            const headers = {
-                'Content-Type': 'application/json',
-                'X-Client-Id': this.tenant,
-            };
-            const body = {
-                scopes: this.scopes.split(/\s+/).filter(Boolean),
-                codeChallenge: challenge,
-                codeChallengeMethod: 'S256',
-            };
-            const res = await fetch(`${this.baseUrl}/api/v1/auth-sessions`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify(body),
-            });
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({ message: 'Failed to create session' }));
-                throw new Error(err.message ?? 'Failed to create session');
-            }
-            const session = await res.json();
-            this._sessionId = session.sessionId;
-            this._expiresAt = new Date(session.expiresAt).getTime();
-            this._status = 'pending';
-            this._updateBody(this._bodyForStatus('pending', { qrUrl: session.qrUrl }));
-            this._bindModalButtons();
-            this._startCountdown();
-            this._beginPolling(session.sessionId);
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : 'Unexpected error';
-            this._status = 'error';
-            this._updateBody(this._bodyForStatus('error', { errorMessage: message }));
-            this._bindModalButtons();
-            this.emit('qrauth:error', { message });
-        }
-    }
-    _retry() {
-        this._clearTimers();
-        this._sessionId = null;
-        this._codeVerifier = null;
-        this._status = 'idle';
-        this._expiresAt = null;
-        if (this.display === 'inline') {
-            // Reset inline to show the start button again
-            const inlineBody = this.shadow.getElementById('inline-body');
-            if (inlineBody) {
-                inlineBody.innerHTML = this._inlineIdleContent();
-                this._bindInlineEvents();
-            }
-        }
-        else {
-            this._startAuth();
-        }
-    }
-    // ---- Polling -----------------------------------------------------------
-    _beginPolling(sessionId) {
-        let lastStatus = 'PENDING';
-        let interval = 2000;
-        const maxInterval = 5000;
-        let errorCount = 0;
-        const maxErrors = 20;
-        const poll = async () => {
-            if (!this._sessionId)
-                return; // component was reset
-            let url = `${this.baseUrl}/api/v1/auth-sessions/${sessionId}`;
-            if (this._codeVerifier) {
-                url += `?code_verifier=${encodeURIComponent(this._codeVerifier)}`;
-            }
-            try {
-                const res = await fetch(url, {
-                    headers: { 'X-Client-Id': this.tenant },
-                });
-                const data = await res.json();
-                errorCount = 0;
-                interval = 2000;
-                if (data.status !== lastStatus) {
-                    lastStatus = data.status;
-                    this._handleStatusChange(data.status, data);
-                    if (['APPROVED', 'DENIED', 'EXPIRED'].includes(data.status)) {
-                        return; // stop polling
-                    }
-                }
-                this._pollTimeout = setTimeout(poll, interval);
-            }
-            catch {
-                errorCount++;
-                if (errorCount >= maxErrors) {
-                    this._handleStatusChange('EXPIRED', undefined);
-                    return;
-                }
-                interval = Math.min(interval * 1.5, maxInterval);
-                this._pollTimeout = setTimeout(poll, interval);
-            }
-        };
-        this._pollTimeout = setTimeout(poll, interval);
-    }
-    // ---- Status handling ---------------------------------------------------
-    _handleStatusChange(status, data) {
-        this._status = status;
-        switch (status) {
-            case 'SCANNED': {
-                // Keep QR visible but show scanned overlay
-                const currentQrUrl = this.shadow.querySelector('.qr-frame img')?.src;
-                // Extract the data param from the QR image URL
-                const rawQrUrl = currentQrUrl
-                    ? decodeURIComponent(currentQrUrl.replace(/.*[?&]data=/, '').split('&')[0])
-                    : '';
-                this._updateBody(this._bodyForStatus('SCANNED', {
-                    qrUrl: rawQrUrl,
-                    timerHtml: this._formatTimer(),
-                }));
-                this._bindModalButtons();
-                this.emit('qrauth:scanned', data);
-                break;
-            }
-            case 'APPROVED': {
-                this._clearTimers();
-                this._updateBody(this._bodyForStatus('APPROVED'));
-                this._bindModalButtons();
-                this.emit('qrauth:authenticated', {
-                    sessionId: data?.sessionId,
-                    user: data?.user,
-                    signature: data?.signature,
-                });
-                // Call the on-auth global callback if set
-                const callbackName = this.onAuth;
-                if (callbackName) {
-                    const globalCallback = window[callbackName];
-                    if (typeof globalCallback === 'function') {
-                        globalCallback(data);
-                    }
-                }
-                // Redirect if configured
-                if (this.redirectUrl) {
-                    setTimeout(() => { window.location.href = this.redirectUrl; }, 1500);
-                }
-                else if (this.display === 'button') {
-                    // Auto-close modal after success animation
-                    setTimeout(() => this._closeModal(), 2200);
-                }
-                break;
-            }
-            case 'DENIED':
-                this._clearTimers();
-                this._updateBody(this._bodyForStatus('DENIED'));
-                this._bindModalButtons();
-                this.emit('qrauth:denied');
-                break;
-            case 'EXPIRED':
-                this._clearTimers();
-                this._status = 'EXPIRED';
-                this._updateBody(this._bodyForStatus('EXPIRED'));
-                this._bindModalButtons();
-                this.emit('qrauth:expired');
-                break;
-        }
-    }
-    // ---- Countdown timer ---------------------------------------------------
-    _startCountdown() {
-        this._timerInterval = setInterval(() => {
-            const timerEl = this.shadow.getElementById('timer');
-            if (!timerEl || !this._expiresAt)
-                return;
-            const remaining = Math.max(0, Math.floor((this._expiresAt - Date.now()) / 1000));
-            timerEl.textContent = remaining > 0 ? this._formatTimer(remaining) : '';
-            if (remaining <= 0) {
-                clearInterval(this._timerInterval);
-                this._timerInterval = null;
-                if (this._status === 'pending' || this._status === 'SCANNED') {
-                    this._handleStatusChange('EXPIRED', undefined);
-                }
-            }
-        }, 1000);
-    }
-    _formatTimer(seconds) {
-        const s = seconds ?? (this._expiresAt
-            ? Math.max(0, Math.floor((this._expiresAt - Date.now()) / 1000))
-            : 0);
-        const mins = Math.floor(s / 60);
-        const secs = s % 60;
-        return `Expires in ${mins}:${secs < 10 ? '0' : ''}${secs}`;
-    }
-    // ---- DOM helpers -------------------------------------------------------
-    /** Update just the inner body content without re-rendering the whole component */
-    _updateBody(html) {
-        const bodyEl = this.display === 'inline'
-            ? this.shadow.getElementById('inline-body')
-            : this.shadow.getElementById('modal-body');
-        if (bodyEl)
-            bodyEl.innerHTML = html;
-    }
-    _clearTimers() {
-        if (this._timerInterval) {
-            clearInterval(this._timerInterval);
-            this._timerInterval = null;
-        }
-        if (this._pollTimeout) {
-            clearTimeout(this._pollTimeout);
-            this._pollTimeout = null;
-        }
-    }
-}
-customElements.define('qrauth-login', QRAuthLogin);