"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 ( <div className="min-h-screen bg-gray-100 flex flex-col justify-center px-4 sm:px-6 lg:px-8"> <Head> <title>{isLogin ? "登录" : "注册"}</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </Head> <div className="w-full max-w-md mx-auto"> <h2 className="mt-6 text-center text-2xl sm:text-3xl font-extrabold text-gray-900"> {isLogin ? "登录您的账户" : "创建新账户"} </h2> </div> <div className="mt-8 w-full max-w-md mx-auto"> <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <form className="space-y-6" onSubmit={handleSubmit}> <div> <label htmlFor="phone" className="block text-sm font-medium text-gray-700" > 用户名 </label> <div className="mt-1"> <input id="phone" name="phone" type="tel" autoComplete="tel" required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-base" value={username} onChange={(e) => setUsername(e.target.value)} /> </div> </div> <div> <label htmlFor="password" className="block text-sm font-medium text-gray-700" > 密码 </label> <div className="mt-1"> <input id="password" name="password" type="password" autoComplete="current-password" required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-base" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> </div> <div> <button type="submit" className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" > {isLogin ? "登录" : "注册"} </button> </div> </form> <div className="mt-6"> <div className="relative"> <div className="absolute inset-0 flex items-center"> <div className="w-full border-t border-gray-300" /> </div> <div className="relative flex justify-center text-sm"> <span className="px-2 bg-white text-gray-500"> {isLogin ? "还没有账户?" : "已经有账户?"} </span> </div> </div> <div className="mt-6"> <button onClick={() => setIsLogin(!isLogin)} className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-indigo-600 bg-white hover:bg-gray-50" > {isLogin ? "创建新账户" : "登录已有账户"} </button> </div> </div> </div> </div> {alert && ( <Alert message={alert.message} type={alert.type} onClose={() => setAlert(null)} /> )} </div> ); }