@youidian/sdk 3.3.10 → 3.4.2

package/dist/login.js

@@ -2,6 +2,91 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/environment.ts
+function normalizeText(value) {
+  return value || "";
+}
+function getRuntimeInput() {
+  if (typeof navigator === "undefined") {
+    return {};
+  }
+  const nav = navigator;
+  const coarsePointer = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : void 0;
+  return {
+    coarsePointer,
+    maxTouchPoints: nav.maxTouchPoints || 0,
+    platform: nav.platform || "",
+    standalone: nav.standalone,
+    userAgent: nav.userAgent || "",
+    userAgentDataMobile: nav.userAgentData?.mobile
+  };
+}
+function includesAny(value, patterns) {
+  return patterns.some((pattern) => pattern.test(value));
+}
+function detectLoginEnvironment(input = getRuntimeInput()) {
+  const userAgent = normalizeText(input.userAgent);
+  const platform = normalizeText(input.platform);
+  const rawMaxTouchPoints = input.maxTouchPoints ?? 0;
+  const maxTouchPoints = Number.isFinite(rawMaxTouchPoints) ? Math.max(0, rawMaxTouchPoints) : 0;
+  const isCoarsePointer = input.coarsePointer === true;
+  const isTouch = maxTouchPoints > 0 || isCoarsePointer;
+  const isWeChat = /micromessenger/i.test(userAgent);
+  const isAndroid = /\bandroid\b/i.test(userAgent);
+  const hasExplicitIOSDevice = /\b(iPad|iPhone|iPod)\b/i.test(userAgent);
+  const hasMacintoshUserAgent = /\bMacintosh\b/i.test(userAgent);
+  const hasMacPlatform = /^Mac/i.test(platform);
+  const isIPadOS = !hasExplicitIOSDevice && hasMacintoshUserAgent && hasMacPlatform && typeof input.standalone !== "undefined" && maxTouchPoints > 2;
+  const isIOS = hasExplicitIOSDevice || isIPadOS;
+  const isTabletByUa = includesAny(userAgent, [
+    /\biPad\b/i,
+    /\btablet\b/i,
+    /\bplaybook\b/i,
+    /\bsilk\b(?!.*\bmobile\b)/i,
+    /\bkindle\b/i,
+    /\bnexus 7\b/i,
+    /\bnexus 9\b/i,
+    /\bxoom\b/i,
+    /\bsm-t\d+/i,
+    /\bgt-p\d+/i,
+    /\bmi pad\b/i
+  ]);
+  const isMobileByUa = includesAny(userAgent, [
+    /\bMobile\b/i,
+    /\biPhone\b/i,
+    /\biPod\b/i,
+    /\bWindows Phone\b/i,
+    /\bIEMobile\b/i,
+    /\bBlackBerry\b/i,
+    /\bBB10\b/i,
+    /\bOpera Mini\b/i,
+    /\bOpera Mobi\b/i,
+    /\bwebOS\b/i
+  ]);
+  const isAndroidTablet = isAndroid && !/\bMobile\b/i.test(userAgent);
+  const isTablet = isIPadOS || isTabletByUa || isAndroidTablet;
+  const isMobile = input.userAgentDataMobile === true || isMobileByUa || isAndroid && !isTablet || isIOS && !isTablet;
+  const deviceType = isTablet ? "tablet" : isMobile ? "mobile" : userAgent || platform || isTouch ? "desktop" : "unknown";
+  const shouldUseRedirectLogin = deviceType === "mobile" || deviceType === "tablet" || isWeChat;
+  return {
+    deviceType,
+    isAndroid,
+    isCoarsePointer,
+    isDesktop: deviceType === "desktop",
+    isIOS,
+    isIPadOS,
+    isMobile,
+    isStandalone: input.standalone === true,
+    isTablet,
+    isTouch,
+    isWeChat,
+    maxTouchPoints,
+    platform,
+    shouldUseRedirectLogin,
+    userAgent
+  };
+}
+
 // src/hosted-modal.ts
 var SDK_SUPPORTED_LOCALES = [
   "en",
@@ -125,7 +210,7 @@ var HostedFrameModal = class {
     const container = document.createElement("div");
     Object.assign(container.style, {
       width: options.width || "450px",
-      height: options.height || "min(600px, 90vh)",
+      height: options.height || "min(760px, calc(100vh - 32px))",
       backgroundColor: "transparent",
       borderRadius: "28px",
       overflow: "visible",
@@ -133,8 +218,7 @@ var HostedFrameModal = class {
       boxShadow: "none",
       maxWidth: "calc(100vw - 32px)",
       maxHeight: "calc(100vh - 32px)",
-      transition: "height 180ms ease",
-      willChange: "height"
+      transition: "none"
     });
     const closeBtn = document.createElement("button");
     closeBtn.innerHTML = "\xD7";
@@ -213,6 +297,15 @@ function getOrigin(value) {
     return null;
   }
 }
+function isValidLoginRedirectUrl(value) {
+  if (!value) return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
 function createLoginCallbackState() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID().replace(/-/g, "");
@@ -559,6 +652,24 @@ function applyLoginPanelStyle(panel) {
     backdropFilter: "blur(16px)"
   });
 }
+function applyLoginLoadingPanelStyle(panel) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "0",
+    borderRadius: "28px",
+    background: "rgba(255,255,255,0.94)",
+    color: "#0f172a",
+    padding: "24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "none",
+    backdropFilter: "blur(16px)"
+  });
+}
 function createLoginPanelContent() {
   const content = document.createElement("div");
   Object.assign(content.style, {
@@ -583,6 +694,71 @@ function createLoginPanelContent() {
   content.appendChild(badge);
   return content;
 }
+function createBrandLoadingMark() {
+  const logo = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  logo.setAttribute("viewBox", "0 0 1024 1024");
+  logo.setAttribute("fill", "none");
+  logo.setAttribute("aria-hidden", "true");
+  Object.assign(logo.style, {
+    width: "112px",
+    height: "112px",
+    color: "#22c55e",
+    display: "block",
+    overflow: "visible"
+  });
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.setAttribute("fill", "currentColor");
+  const ring = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  ring.setAttribute(
+    "d",
+    "M704.298 679.54A264 264 0 1 1 704.298 309.46A49 49 0 0 1 634.4 378.149A166 166 0 1 0 634.4 610.851A49 49 0 0 1 704.298 679.54Z"
+  );
+  ring.setAttribute("class", "youidian-sdk-brand-loading__ring");
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("class", "youidian-sdk-brand-loading__dot");
+  dot.setAttribute("cx", "714.5");
+  dot.setAttribute("cy", "490.5");
+  dot.setAttribute("r", "68");
+  group.appendChild(ring);
+  group.appendChild(dot);
+  logo.appendChild(group);
+  return logo;
+}
+function createBrandLoadingCopy() {
+  const brand = document.createElement("div");
+  brand.className = "youidian-sdk-brand-loading__copy";
+  Object.assign(brand.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    lineHeight: "1"
+  });
+  const name = document.createElement("div");
+  name.className = "youidian-sdk-brand-loading__name";
+  name.textContent = "\u4F18\u6613\u70B9";
+  Object.assign(name.style, {
+    color: "#0f172a",
+    fontSize: "34px",
+    fontWeight: "900",
+    letterSpacing: "0",
+    lineHeight: "1"
+  });
+  const tagline = document.createElement("div");
+  tagline.className = "youidian-sdk-brand-loading__tagline";
+  tagline.textContent = "\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0";
+  Object.assign(tagline.style, {
+    color: "#64748b",
+    fontSize: "16px",
+    fontWeight: "700",
+    letterSpacing: "0.24em",
+    lineHeight: "1",
+    marginTop: "6px"
+  });
+  brand.appendChild(name);
+  brand.appendChild(tagline);
+  return brand;
+}
 function createLoginPanelTitle(value) {
   const title = document.createElement("div");
   title.textContent = value;
@@ -612,32 +788,111 @@ function ensureLoginLoadingStyles() {
   }
   const style = document.createElement("style");
   style.id = "youidian-login-loading-style";
-  style.textContent = "@keyframes youidian-login-spin{to{transform:rotate(360deg)}}";
+  style.textContent = `
+		.youidian-sdk-brand-loading__ring,
+		.youidian-sdk-brand-loading__dot {
+			transform-box: fill-box;
+			transform-origin: center;
+			will-change: opacity, transform;
+		}
+
+		.youidian-sdk-brand-loading__ring {
+			animation: youidian-sdk-brand-loading-ring 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__dot {
+			animation: youidian-sdk-brand-loading-dot 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__copy {
+			will-change: opacity, transform;
+			animation: youidian-sdk-brand-loading-copy 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__tagline {
+			will-change: opacity;
+			animation: youidian-sdk-brand-loading-tagline 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		@keyframes youidian-sdk-brand-loading-ring {
+			0%,
+			100% {
+				opacity: 0.72;
+				transform: rotate(0deg) scale(0.98);
+			}
+			50% {
+				opacity: 1;
+				transform: rotate(8deg) scale(1.02);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-dot {
+			0%,
+			100% {
+				opacity: 0.55;
+				transform: scale(0.9);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(1.08);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-copy {
+			0%,
+			100% {
+				opacity: 0.86;
+				transform: translateY(0);
+			}
+			50% {
+				opacity: 1;
+				transform: translateY(-1px);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-tagline {
+			0%,
+			100% {
+				opacity: 0.64;
+			}
+			50% {
+				opacity: 0.92;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.youidian-sdk-brand-loading__ring,
+			.youidian-sdk-brand-loading__dot,
+			.youidian-sdk-brand-loading__copy,
+			.youidian-sdk-brand-loading__tagline {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	`;
   document.head.appendChild(style);
 }
-function createLoginLoadingPanel(options) {
+function createLoginLoadingPanel() {
   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"
+  applyLoginLoadingPanelStyle(panel);
+  panel.setAttribute("role", "status");
+  panel.setAttribute("aria-label", "\u4F18\u6613\u70B9\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0");
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px"
   });
-  content.appendChild(spinner);
-  content.appendChild(createLoginPanelTitle(options.title));
-  content.appendChild(createLoginPanelDescription(options.description));
+  content.appendChild(createBrandLoadingMark());
+  content.appendChild(createBrandLoadingCopy());
   panel.appendChild(content);
   return panel;
 }
-function createLoginRedirectingPanel(options) {
-  return createLoginLoadingPanel(options);
+function createLoginRedirectingPanel(_options) {
+  return createLoginLoadingPanel();
 }
 function createLoginFallbackPanel(options) {
   const panel = document.createElement("div");
@@ -719,6 +974,7 @@ var LoginUI = class extends HostedFrameModal {
     this.completed = false;
   }
   markIframeReady() {
+    if (this.iframeReady) return;
     this.iframeReady = true;
     if (typeof window !== "undefined" && this.iframeLoadTimer) {
       window.clearTimeout(this.iframeLoadTimer);
@@ -737,14 +993,11 @@ var LoginUI = class extends HostedFrameModal {
     this.iframeFallbackPanel = null;
     this.iframeLoadingPanel = null;
   }
-  showIframeLoading(container, options) {
+  showIframeLoading(container) {
     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"
-    });
+    const panel = createLoginLoadingPanel();
     this.iframeLoadingPanel = panel;
     container.appendChild(panel);
   }
@@ -832,6 +1085,20 @@ var LoginUI = class extends HostedFrameModal {
         break;
       case "LOGIN_RESIZE":
         break;
+      case "LOGIN_REDIRECT_REQUIRED":
+        if (!isValidLoginRedirectUrl(data.authUrl)) {
+          logLoginWarn("Login redirect requested with invalid authUrl");
+          options?.onError?.("Login redirect URL is invalid", data);
+          break;
+        }
+        logLoginInfo("Login redirect requested by hosted page", {
+          attemptId: data.attemptId || null,
+          channel: data.channel || null,
+          authUrl: data.authUrl
+        });
+        this.close();
+        window.location.assign(data.authUrl);
+        break;
       case "LOGIN_ERROR":
         if (this.completed) {
           break;
@@ -855,6 +1122,25 @@ var LoginUI = class extends HostedFrameModal {
         break;
     }
   }
+  openLoginRedirect(params, options) {
+    if (typeof window === "undefined") return;
+    const { callbackState, finalUrl, launchPayload } = this.buildOpenContext(
+      params,
+      options
+    );
+    logLoginInfo("Redirecting to hosted login page", {
+      appId: params.appId,
+      callbackState,
+      callbackUrl: launchPayload.callbackUrl || null,
+      hasCallbackUrl: Boolean(launchPayload.callbackUrl),
+      loginUrl: finalUrl,
+      autoClose: options?.autoClose ?? true,
+      displayMode: "redirect",
+      pageUrl: window.location.href,
+      parentOrigin: launchPayload.origin || null
+    });
+    window.location.assign(finalUrl);
+  }
   listenForLoginCallback(callbackState, options) {
     try {
       this.callbackChannel = new BroadcastChannel(
@@ -931,21 +1217,28 @@ var LoginUI = class extends HostedFrameModal {
         options?.onCancel?.();
         options?.onClose?.();
       },
-      onMessage: (data, container, event) => {
+      onMessage: (data, _container, event) => {
         const isIframeEvent = event.source === this.iframe?.contentWindow;
+        if (!isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE")) {
+          logLoginWarn(
+            "Login lifecycle event ignored: event.source does not match iframe contentWindow",
+            {
+              type: data.type,
+              eventOrigin: event.origin,
+              hasIframe: Boolean(this.iframe),
+              hasIframeContentWindow: Boolean(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`;
-        }
         this.handleLoginEvent(data, options);
       },
       width: "min(520px, 100%)"
     });
     if (hostedFrame) {
-      this.showIframeLoading(hostedFrame.container, options);
+      this.showIframeLoading(hostedFrame.container);
       this.startIframeWatchdog({
         container: hostedFrame.container,
         finalUrl,
@@ -1049,11 +1342,19 @@ var LoginUI = class extends HostedFrameModal {
   }
   openLogin(params, options) {
     if (typeof window === "undefined") return;
-    const displayMode = options?.displayMode ?? "modal";
+    const displayMode = options?.displayMode ?? "auto";
+    if (displayMode === "redirect") {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     if (displayMode === "popup") {
       this.openLoginPopup(params, options);
       return;
     }
+    if (displayMode === "auto" && detectLoginEnvironment().shouldUseRedirectLogin) {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     this.openLoginModal(params, options);
   }
 };