@polyguard/sdk 1.0.3 → 1.0.7

package/dist/sdk.js

@@ -11006,13 +11006,13 @@
         <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>
     `;
-      document.body.appendChild(modal);
       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,8 +11030,11 @@
           cleanup();
           reject(new Error("User cancelled"));
         }
-        modal.querySelector("#polyguard-modal-close").onclick = handleClose;
-        modal.querySelector("#polyguard-modal-cancel").onclick = handleClose;
+        function showModal() {
+          document.body.appendChild(modal);
+          modal.querySelector("#polyguard-modal-close").onclick = handleClose;
+          modal.querySelector("#polyguard-modal-cancel").onclick = handleClose;
+        }
         try {
           clearError();
           const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
@@ -11063,7 +11066,15 @@
                 window.location.assign(data.url);
                 return;
               } else if (data && data.qr_url) {
-                console.log("qr_url", 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 isMobile = /Mobi|Android/i.test(navigator.userAgent);
@@ -11080,9 +11091,12 @@
                     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);
                   import_qrcode.default.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) {
@@ -11093,14 +11107,16 @@
               } else if (data && data.status) {
                 return;
               } else {
+                console.error("Unknown message type from server", data);
                 showError(`Unknown message type from server`);
               }
             } catch (e) {
+              console.error("Invalid message format from server", e);
               showError("Invalid message format from server");
-              ws.close();
             }
           });
           ws.addEventListener("error", () => {
+            console.error("WebSocket error");
             showError("WebSocket error");
           });
           ws.addEventListener("close", () => {

package/package.json

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

package/src/PolyguardWebsocketClientImpl.js

@@ -64,15 +64,18 @@ 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>
     `;
-    document.body.appendChild(modal);
+    
     // 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');
         if (errDiv) {
@@ -91,8 +94,15 @@ export class PolyguardWebsocketClientImpl {
         cleanup();
         reject(new Error('User cancelled'));
       }
-      modal.querySelector('#polyguard-modal-close').onclick = handleClose;
-      modal.querySelector('#polyguard-modal-cancel').onclick = handleClose;
+
+      // 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;
+      }
+      
       // Start ticket/ws flow
       try {
         clearError();
@@ -127,7 +137,17 @@ export class PolyguardWebsocketClientImpl {
               window.location.assign(data.url);
               return;
             } else if (data && data.qr_url) {
-              console.log('qr_url', data.qr_url);
+              // Show modal only when QR code is received
+              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;
@@ -150,10 +170,13 @@ export class PolyguardWebsocketClientImpl {
                   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) {
@@ -165,14 +188,17 @@ export class PolyguardWebsocketClientImpl {
               // ignore
               return;
             } else {
+              console.error('Unknown message type from server', data);
               showError(`Unknown message type from server`);
             }
           } catch (e) {
+            console.error('Invalid message format from server', e);
             showError('Invalid message format from server');
-            ws.close();
+            // ws.close();
           }
         });
         ws.addEventListener('error', () => {
+          console.error('WebSocket error');
           showError('WebSocket error');
         });
         ws.addEventListener('close', () => {