107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function RegisterPage() {
|
||
const [email, setEmail] = useState("");
|
||
const [name, setName] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const router = useRouter();
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
const response = await fetch("/api/register", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ email, name, password }),
|
||
});
|
||
|
||
if (response.ok) {
|
||
alert("注册成功！请登录");
|
||
router.push("/login");
|
||
} else {
|
||
const result = await response.json();
|
||
const errorMessage =
|
||
result.error?.message || result.error || "注册失败，请重试";
|
||
alert(errorMessage);
|
||
}
|
||
} catch (err) {
|
||
alert("注册失败，请重试");
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||
<div className="max-w-md w-full space-y-8">
|
||
<div>
|
||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||
注册账户
|
||
</h2>
|
||
</div>
|
||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||
<div className="rounded-md shadow-sm -space-y-px">
|
||
<div>
|
||
<input
|
||
type="text"
|
||
required
|
||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||
placeholder="姓名"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<input
|
||
type="email"
|
||
required
|
||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||
placeholder="邮箱地址"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<input
|
||
type="password"
|
||
required
|
||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||
placeholder="密码"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
||
>
|
||
{isLoading ? "注册中..." : "注册"}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<a
|
||
href="/login"
|
||
className="font-medium text-indigo-600 hover:text-indigo-500"
|
||
>
|
||
已有账户？登录
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|