blob: ca28101820549eea6b269149050e63001f7c9550 [file] [log] [blame]
// src/components/AuthForm.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { login, register } from '../api/auth';
import './AuthForm.css';
const AuthForm = ({ onLoginSuccess }) => {
const [isLogin, setIsLogin] = useState(true);
const [formData, setFormData] = useState({
username: '',
password: '',
code: ''
});
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
if (isLogin) {
const response = await login(formData.username, formData.password);
if (response.data.code === 200) {
localStorage.setItem('token', response.data.data.token);
localStorage.setItem('username', formData.username);
onLoginSuccess?.();
navigate('/dashboard');
} else {
setError(response.data.message || '登录失败');
}
} else {
const response = await register(
formData.username,
formData.password,
formData.code
);
if (response.data.code === 200) {
setError('');
setIsLogin(true);
setFormData({ username: '', password: '', code: '' });
} else {
setError(response.data.message || '注册失败');
}
}
} catch (err) {
setError(err.message || (isLogin ? '登录失败' : '注册失败'));
} finally {
setIsLoading(false);
}
};
return (
<div className="auth-container">
<h1 className="auth-title">PT影视资源站</h1>
<div className="auth-form-wrapper">
{isLogin ? (
<form className="auth-form" onSubmit={handleSubmit}>
<h2>用户登录</h2>
{error && <div className="error-message">{error}</div>}
<div className="form-group">
<input
type="text"
name="username"
placeholder="账号"
value={formData.username}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<input
type="password"
name="password"
placeholder="密码"
value={formData.password}
onChange={handleChange}
required
/>
</div>
<button type="submit" className="auth-button" disabled={isLoading}>
{isLoading ? '登录中...' : '登录'}
</button>
<div className="auth-switch">
<span>未有账户?</span>
<button type="button" onClick={() => setIsLogin(false)} className="switch-button">
去注册
</button>
</div>
</form>
) : (
<form className="auth-form" onSubmit={handleSubmit}>
<h2>用户注册</h2>
{error && <div className="error-message">{error}</div>}
<div className="form-group">
<input
type="text"
name="username"
placeholder="账号"
value={formData.username}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<input
type="password"
name="password"
placeholder="密码"
value={formData.password}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<input
type="text"
name="code"
placeholder="邀请码"
value={formData.code}
onChange={handleChange}
required
/>
</div>
<button type="submit" className="auth-button" disabled={isLoading}>
{isLoading ? '注册中...' : '注册'}
</button>
<div className="auth-switch">
<span>已有账户?</span>
<button type="button" onClick={() => setIsLogin(true)} className="switch-button">
去登录
</button>
</div>
</form>
)}
</div>
</div>
);
};
export default AuthForm;