@ruzhiai/runid-react 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,11 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useCallback, useEffect, } from 'react';
-import { Tabs, Button, Input, Space, Checkbox, Modal, Typography, Spin, message, Form, } from 'antd';
-import { PhoneOutlined, MailOutlined, MessageOutlined, SafetyOutlined, WechatOutlined, UserOutlined, SendOutlined, } from '@ant-design/icons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useMemo, } from 'react';
+import { Button, Flex, Input, Select, Space, Checkbox, Modal, Typography, Spin, message, Tooltip, } from 'antd';
+import { ArrowRightOutlined, PhoneOutlined, MailOutlined, MessageOutlined, SafetyOutlined, WechatOutlined, UserOutlined, } from '@ant-design/icons';
 import { RunIDAuth, isConsentRequiredResponse, parseAuthErrorMessage, } from '@ruzhiai/runid-sdk';
 export { RunIDAuth };
 export * from '@ruzhiai/runid-sdk';
 const { Text, Title, Paragraph } = Typography;
+function getBrowserUserAgent() {
+    if (typeof navigator === 'undefined')
+        return '';
+    return navigator.userAgent || '';
+}
+function isWecomEmbeddedBrowser() {
+    return /wxwork/i.test(getBrowserUserAgent());
+}
+function isMobileBrowser() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(getBrowserUserAgent());
+}
+function pickWecomAutoRedirectURL(urls) {
+    if (!isWecomEmbeddedBrowser())
+        return undefined;
+    return urls.mobile_auth_url ?? urls.app_auth_url ?? urls.auth_url;
+}
+function pickWecomBrowserURL(urls) {
+    if (isWecomEmbeddedBrowser()) {
+        return urls.mobile_auth_url ?? urls.app_auth_url ?? urls.auth_url;
+    }
+    if (isMobileBrowser()) {
+        return urls.app_auth_url ?? urls.mobile_auth_url ?? urls.auth_url;
+    }
+    return urls.auth_url;
+}
 const RunIDAuthContext = createContext(null);
 export function RunIDAuthProvider({ config, children, autoLoadMe = true, }) {
     const [auth] = useState(() => new RunIDAuth(config));
@@ -109,6 +134,53 @@ export function useRunIDAuth() {
     }
     return context;
 }
