0.3.1 UI修复
This commit is contained in:
@@ -1,116 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getSupabaseBrowserClient } 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 supabaseBrowser = getSupabaseBrowserClient();
|
||||
let data: unknown = null;
|
||||
let error: { message?: string } | null = null;
|
||||
try {
|
||||
const result = await supabaseBrowser.auth.signInWithPassword({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
data = result.data;
|
||||
error = result.error as unknown as { message?: string } | null;
|
||||
} catch (err) {
|
||||
const runtimeCfg = (() => {
|
||||
try {
|
||||
return (window as unknown as { __MNOTE_RUNTIME_CONFIG__?: { supabaseUrl?: string } }).__MNOTE_RUNTIME_CONFIG__;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
})();
|
||||
const supabaseUrlHint = runtimeCfg?.supabaseUrl ? `(Supabase:${runtimeCfg.supabaseUrl})` : "";
|
||||
setLoading(false);
|
||||
setMessage(`登录失败:网络或证书异常 ${supabaseUrlHint}\n${String(err)}`);
|
||||
return;
|
||||
}
|
||||
setLoading(false);
|
||||
if (error) {
|
||||
setMessage(`登录失败:${error.message}`);
|
||||
return;
|
||||
}
|
||||
setMessage("登录成功,准备跳转...");
|
||||
const session = (data as { session?: unknown } | null)?.session ?? null;
|
||||
setSessionInfo(JSON.stringify(session, null, 2));
|
||||
// 说明:曾出现“需要二次登录”的现象(服务端仍读到旧 cookie/session)。
|
||||
// 这里用整页跳转强制刷新,确保 App Router 的服务端组件读取到最新会话。
|
||||
if (typeof window !== "undefined") {
|
||||
window.location.href = "/";
|
||||
return;
|
||||
}
|
||||
router.replace("/");
|
||||
}, [email, password, router]);
|
||||
|
||||
const handleGetSession = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const supabaseBrowser = getSupabaseBrowserClient();
|
||||
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));
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
// 已移除 Supabase 登录,统一走 Convex Auth 页面。
|
||||
router.replace("/auth");
|
||||
}, [router]);
|
||||
|
||||
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>
|
||||
<CardTitle className="text-xl">正在跳转</CardTitle>
|
||||
<p className="text-sm text-zinc-500">该页面已迁移到 Convex Auth(/auth)。</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>
|
||||
)}
|
||||
<p className="text-sm text-zinc-700">如果没有自动跳转,请手动打开 /auth。</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user