cx-chat 0.0.1

package/src/views/auth/login.tsx

@@ -0,0 +1,498 @@
+import { loginAPI, recoverPasswordAPI, sendEmailVerifyCodeAPI } from '@/api/common/auth';
+import { setUserCurrentLanguageAPI } from '@/api/system/user';
+import LanguageSwitcher from '@/components/common/language-switcher';
+import { SystemLogoMark } from '@/components/common/system-logo-mark';
+import { useSystemConfig } from '@/config/system';
+import { antdTheme } from '@/styles/antd-theme';
+import { getStore } from '@/utils/storage';
+import { CxInput } from '@cx-ui';
+import aesUtil from '@utils/aesUtil';
+import { ConfigProvider, theme as antdThemePreset, type ThemeConfig } from 'antd';
+import { ArrowRight, Loader2, Lock, Phone } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { useMenu } from '../../contexts/MenuContext';
+import { useToast } from '../../contexts/ToastContext';
+import AuthCode from './auth-code';
+
+const loginPageAntdTheme: ThemeConfig = {
+    ...antdTheme,
+    algorithm: antdThemePreset.darkAlgorithm,
+    components: {
+        Input: {
+            colorBgContainer: 'rgba(19, 19, 20, 0.55)',
+            colorBorder: '#3f3f46',
+            hoverBorderColor: '#52525b',
+            activeBorderColor: '#52525b',
+            /** 去掉 antd 默认浅色 active 光晕，避免暗色表单聚焦闪白 */
+            activeShadow: 'none',
+        },
+    },
+};
+
+const LoginPage: React.FC = () => {
+    const { systemName } = useSystemConfig()
+    const [phone, setPhone] = useState('');
+    const [password, setPassword] = useState('');
+    const loginSnapshotRef = useRef({ phone: '', password: '' });
+    const [isLoading, setIsLoading] = useState(false);
+    const { login, refreshUser, isAuthenticated, isLoading: authLoading } = useAuth();
+    const { refreshMenus } = useMenu()
+    const { showToast, clearToasts } = useToast();
+    const navigate = useNavigate();
+    const { t, i18n } = useTranslation();
+    const authRef = useRef<any>(null);
+    const [isAuthCodeVisible, setIsAuthCodeVisible] = useState(false);
+
+    const RECOVER_EMAIL_CODE_COOLDOWN_KEY = 'recover_email_code_cooldown_until';
+    const [isRecoverOpen, setIsRecoverOpen] = useState(false);
+    const [recoverEmail, setRecoverEmail] = useState('');
+    const [recoverEmailCode, setRecoverEmailCode] = useState('');
+    const [recoverNewPassword, setRecoverNewPassword] = useState('');
+    const [recoverConfirmPassword, setRecoverConfirmPassword] = useState('');
+    const [recoverCooldownSeconds, setRecoverCooldownSeconds] = useState(0);
+    const [recoverCooldownLoading, setRecoverCooldownLoading] = useState(true);
+    const [recoverSendingCode, setRecoverSendingCode] = useState(false);
+    const [recoverSubmitting, setRecoverSubmitting] = useState(false);
+    const recoverAuthSnapshotRef = useRef({ email: '' });
+    const [isRecoverAuthCodeVisible, setIsRecoverAuthCodeVisible] = useState(false);
+
+    /** 刷新落到登录页：token 有效则跳转默认路由，避免再次显示登录页 */
+    useEffect(() => {
+        const token = getStore('token');
+        if (!token) return;
+        if (authLoading) return;
+        if (isAuthenticated) {
+            clearToasts();
+            navigate('/chat', { replace: true });
+        }
+    }, [authLoading, isAuthenticated, navigate, clearToasts]);
+    const onReset = () => {
+        // loginForm.resetFields();
+    };
+    const close = () => {
+        setIsAuthCodeVisible(false);
+    };
+    /** 关闭找回密码弹框并清理输入 */
+    const closeRecover = () => {
+        setIsRecoverOpen(false);
+        setRecoverEmail('');
+        setRecoverEmailCode('');
+        setRecoverNewPassword('');
+        setRecoverConfirmPassword('');
+        setIsRecoverAuthCodeVisible(false);
+    };
+    /** 登录前快照当前界面语言：避免登录流程覆盖 localStorage 后丢失用户选择。 */
+    const resolvePendingLanguageForLoginSync = () => {
+        console.log('getStore(i18nextLng)', getStore('i18nextLng'));
+        const raw = i18n.language || getStore('i18nextLng') || 'zh'
+        return raw.toLowerCase().startsWith('zh') ? 'zh' : 'en'
+    }
+    const validImg = async (data: any, callback: any) => {
+        const { phone: submitPhone, password: submitPassword } = loginSnapshotRef.current;
+        const isSuper = submitPhone === 'super';
+        const isValidPhone = /^1\d{10}$/.test(submitPhone);
+        if (!isSuper && !isValidPhone) {
+            showToast(t('auth.login.invalid_phone'), 'error');
+            callback?.();
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            const body: any = await loginAPI({
+                phone: aesUtil.encrypt(submitPhone),
+                password: aesUtil.encrypt(submitPassword),
+                captchaId: data.uuid,
+                imageCaptchaTrack: data.trackData,
+            });
+            if (!body?.success) {
+                console.log(body?.message || t('auth.login.failed'));
+                callback?.();
+                return;
+            }
+
+            const nextLng = resolvePendingLanguageForLoginSync()
+            await login(body.data.token);
+            await refreshMenus()
+
+            // 登录页语言切换仅本地；登录成功后将当前语言同步到服务端
+            try {
+                await setUserCurrentLanguageAPI({
+                    language: nextLng,
+                    lang: nextLng,
+                    code: nextLng,
+                } as any);
+                await refreshUser();
+            } catch (e) {
+                // 语言同步失败不影响登录主流程
+            }
+            setIsAuthCodeVisible(false);
+            clearToasts();
+            navigate('/chat');
+        } catch (err: any) {
+            console.error('Login failed', err);
+            showToast(err?.message || t('auth.login.failed'), 'error');
+            callback?.();
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (isLoading) return;
+
+        const submitPhone = `${phone || ''}`.trim();
+        const submitPassword = `${password || ''}`;
+        loginSnapshotRef.current = {
+            phone: submitPhone,
+            password: submitPassword,
+        };
+
+        const isSuper = submitPhone === 'super';
+        const isValidPhone = /^1\d{10}$/.test(submitPhone);
+        if (!isSuper && !isValidPhone) {
+            showToast(t('auth.login.invalid_phone'), 'error');
+            return;
+        }
+
+        setIsAuthCodeVisible(true);
+    };
+
+    /** 初始化找回密码邮箱验证码倒计时（刷新页面继续） */
+    useEffect(() => {
+        const raw = localStorage.getItem(RECOVER_EMAIL_CODE_COOLDOWN_KEY) || '0';
+        const cooldownUntil = Number(raw);
+        const left = Math.ceil((cooldownUntil - Date.now()) / 1000);
+        setRecoverCooldownSeconds(left > 0 ? left : 0);
+        setRecoverCooldownLoading(false);
+    }, []);
+
+    /** 找回密码倒计时每秒递减 */
+    useEffect(() => {
+        if (recoverCooldownSeconds <= 0) return;
+        const timer = window.setInterval(() => {
+            setRecoverCooldownSeconds((prev) => {
+                const next = prev - 1;
+                if (next <= 0) {
+                    localStorage.removeItem(RECOVER_EMAIL_CODE_COOLDOWN_KEY);
+                    return 0;
+                }
+                return next;
+            });
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [recoverCooldownSeconds]);
+
+    /** 打开滑动验证码后发送邮箱验证码 */
+    const handleRecoverSendEmailCode = async (data: any, callback?: any) => {
+        const email = recoverAuthSnapshotRef.current.email;
+        setIsRecoverAuthCodeVisible(false);
+        try {
+            setRecoverSendingCode(true);
+            const resp: any = await sendEmailVerifyCodeAPI({
+                email,
+                captchaId: data?.uuid,
+                imageCaptchaTrack: data?.trackData,
+            });
+            const leftSeconds = resp?.data ?? resp?.data?.data;
+            const nextSeconds = typeof leftSeconds === 'number' ? leftSeconds : 120;
+            const cooldownUntil = Date.now() + nextSeconds * 1000;
+            localStorage.setItem(RECOVER_EMAIL_CODE_COOLDOWN_KEY, `${cooldownUntil}`);
+            setRecoverCooldownSeconds(nextSeconds);
+            setRecoverEmailCode('');
+            showToast(t('auth.recover.email_code_sent_success'), 'success');
+        } catch (e: any) {
+            showToast(e?.message || t('auth.recover.email_code_sent_failed'), 'error');
+            callback?.();
+        } finally {
+            setRecoverSendingCode(false);
+        }
+    };
+
+    /** 触发找回密码发送验证码：先弹出滑动验证码 */
+    const openRecoverSendCode = () => {
+        if (recoverSendingCode || recoverCooldownLoading || recoverCooldownSeconds > 0) return;
+        const email = `${recoverEmail || ''}`.trim();
+        if (!email) {
+            showToast(t('auth.recover.email_required'), 'error');
+            return;
+        }
+        recoverAuthSnapshotRef.current = { email };
+        setIsRecoverAuthCodeVisible(true);
+    };
+
+    /** 提交找回密码 */
+    const submitRecoverPassword = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (recoverSubmitting) return;
+        const email = `${recoverEmail || ''}`.trim();
+        if (!email) {
+            showToast(t('auth.recover.email_required'), 'error');
+            return;
+        }
+        if (!recoverEmailCode.trim()) {
+            showToast(t('auth.recover.email_code_required'), 'error');
+            return;
+        }
+        if (!recoverNewPassword) {
+            showToast(t('auth.recover.new_password_required'), 'error');
+            return;
+        }
+        if (!recoverConfirmPassword) {
+            showToast(t('auth.recover.confirm_password_required'), 'error');
+            return;
+        }
+        if (recoverNewPassword !== recoverConfirmPassword) {
+            showToast(t('auth.recover.password_mismatch'), 'error');
+            return;
+        }
+        try {
+            setRecoverSubmitting(true);
+            await recoverPasswordAPI({
+                email,
+                emailCode: recoverEmailCode.trim(),
+                newPassword: recoverNewPassword,
+                confirmPassword: recoverConfirmPassword,
+            });
+            showToast(t('auth.recover.success'), 'success');
+            closeRecover();
+        } catch (e: any) {
+            showToast(e?.message || t('auth.recover.failed'), 'error');
+        } finally {
+            setRecoverSubmitting(false);
+        }
+    };
+
+    const stars = React.useMemo(() => {
+        return Array.from({ length: 30 }).map((_, i) => ({
+            id: i,
+            top: `${Math.random() * 40}%`,
+            left: `${Math.random() * 40}%`,
+            size: Math.random() * 2 + 1,
+            opacity: Math.random() * 0.7 + 0.3,
+            delay: Math.random() * 5,
+            isBlue: Math.random() > 0.7,
+        }));
+    }, []);
+
+    const hasToken = !!getStore('token');
+
+    if (hasToken && authLoading) {
+        return (
+            <div className="min-h-screen w-full flex items-center justify-center bg-[#131314]">
+                <Loader2 className="animate-spin h-8 w-8 text-blue-600" />
+            </div>
+        );
+    }
+
+    return (
+        <ConfigProvider theme={loginPageAntdTheme}>
+            <div className="auth-dark-cx min-h-screen w-full flex items-center justify-center bg-[#131314] relative overflow-hidden">
+                <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
+                    {stars.map((star) => (
+                        <div
+                            key={star.id}
+                            className={`absolute rounded-full ${star.isBlue ? 'bg-blue-200' : 'bg-white'} animate-pulse`}
+                            style={{
+                                top: star.top,
+                                left: star.left,
+                                width: `${star.size}px`,
+                                height: `${star.size}px`,
+                                opacity: star.opacity,
+                                animationDuration: `${3 + star.delay}s`,
+                                boxShadow: star.isBlue
+                                    ? `0 0 ${star.size * 2}px rgba(147, 197, 253, 0.6)`
+                                    : `0 0 ${star.size}px rgba(255, 255, 255, 0.4)`,
+                            }}
+                        />
+                    ))}
+                </div>
+
+                <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px] pointer-events-none" />
+                <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-purple-600/20 rounded-full blur-[120px] pointer-events-none" />
+
+                <div className="absolute top-6 right-6 z-20">
+                    <LanguageSwitcher direction="down" localOnly />
+                </div>
+
+                <div className="w-full max-w-md p-8 relative z-10 animate-fade-in-up" style={{ marginTop: '20px' }}>
+                    <div className="text-center mb-10">
+                        <div className="flex items-center justify-center gap-4 mb-6">
+                            <SystemLogoMark className="w-12 h-12" fallbackShape="square" />
+                            <h1 className="text-3xl font-extrabold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
+                                {systemName}
+                            </h1>
+                        </div>
+                        <h2 className="text-lg text-gray-400 mb-3 font-medium">{t('auth.login.title')}</h2>
+                        <p className="text-gray-500 text-sm">
+                            {t('auth.login.no_account')}{' '}
+                            <Link
+                                to="/register"
+                                onClick={() => clearToasts()}
+                                className="text-blue-400 hover:text-blue-300 font-medium transition-colors hover:underline"
+                            >
+                                {t('auth.login.create_account')}
+                            </Link>
+                        </p>
+                    </div>
+
+                    <div className="bg-[#1e1f20]/60 backdrop-blur-xl border border-gray-800 rounded-3xl px-8 pb-8 pt-7 shadow-2xl">
+                        {!isRecoverOpen ? (
+                            <form className="space-y-6" onSubmit={handleSubmit}>
+                            <div className="space-y-4">
+                                <CxInput
+                                    className="w-full"
+                                    required
+                                    prefix={<Phone className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                                    placeholder={t('auth.login.phone_placeholder')}
+                                    value={phone}
+                                    onChange={(e) => setPhone(e.target.value)}
+                                    style={{ height: '54px' }}
+                                />
+                                <CxInput
+                                    className="w-full"
+                                    type="password"
+                                    required
+                                    prefix={<Lock className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                                    placeholder={t('auth.login.password_placeholder')}
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    style={{ height: '54px' }}
+                                />
+                            </div>
+
+                            <button
+                                type="submit"
+                                disabled={isLoading}
+                                className="w-full relative flex items-center justify-center py-3.5 px-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-blue-500/25 dark:shadow-none hover:shadow-blue-500/40 transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                            >
+                                {isLoading ? (
+                                    <Loader2 className="animate-spin h-5 w-5" />
+                                ) : (
+                                    <span className="flex items-center gap-2">
+                                        {t('auth.login.submit')} <ArrowRight size={18} />
+                                    </span>
+                                )}
+                            </button>
+
+                            <div className="text-center" style={{ marginTop: '12px' }}>
+                                <button
+                                    type="button"
+                                    onClick={() => setIsRecoverOpen(true)}
+                                    className="text-sm text-blue-300 hover:text-blue-200 hover:underline"
+                                >
+                                    {t('auth.recover.entry')}
+                                </button>
+                            </div>
+                            {isAuthCodeVisible && (
+                                <AuthCode ref={authRef} validImg={validImg} close={close} onReset={onReset} />
+                            )}
+                            </form>
+                        ) : (
+                            <form className="space-y-5" onSubmit={submitRecoverPassword} autoComplete="new-password">
+                                <div className="flex items-center justify-between">
+                                    <div className="text-white font-semibold">{t('auth.recover.title')}</div>
+                                    <button
+                                        type="button"
+                                        onClick={closeRecover}
+                                        className="text-sm text-gray-300 hover:text-white"
+                                    >
+                                        {t('auth.recover.back_to_login')}
+                                    </button>
+                                </div>
+
+                                <CxInput
+                                    className="w-full"
+                                    type="email"
+                                    required
+                                    autoComplete="off"
+                                    placeholder={t('auth.recover.email_placeholder')}
+                                    value={recoverEmail}
+                                    onChange={(e) => {
+                                        setRecoverEmail(e.target.value);
+                                        setRecoverEmailCode('');
+                                    }}
+                                />
+
+                                <div className="flex items-center gap-2">
+                                    <button
+                                        type="button"
+                                        disabled={recoverSendingCode || recoverCooldownLoading || recoverCooldownSeconds > 0}
+                                        onClick={openRecoverSendCode}
+                                        className="shrink-0 px-4 py-2.5 border border-blue-500/60 text-blue-300 hover:text-white hover:bg-blue-500/20 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                                    >
+                                        {recoverCooldownLoading || recoverSendingCode ? (
+                                            <span className="flex items-center gap-2">
+                                                <Loader2 className="animate-spin h-4 w-4" />
+                                                {t('common.loading')}
+                                            </span>
+                                        ) : recoverCooldownSeconds > 0 ? (
+                                            t('auth.recover.send_code_countdown', { count: recoverCooldownSeconds })
+                                        ) : (
+                                            t('auth.recover.send_code')
+                                        )}
+                                    </button>
+                                    <CxInput
+                                        className="min-w-0 flex-1"
+                                        autoComplete="off"
+                                        placeholder={t('auth.recover.email_code_placeholder')}
+                                        value={recoverEmailCode}
+                                        onChange={(e) => setRecoverEmailCode(e.target.value)}
+                                    />
+                                </div>
+
+                                <CxInput
+                                    className="w-full"
+                                    type="password"
+                                    required
+                                    autoComplete="new-password"
+                                    placeholder={t('auth.recover.new_password_placeholder')}
+                                    value={recoverNewPassword}
+                                    onChange={(e) => setRecoverNewPassword(e.target.value)}
+                                />
+                                <CxInput
+                                    className="w-full"
+                                    type="password"
+                                    required
+                                    autoComplete="new-password"
+                                    placeholder={t('auth.recover.confirm_password_placeholder')}
+                                    value={recoverConfirmPassword}
+                                    onChange={(e) => setRecoverConfirmPassword(e.target.value)}
+                                />
+
+                                <button
+                                    type="submit"
+                                    disabled={recoverSubmitting}
+                                    className="w-full relative flex items-center justify-center py-3.5 px-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-blue-500/25 dark:shadow-none hover:shadow-blue-500/40 transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                                >
+                                    {recoverSubmitting ? (
+                                        <Loader2 className="animate-spin h-5 w-5" />
+                                    ) : (
+                                        <span className="flex items-center gap-2">
+                                            {t('auth.recover.submit')} <ArrowRight size={18} />
+                                        </span>
+                                    )}
+                                </button>
+
+                                {isRecoverAuthCodeVisible ? (
+                                    <AuthCode
+                                        validImg={handleRecoverSendEmailCode}
+                                        close={() => setIsRecoverAuthCodeVisible(false)}
+                                        onReset={() => {}}
+                                    />
+                                ) : null}
+                            </form>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </ConfigProvider>
+    );
+};
+
+export default LoginPage;