blob: ca28101820549eea6b269149050e63001f7c9550 [file] [log] [blame]
Akane121765b61a72025-05-17 13:52:25 +08001// src/components/AuthForm.jsx
2import React, { useState } from 'react';
3import { useNavigate } from 'react-router-dom';
4import { login, register } from '../api/auth';
5import './AuthForm.css';
6
7const AuthForm = ({ onLoginSuccess }) => {
8 const [isLogin, setIsLogin] = useState(true);
9 const [formData, setFormData] = useState({
10 username: '',
11 password: '',
12 code: ''
13 });
14 const [error, setError] = useState('');
15 const [isLoading, setIsLoading] = useState(false);
16 const navigate = useNavigate();
17
18 const handleChange = (e) => {
19 const { name, value } = e.target;
20 setFormData(prev => ({ ...prev, [name]: value }));
21 };
22
23 const handleSubmit = async (e) => {
24 e.preventDefault();
25
26 try {
27 if (isLogin) {
28 const response = await login(formData.username, formData.password);
29 if (response.data.code === 200) {
30 localStorage.setItem('token', response.data.data.token);
31 localStorage.setItem('username', formData.username);
32 onLoginSuccess?.();
33 navigate('/dashboard');
34 } else {
35 setError(response.data.message || '登录失败');
36 }
37 } else {
38 const response = await register(
39 formData.username,
40 formData.password,
41 formData.code
42 );
43 if (response.data.code === 200) {
44 setError('');
45 setIsLogin(true);
46 setFormData({ username: '', password: '', code: '' });
47 } else {
48 setError(response.data.message || '注册失败');
49 }
50 }
51 } catch (err) {
52 setError(err.message || (isLogin ? '登录失败' : '注册失败'));
53 } finally {
54 setIsLoading(false);
55 }
56
57
58
59 };
60
61 return (
62 <div className="auth-container">
63 <h1 className="auth-title">PT影视资源站</h1>
64
65 <div className="auth-form-wrapper">
66 {isLogin ? (
67 <form className="auth-form" onSubmit={handleSubmit}>
68 <h2>用户登录</h2>
69 {error && <div className="error-message">{error}</div>}
70
71 <div className="form-group">
72 <input
73 type="text"
74 name="username"
75 placeholder="账号"
76 value={formData.username}
77 onChange={handleChange}
78 required
79 />
80 </div>
81
82 <div className="form-group">
83 <input
84 type="password"
85 name="password"
86 placeholder="密码"
87 value={formData.password}
88 onChange={handleChange}
89 required
90 />
91 </div>
92
93 <button type="submit" className="auth-button" disabled={isLoading}>
94 {isLoading ? '登录中...' : '登录'}
95 </button>
96
97 <div className="auth-switch">
98 <span>未有账户?</span>
99 <button type="button" onClick={() => setIsLogin(false)} className="switch-button">
100 去注册
101 </button>
102 </div>
103 </form>
104 ) : (
105 <form className="auth-form" onSubmit={handleSubmit}>
106 <h2>用户注册</h2>
107 {error && <div className="error-message">{error}</div>}
108
109 <div className="form-group">
110 <input
111 type="text"
112 name="username"
113 placeholder="账号"
114 value={formData.username}
115 onChange={handleChange}
116 required
117 />
118 </div>
119
120 <div className="form-group">
121 <input
122 type="password"
123 name="password"
124 placeholder="密码"
125 value={formData.password}
126 onChange={handleChange}
127 required
128 />
129 </div>
130
131 <div className="form-group">
132 <input
133 type="text"
134 name="code"
135 placeholder="邀请码"
136 value={formData.code}
137 onChange={handleChange}
138 required
139 />
140 </div>
141
142 <button type="submit" className="auth-button" disabled={isLoading}>
143 {isLoading ? '注册中...' : '注册'}
144 </button>
145
146 <div className="auth-switch">
147 <span>已有账户?</span>
148 <button type="button" onClick={() => setIsLogin(true)} className="switch-button">
149 去登录
150 </button>
151 </div>
152 </form>
153 )}
154 </div>
155 </div>
156 );
157};
158
159export default AuthForm;