92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { supabaseBrowser } from "@/lib/supabase/client";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const [email, setEmail] = useState("test@163.com");
|
|
const [password, setPassword] = useState("123456");
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState<string>("");
|
|
const [sessionInfo, setSessionInfo] = useState<string>("");
|
|
|
|
const handleLogin = useCallback(async () => {
|
|
setLoading(true);
|
|
setMessage("");
|
|
const { data, error } = await supabaseBrowser.auth.signInWithPassword({
|
|
email,
|
|
password,
|
|
});
|
|
setLoading(false);
|
|
if (error) {
|
|
setMessage(`登录失败：${error.message}`);
|
|
return;
|
|
}
|
|
setMessage("登录成功，准备跳转...");
|
|
setSessionInfo(JSON.stringify(data.session, null, 2));
|
|
router.replace("/");
|
|
}, [email, password, router]);
|
|
|
|
const handleGetSession = useCallback(async () => {
|
|
setLoading(true);
|
|
const {
|
|
data: { session },
|
|
error,
|
|
} = await supabaseBrowser.auth.getSession();
|
|
setLoading(false);
|
|
if (error) {
|
|
setMessage(`获取会话失败：${error.message}`);
|
|
return;
|
|
}
|
|
if (!session) {
|
|
setMessage("当前未登录");
|
|
setSessionInfo("");
|
|
return;
|
|
}
|
|
setMessage("发现有效 Session");
|
|
setSessionInfo(JSON.stringify(session, null, 2));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-zinc-50 p-4">
|
|
<Card className="w-[400px] space-y-4 bg-white/90 shadow-md backdrop-blur">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Supabase 登录</CardTitle>
|
|
<p className="text-sm text-zinc-500">测试账号：test@163.com / 123456</p>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="space-y-1">
|
|
<label className="text-sm text-zinc-700">邮箱</label>
|
|
<Input value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-sm text-zinc-700">密码</label>
|
|
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button className="flex-1" onClick={handleLogin} disabled={loading}>
|
|
{loading ? "处理中..." : "登录"}
|
|
</Button>
|
|
<Button variant="outline" onClick={handleGetSession} disabled={loading}>
|
|
会话检测
|
|
</Button>
|
|
</div>
|
|
{message && <p className="whitespace-pre-wrap text-sm text-blue-600">{message}</p>}
|
|
<Separator />
|
|
{sessionInfo && (
|
|
<pre className="max-h-64 overflow-auto rounded-md bg-zinc-900 p-3 text-xs text-zinc-100">
|
|
{sessionInfo}
|
|
</pre>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|