105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/navigation";
|
||
import { useSession } from "next-auth/react";
|
||
import { useActionState, useEffect, useState } from "react";
|
||
import { AuthForm } from "@/components/auth-form";
|
||
import { SubmitButton } from "@/components/submit-button";
|
||
import { toast } from "@/components/toast";
|
||
import { type RegisterActionState, register } from "../actions";
|
||
|
||
export default function Page() {
|
||
const router = useRouter();
|
||
|
||
const [email, setEmail] = useState("");
|
||
const [isSuccessful, setIsSuccessful] = useState(false);
|
||
const [siteName, setSiteName] = useState("AI Chatbot");
|
||
const [siteLogo, setSiteLogo] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
// 获取认证设置并检查是否开放注册
|
||
fetch("/api/auth-settings")
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data.isRegistrationEnabled === false) {
|
||
toast({ type: "error", description: "当前系统未开放注册" });
|
||
router.push("/login");
|
||
}
|
||
})
|
||
.catch(console.error);
|
||
|
||
// 获取网站设置（添加时间戳防止缓存）
|
||
fetch(`/api/site-settings?t=${Date.now()}`)
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data.siteName) setSiteName(data.siteName);
|
||
if (data.siteLogo) setSiteLogo(data.siteLogo);
|
||
})
|
||
.catch(console.error);
|
||
}, []);
|
||
|
||
const [state, formAction] = useActionState<RegisterActionState, FormData>(
|
||
register,
|
||
{
|
||
status: "idle",
|
||
}
|
||
);
|
||
|
||
const { update: updateSession } = useSession();
|
||
|
||
// biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
|
||
useEffect(() => {
|
||
if (state.status === "user_exists") {
|
||
toast({ type: "error", description: "账号已存在" });
|
||
} else if (state.status === "failed") {
|
||
toast({ type: "error", description: "创建账号失败" });
|
||
} else if (state.status === "invalid_data") {
|
||
toast({
|
||
type: "error",
|
||
description: "提交的信息校验失败",
|
||
});
|
||
} else if (state.status === "success") {
|
||
toast({ type: "success", description: "账号创建成功" });
|
||
|
||
setIsSuccessful(true);
|
||
updateSession();
|
||
router.refresh();
|
||
}
|
||
}, [state.status]);
|
||
|
||
const handleSubmit = (formData: FormData) => {
|
||
setEmail(formData.get("email") as string);
|
||
formAction(formData);
|
||
};
|
||
|
||
return (
|
||
<div className="flex h-dvh w-screen items-start justify-center bg-background pt-12 md:items-center md:pt-0">
|
||
<div className="flex w-full max-w-md flex-col gap-12 overflow-hidden rounded-2xl">
|
||
<div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
|
||
{siteLogo ? (
|
||
<img src={siteLogo} alt={siteName} className="h-12 w-12 mb-2 object-contain" />
|
||
) : null}
|
||
<h3 className="font-semibold text-xl dark:text-zinc-50">注册 {siteName}</h3>
|
||
<p className="text-gray-500 text-sm dark:text-zinc-400">
|
||
使用邮箱与密码创建新账号
|
||
</p>
|
||
</div>
|
||
<AuthForm action={handleSubmit} defaultEmail={email}>
|
||
<SubmitButton isSuccessful={isSuccessful}>注册</SubmitButton>
|
||
<p className="mt-4 text-center text-gray-600 text-sm dark:text-zinc-400">
|
||
已经有账号？
|
||
<Link
|
||
className="font-semibold text-gray-800 hover:underline dark:text-zinc-200"
|
||
href="/login"
|
||
>
|
||
立即登录
|
||
</Link>
|
||
。
|
||
</p>
|
||
</AuthForm>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|