前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/AuthForm.jsx b/src/components/AuthForm.jsx
new file mode 100644
index 0000000..ca28101
--- /dev/null
+++ b/src/components/AuthForm.jsx
@@ -0,0 +1,159 @@
+// 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;
\ No newline at end of file