feat(auth): implement secure authentication flow with RSA encryption
- Add jsencrypt and js-base64 dependencies for RSA encryption - Create AuthGuard component for route protection - Implement encryption utility for password security - Refactor login page with tabbed interface and form validation - Add login hooks for authentication state management - Update user service to handle encrypted passwords
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Box,
|
||||
@@ -14,54 +12,35 @@ import {
|
||||
Toolbar,
|
||||
Card,
|
||||
CardContent,
|
||||
Alert
|
||||
Alert,
|
||||
Tabs,
|
||||
Tab
|
||||
} from '@mui/material';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher';
|
||||
import userService from '../services/user_service';
|
||||
import { useLoginPage } from '../hooks/login-hooks';
|
||||
|
||||
const Login = () => {
|
||||
const { t } = useTranslation();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [rememberEmail, setRememberEmail] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [passwordError, setPasswordError] = useState(false);
|
||||
const [loginError, setLoginError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
console.log(t, t('en'), t('login'));
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const hasEmail = !!email.trim();
|
||||
const hasPassword = !!password.trim();
|
||||
setEmailError(!hasEmail);
|
||||
setPasswordError(!hasPassword);
|
||||
setLoginError('');
|
||||
const {
|
||||
// 表单状态
|
||||
tabValue,
|
||||
setTabValue,
|
||||
error,
|
||||
loginForm,
|
||||
registerForm,
|
||||
|
||||
if (!hasEmail || !hasPassword) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
// 表单操作
|
||||
handleTabChange,
|
||||
|
||||
try {
|
||||
const response = await userService.login({ email, password });
|
||||
|
||||
// if (response.code === 0) {
|
||||
// // 登录成功,跳转到主页
|
||||
// navigate('/');
|
||||
// } else {
|
||||
// // 登录失败,显示错误信息
|
||||
// setLoginError(response.message || t('login.loginFailed'));
|
||||
// }
|
||||
} catch (error: any) {
|
||||
// 处理网络错误或其他异常
|
||||
setLoginError(error.message || t('login.networkError'));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
// 提交处理
|
||||
handleLogin,
|
||||
handleRegister,
|
||||
isSubmitting,
|
||||
|
||||
// 验证规则
|
||||
loginValidation,
|
||||
registerValidation
|
||||
} = useLoginPage();
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', width: '100vw', bgcolor: 'background.default', display: 'flex', flexDirection: 'column' }}>
|
||||
@@ -96,67 +75,138 @@ const Login = () => {
|
||||
<Typography variant="subtitle1" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
T-Systems Enterprise RAG Empowerment System
|
||||
</Typography>
|
||||
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
|
||||
{t('login.login')}
|
||||
<br /> {t('login.emailLabel')} & {t('login.passwordLabel')}
|
||||
</Typography>
|
||||
|
||||
{/* 标签页 */}
|
||||
<Tabs value={tabValue} onChange={handleTabChange} sx={{ mb: 3 }}>
|
||||
<Tab label={t('login.login')} />
|
||||
<Tab label={t('login.signUp')} />
|
||||
</Tabs>
|
||||
|
||||
<Box component="form" onSubmit={handleSubmit} noValidate>
|
||||
{loginError && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{loginError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder={t('login.emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
error={emailError}
|
||||
required
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder={t('login.passwordPlaceholder')}
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
error={passwordError}
|
||||
required
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={rememberEmail}
|
||||
onChange={(e) => setRememberEmail(e.target.checked)}
|
||||
id="rememberEmail"
|
||||
/>
|
||||
}
|
||||
label={t('login.rememberMe')}
|
||||
{/* 登录表单 */}
|
||||
{tabValue === 0 && (
|
||||
<Box component="form" onSubmit={loginForm.handleSubmit(handleLogin)} noValidate>
|
||||
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
|
||||
{t('login.loginDescription')}
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="login-email"
|
||||
type="email"
|
||||
placeholder={t('login.emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
{...loginForm.register('email', loginValidation.email)}
|
||||
error={!!loginForm.formState.errors.email}
|
||||
helperText={loginForm.formState.errors.email?.message}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button type="submit" variant="contained" fullWidth disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Processing...' : t('login.login')}
|
||||
</Button>
|
||||
</Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="login-password"
|
||||
type="password"
|
||||
placeholder={t('login.passwordPlaceholder')}
|
||||
autoComplete="current-password"
|
||||
{...loginForm.register('password', loginValidation.password)}
|
||||
error={!!loginForm.formState.errors.password}
|
||||
helperText={loginForm.formState.errors.password?.message}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
{...loginForm.register('rememberEmail')}
|
||||
id="rememberEmail"
|
||||
/>
|
||||
}
|
||||
label={t('login.rememberMe')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
disabled={isSubmitting}
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Processing...' : t('login.login')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 注册表单 */}
|
||||
{tabValue === 1 && (
|
||||
<Box component="form" onSubmit={registerForm.handleSubmit(handleRegister)} noValidate>
|
||||
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
|
||||
{t('login.registerDescription')}
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="register-nickname"
|
||||
placeholder={t('login.nicknamePlaceholder')}
|
||||
{...registerForm.register('nickname', registerValidation.nickname)}
|
||||
error={!!registerForm.formState.errors.nickname}
|
||||
helperText={registerForm.formState.errors.nickname?.message}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="register-email"
|
||||
type="email"
|
||||
placeholder={t('login.emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
{...registerForm.register('email', registerValidation.email)}
|
||||
error={!!registerForm.formState.errors.email}
|
||||
helperText={registerForm.formState.errors.email?.message}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="register-password"
|
||||
type="password"
|
||||
placeholder={t('login.passwordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
{...registerForm.register('password', registerValidation.password)}
|
||||
error={!!registerForm.formState.errors.password}
|
||||
helperText={registerForm.formState.errors.password?.message}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
disabled={isSubmitting}
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Processing...' : t('login.register')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ mt: 2, textAlign: 'center' }}>
|
||||
<Box mt={0.5}>
|
||||
{t('login.signInTip')} <Link href="#">{t('login.signUp')}</Link>.
|
||||
{tabValue === 0 ? (
|
||||
<>
|
||||
{t('login.signInTip')} <Link href="#" onClick={() => setTabValue(1)}>{t('login.signUp')}</Link>.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('login.signUpTip')} <Link href="#" onClick={() => setTabValue(0)}>{t('login.login')}</Link>.
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user