"use client"; import { useState } from "react"; import Head from "next/head"; import Alert from "../ui/components/Alert"; import { useRouter } from "next/navigation"; export default function AuthPage() { const router = useRouter(); const [isLogin, setIsLogin] = useState(true); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [alert, setAlert] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); const values = { username, password }; try { const endpoint = isLogin ? "/api/auth/login" : "/api/auth/register"; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(values), }); const res = await response.json(); if (res.success) { if (isLogin) { console.log("登录成功", res.user); setAlert({ type: "success", message: "登录成功" }); localStorage.setItem("currentUser", JSON.stringify(res.user)); setTimeout(() => { router.push("/"); }, 1000); } else { setAlert({ type: "success", message: "注册成功" }); setIsLogin(true); } } else { setAlert({ type: "error", message: res.error }); if (isLogin) { setTimeout(() => { router.push("/login"); }, 2000); } } } catch (error) { console.error( "Error during " + (isLogin ? "login" : "registration") + ":", error ); setAlert({ type: "error", message: "操作失败，请重试" }); } }; return (
{isLogin ? "登录" : "注册"}

{isLogin ? "登录您的账户" : "创建新账户"}

setUsername(e.target.value)} />
setPassword(e.target.value)} />
{isLogin ? "还没有账户?" : "已经有账户?"}
{alert && ( setAlert(null)} /> )}
); }