@polyguard/sdk 1.2.3 → 1.3.0

package/src/messageHandler.js

@@ -0,0 +1,77 @@
+import { showSpinner, renderMobileButton, renderQRCode } from './ui.js';
+
+/**
+ * Handle a WebSocket message event.
+ * @param {MessageEvent} event
+ * @param {Object} ctx - Context object with references from the verify() closure:
+ *   { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt }
+ */
+export function handleWebSocketMessage(event, ctx) {
+  const { ws, qrDiv, isTargetMode, cleanup, returnError, resolve, rawJwt } = ctx;
+
+  let data;
+  try {
+    data = JSON.parse(event.data);
+  } catch (e) {
+    console.error('Invalid message format from server', e);
+    returnError('Invalid message format from server');
+    return;
+  }
+
+  if (!data) {
+    console.error('Unknown message type from server', data);
+    returnError('Unknown message type from server');
+    ws.close();
+    return;
+  }
+
+  // Backend-initiated latency measurement
+  if (data.type === 'ping' && typeof data.seq !== 'undefined') {
+    ws.send(JSON.stringify({ type: 'pong', seq: data.seq }));
+    return;
+  }
+
+  if (data.url) {
+    window.location.assign(data.url);
+    return;
+  }
+
+  if (data.qr_url) {
+    const pcre = data.qr_url.match(/pcre=([^&]*)/);
+    console.log('pcre', pcre);
+    if (pcre) {
+      ws.send(JSON.stringify({ type: 'pong', seq: pcre[1] }));
+    }
+    if (qrDiv) {
+      const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+      if (isMobile) {
+        renderMobileButton(qrDiv, data.qr_url, isTargetMode);
+      } else {
+        renderQRCode(qrDiv, data.qr_url);
+      }
+    }
+    return;
+  }
+
+  if (data.jwt) {
+    cleanup();
+    ws.close();
+    resolve(rawJwt ? data : data.jwt);
+    return;
+  }
+
+  if (data.status) {
+    if (qrDiv) showSpinner(qrDiv);
+    return;
+  }
+
+  if (data.error) {
+    returnError(data.error);
+    ws.close();
+    return;
+  }
+
+  console.error('Unknown message type from server', data);
+  returnError('Unknown message type from server');
+  ws.close();
+}

package/src/ticketService.js

@@ -0,0 +1,24 @@
+export async function fetchTicket({ apiServer, appId, link_uuid, requiredProofs, scanType }) {
+  const ticketUrl = link_uuid
+    ? `https://${apiServer}/v2/ticket/${appId}/${link_uuid}`
+    : `https://${apiServer}/v2/ticket/${appId}`;
+
+  const ticketRes = await fetch(ticketUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ requiredProofs, scanType }),
+  });
+
+  if (!ticketRes.ok) {
+    throw new Error('Failed to get ticket');
+  }
+
+  const ticketData = await ticketRes.json();
+  const ticket = ticketData.ticket;
+
+  if (!ticket) {
+    throw new Error('No ticket returned from server');
+  }
+
+  return ticket;
+}

package/src/ui.js

@@ -0,0 +1,82 @@
+import QRCode from 'qrcode';
+
+// Animated spinner SVG
+export 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="#407796" stroke-width="8" fill="none"
+          stroke-dasharray="251.2" stroke-dashoffset="188.4"
+          class="spinner-circle" stroke-linecap="round" />
+</svg>`;
+
+export function 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; color: #222; 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: 'IBM Plex Sans', '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; color: #222; cursor: pointer; z-index: 2;">&times;</button>
+      <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
+      <div style="font-size: 13px; 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; color: #222;">Scan this QR code to verify your identity.</div>
+      <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
+        <span>&#128274; Encrypted</span>
+        <span>&#128241; On-device</span>
+        <span>&#9202; Expires</span>
+      </div>
+      <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
+      <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; 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;
+}
+
+export function showSpinner(qrDiv) {
+  qrDiv.innerHTML = LOADING_SPINNER;
+}
+
+export function renderMobileButton(qrDiv, qrUrl, isTargetMode) {
+  qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #407796; color: #fff; 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(qrUrl);
+
+  // 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.';
+    }
+  }
+}
+
+export function renderQRCode(qrDiv, qrUrl) {
+  const startTime = Date.now();
+  console.log('time before qr code', startTime);
+  QRCode.toString(qrUrl, { type: 'svg' }, (err, svg) => {
+    if (!err) qrDiv.innerHTML = svg;
+  });
+  console.log('time to generate qr code', Date.now() - startTime);
+}

package/vitest.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/__tests__/**/*.test.js'],
+    exclude: ['src/generated/**'],
+  },
+});