feat: 创建登录/注册页面，支持用户认证和注册功能。
This commit is contained in:
@@ -0,0 +1,255 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { motion } from 'framer-motion';
|
||||
import authService from '../../services/authService';
|
||||
import './Login.css';
|
||||
|
||||
interface LoginProps {
|
||||
mode?: 'login' | 'register';
|
||||
}
|
||||
|
||||
export default function Login({ mode = 'login' }: LoginProps) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [isLogin, setIsLogin] = useState(mode === 'login');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Shared form data or separate? Let's use shared for email/password continuity
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
// Redirect if authenticated
|
||||
useEffect(() => {
|
||||
if (authService.isAuthenticated()) {
|
||||
const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/home';
|
||||
navigate(from, { replace: true });
|
||||
}
|
||||
}, [navigate, location]);
|
||||
|
||||
// Sync prop mode
|
||||
useEffect(() => {
|
||||
setIsLogin(mode === 'login');
|
||||
}, [mode]);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
setError('');
|
||||
};
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
await authService.register({
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
username: formData.username,
|
||||
});
|
||||
navigate('/home');
|
||||
} catch (err: unknown) {
|
||||
const errorMessage = err instanceof Error ? err.message : '注册失败，请重试';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
await authService.login({
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
});
|
||||
navigate('/home');
|
||||
} catch (err: unknown) {
|
||||
const errorMessage = err instanceof Error ? err.message : '登录失败，请重试';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const Particles = () => {
|
||||
return (
|
||||
<div className="particles-container" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
|
||||
{[...Array(15)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{
|
||||
x: Math.random() * window.innerWidth,
|
||||
y: Math.random() * window.innerHeight,
|
||||
opacity: Math.random() * 0.5 + 0.1,
|
||||
}}
|
||||
animate={{
|
||||
y: [null, Math.random() * window.innerHeight],
|
||||
x: [null, Math.random() * window.innerWidth],
|
||||
}}
|
||||
transition={{
|
||||
duration: Math.random() * 20 + 20,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "linear",
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: Math.random() * 4 + 2 + 'px',
|
||||
height: Math.random() * 4 + 2 + 'px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: i % 2 === 0 ? '#6366f1' : '#ec4899',
|
||||
filter: 'blur(1px)',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<Particles />
|
||||
|
||||
<div className={`container ${!isLogin ? 'right-panel-active' : ''}`} id="container">
|
||||
{/* Sign Up Form */}
|
||||
<div className="form-container sign-up-container">
|
||||
<form onSubmit={handleRegister}>
|
||||
<h1>创建账户</h1>
|
||||
<div className="social-container">
|
||||
<a href={authService.getGitHubLoginUrl()} title="Github Login">
|
||||
<Icon icon="mdi:github" width="20" />
|
||||
</a>
|
||||
<a href={authService.getGiteeLoginUrl()} title="Gitee Login">
|
||||
<Icon icon="simple-icons:gitee" width="20" />
|
||||
</a>
|
||||
</div>
|
||||
<span>或使用邮箱注册</span>
|
||||
|
||||
<div className="login-field">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
className="login-input"
|
||||
placeholder="用户名"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required={!isLogin}
|
||||
/>
|
||||
</div>
|
||||
<div className="login-field">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
className="login-input"
|
||||
placeholder="邮箱"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="login-field">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
className="login-input"
|
||||
placeholder="密码"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && !isLogin && <p style={{ color: 'red', margin: '5px 0' }}>{error}</p>}
|
||||
|
||||
<button className="login-button" disabled={loading}>
|
||||
{loading ? <Icon icon="line-md:loading-twotone-loop" /> : '注册'}
|
||||
</button>
|
||||
|
||||
<div className="mobile-toggle">
|
||||
<span onClick={() => setIsLogin(true)}>已有账户？去登录</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Sign In Form */}
|
||||
<div className="form-container sign-in-container">
|
||||
<form onSubmit={handleLogin}>
|
||||
<h1>欢迎回来</h1>
|
||||
<div className="social-container">
|
||||
<a href={authService.getGitHubLoginUrl()} title="Github Login">
|
||||
<Icon icon="mdi:github" width="20" />
|
||||
</a>
|
||||
<a href={authService.getGiteeLoginUrl()} title="Gitee Login">
|
||||
<Icon icon="simple-icons:gitee" width="20" />
|
||||
</a>
|
||||
</div>
|
||||
<span>或使用账户登录</span>
|
||||
|
||||
<div className="login-field">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
className="login-input"
|
||||
placeholder="邮箱"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="login-field">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
className="login-input"
|
||||
placeholder="密码"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p style={{ margin: '10px 0', fontSize: '12px', cursor: 'pointer' }}>忘记密码?</p>
|
||||
|
||||
{error && isLogin && <p style={{ color: 'red', margin: '5px 0' }}>{error}</p>}
|
||||
|
||||
<button className="login-button" disabled={loading}>
|
||||
{loading ? <Icon icon="line-md:loading-twotone-loop" /> : '登录'}
|
||||
</button>
|
||||
|
||||
<div className="mobile-toggle">
|
||||
<span onClick={() => setIsLogin(false)}>还没有账户？去注册</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Overlay Container */}
|
||||
<div className="overlay-container">
|
||||
<div className="overlay">
|
||||
<div className="overlay-panel overlay-left">
|
||||
<h1>欢迎回来!</h1>
|
||||
<p>为了保持与我们的联系，请登录您的个人信息</p>
|
||||
<button className="ghost" onClick={() => setIsLogin(true)}>
|
||||
去登录
|
||||
</button>
|
||||
</div>
|
||||
<div className="overlay-panel overlay-right">
|
||||
<h1>你好，朋友!</h1>
|
||||
<p>输入您的个人详细信息并开始与我们一起管理旅程</p>
|
||||
<button className="ghost" onClick={() => setIsLogin(false)}>
|
||||
去注册
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user