cx-chat 0.0.1 → 0.0.3

package/src/views/auth/login.tsx

@@ -1,498 +0,0 @@
-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;