@youidian/sdk 3.3.3 → 3.3.4

package/dist/client.cjs

@@ -132,8 +132,8 @@ var HostedFrameModal = class {
     __publicField(this, "messageHandler", null);
   }
   openHostedFrame(url, options) {
-    if (typeof document === "undefined") return;
-    if (this.modal) return;
+    if (typeof document === "undefined") return null;
+    if (this.modal) return null;
     this.modal = document.createElement("div");
     Object.assign(this.modal.style, {
       position: "fixed",
@@ -210,9 +210,13 @@ var HostedFrameModal = class {
       if (!data || typeof data !== "object" || !data.type) {
         return;
       }
-      options.onMessage(data, container);
+      options.onMessage(data, container, event);
     };
     window.addEventListener("message", this.messageHandler);
+    return {
+      container,
+      iframe: this.iframe
+    };
   }
   close() {
     if (typeof window === "undefined") return;
@@ -378,6 +382,7 @@ var LOGIN_CALLBACK_RESULT_PARAM = "yd_login_result";
 var LOGIN_CALLBACK_RETURN_HASH_PARAM = "yd_login_return_hash";
 var LOGIN_CALLBACK_STATE_PARAM = "yd_login_state";
 var LOGIN_CALLBACK_STORAGE_PREFIX = "yd-login-callback:";
+var DEFAULT_IFRAME_LOAD_TIMEOUT_MS = 6e3;
 function decodeCallbackPayload(value) {
   try {
     const padded = value.padEnd(
@@ -505,6 +510,138 @@ function logLoginWarn(message, details) {
   if (typeof console === "undefined") return;
   console.warn(LOGIN_UI_LOG_PREFIX, message, details || {});
 }
+function getIframeLoadTimeoutMs(options) {
+  const timeout = options?.iframeLoadTimeoutMs;
+  if (typeof timeout !== "number" || !Number.isFinite(timeout)) {
+    return DEFAULT_IFRAME_LOAD_TIMEOUT_MS;
+  }
+  return Math.max(0, timeout);
+}
+function applyLoginPanelStyle(panel) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid rgba(229,229,229,0.92)",
+    borderRadius: "28px",
+    background: "rgba(255,255,255,0.94)",
+    color: "#0f172a",
+    padding: "24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "0 18px 50px rgba(15,15,15,0.06)",
+    backdropFilter: "blur(16px)"
+  });
+}
+function createLoginPanelContent() {
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    maxWidth: "360px"
+  });
+  const badge = document.createElement("div");
+  badge.textContent = "YOUiDIAN";
+  Object.assign(badge.style, {
+    display: "inline-flex",
+    alignItems: "center",
+    border: "1px solid rgba(229,229,229,0.92)",
+    borderRadius: "9999px",
+    background: "#fafafa",
+    color: "#171717",
+    fontSize: "11px",
+    fontWeight: "700",
+    letterSpacing: "0.22em",
+    lineHeight: "1",
+    marginBottom: "18px",
+    padding: "8px 12px"
+  });
+  content.appendChild(badge);
+  return content;
+}
+function createLoginPanelTitle(value) {
+  const title = document.createElement("div");
+  title.textContent = value;
+  Object.assign(title.style, {
+    color: "#171717",
+    fontSize: "18px",
+    fontWeight: "700",
+    lineHeight: "1.35",
+    marginBottom: "10px"
+  });
+  return title;
+}
+function createLoginPanelDescription(value) {
+  const description = document.createElement("div");
+  description.textContent = value;
+  Object.assign(description.style, {
+    color: "#525252",
+    fontSize: "14px",
+    lineHeight: "1.6",
+    marginBottom: "20px"
+  });
+  return description;
+}
+function ensureLoginLoadingStyles() {
+  if (document.getElementById("youidian-login-loading-style")) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = "youidian-login-loading-style";
+  style.textContent = "@keyframes youidian-login-spin{to{transform:rotate(360deg)}}";
+  document.head.appendChild(style);
+}
+function createLoginLoadingPanel(options) {
+  ensureLoginLoadingStyles();
+  const panel = document.createElement("div");
+  applyLoginPanelStyle(panel);
+  const content = createLoginPanelContent();
+  const spinner = document.createElement("div");
+  Object.assign(spinner.style, {
+    width: "22px",
+    height: "22px",
+    borderRadius: "9999px",
+    border: "2px solid rgba(23,23,23,0.16)",
+    borderTopColor: "#171717",
+    margin: "0 auto 18px",
+    animation: "youidian-login-spin 780ms linear infinite"
+  });
+  content.appendChild(spinner);
+  content.appendChild(createLoginPanelTitle(options.title));
+  content.appendChild(createLoginPanelDescription(options.description));
+  panel.appendChild(content);
+  return panel;
+}
+function createLoginRedirectingPanel(options) {
+  return createLoginLoadingPanel(options);
+}
+function createLoginFallbackPanel(options) {
+  const panel = document.createElement("div");
+  applyLoginPanelStyle(panel);
+  const content = createLoginPanelContent();
+  const button = document.createElement("button");
+  button.type = "button";
+  button.textContent = options.buttonText;
+  Object.assign(button.style, {
+    width: "100%",
+    border: "0",
+    borderRadius: "12px",
+    background: "#0a0a0a",
+    color: "#ffffff",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: "700",
+    minHeight: "44px",
+    padding: "12px 16px",
+    boxShadow: "0 12px 28px rgba(17,17,17,0.14)"
+  });
+  button.onclick = options.onRedirect;
+  content.appendChild(createLoginPanelTitle(options.title));
+  content.appendChild(createLoginPanelDescription(options.description));
+  content.appendChild(button);
+  panel.appendChild(content);
+  return panel;
+}
 var LoginUI = class extends HostedFrameModal {
   constructor() {
     super(...arguments);
@@ -513,6 +650,11 @@ var LoginUI = class extends HostedFrameModal {
     __publicField(this, "callbackStorageHandler", null);
     __publicField(this, "popupMessageHandler", null);
     __publicField(this, "closeMonitor", null);
+    __publicField(this, "iframeFallbackPanel", null);
+    __publicField(this, "iframeLoadingPanel", null);
+    __publicField(this, "iframeLoadTimer", null);
+    __publicField(this, "iframeRedirectTimer", null);
+    __publicField(this, "iframeReady", false);
     __publicField(this, "completed", false);
   }
   cleanup() {
@@ -530,11 +672,114 @@ var LoginUI = class extends HostedFrameModal {
     if (typeof window !== "undefined" && this.closeMonitor) {
       window.clearInterval(this.closeMonitor);
     }
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+    }
+    if (typeof window !== "undefined" && this.iframeRedirectTimer) {
+      window.clearTimeout(this.iframeRedirectTimer);
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
     this.popupMessageHandler = null;
     this.closeMonitor = null;
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+    this.iframeLoadTimer = null;
+    this.iframeRedirectTimer = null;
+    this.iframeReady = false;
     this.popup = null;
     this.completed = false;
   }
+  markIframeReady() {
+    this.iframeReady = true;
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+      this.iframeLoadTimer = null;
+    }
+    if (typeof window !== "undefined" && this.iframeRedirectTimer) {
+      window.clearTimeout(this.iframeRedirectTimer);
+      this.iframeRedirectTimer = null;
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+  }
+  showIframeLoading(container, options) {
+    if (this.iframeLoadingPanel || this.iframeReady) {
+      return;
+    }
+    const panel = createLoginLoadingPanel({
+      description: options?.loadingDescription || "Please wait while the secure login page opens.",
+      title: options?.loadingTitle || "Opening login page"
+    });
+    this.iframeLoadingPanel = panel;
+    container.appendChild(panel);
+  }
+  showIframeFallback(options) {
+    if (this.iframeReady || this.iframeFallbackPanel) {
+      return;
+    }
+    const { container, finalUrl, launchPayload, loginOptions } = options;
+    logLoginWarn("Hosted login iframe did not report ready in time", {
+      loginUrl: finalUrl
+    });
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeLoadingPanel = null;
+    if (loginOptions?.fallbackRedirectMode !== "manual") {
+      const panel2 = createLoginRedirectingPanel({
+        description: loginOptions?.fallbackDescription || "The embedded login page is taking longer than expected. Redirecting you to the login page now.",
+        title: loginOptions?.fallbackTitle || "Redirecting to login page"
+      });
+      this.iframeFallbackPanel = panel2;
+      container.appendChild(panel2);
+      loginOptions?.onFallbackVisible?.();
+      this.iframeRedirectTimer = window.setTimeout(() => {
+        this.iframeRedirectTimer = null;
+        logLoginInfo("Redirecting to hosted login fallback page", {
+          loginUrl: finalUrl
+        });
+        window.location.assign(finalUrl);
+      }, 350);
+      return;
+    }
+    const panel = createLoginFallbackPanel({
+      buttonText: loginOptions?.fallbackButtonText || "Continue to login",
+      description: loginOptions?.fallbackDescription || "The embedded login page is taking longer than expected. Continue on the login page to finish signing in.",
+      title: loginOptions?.fallbackTitle || "Login page is still loading",
+      onRedirect: () => {
+        logLoginInfo("Redirecting to hosted login fallback page", {
+          loginUrl: finalUrl
+        });
+        window.location.assign(finalUrl);
+      }
+    });
+    this.iframeFallbackPanel = panel;
+    container.appendChild(panel);
+    loginOptions?.onFallbackVisible?.();
+  }
+  startIframeWatchdog(options) {
+    if (typeof window === "undefined") return;
+    const timeoutMs = getIframeLoadTimeoutMs(options.loginOptions);
+    if (timeoutMs === 0) {
+      this.showIframeFallback(options);
+      return;
+    }
+    this.iframeLoadTimer = window.setTimeout(() => {
+      this.iframeLoadTimer = null;
+      this.showIframeFallback(options);
+    }, timeoutMs);
+  }
   handleLoginEvent(data, options) {
     if (!data || typeof data !== "object" || !data.type) {
       logLoginDebug("Ignored non-login event payload");
@@ -544,6 +789,8 @@ var LoginUI = class extends HostedFrameModal {
       type: data.type
     });
     switch (data.type) {
+      case "LOGIN_READY":
+        break;
       case "LOGIN_SUCCESS":
         if (this.completed) {
           break;
@@ -651,15 +898,20 @@ var LoginUI = class extends HostedFrameModal {
       parentOrigin: launchPayload.origin || null
     });
     this.completed = false;
+    this.iframeReady = false;
     this.listenForLoginCallback(callbackState, options);
-    this.openHostedFrame(finalUrl, {
+    const hostedFrame = this.openHostedFrame(finalUrl, {
       allowedOrigin: options?.allowedOrigin || loginOrigin || void 0,
       height: "min(760px, 94vh)",
       onCloseButton: () => {
         options?.onCancel?.();
         options?.onClose?.();
       },
-      onMessage: (data, container) => {
+      onMessage: (data, container, event) => {
+        const isIframeEvent = event.source === this.iframe?.contentWindow;
+        if (isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE") || data.type === "LOGIN_SUCCESS" || data.type === "LOGIN_ERROR") {
+          this.markIframeReady();
+        }
         if (data.type === "LOGIN_RESIZE" && data.height) {
           const maxHeight = window.innerHeight * 0.94;
           container.style.height = `${Math.min(data.height, maxHeight)}px`;
@@ -668,6 +920,15 @@ var LoginUI = class extends HostedFrameModal {
       },
       width: "min(520px, 100%)"
     });
+    if (hostedFrame) {
+      this.showIframeLoading(hostedFrame.container, options);
+      this.startIframeWatchdog({
+        container: hostedFrame.container,
+        finalUrl,
+        launchPayload,
+        loginOptions: options
+      });
+    }
   }
   openLoginPopup(params, options) {
     if (typeof window === "undefined") return;