@polyguard/sdk 1.0.8 → 1.0.9

package/dist/sdk.js

@@ -10950,6 +10950,22 @@
 
   // src/PolyguardWebsocketClientImpl.js
   var import_qrcode = __toESM(require_browser());
+  var 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>`;
   var PolyguardWebsocketClientImpl = class {
     constructor(params = {}) {
       this.apiClient = new ApiClient_default();
@@ -10977,7 +10993,7 @@
       this.callbackUrl = callbackUrl;
       this.cookieName = cookieName;
     }
-    async verify() {
+    buildModal() {
       const modal = document.createElement("div");
       modal.style.position = "fixed";
       modal.style.top = "0";
@@ -11006,13 +11022,21 @@
         <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;
+    }
+    async verify() {
+      const modal = this.buildModal();
+      document.body.appendChild(modal);
+      const qrDiv = modal.querySelector("#polyguard-qr");
+      if (qrDiv) {
+        qrDiv.innerHTML = LOADING_SPINNER;
+      }
       function cleanup() {
         if (modal.parentNode) modal.parentNode.removeChild(modal);
       }
       return new Promise(async (resolve, reject) => {
         let ws = null;
         let closed = false;
-        let modalShown = false;
         function showError(msg) {
           const errDiv = modal.querySelector("#polyguard-error");
           if (errDiv) {
@@ -11030,11 +11054,8 @@
           cleanup();
           reject(new Error("User cancelled"));
         }
-        function showModal() {
-          document.body.appendChild(modal);
-          modal.querySelector("#polyguard-modal-close").onclick = handleClose;
-          modal.querySelector("#polyguard-modal-cancel").onclick = handleClose;
-        }
+        modal.querySelector("#polyguard-modal-close").onclick = handleClose;
+        modal.querySelector("#polyguard-modal-cancel").onclick = handleClose;
         try {
           clearError();
           const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
@@ -11066,23 +11087,19 @@
                 window.location.assign(data.url);
                 return;
               } else if (data && data.qr_url) {
-                if (!modalShown) {
-                  showModal();
-                  modalShown = true;
-                }
                 const pcre = data.qr_url.match(/pcre=([^&]*)/);
                 console.log("pcre", pcre);
                 if (pcre) {
                   ws.send(JSON.stringify({ type: "pong", seq: pcre[1] }));
                 }
-                const qrDiv = modal.querySelector("#polyguard-qr");
-                if (!qrDiv) return;
+                const qrDiv2 = modal.querySelector("#polyguard-qr");
+                if (!qrDiv2) return;
                 const isMobile = /Mobi|Android/i.test(navigator.userAgent);
                 if (isMobile) {
-                  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 instructionText = qrDiv.nextElementSibling;
+                  qrDiv2.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>`;
+                  qrDiv2.style.background = "transparent";
+                  qrDiv2.querySelector("#polyguard-open-app-button").onclick = () => window.location.assign(data.qr_url);
+                  const instructionText = qrDiv2.nextElementSibling;
                   if (instructionText) {
                     instructionText.textContent = "Tap the button to verify with the Polyguard app.";
                   }
@@ -11094,7 +11111,7 @@
                   const startTime = Date.now();
                   console.log("time before qr code", startTime);
                   import_qrcode.default.toString(data.qr_url, { type: "svg" }, (err, svg) => {
-                    if (!err) qrDiv.innerHTML = svg;
+                    if (!err) qrDiv2.innerHTML = svg;
                   });
                   console.log("time to generate qr code", Date.now() - startTime);
                 }
@@ -11105,25 +11122,9 @@
                 ws.close();
                 return;
               } else if (data && data.status) {
-                const qrDiv = modal.querySelector("#polyguard-qr");
-                if (!qrDiv) return;
-                const 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>`;
-                qrDiv.innerHTML = spinner;
+                const qrDiv2 = modal.querySelector("#polyguard-qr");
+                if (!qrDiv2) return;
+                qrDiv2.innerHTML = LOADING_SPINNER;
                 return;
               } else {
                 console.error("Unknown message type from server", data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyguard/sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/sdk.js",
   "module": "dist/sdk.js",
   "browser": "dist/sdk.js",

package/src/PolyguardWebsocketClientImpl.js

@@ -2,6 +2,24 @@ 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>`;
+
 // Implementation class for websocket integration
 export class PolyguardWebsocketClientImpl {
   constructor(params = {}) {
@@ -33,9 +51,7 @@ export class PolyguardWebsocketClientImpl {
     this.cookieName = cookieName;
   }
 
-  async verify() {
-    // Only websocket integration is supported for modal
-    // Create modal DOM
+  buildModal() {
     const modal = document.createElement('div');
     modal.style.position = 'fixed';
     modal.style.top = '0';
@@ -64,17 +80,31 @@ export class PolyguardWebsocketClientImpl {
         <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;
+  }
+
+  async verify() {
+    // Only websocket integration is supported for modal
+    // Create modal DOM
+    const modal = this.buildModal();
+    
+    // Show modal immediately with spinner
+    document.body.appendChild(modal);
+    
+    // Initialize QR div with spinner
+    const qrDiv = modal.querySelector('#polyguard-qr');
+    if (qrDiv) {
+      qrDiv.innerHTML = LOADING_SPINNER;
+    }
     
     // Helper to cleanup modal
     function cleanup() {
       if (modal.parentNode) modal.parentNode.removeChild(modal);
     }
-    
     // Promise for JWT
     return new Promise(async (resolve, reject) => {
       let ws = null;
       let closed = false;
-      let modalShown = false;
       
       function showError(msg) {
         const errDiv = modal.querySelector('#polyguard-error');
@@ -94,14 +124,10 @@ export class PolyguardWebsocketClientImpl {
         cleanup();
         reject(new Error('User cancelled'));
       }
-
-      // Helper to show modal (only called when QR code is received)
-      function showModal() {
-        document.body.appendChild(modal);
-        // Set up close/cancel handlers after modal is in DOM
-        modal.querySelector('#polyguard-modal-close').onclick = handleClose;
-        modal.querySelector('#polyguard-modal-cancel').onclick = handleClose;
-      }
+      
+      // Set up close/cancel handlers
+      modal.querySelector('#polyguard-modal-close').onclick = handleClose;
+      modal.querySelector('#polyguard-modal-cancel').onclick = handleClose;
       
       // Start ticket/ws flow
       try {
@@ -137,11 +163,7 @@ export class PolyguardWebsocketClientImpl {
               window.location.assign(data.url);
               return;
             } else if (data && data.qr_url) {
-              // Show modal only when QR code is received
-              if (!modalShown) {
-                showModal();
-                modalShown = true;
-              }
+              // Replace spinner with QR code content
               
               const pcre = data.qr_url.match(/pcre=([^&]*)/);
               console.log('pcre', pcre);
@@ -189,23 +211,7 @@ export class PolyguardWebsocketClientImpl {
               // generate a spinner in svg and set the qr code to it
               const qrDiv = modal.querySelector('#polyguard-qr');
               if (!qrDiv) return;
-              const 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>`;
-              qrDiv.innerHTML = spinner;
+              qrDiv.innerHTML = LOADING_SPINNER;
               return;
             } else {
               console.error('Unknown message type from server', data);