112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import { signIn, useSession } from "next-auth/react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useState } from "react";
|
||
|
||
export default function LoginPage() {
|
||
const [email, setEmail] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const router = useRouter();
|
||
const { data: session } = useSession();
|
||
|
||
// 如果已登录，重定向到仪表板
|
||
if (session) {
|
||
router.push("/dashboard");
|
||
return null;
|
||
}
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
const result = await signIn("credentials", {
|
||
email,
|
||
password,
|
||
redirect: false,
|
||
});
|
||
|
||
if (result?.ok) {
|
||
router.push("/dashboard");
|
||
} else {
|
||
alert("登录失败，请检查邮箱和密码");
|
||
}
|
||
} catch {
|
||
alert("登录失败，请重试");
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleGoogleSignIn = () => {
|
||
signIn("google", { callbackUrl: "/dashboard" });
|
||
};
|
||
|
||
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="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 rounded-t-md 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>
|
||
<button
|
||
type="button"
|
||
onClick={handleGoogleSignIn}
|
||
className="group relative w-full flex justify-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||
>
|
||
使用 Google 登录
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<a
|
||
href="/register"
|
||
className="font-medium text-indigo-600 hover:text-indigo-500"
|
||
>
|
||
还没有账户？注册
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|