@polyguard/sdk 1.2.3 → 1.3.0

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@polyguard/sdk",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "type": "module",
-  "main": "dist/sdk.js",
-  "module": "dist/sdk.js",
-  "browser": "dist/sdk.js",
+  "main": "dist/sdk.esm.js",
+  "module": "dist/sdk.esm.js",
+  "browser": "dist/sdk.esm.js",
   "exports": {
     ".": {
-      "import": "./dist/sdk.js",
-      "require": "./dist/sdk.js",
-      "default": "./dist/sdk.js"
+      "import": "./dist/sdk.esm.js",
+      "require": "./dist/sdk.esm.js",
+      "default": "./dist/sdk.esm.js"
     }
   },
   "scripts": {
-    "build": "esbuild src/index.js --bundle --format=esm --outfile=dist/sdk.js",
+    "build": "npm run build:esm && npm run build:iife",
+    "build:esm": "esbuild src/index.js --bundle --format=esm --outfile=dist/sdk.esm.js",
+    "build:iife": "esbuild src/browser.js --bundle --format=iife --global-name=Polyguard --outfile=dist/sdk.js",
     "prepare": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "regenerate-client": "bash scripts/regenerate-client.sh"
   },
   "keywords": [],
@@ -28,7 +31,9 @@
     "superagent": "^10.3.0"
   },
   "devDependencies": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "jsdom": "^28.0.0",
