@ruzhiai/runid-react 0.1.0

package/src/index.tsx

@@ -0,0 +1,896 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  type CSSProperties,
+  type ReactNode,
+} 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 {
+  RunIDAuth,
+  isConsentRequiredResponse,
+  parseAuthErrorMessage,
+  type RunIDAuthConfig,
+  type LoginConfig,
+  type LoginOrConsentResponse,
+  type LoginResponse,
+  type MeResponse,
+  type SessionInfo,
+  type AuditLogEntry,
+  type WecomAuthURLs,
+  type WechatAuthURLs,
+  type ConsentRequiredResponse,
+  type AuthMethod,
+  type AgreementVersion,
+  type RunIDAuthError,
+} from '@ruzhiai/runid-sdk';
+
+export { RunIDAuth };
+export * from '@ruzhiai/runid-sdk';
+
+const { Text, Title, Paragraph } = Typography;
+
+interface RunIDAuthContextValue {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  me: MeResponse | null;
+  loginConfig: LoginConfig | null;
+  auth: RunIDAuth | null;
+
+  // Config
+  loadLoginConfig: (options?: { return_url?: string; invite_code?: string }) => Promise<void>;
+
+  // Phone
+  sendPhoneCode: (phone: string) => Promise<void>;
+  verifyPhone: (phone: string, code: string) => Promise<LoginOrConsentResponse>;
+
+  // Email
+  sendEmailCode: (email: string) => Promise<void>;
+  verifyEmail: (email: string, code: string) => Promise<LoginOrConsentResponse>;
+
+  // WhatsApp
+  sendWhatsAppCode: (phone: string) => Promise<void>;
+  verifyWhatsApp: (phone: string, code: string) => Promise<LoginOrConsentResponse>;
+
+  // OAuth
+  getWechatAuthURL: (returnUrl?: string) => Promise<WechatAuthURLs>;
+  getWecomAuthURL: (returnUrl?: string) => Promise<WecomAuthURLs>;
+
+  // Session
+  loadMe: () => Promise<void>;
+  logout: () => Promise<void>;
+  getMySessions: () => Promise<{ data: SessionInfo[] }>;
+  revokeMySession: (sessionId: string) => Promise<void>;
+  getMyAuditLogs: () => Promise<{ data: AuditLogEntry[] }>;
+}
+
+const RunIDAuthContext = createContext<RunIDAuthContextValue | null>(null);
+
+// ============================================
+// Auth Context
+// ============================================
+
+interface RunIDAuthProviderProps {
+  config: RunIDAuthConfig;
+  children: ReactNode;
+  autoLoadMe?: boolean;
+}
+
+export function RunIDAuthProvider({
+  config,
+  children,
+  autoLoadMe = true,
+}: RunIDAuthProviderProps) {
+  const [auth] = useState(() => new RunIDAuth(config));
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [me, setMe] = useState<MeResponse | null>(null);
+  const [loginConfig, setLoginConfig] = useState<LoginConfig | null>(null);
+
+  const loadMe = useCallback(async () => {
+    try {
+      const response = await auth.getMe();
+      setMe(response);
+      setIsAuthenticated(true);
+    } catch {
+      setMe(null);
+      setIsAuthenticated(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    if (autoLoadMe) {
+      loadMe();
+    } else {
+      setIsLoading(false);
+    }
+  }, [loadMe, autoLoadMe]);
+
+  const loadLoginConfig = useCallback(
+    async (options?: { return_url?: string; invite_code?: string }) => {
+      const c = await auth.getLoginConfig(options);
+      setLoginConfig(c);
+    },
+    [auth]
+  );
+
+  const sendPhoneCode = useCallback(
+    async (phone: string) => auth.sendPhoneCode(phone),
+    [auth]
+  );
+
+  const verifyPhone = useCallback(
+    async (phone: string, code: string) => {
+      const response = await auth.verifyPhone(phone, code);
+      if (isConsentRequiredResponse(response)) {
+        return response;
+      }
+      setIsAuthenticated(true);
+      await loadMe();
+      return response;
+    },
+    [auth, loadMe]
+  );
+
+  const sendEmailCode = useCallback(
+    async (email: string) => auth.sendEmailCode(email),
+    [auth]
+  );
+
+  const verifyEmail = useCallback(
+    async (email: string, code: string) => {
+      const response = await auth.verifyEmail(email, code);
+      if (isConsentRequiredResponse(response)) {
+        return response;
+      }
+      setIsAuthenticated(true);
+      await loadMe();
+      return response;
+    },
+    [auth, loadMe]
+  );
+
+  const sendWhatsAppCode = useCallback(
+    async (phone: string) => auth.sendWhatsAppCode(phone),
+    [auth]
+  );
+
+  const verifyWhatsApp = useCallback(
+    async (phone: string, code: string) => {
+      const response = await auth.verifyWhatsApp(phone, code);
+      if (isConsentRequiredResponse(response)) {
+        return response;
+      }
+      setIsAuthenticated(true);
+      await loadMe();
+      return response;
+    },
+    [auth, loadMe]
+  );
+
+  const getWechatAuthURL = useCallback(
+    async (returnUrl?: string) => auth.getWechatAuthURL(returnUrl),
+    [auth]
+  );
+
+  const getWecomAuthURL = useCallback(
+    async (returnUrl?: string) => auth.getWecomAuthURL(returnUrl),
+    [auth]
+  );
+
+  const logout = useCallback(async () => {
+    await auth.logout();
+    setMe(null);
+    setIsAuthenticated(false);
+  }, [auth]);
+
+  const getMySessions = useCallback(
+    async () => auth.getMySessions(),
+    [auth]
+  );
+
+  const revokeMySession = useCallback(
+    async (sessionId: string) => auth.revokeMySession(sessionId),
+    [auth]
+  );
+
+  const getMyAuditLogs = useCallback(
+    async () => auth.getMyAuditLogs(),
+    [auth]
+  );
+
+  const value: RunIDAuthContextValue = {
+    isAuthenticated,
+    isLoading,
+    me,
+    loginConfig,
+    auth,
+    loadLoginConfig,
+    sendPhoneCode,
+    verifyPhone,
+    sendEmailCode,
+    verifyEmail,
+    sendWhatsAppCode,
+    verifyWhatsApp,
+    getWechatAuthURL,
+    getWecomAuthURL,
+    loadMe,
+    logout,
+    getMySessions,
+    revokeMySession,
+    getMyAuditLogs,
+  };
+
+  return (
+    <RunIDAuthContext.Provider value={value}>
+      {children}
+    </RunIDAuthContext.Provider>
+  );
+}
+
+export function useRunIDAuth(): RunIDAuthContextValue {
+  const context = useContext(RunIDAuthContext);
+  if (!context) {
+    throw new Error('useRunIDAuth must be used within a RunIDAuthProvider');
+  }
+  return context;
+}
+
+// ============================================
+// Login Widget
+// ============================================
+
+export interface RunIDLoginWidgetProps {
+  config: RunIDAuthConfig;
+  returnUrl?: string;
+  defaultMethod?: AuthMethod;
+  locale?: 'zh-CN' | 'en-US';
+  onSuccess: (response: LoginResponse) => void | Promise<void>;
+  onError?: (error: RunIDAuthError) => void;
+  onOAuthRedirect?: (method: 'wechat' | 'wecom', url: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+type CountdownState = {
+  [key in 'phone' | 'email' | 'whatsapp']: number;
+};
+
+const TEXT: Record<'zh-CN' | 'en-US', Record<string, string>> = {
+  'zh-CN': {
+    wechat: '微信登录',
+    wecom: '企业微信',
+    phone: '手机号',
+    email: '邮箱',
+    whatsapp: 'WhatsApp',
+    code: '验证码',
+    sendCode: '获取验证码',
+    resendPrefix: '重发',
+    login: '登录',
+    verifying: '验证中',
+    sending: '发送中',
+    agreeTerms: '我已阅读并同意',
+    consentTitle: '同意协议后继续',
+    consentHintNewUser: '账号尚未完成协议授权，完成后将立即创建账户并登录。',
+    consentHintExistingUser: '此账号存在未读条款，请同意后继续登录。',
+    cancel: '取消',
+    continue: '同意并继续',
+    requiredMethodError: '请选择可用的登录方式',
+    countryCodePrefix: '区号',
+    phonePlaceholder: '请输入手机号',
+    emailPlaceholder: '请输入邮箱',
+    whatsappPlaceholder: '请输入 WhatsApp 号码',
+    codePlaceholder: '请输入验证码',
+    mfaHint: '该账号已开启二次验证，请完成下一步认证。',
+  },
+  'en-US': {
+    wechat: 'WeChat',
+    wecom: 'WeCom',
+    phone: 'Phone',
+    email: 'Email',
+    whatsapp: 'WhatsApp',
+    code: 'Verification code',
+    sendCode: 'Send code',
+    resendPrefix: 'Resend',
+    login: 'Sign in',
+    verifying: 'Verifying',
+    sending: 'Sending',
+    agreeTerms: 'I have read and agree',
+    consentTitle: 'Agree to proceed',
+    consentHintNewUser: 'This account requires a first-time consent to proceed and will be created after confirmation.',
+    consentHintExistingUser: 'Please confirm the latest agreements before continuing.',
+    cancel: 'Cancel',
+    continue: 'Agree and continue',
+    requiredMethodError: 'No login method is available for this product',
+    countryCodePrefix: 'Code',
+    phonePlaceholder: 'Enter phone number',
+    emailPlaceholder: 'Enter email',
+    whatsappPlaceholder: 'Enter WhatsApp number',
+    codePlaceholder: 'Enter verification code',
+    mfaHint: 'MFA is required before login. Please complete second-factor verification.',
+  },
+};
+
+function isAllowedMethod(config: LoginConfig | null, method: AuthMethod): boolean {
+  return Boolean(config?.client?.allowed_methods.includes(method));
+}
+
+function resolveInitialMethod(config: LoginConfig, requested?: AuthMethod): AuthMethod {
+  if (requested && isAllowedMethod(config, requested)) {
+    return requested;
+  }
+  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';
+}
+
+function isMfaResponse(response: unknown): response is { mfa_required: boolean; account_id: string } {
+  return !!(
+    response &&
+    typeof response === 'object' &&
+    (response as { mfa_required?: unknown }).mfa_required === true
+  );
+}
+
+const initialCountdown: CountdownState = {
+  phone: 0,
+  email: 0,
+  whatsapp: 0,
+};
+
+export function RunIDLoginWidget({
+  config,
+  returnUrl,
+  defaultMethod,
+  locale = 'zh-CN',
+  onSuccess,
+  onError,
+  onOAuthRedirect,
+  className,
+  style,
+}: RunIDLoginWidgetProps) {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [auth, setAuth] = useState(() => new RunIDAuth({
+    ...config,
+    defaultReturnURL: returnUrl,
+    onAuthSuccess: () => {},
+    onAuthError: (error: RunIDAuthError) => {
+      const msg = parseAuthErrorMessage(error.payload) || error.message;
+      if (msg) {
+        messageApi.error(msg);
+      }
+      onError?.(error);
+    },
+  }));
+
+  useEffect(() => {
+    setAuth(new RunIDAuth({
+      ...config,
+      defaultReturnURL: returnUrl,
+      onAuthSuccess: () => {},
+      onAuthError: (error: RunIDAuthError) => {
+        const msg = parseAuthErrorMessage(error.payload) || error.message;
+        if (msg) {
+          messageApi.error(msg);
+        }
+        onError?.(error);
+      },
+    }));
+  }, [config.baseURL, config.client_id, messageApi, onError, returnUrl]);
+
+  const texts = TEXT[locale];
+  const [loginConfig, setLoginConfig] = useState<LoginConfig | null>(null);
+  const [loadingConfig, setLoadingConfig] = useState(true);
+  const [activeMethod, setActiveMethod] = useState<AuthMethod>('phone');
+
+  const [countdown, setCountdown] = useState<CountdownState>(initialCountdown);
+  const [isSending, setIsSending] = useState<{ [key: string]: boolean }>({
+    phone: false,
+    email: false,
+    whatsapp: false,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [phoneCode, setPhoneCode] = useState('');
+  const [emailCode, setEmailCode] = useState('');
+  const [whatsapp, setWhatsapp] = useState('');
+  const [whatsappCode, setWhatsappCode] = useState('');
+  const [countryCode, setCountryCode] = useState('+86');
+
+  const [consentData, setConsentData] = useState<ConsentRequiredResponse | null>(null);
+  const [agreed, setAgreed] = useState(false);
+  const [processingConsent, setProcessingConsent] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+      try {
+        const loaded = await auth.getLoginConfig({
+          return_url: returnUrl,
+        });
+        if (!active) return;
+        setLoginConfig(loaded);
+        if (loaded.client.phone_country_code) {
+          setCountryCode(loaded.client.phone_country_code);
+        }
+        setActiveMethod(resolveInitialMethod(loaded, defaultMethod));
+      } catch (error) {
+        const runErr = error as RunIDAuthError;
+        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || texts.requiredMethodError;
+        messageApi.error(msg);
+        onError?.(runErr);
+      } finally {
+        if (active) {
+          setLoadingConfig(false);
+        }
+      }
+    };
+
+    load();
+    return () => {
+      active = false;
+    };
+  }, [auth, defaultMethod, onError, returnUrl, messageApi, texts.requiredMethodError]);
+
+  const methods = [
+    { key: 'phone' as const, visible: isAllowedMethod(loginConfig, 'phone'), icon: <PhoneOutlined />, label: texts.phone },
+    { key: 'email' as const, visible: isAllowedMethod(loginConfig, 'email'), icon: <MailOutlined />, label: texts.email },
+    { key: 'wechat' as const, visible: isAllowedMethod(loginConfig, 'wechat'), icon: <WechatOutlined />, label: texts.wechat },
+    { key: 'wecom' as const, visible: isAllowedMethod(loginConfig, 'wecom'), icon: <UserOutlined />, label: texts.wecom },
+    { key: 'whatsapp' as const, visible: isAllowedMethod(loginConfig, 'whatsapp'), icon: <MessageOutlined />, label: texts.whatsapp },
+  ].filter((item): item is { key: AuthMethod; visible: true; icon: JSX.Element; label: string } => item.visible);
+
+  const setCountDown = useCallback((method: keyof CountdownState, seconds: number) => {
+    setCountdown((prev) => ({ ...prev, [method]: seconds }));
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        const next = Math.max(0, prev[method] - 1);
+        if (next === 0) {
+          clearInterval(interval);
+        }
+        return { ...prev, [method]: next };
+      });
+    }, 1000);
+  }, []);
+
+  const startTimer = useCallback((method: keyof CountdownState) => {
+    setCountDown(method, 60);
+  }, [setCountDown]);
+
+  const sendCode = useCallback(
+    async (method: 'phone' | 'email' | 'whatsapp') => {
+      if (countdown[method] > 0) {
+        return;
+      }
+
+      try {
+        const targetPhone = phone.trim();
+        const targetEmail = email.trim();
+        const targetWhatsapp = whatsapp.trim();
+        setIsSending((prev) => ({ ...prev, [method]: true }));
+        if (method === 'phone') {
+          const target = `${countryCode}${targetPhone}`;
+          if (!target) {
+            messageApi.error(texts.phonePlaceholder);
+            return;
+          }
+          await auth.sendPhoneCode(target);
+        } else if (method === 'email') {
+          if (!targetEmail.includes('@')) {
+            messageApi.error(texts.emailPlaceholder);
+            return;
+          }
+          await auth.sendEmailCode(targetEmail);
+        } else {
+          if (!targetWhatsapp) {
+            messageApi.error(texts.whatsappPlaceholder);
+            return;
+          }
+          await auth.sendWhatsAppCode(targetWhatsapp);
+        }
+        messageApi.success(texts.sendCode);
+        startTimer(method);
+      } catch (error) {
+        const runErr = error as RunIDAuthError;
+        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || `${texts.sendCode}失败`;
+        messageApi.error(msg);
+        onError?.(runErr);
+      } finally {
+        setIsSending((prev) => ({ ...prev, [method]: false }));
+      }
+    },
+    [auth, countryCode, countdown, email, messageApi, onError, phone, startTimer, texts, whatsapp]
+  );
+
+  const openOAuth = useCallback(
+    async (method: 'wechat' | 'wecom') => {
+      try {
+        const urls = method === 'wechat'
+          ? await auth.getWechatAuthURL(returnUrl)
+          : await auth.getWecomAuthURL(returnUrl);
+        const target = urls.auth_url;
+        if (onOAuthRedirect) {
+          onOAuthRedirect(method, target);
+          return;
+        }
+        window.location.assign(target);
+      } catch (error) {
+        const runErr = error as RunIDAuthError;
+        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取 OAuth 登录地址失败';
+        messageApi.error(msg);
+        onError?.(runErr);
+      }
+    },
+    [auth, onError, onOAuthRedirect, returnUrl, messageApi]
+  );
+
+  const handleVerify = useCallback(async () => {
+    if (!loginConfig) {
+      messageApi.error(texts.requiredMethodError);
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      let response: LoginOrConsentResponse;
+
+      if (activeMethod === 'phone') {
+        if (!phone.trim() || !phoneCode.trim()) {
+          messageApi.error(texts.phonePlaceholder);
+          return;
+        }
+        response = await auth.verifyPhone(`${countryCode}${phone.trim()}`, phoneCode.trim());
+      } else if (activeMethod === 'email') {
+        if (!email.trim() || !emailCode.trim()) {
+          messageApi.error(texts.emailPlaceholder);
+          return;
+        }
+        response = await auth.verifyEmail(email.trim(), emailCode.trim());
+      } else if (activeMethod === 'whatsapp') {
+        if (!whatsapp.trim() || !whatsappCode.trim()) {
+          messageApi.error(texts.whatsappPlaceholder);
+          return;
+        }
+        response = await auth.verifyWhatsApp(whatsapp.trim(), whatsappCode.trim());
+      } else {
+        messageApi.error(texts.requiredMethodError);
+        return;
+      }
+
+      if (isConsentRequiredResponse(response)) {
+        setConsentData(response);
+        setAgreed(false);
+        return;
+      }
+
+      if (isMfaResponse(response)) {
+        messageApi.error(texts.mfaHint);
+        return;
+      }
+
+      await onSuccess(response as LoginResponse);
+    } catch (error) {
+      const runErr = error as RunIDAuthError;
+      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '登录失败';
+      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]);
+
+  const submitConsent = useCallback(async () => {
+    if (!consentData || !agreed) {
+      return;
+    }
+
+    setProcessingConsent(true);
+    try {
+      const agreedIds = consentData.pending_agreements
+        .map((agreement: AgreementVersion) => agreement.id)
+        .filter(Boolean);
+
+      const response = await auth.consentAndLogin(
+        consentData.account_id,
+        agreedIds,
+        consentData.login_method || activeMethod,
+        consentData.client_id,
+      );
+      setConsentData(null);
+      setAgreed(false);
+      await onSuccess(response);
+    } catch (error) {
+      const runErr = error as RunIDAuthError;
+      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '协议授权失败';
+      messageApi.error(msg);
+      onError?.(runErr);
+    } finally {
+      setProcessingConsent(false);
+    }
+  }, [activeMethod, agreed, auth, consentData, messageApi, onError, onSuccess]);
+
+  if (loadingConfig) {
+    return (
+      <div className={className} style={{ ...style, textAlign: 'center' }}>
+        {contextHolder}
+        <Spin />
+      </div>
+    );
+  }
+
+  if (!loginConfig) {
+    return (
+      <div className={className} style={style}>
+        {contextHolder}
+        <Text>{texts.requiredMethodError}</Text>
+      </div>
+    );
+  }
+
+  if (!methods.length) {
+    return (
+      <div className={className} style={style}>
+        {contextHolder}
+        <Text>{texts.requiredMethodError}</Text>
+      </div>
+    );
+  }
+
+  const tabItems = methods.map((method) => ({
+    key: method.key,
+    label: (
+      <span>
+        {method.icon}
+        <span style={{ marginLeft: 6 }}>{method.label}</span>
+      </span>
+    ),
+  }));
+
+  const canSubmit = !isSubmitting &&
+    [
+      activeMethod === 'phone' ? phone.trim() && phoneCode.trim() :
+      activeMethod === 'email' ? email.trim() && emailCode.trim() :
+      activeMethod === 'whatsapp' ? whatsapp.trim() && whatsappCode.trim() :
+      true,
+    ].every(Boolean);
+
+  const consentLink = (link: string) => {
+    const href = link.startsWith('http') || link.startsWith('/') ? link : `https://${link}`;
+    window.open(href, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div className={className} style={style}>
+      {contextHolder}
+
+      <Tabs
+        activeKey={activeMethod}
+        items={tabItems}
+        onChange={(value) => setActiveMethod(value as AuthMethod)}
+        size="large"
+      />
+
+      <Space direction="vertical" size={16} style={{ width: '100%' }}>
+        {activeMethod === 'phone' && (
+          <Space direction="vertical" size={12} style={{ width: '100%' }}>
+            <Form.Item label={texts.countryCodePrefix} required>
+              <Space.Compact style={{ width: '100%' }}>
+                <Input
+                  value={countryCode}
+                  onChange={(e) => setCountryCode(e.target.value)}
+                  style={{ width: 90 }}
+                />
+                <Input
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  placeholder={texts.phonePlaceholder}
+                />
+              </Space.Compact>
+            </Form.Item>
+            <Form.Item label={texts.code} required>
+              <Space.Compact style={{ width: '100%' }}>
+                <Input
+                  value={phoneCode}
+                  onChange={(e) => setPhoneCode(e.target.value)}
+                  placeholder={texts.codePlaceholder}
+                />
+                <Button
+                  icon={<SendOutlined />}
+                  onClick={() => sendCode('phone')}
+                  loading={isSending.phone}
+                  disabled={countdown.phone > 0}
+                >
+                  {countdown.phone > 0 ? `${texts.resendPrefix}(${countdown.phone}s)` : texts.sendCode}
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+          </Space>
+        )}
+
+        {activeMethod === 'email' && (
+          <Space direction="vertical" size={12} style={{ width: '100%' }}>
+            <Form.Item label={texts.email} required>
+              <Input
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={texts.emailPlaceholder}
+              />
+            </Form.Item>
+            <Form.Item label={texts.code} required>
+              <Space.Compact style={{ width: '100%' }}>
+                <Input
+                  value={emailCode}
+                  onChange={(e) => setEmailCode(e.target.value)}
+                  placeholder={texts.codePlaceholder}
+                />
+                <Button
+                  onClick={() => sendCode('email')}
+                  loading={isSending.email}
+                  disabled={countdown.email > 0}
+                >
+                  {countdown.email > 0 ? `${texts.resendPrefix}(${countdown.email}s)` : texts.sendCode}
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+          </Space>
+        )}
+
+        {activeMethod === 'whatsapp' && (
+          <Space direction="vertical" size={12} style={{ width: '100%' }}>
+            <Form.Item label={texts.whatsapp} required>
+              <Input
+                value={whatsapp}
+                onChange={(e) => setWhatsapp(e.target.value)}
+                placeholder={texts.whatsappPlaceholder}
+              />
+            </Form.Item>
+            <Form.Item label={texts.code} required>
+              <Space.Compact style={{ width: '100%' }}>
+                <Input
+                  value={whatsappCode}
+                  onChange={(e) => setWhatsappCode(e.target.value)}
+                  placeholder={texts.codePlaceholder}
+                />
+                <Button
+                  onClick={() => sendCode('whatsapp')}
+                  loading={isSending.whatsapp}
+                  disabled={countdown.whatsapp > 0}
+                >
+                  {countdown.whatsapp > 0 ? `${texts.resendPrefix}(${countdown.whatsapp}s)` : texts.sendCode}
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+          </Space>
+        )}
+
+        {activeMethod === 'wechat' && (
+          <Button
+            block
+            size="large"
+            onClick={() => openOAuth('wechat')}
+            icon={<WechatOutlined />}
+          >
+            {texts.wechat}
+          </Button>
+        )}
+
+        {activeMethod === 'wecom' && (
+          <Button
+            block
+            size="large"
+            onClick={() => openOAuth('wecom')}
+            icon={<UserOutlined />}
+          >
+            {texts.wecom}
+          </Button>
+        )}
+
+        {(activeMethod === 'phone' || activeMethod === 'email' || activeMethod === 'whatsapp') && (
+          <Button
+            type="primary"
+            size="large"
+            loading={isSubmitting}
+            disabled={!canSubmit}
+            onClick={handleVerify}
+          >
+            {isSubmitting ? texts.verifying : texts.login}
+          </Button>
+        )}
+      </Space>
+
+      <Modal
+        open={Boolean(consentData)}
+        title={<Title level={4}>{texts.consentTitle}</Title>}
+        footer={null}
+        onCancel={() => {
+          setConsentData(null);
+          setAgreed(false);
+        }}
+        destroyOnClose
+      >
+        {consentData && (
+          <Space direction="vertical" size={12} style={{ width: '100%' }}>
+            <Paragraph>
+              {consentData.is_new_user
+                ? texts.consentHintNewUser
+                : texts.consentHintExistingUser}
+            </Paragraph>
+
+            <Space direction="vertical" style={{ width: '100%' }}>
+              {consentData.pending_agreements.map((agreement) => (
+                <Space key={agreement.id} align="center">
+                  <a
+                    href={agreement.url}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      consentLink(agreement.url);
+                    }}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {agreement.title}
+                  </a>
+                </Space>
+              ))}
+            </Space>
+
+            <Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)}>
+              <Text>
+                <SafetyOutlined /> {texts.agreeTerms}
+              </Text>
+            </Checkbox>
+
+            <Space direction="vertical" size={12} style={{ width: '100%' }}>
+              <Button
+                type="primary"
+                block
+                loading={processingConsent}
+                disabled={!agreed}
+                onClick={submitConsent}
+              >
+                {texts.continue}
+              </Button>
+              <Button onClick={() => {
+                setConsentData(null);
+                setAgreed(false);
+              }} block>
+                {texts.cancel}
+              </Button>
+            </Space>
+          </Space>
+        )}
+      </Modal>
+    </div>
+  );
+}