@youidian/sdk 3.3.3 → 3.3.5

package/dist/{login-CrPTh4In.d.ts → login-CFfe-w0S.d.ts}

@@ -6,19 +6,24 @@ type HostedFrameOptions<TData extends HostedFrameMessage> = {
     allowedOrigin?: string;
     height?: string;
     onCloseButton?: () => void;
-    onMessage: (data: TData, container: HTMLDivElement) => void;
+    onMessage: (data: TData, container: HTMLDivElement, event: MessageEvent) => void;
     width?: string;
 };
+type HostedFrameInstance = {
+    container: HTMLDivElement;
+    iframe: HTMLIFrameElement;
+};
 declare class HostedFrameModal<TData extends HostedFrameMessage> {
     protected iframe: HTMLIFrameElement | null;
     protected modal: HTMLDivElement | null;
     protected messageHandler: ((event: MessageEvent) => void) | null;
-    protected openHostedFrame(url: string, options: HostedFrameOptions<TData>): void;
+    protected openHostedFrame(url: string, options: HostedFrameOptions<TData>): HostedFrameInstance | null;
     close(): void;
 }
 
-type LoginEventType = "LOGIN_SUCCESS" | "LOGIN_CANCELLED" | "LOGIN_CLOSE" | "LOGIN_RESIZE" | "LOGIN_ERROR";
+type LoginEventType = "LOGIN_READY" | "LOGIN_SUCCESS" | "LOGIN_CANCELLED" | "LOGIN_CLOSE" | "LOGIN_RESIZE" | "LOGIN_ERROR";
 type LoginDisplayMode = "modal" | "popup";
+type LoginFallbackRedirectMode = "auto" | "manual";
 interface LoginResult {
     avatar?: string | null;
     channel?: string;
@@ -53,6 +58,27 @@ interface LoginUIOptions {
      * login page in an iframe modal. Use "popup" to keep the legacy popup flow.
      */
     displayMode?: LoginDisplayMode;
+    /** Text for the fallback button shown when the iframe does not report readiness. */
+    fallbackButtonText?: string;
+    /** Description for the fallback panel shown when the iframe does not report readiness. */
+    fallbackDescription?: string;
+    /**
+     * Whether the SDK should redirect automatically when iframe loading times out.
+     * Defaults to "auto". Use "manual" to show a button instead.
+     */
+    fallbackRedirectMode?: LoginFallbackRedirectMode;
+    /** Title for the fallback panel shown when the iframe does not report readiness. */
+    fallbackTitle?: string;
+    /**
+     * How long the SDK waits for LOGIN_READY or LOGIN_RESIZE before showing the
+     * fallback redirect button. Only used when displayMode is "modal".
+     * Defaults to 1500ms.
+     */
+    iframeLoadTimeoutMs?: number;
+    /** Description shown while the hosted login iframe is loading. */
+    loadingDescription?: string;
+    /** Title shown while the hosted login iframe is loading. */
+    loadingTitle?: string;
     /**
      * Whether to poll popup.closed to detect manual popup closure.
      * Only used when displayMode is "popup". Defaults to false because COOP can
@@ -62,6 +88,7 @@ interface LoginUIOptions {
     onCancel?: () => void;
     onClose?: () => void;
     onError?: (message?: string, data?: LoginEventData) => void;
+    onFallbackVisible?: () => void;
     onSuccess?: (result: LoginResult) => void;
 }
 interface LoginCallbackOptions {
@@ -99,8 +126,17 @@ declare class LoginUI extends HostedFrameModal<LoginEventData> {
     private callbackStorageHandler;
     private popupMessageHandler;
     private closeMonitor;
+    private iframeFallbackPanel;
+    private iframeLoadingPanel;
+    private iframeLoadTimer;
+    private iframeRedirectTimer;
+    private iframeReady;
     private completed;
     private cleanup;
+    private markIframeReady;
+    private showIframeLoading;
+    private showIframeFallback;
+    private startIframeWatchdog;
     private handleLoginEvent;
     private listenForLoginCallback;
     close(): void;
@@ -111,4 +147,4 @@ declare class LoginUI extends HostedFrameModal<LoginEventData> {
 }
 declare function createLoginUI(): LoginUI;
 
-export { HostedFrameModal as H, type LoginCallbackOptions as L, type LoginDisplayMode as a, type LoginEventData as b, type LoginEventType as c, type LoginParams as d, type LoginResult as e, LoginUI as f, type LoginUIOptions as g, createLoginUI as h, handleLoginCallbackIfPresent as i };
+export { HostedFrameModal as H, type LoginCallbackOptions as L, type LoginDisplayMode as a, type LoginEventData as b, type LoginEventType as c, type LoginFallbackRedirectMode as d, type LoginParams as e, type LoginResult as f, LoginUI as g, type LoginUIOptions as h, createLoginUI as i, handleLoginCallbackIfPresent as j };

package/dist/login.cjs

@@ -130,8 +130,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",
@@ -208,9 +208,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;
@@ -376,6 +380,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 = 1500;
 function decodeCallbackPayload(value) {
   try {
     const padded = value.padEnd(
@@ -503,6 +508,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);
@@ -511,6 +648,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() {
@@ -528,11 +670,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, 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");
@@ -542,6 +787,8 @@ var LoginUI = class extends HostedFrameModal {
       type: data.type
     });
     switch (data.type) {
+      case "LOGIN_READY":
+        break;
       case "LOGIN_SUCCESS":
         if (this.completed) {
           break;
@@ -649,15 +896,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`;
@@ -666,6 +918,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;