+    "vitest": "^4.0.18"
   },
   "repository": {
     "type": "git",

package/src/PolyguardWebsocketClientImpl.js

@@ -1,24 +1,8 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import * as PolyguardApi from './generated/src';
-import QRCode from 'qrcode';
-
-// Animated spinner SVG
-const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
-  <style>
-    .spinner-circle {
-      animation: spin 1s linear infinite;
-      transform-origin: 100px 100px;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-  </style>
-  <circle cx="100" cy="100" r="80" stroke="#e0e0e0" stroke-width="8" fill="none" />
-  <circle cx="100" cy="100" r="80" stroke="#7be7c2" stroke-width="8" fill="none" 
-          stroke-dasharray="251.2" stroke-dashoffset="188.4" 
-          class="spinner-circle" stroke-linecap="round" />
-</svg>`;
+import { buildModal, showSpinner } from './ui.js';
+import { fetchTicket } from './ticketService.js';
+import { handleWebSocketMessage } from './messageHandler.js';
 
 // Implementation class for websocket integration
 export class PolyguardWebsocketClientImpl {
@@ -53,71 +37,35 @@ export class PolyguardWebsocketClientImpl {
   }
 
   buildModal() {
-    const modal = document.createElement('div');
-    modal.style.position = 'fixed';
-    modal.style.top = '0';
-    modal.style.left = '0';
-    modal.style.width = '100vw';
-    modal.style.height = '100vh';
-    modal.style.background = 'rgba(0,0,0,0.45)';
-    modal.style.display = 'flex';
-    modal.style.alignItems = 'flex-start';
-    modal.style.justifyContent = 'center';
-    modal.style.overflowY = 'auto';
-    modal.style.paddingTop = '24px';
-    modal.innerHTML = `
-      <div id="polyguard-modal-content" style="background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
-        <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; cursor: pointer; z-index: 2;">&times;</button>
-        <h2 style="margin-top: 0; font-size: 1.5rem; font-weight: 700;">Quick Identity Verification</h2>
-        <div style="font-size: 15px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
-        <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
-        <div style="margin-bottom: 12px; font-weight: 600;">Scan this QR code to verify your identity.</div>
-        <ul style="text-align: left; margin: 0 0 16px 0; padding-left: 20px; font-size: 14px; color: #444;">
-          <li>We use the Polyguard service to verify your identity.</li>
-          <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
-          <li>Your credentials remain private on your device.</li>
-        </ul>
-        <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
-        <button id="polyguard-modal-cancel" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
-      </div>
-    `;
-    return modal;
+    return buildModal();
   }
 
   async verify(target = null, rawJwt = false) {
-    // Only websocket integration is supported for modal
     let modal = null;
     let qrDiv = null;
     let isTargetMode = false;
-    
+
     if (target) {
-      // Target mode: render QR code in specified element
       isTargetMode = true;
       qrDiv = document.getElementById(target);
       if (!qrDiv) {
         throw new Error(`Target element with ID '${target}' not found`);
       }
     } else {
-      // Modal mode: create modal DOM
-      modal = this.buildModal();
+      modal = buildModal();
     }
-    
+
     if (!isTargetMode) {
-      // Show modal immediately with spinner
       document.body.appendChild(modal);
-      
-      // Initialize QR div with spinner
       qrDiv = modal.querySelector('#polyguard-qr');
     }
-    
+
     if (qrDiv) {
-      qrDiv.innerHTML = LOADING_SPINNER;
+      showSpinner(qrDiv);
     }
-    
-    // Helper to cleanup modal or target
+
     function cleanup() {
       if (isTargetMode) {
-        // Clear target element content
         if (qrDiv) {
           qrDiv.innerHTML = '';
         }
@@ -125,28 +73,27 @@ export class PolyguardWebsocketClientImpl {
         modal.parentNode.removeChild(modal);
       }
     }
-    // Promise for JWT
+
     return new Promise(async (resolve, reject) => {
       let ws = null;
       let closed = false;
-      
+
       function returnError(msg, score = "OFFLINE") {
-          if (isTargetMode) {
-            // In target mode, just log the error and resolve with error data
-            console.error('Polyguard Error:', msg);
+        if (isTargetMode) {
+          console.error('Polyguard Error:', msg);
+          cleanup();
+          resolve({presence: { score: score, msg: msg }});
+        } else {
+          const errDiv = modal.querySelector('#polyguard-error');
+          if (errDiv) {
+            errDiv.textContent = msg;
+            errDiv.style.display = 'block';
+          }
+          setTimeout(() => {
             cleanup();
             resolve({presence: { score: score, msg: msg }});
-          } else {
-            const errDiv = modal.querySelector('#polyguard-error');
-            if (errDiv) {
-              errDiv.textContent = msg;
-              errDiv.style.display = 'block';
-            }
-            setTimeout(() => {
-              cleanup();
-              resolve({presence: { score: score, msg: msg }});
-            }, 1250);
-          }
+          }, 1250);
+        }
       }
       function clearError() {
         if (!isTargetMode) {
@@ -154,42 +101,30 @@ export class PolyguardWebsocketClientImpl {
           if (errDiv) errDiv.style.display = 'none';
         }
       }
-      // Close/cancel handler
       function handleClose() {
         closed = true;
         if (ws) ws.close();
         cleanup();
         reject(new Error('User cancelled'));
       }
-      
-      // Set up close/cancel handlers (only in modal mode)
+
       if (!isTargetMode) {
         modal.querySelector('#polyguard-modal-close').onclick = handleClose;
         modal.querySelector('#polyguard-modal-cancel').onclick = handleClose;
       }
-      
-      // Start ticket/ws flow
+
       try {
         clearError();
         const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-        const ticketUrl = this.link_uuid 
-          ? `https://${this.apiServer}/v2/ticket/${this.appId}/${this.link_uuid}`
-          : `https://${this.apiServer}/v2/ticket/${this.appId}`;
-        const ticketRes = await fetch(ticketUrl, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ requiredProofs: this.requiredProofs, scanType: this.scanType }),
+
+        const newTicket = await fetchTicket({
+          apiServer: this.apiServer,
+          appId: this.appId,
+          link_uuid: this.link_uuid,
+          requiredProofs: this.requiredProofs,
+          scanType: this.scanType,
         });
-        if (!ticketRes.ok) {
-          returnError('Failed to get ticket');
-          return;
-        }
-        const ticketData = await ticketRes.json();
-        const newTicket = ticketData.ticket;
-        if (!newTicket) {
-          returnError('No ticket returned from server');
-          return;
-        }
+
         const wsUrl = `${wsProtocol}://${this.apiServer}/v2/realtime/${newTicket}`;
         const options = {
           maxRetries: 10,
@@ -199,86 +134,10 @@ export class PolyguardWebsocketClientImpl {
           reconnectionDelayGrowFactor: 1.5,
         };
         ws = new ReconnectingWebSocket(wsUrl, [], options);
-        ws.addEventListener('message', (event) => {
-          try {
-            const data = JSON.parse(event.data);
-            // --- BEGIN: Backend-initiated latency measurement ---
-            if (data && data.type === 'ping' && typeof data.seq !== 'undefined') {
-              ws.send(JSON.stringify({ type: 'pong', seq: data.seq }));
-              return;
-            }
-            // --- END: Backend-initiated latency measurement ---
-            if (data && data.url) {
-              window.location.assign(data.url);
-              return;
-            } else if (data && data.qr_url) {
-              // Replace spinner with QR code content
-              
-              const pcre = data.qr_url.match(/pcre=([^&]*)/);
-              console.log('pcre', pcre);
-              if (pcre) {
-                ws.send(JSON.stringify({ type: 'pong', seq: pcre[1] }));
-              }
-
-              if (!qrDiv) return;
-
-              const isMobile = /Mobi|Android/i.test(navigator.userAgent);
 
-              if (isMobile) {
-                // For mobile, display a button to open the app
-                qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
-                qrDiv.style.background = 'transparent';
-                qrDiv.querySelector('#polyguard-open-app-button').onclick = () => window.location.assign(data.qr_url);
+        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+        ws.addEventListener('message', (event) => handleWebSocketMessage(event, ctx));
 
-                // Update surrounding text only in modal mode
-                if (!isTargetMode) {
-                  const instructionText = qrDiv.nextElementSibling;
-                  if (instructionText) {
-                    instructionText.textContent = 'Tap the button to verify with the Polyguard app.';
-                  }
-                  const instructionList = instructionText.nextElementSibling;
-                  if (instructionList && instructionList.children[1]) {
-                    instructionList.children[1].textContent = 'If you do not have the Polyguard app, you will be redirected to download it.';
-                  }
-                }
-              } else {
-                const startTime = Date.now();
-                console.log('time before qr code', startTime);
-                // For desktop, display the QR code
-                QRCode.toString(data.qr_url, { type: 'svg' }, (err, svg) => {
-                  if (!err) qrDiv.innerHTML = svg;
-                });
-                console.log('time to generate qr code', Date.now() - startTime);
-              }
-              return;
-            } else if (data && data.jwt) {
-              cleanup();
-              ws.close();
-              resolve(rawJwt ? data : data.jwt);
-              return;
-            } else if (data && data.status) {
-              // ignore
-              // generate a spinner in svg and set the qr code to it
-              if (!qrDiv) return;
-              qrDiv.innerHTML = LOADING_SPINNER;
-              return;
-
-            } else if (data && data.error) {
-              returnError(data.error);
-              ws.close();
-              return;
-            } else {
-              console.error('Unknown message type from server', data);
-              returnError(`Unknown message type from server`);
-              ws.close();
-              return;
-            }
-          } catch (e) {
-            console.error('Invalid message format from server', e);
-            returnError('Invalid message format from server');
-            // ws.close();
-          }
-        });
         ws.addEventListener('error', () => {
           console.error('WebSocket error');
           returnError('WebSocket error');
@@ -287,7 +146,9 @@ export class PolyguardWebsocketClientImpl {
           if (!closed) cleanup();
         });
       } catch (err) {
-        returnError('Failed to connect to WebSocket');
+        returnError(err.message === 'Failed to get ticket' || err.message === 'No ticket returned from server'
+          ? err.message
+          : 'Failed to connect to WebSocket');
       }
     });
   }

