@glideidentity/web-client-sdk 4.4.8-beta.1

package/dist/esm/core/phone-auth/ui/mobile-debug-console.js

@@ -0,0 +1,284 @@
+/**
+ * Mobile Debug Console
+ * A lightweight console overlay for debugging on mobile devices where dev tools aren't available
+ */
+export class MobileDebugConsole {
+    constructor() {
+        this.logs = [];
+        this.container = null;
+        this.logsContainer = null;
+        this.floatingToggle = null;
+        this.isAtBottom = true;
+        this.isVisible = true;
+        this.originalConsole = {
+            log: console.log,
+            error: console.error,
+            warn: console.warn,
+            debug: console.debug,
+            info: console.info,
+        };
+        this.interceptConsole();
+        this.createUI();
+    }
+    static init() {
+        if (!MobileDebugConsole.instance) {
+            MobileDebugConsole.instance = new MobileDebugConsole();
+        }
+        return MobileDebugConsole.instance;
+    }
+    static destroy() {
+        if (MobileDebugConsole.instance) {
+            MobileDebugConsole.instance.cleanup();
+            MobileDebugConsole.instance = null;
+        }
+    }
+    interceptConsole() {
+        ['log', 'error', 'warn', 'debug', 'info'].forEach(method => {
+            const originalMethod = this.originalConsole[method];
+            console[method] = (...args) => {
+                // Call original
+                originalMethod.apply(console, args);
+                // Add to our display
+                this.addLog(method, args);
+            };
+        });
+    }
+    addLog(type, args) {
+        const timestamp = new Date().toTimeString().split(' ')[0]; // HH:MM:SS
+        const content = args.map(arg => {
+            if (typeof arg === 'object') {
+                try {
+                    return JSON.stringify(arg, null, 2);
+                }
+                catch (_a) {
+                    return '[Object]';
+                }
+            }
+            return String(arg);
+        }).join(' ');
+        // Create colored log entry
+        const colors = {
+            log: '#fff',
+            error: '#ff6b6b',
+            warn: '#ffd93d',
+            info: '#6bcf7f',
+            debug: '#95a5a6'
+        };
+        const logHtml = `
+      <div style="margin: 4px 0; font-family: monospace; font-size: 11px; color: ${colors[type] || '#fff'};">
+        <span style="color: #666;">[${timestamp}]</span>
+        <span style="color: ${colors[type]}; font-weight: bold; text-transform: uppercase; font-size: 9px;">[${type}]</span>
+        <span style="white-space: pre-wrap; word-break: break-all;">${this.escapeHtml(content)}</span>
+      </div>
+    `;
+        this.logs.push(logHtml);
+        // Keep only last 500 logs
+        if (this.logs.length > 500) {
+            this.logs.shift();
+        }
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        if (!this.logsContainer || !this.isVisible)
+            return;
+        // Check if scrolled to bottom before update
+        this.isAtBottom = this.logsContainer.scrollHeight - this.logsContainer.scrollTop <= this.logsContainer.clientHeight + 50;
+        // Update content
+        this.logsContainer.innerHTML = this.logs.join('');
+        // Auto-scroll only if was at bottom
+        if (this.isAtBottom) {
+            this.logsContainer.scrollTop = this.logsContainer.scrollHeight;
+        }
+    }
+    createUI() {
+        // Create styles
+        const style = document.createElement('style');
+        style.textContent = `
+      #mobile-debug-console {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 45vh;
+        background: rgba(0, 0, 0, 0.95);
+        z-index: 999999;
+        display: flex;
+        flex-direction: column;
+        font-family: monospace;
+        transition: transform 0.3s ease;
+      }
+      
+      #mobile-debug-console.hidden {
+        transform: translateY(100%);
+      }
+      
+      #debug-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        background: #1a1a1a;
+        border-top: 2px solid #333;
+      }
+      
+      #debug-title {
+        color: #0f0;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      
+      #debug-buttons {
+        display: flex;
+        gap: 10px;
+      }
+      
+      #debug-buttons button {
+        padding: 5px 10px;
+        background: #333;
+        color: #fff;
+        border: 1px solid #555;
+        border-radius: 3px;
+        font-size: 11px;
+        cursor: pointer;
+      }
+      
+      #debug-buttons button:active {
+        background: #555;
+      }
+      
+      #debug-logs {
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px;
+        -webkit-overflow-scrolling: touch;
+      }
+      
+      #debug-floating-toggle {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.8);
+        border: 2px solid #0f0;
+        color: #0f0;
+        cursor: pointer;
+        z-index: 999998;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        box-shadow: 0 2px 10px rgba(0, 255, 0, 0.3);
+        transition: all 0.3s ease;
+      }
+      
+      #debug-floating-toggle:hover {
+        background: rgba(0, 0, 0, 0.9);
+        transform: scale(1.1);
+        box-shadow: 0 4px 15px rgba(0, 255, 0, 0.5);
+      }
+      
+      #debug-floating-toggle.visible {
+        display: flex;
+      }
+    `;
+        document.head.appendChild(style);
+        // Create container
+        this.container = document.createElement('div');
+        this.container.id = 'mobile-debug-console';
+        if (!this.isVisible) {
+            this.container.className = 'hidden';
+        }
+        // Create header
+        const header = document.createElement('div');
+        header.id = 'debug-header';
+        const title = document.createElement('div');
+        title.id = 'debug-title';
+        title.textContent = '📱 Mobile Debug Console';
+        const buttons = document.createElement('div');
+        buttons.id = 'debug-buttons';
+        // Clear button
+        const clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear';
+        clearBtn.onclick = () => this.clear();
+        // Show/Hide button
+        const toggleBtn = document.createElement('button');
+        toggleBtn.textContent = 'Hide';
+        toggleBtn.onclick = () => this.toggle();
+        // Close button
+        const closeBtn = document.createElement('button');
+        closeBtn.textContent = '✕';
+        closeBtn.style.color = '#ff6b6b';
+        closeBtn.onclick = () => this.cleanup();
+        buttons.appendChild(clearBtn);
+        buttons.appendChild(toggleBtn);
+        buttons.appendChild(closeBtn);
+        header.appendChild(title);
+        header.appendChild(buttons);
+        // Create logs container
+        this.logsContainer = document.createElement('div');
+        this.logsContainer.id = 'debug-logs';
+        // Track scroll position
+        this.logsContainer.addEventListener('scroll', () => {
+            this.isAtBottom = this.logsContainer.scrollHeight - this.logsContainer.scrollTop <= this.logsContainer.clientHeight + 50;
+        });
+        // Assemble
+        this.container.appendChild(header);
+        this.container.appendChild(this.logsContainer);
+        document.body.appendChild(this.container);
+        // Create floating toggle button
+        this.floatingToggle = document.createElement('button');
+        this.floatingToggle.id = 'debug-floating-toggle';
+        this.floatingToggle.innerHTML = '🖥️'; // Console icon
+        this.floatingToggle.title = 'Show Debug Console';
+        this.floatingToggle.onclick = () => this.toggle();
+        document.body.appendChild(this.floatingToggle);
+        // Store reference for toggle button
+        window.__debugToggleBtn = toggleBtn;
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    toggle() {
+        this.isVisible = !this.isVisible;
+        if (this.container && this.floatingToggle) {
+            if (this.isVisible) {
+                this.container.classList.remove('hidden');
+                this.floatingToggle.classList.remove('visible');
+                window.__debugToggleBtn.textContent = 'Hide';
+                this.updateDisplay();
+            }
+            else {
+                this.container.classList.add('hidden');
+                this.floatingToggle.classList.add('visible');
+                window.__debugToggleBtn.textContent = 'Show';
+            }
+        }
+    }
+    clear() {
+        this.logs = [];
+        if (this.logsContainer) {
+            this.logsContainer.innerHTML = '';
+        }
+    }
+    cleanup() {
+        // Restore original console
+        Object.keys(this.originalConsole).forEach(method => {
+            console[method] = this.originalConsole[method];
+        });
+        // Remove UI
+        if (this.container) {
+            this.container.remove();
+        }
+        // Remove floating toggle
+        if (this.floatingToggle) {
+            this.floatingToggle.remove();
+        }
+        // Clean up references
+        delete window.__debugToggleBtn;
+    }
+}
+MobileDebugConsole.instance = null;

package/dist/esm/core/phone-auth/ui/modal.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Modal UI Component for Phone Authentication
+ *
+ * This file creates the UI components (modals, buttons) that are shown
+ * when the SDK is NOT in headless mode. Think of it like a popup window
+ * that handles the authentication flow for you.
+ */
+import type { InvokeOptions } from '../api-types';
+import type { QRCodeData } from '../strategies/desktop';
+/**
+ * Creates and manages a modal dialog for authentication
+ *
+ * @example
+ * const modal = new AuthModal({
+ *   title: "Verify Your Phone",
+ *   description: "Complete authentication to continue"
+ * });
+ * modal.show();
+ */
+export declare class AuthModal {
+    private container;
+    private backdrop;
+    private isOpen;
+    private options;
+    private callbacks;
+    private closeCallback?;
+    constructor(options?: InvokeOptions['modalOptions'], callbacks?: InvokeOptions['callbacks']);
+    private handleEscapeKey;
+    /**
+     * Shows the modal with a QR code for desktop authentication
+     * Supports both single QR code (legacy) and dual-platform QR codes (iOS + Android)
+     */
+    showQRCode(qrCodeData: string | QRCodeData, statusMessage?: string): void;
+    /**
+     * Creates a modal with iOS/Android platform toggle
+     */
+    private createDualPlatformQRModal;
+    /**
+     * Sets a callback to be called when the modal is cancelled/closed
+     */
+    setCloseCallback(callback: () => void): void;
+    /**
+     * Shows the modal with a button for Link authentication (App Clips)
+     * IMPORTANT: The button click is required for iOS to recognize the app link
+     */
+    showLinkButton(url: string, buttonText?: string): Promise<void>;
+    /**
+     * Shows the modal with a button for TS43 authentication
+     * IMPORTANT: The button click is required for Digital Credentials API (transient activation)
+     */
+    showTS43Button(onAuthenticate: () => Promise<any>): Promise<any>;
+    /**
+     * Updates the status message in the modal
+     */
+    updateStatus(message: string, isError?: boolean): void;
+    /**
+     * Creates the modal HTML structure
+     */
+    private createModal;
+    /**
+     * Injects CSS styles for the modal
+     */
+    private injectStyles;
+    /**
+     * Shows the modal with animation
+     */
+    show(): void;
+    /**
+     * Setup click handlers for iOS/Android platform toggle
+     */
+    private setupPlatformToggles;
+    /**
+     * Closes the modal with animation
+     */
+    close(): void;
+    /**
+     * Removes modal elements from DOM
+     */
+    private cleanup;
+    /**
+     * Check if modal is currently open
+     */
+    isModalOpen(): boolean;
+}