| // 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; |