package/src/__tests__/PolyguardClient.test.js

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DEFAULT_PARAMS } from './helpers/fixtures.js';
+
+// Mock the WebSocket impl so the facade tests never touch real internals
+vi.mock('../PolyguardWebsocketClientImpl', () => {
+  class FakeImpl {
+    constructor(params = {}) {
+      this.appId = params.appId;
+      this.apiServer = params.apiServer;
+      this.integrationType = 'websocket';
+      this.blockingApi = { fake: true };
+      this.callsApi = { fake: true };
+    }
+    async verify(...args) {
+      return { args, result: 'fake-jwt' };
+    }
+  }
+  return { PolyguardWebsocketClientImpl: FakeImpl };
+});
+
+// Import after mock is set up
+const { PolyguardClient } = await import('../PolyguardClient.js');
+
+describe('PolyguardClient', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('defaults to websocket implementation', () => {
+    const client = new PolyguardClient(DEFAULT_PARAMS);
+    expect(client._impl).toBeDefined();
+    expect(client._impl.integrationType).toBe('websocket');
+  });
+
+  it('explicit integrationType websocket works the same', () => {
+    const client = new PolyguardClient({ ...DEFAULT_PARAMS, integrationType: 'websocket' });
+    expect(client._impl.integrationType).toBe('websocket');
+  });
+
+  it('copies properties from impl to facade', () => {
+    const client = new PolyguardClient(DEFAULT_PARAMS);
+    expect(client.appId).toBe(DEFAULT_PARAMS.appId);
+    expect(client.apiServer).toBe(DEFAULT_PARAMS.apiServer);
+    expect(client.integrationType).toBe('websocket');
+    expect(client.blockingApi).toEqual({ fake: true });
+    expect(client.callsApi).toEqual({ fake: true });
+  });
+
+  it('verify() delegates to _impl.verify() with all args forwarded', async () => {
+    const client = new PolyguardClient(DEFAULT_PARAMS);
+    const spy = vi.spyOn(client._impl, 'verify');
+    await client.verify('my-target', true);
+    expect(spy).toHaveBeenCalledWith('my-target', true);
+  });
+
+  it('verify() returns the impl result', async () => {
+    const client = new PolyguardClient(DEFAULT_PARAMS);
+    const result = await client.verify('t', false);
+    expect(result).toEqual({ args: ['t', false], result: 'fake-jwt' });
+  });
+
+  it('constructor with no params does not throw', () => {
+    expect(() => new PolyguardClient()).not.toThrow();
+  });
+});