58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { register } from '../api/auth';
|
||
import { useNavigate, Link } from 'react-router-dom';
|
||
|
||
const Register: React.FC = () => {
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const navigate = useNavigate();
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
await register(username, password);
|
||
setSuccess('注册成功，请登录');
|
||
setTimeout(() => navigate('/login'), 1000);
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.message || '注册失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center py-4 sm:py-10 px-1 sm:px-2">
|
||
<div className="w-full max-w-xs sm:max-w-md bg-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-8">
|
||
<h2 className="text-2xl sm:text-3xl font-bold text-center mb-4 sm:mb-6 text-blue-600 tracking-tight">注册</h2>
|
||
<form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:gap-4 mb-2">
|
||
<input
|
||
className="border rounded px-2 sm:px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base"
|
||
type="text"
|
||
placeholder="用户名"
|
||
value={username}
|
||
onChange={e => setUsername(e.target.value)}
|
||
required
|
||
/>
|
||
<input
|
||
className="border rounded px-2 sm:px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base"
|
||
type="password"
|
||
placeholder="密码"
|
||
value={password}
|
||
onChange={e => setPassword(e.target.value)}
|
||
required
|
||
/>
|
||
{error && <div className="text-red-500 text-xs sm:text-sm text-center">{error}</div>}
|
||
{success && <div className="text-green-500 text-xs sm:text-sm text-center">{success}</div>}
|
||
<button className="bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition text-sm sm:text-base" type="submit">注册</button>
|
||
</form>
|
||
<div className="text-xs sm:text-sm text-center mt-3 sm:mt-4">
|
||
已有账号？<Link to="/login" className="text-blue-500 hover:underline">登录</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Register;
|