130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import Link from "next/link";
|
||
|
||
export default function Register() {
|
||
const router = useRouter();
|
||
const [formData, setFormData] = useState({
|
||
username: "",
|
||
password: "",
|
||
});
|
||
const [error, setError] = useState("");
|
||
const [agreed, setAgreed] = useState(false);
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
if (!agreed) {
|
||
throw new Error("您必须同意用户协议和隐私协议才能注册");
|
||
}
|
||
const res = await fetch("/api/auth/register", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(formData),
|
||
});
|
||
|
||
const data = await res.json();
|
||
|
||
if (!res.ok) {
|
||
throw new Error(data.error || "注册失败");
|
||
}
|
||
|
||
router.push("/login");
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
};
|
||
|
||
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}>
|
||
{error && <div className="text-red-500 text-center">{error}</div>}
|
||
<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-yellow-500 focus:border-yellow-500 focus:z-10 sm:text-sm"
|
||
placeholder="用户名"
|
||
value={formData.username}
|
||
onChange={(e) =>
|
||
setFormData({ ...formData, username: 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-yellow-500 focus:border-yellow-500 focus:z-10 sm:text-sm"
|
||
placeholder="密码"
|
||
value={formData.password}
|
||
onChange={(e) =>
|
||
setFormData({ ...formData, password: e.target.value })
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
required
|
||
checked={agreed}
|
||
onChange={(e) => setAgreed(e.target.checked)}
|
||
className="mr-2"
|
||
/>
|
||
<span className="text-sm">
|
||
我已阅读并同意
|
||
<Link
|
||
href="/user-agreement"
|
||
className="text-yellow-600 hover:underline"
|
||
>
|
||
用户协议
|
||
</Link>
|
||
和
|
||
<Link
|
||
href="/privacy-policy"
|
||
className="text-yellow-600 hover:underline"
|
||
>
|
||
隐私协议
|
||
</Link>
|
||
</span>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
type="submit"
|
||
disabled={!agreed}
|
||
className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white ${
|
||
agreed
|
||
? "bg-yellow-400 hover:bg-yellow-500"
|
||
: "bg-gray-400 cursor-not-allowed"
|
||
}`}
|
||
>
|
||
注册
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-sm text-center">
|
||
<Link
|
||
href="/login"
|
||
className="text-yellow-600 hover:text-yellow-500"
|
||
>
|
||
已有账户？立即登录
|
||
</Link>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|