Akane1217 | 65b61a7 | 2025-05-17 13:52:25 +0800 | [diff] [blame] | 1 | // src/components/AuthForm.jsx
|
| 2 | import React, { useState } from 'react';
|
| 3 | import { useNavigate } from 'react-router-dom';
|
| 4 | import { login, register } from '../api/auth';
|
| 5 | import './AuthForm.css';
|
| 6 |
|
| 7 | const 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 |
|
| 159 | export default AuthForm; |