+const THEME = {
+    light: {
+        surface: '#f5f7fa',
+        surfaceBorder: 'transparent',
+        text: '#0f1629',
+        textSecondary: '#6b7aa0',
+        inputIcon: '#94a0bf',
+        noticeBg: '#fff8e1',
+        noticeBorder: '#ffe082',
+        noticeText: '#8d6e00',
+        qrBg: '#fff',
+        activeTabColor: '#fff',
+        inactiveTabColor: '#6b7aa0',
+        activeTabShadow: '0 2px 8px rgba(15,22,41,0.08)',
+        buttonShadow: '0 8px 20px rgba(99, 102, 241, 0.2)',
+        socialBtnColor: '#6b7aa0',
+    },
+    dark: {
+        surface: 'rgba(255,255,255,0.06)',
+        surfaceBorder: 'rgba(255,255,255,0.08)',
+        text: '#f4f4f5',
+        textSecondary: '#a1a1aa',
+        inputIcon: '#71717a',
+        noticeBg: 'rgba(234,179,8,0.1)',
+        noticeBorder: 'rgba(234,179,8,0.25)',
+        noticeText: '#fbbf24',
+        qrBg: '#18181b',
+        activeTabColor: '#fff',
+        inactiveTabColor: '#a1a1aa',
+        activeTabShadow: '0 2px 8px rgba(0,0,0,0.3)',
+        buttonShadow: 'none',
+        socialBtnColor: '#a1a1aa',
+    },
+};
+function resolveTheme(explicit) {
+    if (explicit)
+        return explicit;
+    if (typeof document !== 'undefined') {
+        const htmlTheme = document.documentElement.getAttribute('data-rd-theme')
+            || document.documentElement.getAttribute('data-theme');
+        if (htmlTheme === 'dark')
+            return 'dark';
+        if (window.matchMedia?.('(prefers-color-scheme: dark)').matches)
+            return 'dark';
+    }
+    return 'light';
+}
 const TEXT = {
     'zh-CN': {
         wechat: '微信登录',
@@ -134,7 +206,14 @@ const TEXT = {
         emailPlaceholder: '请输入邮箱',
         whatsappPlaceholder: '请输入 WhatsApp 号码',
         codePlaceholder: '请输入验证码',
+        invalidPhone: '请输入正确的手机号',
+        invalidEmail: '请输入正确的邮箱地址',
+        invalidWhatsapp: '请输入正确的 WhatsApp 号码',
+        requiredCode: '请输入验证码',
+        sendCodeFailed: '发送验证码失败',
+        loginFailed: '登录失败',
         mfaHint: '该账号已开启二次验证，请完成下一步认证。',
+        methodNotConfigured: '该登录方式未配置，暂不可用',
     },
     'en-US': {
         wechat: 'WeChat',
@@ -160,7 +239,14 @@ const TEXT = {
         emailPlaceholder: 'Enter email',
         whatsappPlaceholder: 'Enter WhatsApp number',
         codePlaceholder: 'Enter verification code',
+        invalidPhone: 'Enter a valid phone number',
+        invalidEmail: 'Enter a valid email address',
+        invalidWhatsapp: 'Enter a valid WhatsApp number',
+        requiredCode: 'Enter verification code',
+        sendCodeFailed: 'Failed to send code',
+        loginFailed: 'Sign-in failed',
         mfaHint: 'MFA is required before login. Please complete second-factor verification.',
+        methodNotConfigured: 'This login method is not configured',
     },
 };
 function isAllowedMethod(config, method) {
@@ -170,54 +256,73 @@ function resolveInitialMethod(config, requested) {
     if (requested && isAllowedMethod(config, requested)) {
         return requested;
     }
+    if (config.client.allowed_methods.includes('wecom'))
+        return 'wecom';
     if (config.client.allowed_methods.includes('phone'))
         return 'phone';
     if (config.client.allowed_methods.includes('email'))
         return 'email';
-    if (config.client.allowed_methods.includes('wecom'))
-        return 'wecom';
-    if (config.client.allowed_methods.includes('wechat'))
-        return 'wechat';
-    return 'whatsapp';
+    if (config.client.allowed_methods.includes('whatsapp'))
+        return 'whatsapp';
+    return 'wechat';
 }
 function isMfaResponse(response) {
     return !!(response &&
         typeof response === 'object' &&
         response.mfa_required === true);
 }
+function phoneDigits(value) {
+    return value.replace(/\D/g, '');
+}
+function normalizeCountryPhone(countryCode, value) {
+    return `${countryCode}${phoneDigits(value)}`;
+}
+function normalizeInternationalPhone(value) {
+    const trimmed = value.trim();
+    const digits = phoneDigits(trimmed);
+    return trimmed.startsWith('+') ? `+${digits}` : digits;
+}
+function isValidCountryPhone(countryCode, value) {
+    const digits = phoneDigits(value);
+    if (!digits)
+        return false;
+    if (countryCode === '+86')
+        return /^1\d{10}$/.test(digits);
+    if (countryCode === '+1')
+        return digits.length === 10;
+    if (countryCode === '+44')
+        return digits.length >= 10 && digits.length <= 11;
+    if (countryCode === '+81')
+        return digits.length >= 10 && digits.length <= 11;
+    if (countryCode === '+65')
+        return digits.length === 8;
+    return digits.length >= 6 && digits.length <= 20;
+}
+function isValidInternationalPhone(value) {
+    const digits = phoneDigits(value);
+    return digits.length >= 6 && digits.length <= 20;
+}
+function isValidEmail(value) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
 const initialCountdown = {
     phone: 0,
     email: 0,
     whatsapp: 0,
 };
-export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'zh-CN', onSuccess, onError, onOAuthRedirect, className, style, }) {
+export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'zh-CN', theme: themeProp, onSuccess, onError, onOAuthRedirect, className, style, }) {
     const [messageApi, contextHolder] = message.useMessage();
-    const [auth, setAuth] = useState(() => new RunIDAuth({
+    const t = THEME[resolveTheme(themeProp)];
+    const auth = useMemo(() => new RunIDAuth({
         ...config,
         defaultReturnURL: returnUrl,
         onAuthSuccess: () => { },
         onAuthError: (error) => {
-            const msg = parseAuthErrorMessage(error.payload) || error.message;
-            if (msg) {
-                messageApi.error(msg);
+            if (error.status !== 401) {
+                onError?.(error);
             }
-            onError?.(error);
         },
-    }));
-    useEffect(() => {
-        setAuth(new RunIDAuth({
-            ...config,
-            defaultReturnURL: returnUrl,
-            onAuthSuccess: () => { },
-            onAuthError: (error) => {
-                const msg = parseAuthErrorMessage(error.payload) || error.message;
-                if (msg) {
-                    messageApi.error(msg);
-                }
-                onError?.(error);
-            },
-        }));
-    }, [config.baseURL, config.client_id, messageApi, onError, returnUrl]);
+    }), [config.issuer, config.apiBaseURL, config.baseURL, config.client_id, onError, returnUrl]);
     const texts = TEXT[locale];
     const [loginConfig, setLoginConfig] = useState(null);
     const [loadingConfig, setLoadingConfig] = useState(true);
@@ -239,6 +344,10 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
     const [consentData, setConsentData] = useState(null);
     const [agreed, setAgreed] = useState(false);
     const [processingConsent, setProcessingConsent] = useState(false);
+    const [wecomURLs, setWecomURLs] = useState(null);
+    const [loadingWecomQR, setLoadingWecomQR] = useState(false);
+    const [showWecomQR, setShowWecomQR] = useState(false);
+    const [wecomAutoRedirecting, setWecomAutoRedirecting] = useState(false);
     useEffect(() => {
         let active = true;
         const load = async () => {
@@ -271,12 +380,10 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
             active = false;
         };
     }, [auth, defaultMethod, onError, returnUrl, messageApi, texts.requiredMethodError]);
-    const methods = [
+    const primaryMethods = [
+        { key: 'wecom', visible: isAllowedMethod(loginConfig, 'wecom'), icon: _jsx(UserOutlined, {}), label: texts.wecom },
         { key: 'phone', visible: isAllowedMethod(loginConfig, 'phone'), icon: _jsx(PhoneOutlined, {}), label: texts.phone },
         { key: 'email', visible: isAllowedMethod(loginConfig, 'email'), icon: _jsx(MailOutlined, {}), label: texts.email },
-        { key: 'wechat', visible: isAllowedMethod(loginConfig, 'wechat'), icon: _jsx(WechatOutlined, {}), label: texts.wechat },
-        { key: 'wecom', visible: isAllowedMethod(loginConfig, 'wecom'), icon: _jsx(UserOutlined, {}), label: texts.wecom },
-        { key: 'whatsapp', visible: isAllowedMethod(loginConfig, 'whatsapp'), icon: _jsx(MessageOutlined, {}), label: texts.whatsapp },
     ].filter((item) => item.visible);
     const setCountDown = useCallback((method, seconds) => {
         setCountdown((prev) => ({ ...prev, [method]: seconds }));
@@ -303,18 +410,26 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
             const targetWhatsapp = whatsapp.trim();
             setIsSending((prev) => ({ ...prev, [method]: true }));
             if (method === 'phone') {
-                const target = `${countryCode}${targetPhone}`;
-                if (!target) {
+                if (!targetPhone) {
                     messageApi.error(texts.phonePlaceholder);
                     return;
                 }
+                if (!isValidCountryPhone(countryCode, targetPhone)) {
+                    messageApi.error(texts.invalidPhone);
+                    return;
+                }
+                const target = normalizeCountryPhone(countryCode, targetPhone);
                 await auth.sendPhoneCode(target);
             }
             else if (method === 'email') {
-                if (!targetEmail.includes('@')) {
+                if (!targetEmail) {
                     messageApi.error(texts.emailPlaceholder);
                     return;
                 }
+                if (!isValidEmail(targetEmail)) {
+                    messageApi.error(texts.invalidEmail);
+                    return;
+                }
                 await auth.sendEmailCode(targetEmail);
             }
             else {
@@ -322,14 +437,18 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
                     messageApi.error(texts.whatsappPlaceholder);
                     return;
                 }
-                await auth.sendWhatsAppCode(targetWhatsapp);
+                if (!isValidInternationalPhone(targetWhatsapp)) {
+                    messageApi.error(texts.invalidWhatsapp);
+                    return;
+                }
+                await auth.sendWhatsAppCode(normalizeInternationalPhone(targetWhatsapp));
             }
             messageApi.success(texts.sendCode);
             startTimer(method);
         }
         catch (error) {
             const runErr = error;
-            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || `${texts.sendCode}失败`;
+            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || texts.sendCodeFailed;
             messageApi.error(msg);
             onError?.(runErr);
         }
@@ -339,10 +458,22 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
     }, [auth, countryCode, countdown, email, messageApi, onError, phone, startTimer, texts, whatsapp]);
     const openOAuth = useCallback(async (method) => {
         try {
-            const urls = method === 'wechat'
-                ? await auth.getWechatAuthURL(returnUrl)
-                : await auth.getWecomAuthURL(returnUrl);
-            const target = urls.auth_url;
+            if (method === 'wechat') {
+                const urls = await auth.getWechatAuthURL(returnUrl);
+                const target = urls.auth_url;
+                if (onOAuthRedirect) {
+                    onOAuthRedirect(method, target);
+                    return;
+                }
+                window.location.assign(target);
+                return;
+            }
+            const urls = await auth.getWecomAuthURL(returnUrl);
+            const target = pickWecomBrowserURL(urls);
+            if (!target) {
+                messageApi.error(locale === 'zh-CN' ? '企业微信登录地址不可用' : 'WeCom sign-in URL is unavailable');
+                return;
+            }
             if (onOAuthRedirect) {
                 onOAuthRedirect(method, target);
                 return;
@@ -355,7 +486,128 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
             messageApi.error(msg);
             onError?.(runErr);
         }
-    }, [auth, onError, onOAuthRedirect, returnUrl, messageApi]);
+    }, [auth, locale, messageApi, onError, onOAuthRedirect, returnUrl]);
+    const openWecomLogin = useCallback(async () => {
+        try {
+            const urls = wecomURLs ?? await auth.getWecomAuthURL(returnUrl);
+            if (!wecomURLs) {
+                setWecomURLs(urls);
+            }
+            const target = pickWecomBrowserURL(urls);
+            if (!target) {
+                messageApi.error(locale === 'zh-CN' ? '企业微信登录地址不可用' : 'WeCom sign-in URL is unavailable');
+                return;
+            }
+            if (onOAuthRedirect) {
+                onOAuthRedirect('wecom', target);
+                return;
+            }
+            window.location.assign(target);
+        }
+        catch (error) {
+            const runErr = error;
+            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信登录地址失败';
+            messageApi.error(msg);
+            onError?.(runErr);
+        }
+    }, [auth, locale, messageApi, onError, onOAuthRedirect, returnUrl, wecomURLs]);
+    const loadWecomQR = useCallback(async () => {
+        try {
+            setLoadingWecomQR(true);
+            const urls = await auth.getWecomAuthURL(returnUrl);
+            setWecomURLs(urls);
+        }
+        catch (error) {
+            const runErr = error;
+            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信二维码失败';
+            messageApi.error(msg);
+            onError?.(runErr);
+        }
+        finally {
+            setLoadingWecomQR(false);
+        }
+    }, [auth, messageApi, onError, returnUrl]);
+    useEffect(() => {
+        if (!loginConfig || activeMethod !== 'wecom' || !isAllowedMethod(loginConfig, 'wecom')) {
+            setWecomAutoRedirecting(false);
+            return;
+        }
+        if (!isWecomEmbeddedBrowser()) {
+            setWecomAutoRedirecting(false);
+            return;
+        }
+        let cancelled = false;
+        setWecomAutoRedirecting(true);
+        void (async () => {
+            try {
+                const urls = await auth.getWecomAuthURL(returnUrl);
+                if (cancelled)
+                    return;
+                setWecomURLs(urls);
+                const redirect = pickWecomAutoRedirectURL(urls);
+                if (redirect) {
+                    window.location.assign(redirect);
+                    return;
+                }
+                setWecomAutoRedirecting(false);
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                const runErr = error;
+                const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信登录地址失败';
+                messageApi.error(msg);
+                onError?.(runErr);
+                setWecomAutoRedirecting(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeMethod, auth, loginConfig, messageApi, onError, returnUrl]);
+    useEffect(() => {
+        if (activeMethod !== 'wecom') {
+            setShowWecomQR(false);
+        }
+    }, [activeMethod]);
+    useEffect(() => {
+        if (activeMethod !== 'wecom' || isWecomEmbeddedBrowser() || isMobileBrowser()) {
+            return;
+        }
+        if (showWecomQR) {
+            return;
+        }
+        setShowWecomQR(true);
+        if (!wecomURLs && !loadingWecomQR) {
+            void loadWecomQR();
+        }
+    }, [activeMethod, loadWecomQR, loadingWecomQR, showWecomQR, wecomURLs]);
+    useEffect(() => {
+        if (activeMethod !== 'wecom' || !wecomURLs) {
+            return;
+        }
+        let cancelled = false;
+        const interval = window.setInterval(async () => {
+            try {
+                const status = await auth.getAuthStatus({ client_id: config.client_id });
+                if (cancelled)
+                    return;
+                if (status.authenticated && status.account_id) {
+                    window.clearInterval(interval);
+                    if (!cancelled) {
+                        await onSuccess(status);
+                    }
+                }
+            }
+            catch {
+                // Waiting for the OAuth callback to create the hosted RunID session.
+            }
+        }, 2000);
+        return () => {
+            cancelled = true;
+            window.clearInterval(interval);
+        };
+    }, [activeMethod, auth, config.client_id, onSuccess, wecomURLs]);
     const handleVerify = useCallback(async () => {
         if (!loginConfig) {
             messageApi.error(texts.requiredMethodError);
@@ -365,25 +617,55 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
         try {
             let response;
             if (activeMethod === 'phone') {
-                if (!phone.trim() || !phoneCode.trim()) {
+                const targetPhone = phone.trim();
+                const targetCode = phoneCode.trim();
+                if (!targetPhone) {
                     messageApi.error(texts.phonePlaceholder);
                     return;
                 }
-                response = await auth.verifyPhone(`${countryCode}${phone.trim()}`, phoneCode.trim());
+                if (!isValidCountryPhone(countryCode, targetPhone)) {
+                    messageApi.error(texts.invalidPhone);
+                    return;
+                }
+                if (!targetCode) {
+                    messageApi.error(texts.requiredCode);
+                    return;
+                }
+                response = await auth.verifyPhone(normalizeCountryPhone(countryCode, targetPhone), targetCode);
             }
             else if (activeMethod === 'email') {
-                if (!email.trim() || !emailCode.trim()) {
+                const targetEmail = email.trim();
+                const targetCode = emailCode.trim();
+                if (!targetEmail) {
                     messageApi.error(texts.emailPlaceholder);
                     return;
                 }
-                response = await auth.verifyEmail(email.trim(), emailCode.trim());
+                if (!isValidEmail(targetEmail)) {
+                    messageApi.error(texts.invalidEmail);
+                    return;
+                }
+                if (!targetCode) {
+                    messageApi.error(texts.requiredCode);
+                    return;
+                }
+                response = await auth.verifyEmail(targetEmail, targetCode);
             }
             else if (activeMethod === 'whatsapp') {
-                if (!whatsapp.trim() || !whatsappCode.trim()) {
+                const targetWhatsapp = whatsapp.trim();
+                const targetCode = whatsappCode.trim();
+                if (!targetWhatsapp) {
                     messageApi.error(texts.whatsappPlaceholder);
                     return;
                 }
-                response = await auth.verifyWhatsApp(whatsapp.trim(), whatsappCode.trim());
+                if (!isValidInternationalPhone(targetWhatsapp)) {
+                    messageApi.error(texts.invalidWhatsapp);
+                    return;
+                }
+                if (!targetCode) {
+                    messageApi.error(texts.requiredCode);
+                    return;
+                }
+                response = await auth.verifyWhatsApp(normalizeInternationalPhone(targetWhatsapp), targetCode);
             }
             else {
                 messageApi.error(texts.requiredMethodError);
@@ -402,14 +684,14 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
         }
         catch (error) {
             const runErr = error;
-            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '登录失败';
+            const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || texts.loginFailed;
             messageApi.error(msg);
             onError?.(runErr);
         }
         finally {
             setIsSubmitting(false);
         }
-    }, [activeMethod, auth, countryCode, email, emailCode, loginConfig, messageApi, onError, onSuccess, phone, phoneCode, texts.emailPlaceholder, texts.phonePlaceholder, texts.requiredMethodError, texts.whatsappPlaceholder, texts.mfaHint, whatsapp, whatsappCode]);
+    }, [activeMethod, auth, countryCode, email, emailCode, loginConfig, messageApi, onError, onSuccess, phone, phoneCode, texts.emailPlaceholder, texts.invalidEmail, texts.invalidPhone, texts.invalidWhatsapp, texts.loginFailed, texts.phonePlaceholder, texts.requiredCode, texts.requiredMethodError, texts.whatsappPlaceholder, texts.mfaHint, whatsapp, whatsappCode]);
     const submitConsent = useCallback(async () => {
         if (!consentData || !agreed) {
             return;
@@ -419,7 +701,7 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
             const agreedIds = consentData.pending_agreements
                 .map((agreement) => agreement.id)
                 .filter(Boolean);
-            const response = await auth.consentAndLogin(consentData.account_id, agreedIds, consentData.login_method || activeMethod, consentData.client_id);
+            const response = await auth.consentAndLogin(consentData.account_id, agreedIds, consentData.login_method || activeMethod, consentData.client_id, consentData.consent_challenge);
             setConsentData(null);
             setAgreed(false);
             await onSuccess(response);
@@ -440,13 +722,19 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
     if (!loginConfig) {
         return (_jsxs("div", { className: className, style: style, children: [contextHolder, _jsx(Text, { children: texts.requiredMethodError })] }));
     }
-    if (!methods.length) {
+    const isInternalProduct = loginConfig.is_internal_product || loginConfig.client.realm === 'internal';
+    const wechatConfigured = isAllowedMethod(loginConfig, 'wechat');
+    const whatsappConfigured = isAllowedMethod(loginConfig, 'whatsapp');
+    const hasConfiguredSocialMethods = wechatConfigured || whatsappConfigured;
+    const showSocialMethods = !isInternalProduct && hasConfiguredSocialMethods;
+    const countryCodeSelectOptions = [{ value: countryCode, label: countryCode }];
+    const wecomEmbeddedBrowser = isWecomEmbeddedBrowser();
+    const mobileBrowser = isMobileBrowser();
+    const showWecomContinueButton = wecomEmbeddedBrowser || mobileBrowser;
+    const showWecomQRCode = activeMethod === 'wecom' && (!showWecomContinueButton || showWecomQR);
+    if (!primaryMethods.length && !hasConfiguredSocialMethods) {
         return (_jsxs("div", { className: className, style: style, children: [contextHolder, _jsx(Text, { children: texts.requiredMethodError })] }));
     }
-    const tabItems = methods.map((method) => ({
-        key: method.key,
-        label: (_jsxs("span", { children: [method.icon, _jsx("span", { style: { marginLeft: 6 }, children: method.label })] })),
-    }));
     const canSubmit = !isSubmitting &&
         [
             activeMethod === 'phone' ? phone.trim() && phoneCode.trim() :
@@ -458,10 +746,74 @@ export function RunIDLoginWidget({ config, returnUrl, defaultMethod, locale = 'z
         const href = link.startsWith('http') || link.startsWith('/') ? link : `https://${link}`;
         window.open(href, '_blank', 'noopener,noreferrer');
     };
-    return (_jsxs("div", { className: className, style: style, children: [contextHolder, _jsx(Tabs, { activeKey: activeMethod, items: tabItems, onChange: (value) => setActiveMethod(value), size: "large" }), _jsxs(Space, { direction: "vertical", size: 16, style: { width: '100%' }, children: [activeMethod === 'phone' && (_jsxs(Space, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(Form.Item, { label: texts.countryCodePrefix, required: true, children: _jsxs(Space.Compact, { style: { width: '100%' }, children: [_jsx(Input, { value: countryCode, onChange: (e) => setCountryCode(e.target.value), style: { width: 90 } }), _jsx(Input, { value: phone, onChange: (e) => setPhone(e.target.value), placeholder: texts.phonePlaceholder })] }) }), _jsx(Form.Item, { label: texts.code, required: true, children: _jsxs(Space.Compact, { style: { width: '100%' }, children: [_jsx(Input, { value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: texts.codePlaceholder }), _jsx(Button, { icon: _jsx(SendOutlined, {}), onClick: () => sendCode('phone'), loading: isSending.phone, disabled: countdown.phone > 0, children: countdown.phone > 0 ? `${texts.resendPrefix}(${countdown.phone}s)` : texts.sendCode })] }) })] })), activeMethod === 'email' && (_jsxs(Space, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(Form.Item, { label: texts.email, required: true, children: _jsx(Input, { value: email, onChange: (e) => setEmail(e.target.value), placeholder: texts.emailPlaceholder }) }), _jsx(Form.Item, { label: texts.code, required: true, children: _jsxs(Space.Compact, { style: { width: '100%' }, children: [_jsx(Input, { value: emailCode, onChange: (e) => setEmailCode(e.target.value), placeholder: texts.codePlaceholder }), _jsx(Button, { onClick: () => sendCode('email'), loading: isSending.email, disabled: countdown.email > 0, children: countdown.email > 0 ? `${texts.resendPrefix}(${countdown.email}s)` : texts.sendCode })] }) })] })), activeMethod === 'whatsapp' && (_jsxs(Space, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(Form.Item, { label: texts.whatsapp, required: true, children: _jsx(Input, { value: whatsapp, onChange: (e) => setWhatsapp(e.target.value), placeholder: texts.whatsappPlaceholder }) }), _jsx(Form.Item, { label: texts.code, required: true, children: _jsxs(Space.Compact, { style: { width: '100%' }, children: [_jsx(Input, { value: whatsappCode, onChange: (e) => setWhatsappCode(e.target.value), placeholder: texts.codePlaceholder }), _jsx(Button, { onClick: () => sendCode('whatsapp'), loading: isSending.whatsapp, disabled: countdown.whatsapp > 0, children: countdown.whatsapp > 0 ? `${texts.resendPrefix}(${countdown.whatsapp}s)` : texts.sendCode })] }) })] })), activeMethod === 'wechat' && (_jsx(Button, { block: true, size: "large", onClick: () => openOAuth('wechat'), icon: _jsx(WechatOutlined, {}), children: texts.wechat })), activeMethod === 'wecom' && (_jsx(Button, { block: true, size: "large", onClick: () => openOAuth('wecom'), icon: _jsx(UserOutlined, {}), children: texts.wecom })), (activeMethod === 'phone' || activeMethod === 'email' || activeMethod === 'whatsapp') && (_jsx(Button, { type: "primary", size: "large", loading: isSubmitting, disabled: !canSubmit, onClick: handleVerify, children: isSubmitting ? texts.verifying : texts.login }))] }), _jsx(Modal, { open: Boolean(consentData), title: _jsx(Title, { level: 4, children: texts.consentTitle }), footer: null, onCancel: () => {
+    const rootClassName = ['runid-login-widget', className].filter(Boolean).join(' ');
+    const inputStyle = {
+        height: 52,
+        borderRadius: 8,
+        fontSize: 15,
+    };
+    const sendButtonStyle = {
+        minWidth: 120,
+        height: 52,
+        borderRadius: 8,
+        fontWeight: 500,
+    };
+    const primaryButtonStyle = {
+        height: 56,
+        borderRadius: 8,
+        fontSize: 16,
+        fontWeight: 600,
+        marginTop: 12,
+        boxShadow: t.buttonShadow,
+    };
+    const oauthButtonStyle = {
+        height: 56,
+        borderRadius: 8,
+        fontSize: 16,
+        fontWeight: 600,
+        width: '100%',
+    };
+    const methodButtonStyle = (method) => ({
+        flex: 1,
+        height: 40,
+        borderRadius: 6,
+        border: 'none',
+        boxShadow: activeMethod === method ? t.activeTabShadow : 'none',
+        background: activeMethod === method ? undefined : 'transparent',
+        color: activeMethod === method ? t.activeTabColor : t.inactiveTabColor,
+        fontWeight: activeMethod === method ? 600 : 400,
+    });
+    const socialButtonStyle = {
+        borderRadius: 8,
+        height: 44,
+        padding: '0 24px',
+        color: t.socialBtnColor,
+    };
+    const submitLabel = isSubmitting ? texts.verifying : texts.login;
+    return (_jsxs("div", { className: rootClassName, "data-active-method": activeMethod, style: style, children: [contextHolder, primaryMethods.length > 0 && (_jsx(Flex, { gap: 4, className: "login-method-tabs animate-fade-in-up delay-200", style: { width: '100%', marginBottom: 24, background: t.surface, border: `1px solid ${t.surfaceBorder}`, padding: 4, borderRadius: 8 }, children: primaryMethods.map((method) => (_jsx(Button, { type: activeMethod === method.key ? 'primary' : 'text', onClick: () => setActiveMethod(method.key), className: `login-method-tab login-method-tab-${method.key}`, style: methodButtonStyle(method.key), icon: method.icon, children: method.label }, method.key))) })), _jsxs("div", { className: "login-content-area animate-scale-in", style: { minHeight: 320 }, children: [activeMethod === 'phone' && (_jsxs(Flex, { vertical: true, gap: 24, style: { padding: '10px 0' }, children: [isInternalProduct && (_jsx("div", { style: { padding: '10px 14px', borderRadius: 6, background: t.noticeBg, border: `1px solid ${t.noticeBorder}`, fontSize: 12, color: t.noticeText, lineHeight: 1.6 }, children: locale === 'zh-CN'
+                                    ? '仅限内部成员使用已登记的手机号登录，未登记的手机号无法登录。'
+                                    : 'Only registered internal phone numbers can sign in.' })), _jsxs(Flex, { vertical: true, gap: 16, children: [_jsxs(Flex, { gap: 12, children: [_jsx(Select, { value: countryCode, disabled: true, options: countryCodeSelectOptions, size: "large", style: { width: 100, height: 52, borderRadius: 8 } }), _jsx(Input, { size: "large", value: phone, onChange: (e) => setPhone(phoneDigits(e.target.value).slice(0, 20)), placeholder: texts.phonePlaceholder, style: { ...inputStyle, flex: 1 } })] }), _jsxs(Flex, { gap: 12, children: [_jsx(Input, { size: "large", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, '').slice(0, 6)), placeholder: texts.codePlaceholder, style: { ...inputStyle, flex: 1 } }), _jsx(Button, { size: "large", onClick: () => sendCode('phone'), loading: isSending.phone, disabled: countdown.phone > 0, style: sendButtonStyle, children: countdown.phone > 0 ? `${countdown.phone}s` : texts.sendCode })] })] }), _jsxs(Button, { type: "primary", size: "large", block: true, loading: isSubmitting, disabled: !canSubmit, onClick: handleVerify, style: primaryButtonStyle, children: [_jsx("span", { children: submitLabel }), _jsx(ArrowRightOutlined, { style: { marginLeft: 8 } })] })] })), activeMethod === 'email' && (_jsxs(Flex, { vertical: true, gap: 24, style: { padding: '10px 0' }, children: [isInternalProduct && (_jsx("div", { style: { padding: '10px 14px', borderRadius: 6, background: t.noticeBg, border: `1px solid ${t.noticeBorder}`, fontSize: 12, color: t.noticeText, lineHeight: 1.6 }, children: locale === 'zh-CN'
+                                    ? '仅限内部成员使用企业邮箱登录，非内部邮箱无法登录。'
+                                    : 'Only internal organization email accounts can sign in.' })), _jsxs(Flex, { vertical: true, gap: 16, children: [_jsx(Input, { size: "large", value: email, onChange: (e) => setEmail(e.target.value.slice(0, 120)), placeholder: texts.emailPlaceholder, prefix: _jsx(MailOutlined, { style: { color: t.inputIcon, marginRight: 8 } }), style: inputStyle }), _jsxs(Flex, { gap: 12, children: [_jsx(Input, { size: "large", value: emailCode, onChange: (e) => setEmailCode(e.target.value.replace(/\D/g, '').slice(0, 6)), placeholder: texts.codePlaceholder, style: { ...inputStyle, flex: 1 } }), _jsx(Button, { size: "large", onClick: () => sendCode('email'), loading: isSending.email, disabled: countdown.email > 0, style: sendButtonStyle, children: countdown.email > 0 ? `${countdown.email}s` : texts.sendCode })] })] }), _jsxs(Button, { type: "primary", size: "large", block: true, loading: isSubmitting, disabled: !canSubmit, onClick: handleVerify, style: primaryButtonStyle, children: [_jsx("span", { children: submitLabel }), _jsx(ArrowRightOutlined, { style: { marginLeft: 8 } })] })] })), activeMethod === 'whatsapp' && (_jsxs(Flex, { vertical: true, gap: 24, style: { padding: '10px 0' }, children: [_jsxs(Flex, { vertical: true, gap: 16, children: [_jsx(Input, { size: "large", value: whatsapp, onChange: (e) => setWhatsapp(phoneDigits(e.target.value).slice(0, 20)), placeholder: texts.whatsappPlaceholder, prefix: _jsx(MessageOutlined, { style: { color: t.inputIcon, marginRight: 8 } }), style: inputStyle }), _jsxs(Flex, { gap: 12, children: [_jsx(Input, { size: "large", value: whatsappCode, onChange: (e) => setWhatsappCode(e.target.value.replace(/\D/g, '').slice(0, 6)), placeholder: texts.codePlaceholder, style: { ...inputStyle, flex: 1 } }), _jsx(Button, { size: "large", onClick: () => sendCode('whatsapp'), loading: isSending.whatsapp, disabled: countdown.whatsapp > 0, style: sendButtonStyle, children: countdown.whatsapp > 0 ? `${countdown.whatsapp}s` : texts.sendCode })] })] }), _jsxs(Button, { type: "primary", size: "large", block: true, loading: isSubmitting, disabled: !canSubmit, onClick: handleVerify, style: primaryButtonStyle, children: [_jsx("span", { children: submitLabel }), _jsx(ArrowRightOutlined, { style: { marginLeft: 8 } })] })] })), activeMethod === 'wechat' && (_jsxs(Flex, { vertical: true, align: "center", justify: "center", gap: 20, style: { padding: '44px 0' }, children: [_jsx(Text, { style: { color: t.text, fontWeight: 500, textAlign: 'center' }, children: locale === 'zh-CN' ? '点击下方按钮完成微信授权' : 'Continue with WeChat authorization' }), _jsx(Button, { type: "primary", size: "large", onClick: () => openOAuth('wechat'), icon: _jsx(WechatOutlined, {}), style: { ...oauthButtonStyle, background: '#07c160', borderColor: '#07c160' }, children: texts.wechat })] })), activeMethod === 'wecom' && (_jsx(Flex, { className: "login-wecom-panel", vertical: true, align: "center", justify: "center", gap: 14, style: { padding: '28px 0 4px' }, children: wecomAutoRedirecting ? (_jsxs(Flex, { vertical: true, align: "center", justify: "center", gap: 14, style: { minHeight: 220 }, children: [_jsx(Spin, {}), _jsx(Text, { style: { color: t.textSecondary, fontSize: 13, textAlign: 'center' }, children: locale === 'zh-CN' ? '正在进入企业微信登录...' : 'Opening WeCom sign-in...' })] })) : (_jsxs(_Fragment, { children: [showWecomContinueButton && (_jsxs(_Fragment, { children: [_jsx(Button, { type: "primary", size: "large", block: true, onClick: openWecomLogin, icon: _jsx(UserOutlined, {}), style: { ...oauthButtonStyle, background: '#07c160', borderColor: '#07c160' }, children: locale === 'zh-CN' ? '继续企业微信登录' : 'Continue with WeCom' }), _jsx(Text, { style: { color: t.textSecondary, fontSize: 12, textAlign: 'center' }, children: locale === 'zh-CN' ? '将进入企业微信授权页；已登录客户端时可直接确认' : 'Continue on the WeCom authorization page.' })] })), !showWecomContinueButton && (_jsx(Text, { style: { color: t.textSecondary, fontSize: 13, textAlign: 'center' }, children: locale === 'zh-CN' ? '使用企业微信扫码完成登录' : 'Scan with WeCom to sign in' })), showWecomContinueButton && !showWecomQR && (_jsx(Button, { type: "link", onClick: () => {
+                                        setShowWecomQR(true);
+                                        void loadWecomQR();
+                                    }, children: locale === 'zh-CN' ? '无法打开时使用扫码登录' : 'Use QR code if the app does not open' })), showWecomQRCode && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "login-wecom-qr-frame", style: {
+                                                width: '100%',
+                                                maxWidth: 340,
+                                                height: 360,
+                                                overflow: 'hidden',
+                                            }, children: [(!showWecomQR || loadingWecomQR) && (_jsx(Flex, { align: "center", justify: "center", style: { height: 360 }, children: _jsx(Spin, {}) })), showWecomQR && !loadingWecomQR && wecomURLs?.auth_url && (_jsx("iframe", { className: "login-wecom-qr-iframe", title: locale === 'zh-CN' ? '企业微信扫码登录' : 'WeCom sign-in QR code', src: wecomURLs.auth_url, style: {
+                                                        display: 'block',
+                                                        width: 380,
+                                                        height: 400,
+                                                        border: 0,
+                                                        background: t.qrBg,
+                                                        transform: 'translateX(-20px) scale(0.9)',
+                                                        transformOrigin: 'top center',
+                                                    } })), showWecomQR && !loadingWecomQR && !wecomURLs?.auth_url && (_jsxs(Flex, { vertical: true, align: "center", justify: "center", gap: 12, style: { height: 360, padding: 24, textAlign: 'center' }, children: [_jsx(Text, { style: { color: t.textSecondary }, children: locale === 'zh-CN' ? '企业微信二维码加载失败' : 'Failed to load WeCom QR code' }), _jsx(Button, { onClick: loadWecomQR, children: locale === 'zh-CN' ? '重新加载' : 'Reload' })] }))] }), showWecomContinueButton && (_jsx(Text, { style: { color: t.textSecondary, fontSize: 13, textAlign: 'center' }, children: locale === 'zh-CN' ? '使用企业微信扫码完成登录' : 'Scan with WeCom to sign in' }))] }))] })) }))] }), showSocialMethods && (_jsxs(Flex, { justify: "center", gap: 16, style: { marginTop: 24 }, children: [wechatConfigured && (_jsx(Tooltip, { title: undefined, children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { type: "text", size: "large", onClick: () => openOAuth('wechat'), className: "login-social-button login-social-button-wechat", icon: _jsx(WechatOutlined, { style: { fontSize: 18, color: '#94a0bf' } }), style: socialButtonStyle, children: texts.wechat }) }) })), whatsappConfigured && (_jsx(Tooltip, { title: undefined, children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { type: activeMethod === 'whatsapp' ? 'primary' : 'text', size: "large", onClick: () => setActiveMethod('whatsapp'), className: "login-social-button login-social-button-whatsapp", icon: _jsx(MessageOutlined, { style: { fontSize: 18, color: activeMethod === 'whatsapp' ? '#fff' : '#94a0bf' } }), style: activeMethod === 'whatsapp' ? { ...socialButtonStyle, color: '#fff' } : socialButtonStyle, children: texts.whatsapp }) }) }))] })), _jsx(Modal, { open: Boolean(consentData), title: _jsx(Title, { level: 4, children: texts.consentTitle }), footer: null, onCancel: () => {
                     setConsentData(null);
                     setAgreed(false);
-                }, destroyOnClose: true, children: consentData && (_jsxs(Space, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(Paragraph, { children: consentData.is_new_user
+                }, destroyOnHidden: true, children: consentData && (_jsxs(Space, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(Paragraph, { children: consentData.is_new_user
                                 ? texts.consentHintNewUser
                                 : texts.consentHintExistingUser }), _jsx(Space, { direction: "vertical", style: { width: '100%' }, children: consentData.pending_agreements.map((agreement) => (_jsx(Space, { align: "center", children: _jsx("a", { href: agreement.url, onClick: (event) => {
                                         event.preventDefault();