218 行
8.8 KiB
TypeScript
218 行
8.8 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useEffect, useMemo, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { API_BASE, apiFetch } from "@/lib/api";
|
||
import { readToken, saveToken } from "@/lib/auth";
|
||
import { useI18nText } from "@/lib/i18n";
|
||
|
||
type AuthOk = { ok: true; user_id: number; token: string; expires_at: number };
|
||
type AuthErr = { ok: false; error: string };
|
||
type AuthResp = AuthOk | AuthErr;
|
||
|
||
function passwordScore(password: string, isZh: boolean): { label: string; color: string } {
|
||
if (password.length >= 12) return { label: isZh ? "强" : "Strong", color: "text-emerald-600" };
|
||
if (password.length >= 8) return { label: isZh ? "中" : "Medium", color: "text-blue-600" };
|
||
return { label: isZh ? "弱" : "Weak", color: "text-orange-600" };
|
||
}
|
||
|
||
export default function AuthPage() {
|
||
const { isZh, tx } = useI18nText();
|
||
const router = useRouter();
|
||
const apiBase = useMemo(() => API_BASE, []);
|
||
const [checkingAuth, setCheckingAuth] = useState(true);
|
||
|
||
const [mode, setMode] = useState<"register" | "login">("login");
|
||
const [username, setUsername] = useState(process.env.NEXT_PUBLIC_TEST_USERNAME ?? "");
|
||
const [password, setPassword] = useState(process.env.NEXT_PUBLIC_TEST_PASSWORD ?? "");
|
||
const [confirmPassword, setConfirmPassword] = useState("");
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [resp, setResp] = useState<AuthResp | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (readToken()) {
|
||
router.replace("/problems");
|
||
return;
|
||
}
|
||
setCheckingAuth(false);
|
||
}, [router]);
|
||
|
||
const usernameErr = username.trim().length < 3 ? tx("用户名至少 3 位", "Username must be at least 3 chars") : "";
|
||
const passwordErr = password.length < 6 ? tx("密码至少 6 位", "Password must be at least 6 chars") : "";
|
||
const confirmErr =
|
||
mode === "register" && password !== confirmPassword ? tx("两次密码不一致", "Passwords do not match") : "";
|
||
|
||
const canSubmit = !loading && !usernameErr && !passwordErr && !confirmErr;
|
||
|
||
async function submit() {
|
||
if (!canSubmit) return;
|
||
setLoading(true);
|
||
setResp(null);
|
||
try {
|
||
const j = await apiFetch<AuthResp>(`/api/v1/auth/${mode}`, {
|
||
method: "POST",
|
||
body: JSON.stringify({ username: username.trim(), password }),
|
||
});
|
||
setResp(j);
|
||
if (j.ok) {
|
||
saveToken(j.token);
|
||
setTimeout(() => {
|
||
router.replace("/problems");
|
||
}, 350);
|
||
}
|
||
} catch (e: unknown) {
|
||
setResp({ ok: false, error: String(e) });
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
const strength = passwordScore(password, isZh);
|
||
|
||
if (checkingAuth) {
|
||
return (
|
||
<main className="mx-auto max-w-4xl px-3 py-12 text-sm text-zinc-500">
|
||
{tx("已登录，正在跳转...", "Already signed in, redirecting...")}
|
||
</main>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<main className="mx-auto max-w-4xl px-3 py-6 max-[390px]:px-2 sm:px-4 md:px-6 md:py-10">
|
||
<div className="grid gap-6 md:grid-cols-[1.1fr,1fr]">
|
||
<section className="rounded-2xl border bg-zinc-900 p-6 text-zinc-100">
|
||
<h1 className="text-2xl font-semibold">{tx("欢迎回来，开始刷题", "Welcome back, let's practice")}</h1>
|
||
<p className="mt-3 text-sm text-zinc-300">
|
||
{tx("登录后可提交评测、保存草稿、查看错题本和个人进度。", "After sign-in you can submit, save drafts, review wrong-book, and track your progress.")}
|
||
</p>
|
||
<div className="mt-6 space-y-2 text-sm text-zinc-300">
|
||
<p>{tx("• 题库按 CSP-J / CSP-S / NOIP 入门组织", "• Problem sets are organized by CSP-J / CSP-S / NOIP junior")}</p>
|
||
<p>{tx("• 题目页支持本地草稿与试运行", "• Problem page supports local draft and run")}</p>
|
||
<p>{tx("• 生成式题解会异步入库，支持多解法", "• Generated solutions are queued asynchronously with multiple methods")}</p>
|
||
</div>
|
||
<p className="mt-6 text-xs text-zinc-400">
|
||
API Base: <span className="font-mono">{apiBase}</span>
|
||
</p>
|
||
</section>
|
||
|
||
<section className="rounded-2xl border bg-white p-6">
|
||
<div className="grid grid-cols-2 gap-2 rounded-lg bg-zinc-100 p-1 text-sm">
|
||
<button
|
||
type="button"
|
||
className={`rounded-md px-3 py-2 ${
|
||
mode === "login" ? "bg-white shadow-sm" : "text-zinc-600"
|
||
}`}
|
||
onClick={() => {
|
||
setMode("login");
|
||
setResp(null);
|
||
}}
|
||
disabled={loading}
|
||
>
|
||
{tx("登录", "Sign In")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`rounded-md px-3 py-2 ${
|
||
mode === "register" ? "bg-white shadow-sm" : "text-zinc-600"
|
||
}`}
|
||
onClick={() => {
|
||
setMode("register");
|
||
setResp(null);
|
||
}}
|
||
disabled={loading}
|
||
>
|
||
{tx("注册", "Register")}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-5 space-y-4">
|
||
<div>
|
||
<label className="text-sm font-medium">{tx("用户名", "Username")}</label>
|
||
<input
|
||
className="mt-1 w-full rounded-lg border px-3 py-2"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
placeholder={tx("例如：csp_student", "e.g. csp_student")}
|
||
/>
|
||
{usernameErr && <p className="mt-1 text-xs text-red-600">{usernameErr}</p>}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between">
|
||
<label className="text-sm font-medium">{tx("密码", "Password")}</label>
|
||
<span className={`text-xs ${strength.color}`}>{tx("强度", "Strength")}: {strength.label}</span>
|
||
</div>
|
||
<input
|
||
type={showPassword ? "text" : "password"}
|
||
className="mt-1 w-full rounded-lg border px-3 py-2"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder={tx("至少 6 位", "At least 6 chars")}
|
||
/>
|
||
{passwordErr && <p className="mt-1 text-xs text-red-600">{passwordErr}</p>}
|
||
</div>
|
||
|
||
{mode === "register" && (
|
||
<div>
|
||
<label className="text-sm font-medium">{tx("确认密码", "Confirm Password")}</label>
|
||
<input
|
||
type={showPassword ? "text" : "password"}
|
||
className="mt-1 w-full rounded-lg border px-3 py-2"
|
||
value={confirmPassword}
|
||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
placeholder={tx("再输入一次密码", "Enter password again")}
|
||
/>
|
||
{confirmErr && <p className="mt-1 text-xs text-red-600">{confirmErr}</p>}
|
||
</div>
|
||
)}
|
||
|
||
<label className="flex items-center gap-2 text-xs text-zinc-600">
|
||
<input
|
||
type="checkbox"
|
||
checked={showPassword}
|
||
onChange={(e) => setShowPassword(e.target.checked)}
|
||
/>
|
||
{tx("显示密码", "Show password")}
|
||
</label>
|
||
|
||
<button
|
||
className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800 disabled:opacity-50"
|
||
onClick={() => void submit()}
|
||
disabled={!canSubmit}
|
||
>
|
||
{loading ? tx("提交中...", "Submitting...") : mode === "register" ? tx("注册并登录", "Register & Sign In") : tx("登录", "Sign In")}
|
||
</button>
|
||
</div>
|
||
|
||
{resp && (
|
||
<div
|
||
className={`mt-4 rounded-lg border px-3 py-2 text-sm ${
|
||
resp.ok ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-red-300 bg-red-50 text-red-700"
|
||
}`}
|
||
>
|
||
{resp.ok
|
||
? tx("登录成功，正在跳转到题库...", "Signed in. Redirecting to problem set...")
|
||
: `${tx("操作失败：", "Action failed: ")}${resp.error}`}
|
||
</div>
|
||
)}
|
||
|
||
<p className="mt-4 text-xs text-zinc-500">
|
||
{tx("登录后 Token 自动保存在浏览器 localStorage，可直接前往", "Token is stored in browser localStorage after sign-in. You can go to")}
|
||
<Link className="mx-1 underline" href="/problems">
|
||
{tx("题库", "Problems")}
|
||
</Link>
|
||
{tx("与", "and")}
|
||
<Link className="mx-1 underline" href="/me">
|
||
{tx("我的", "My Account")}
|
||
</Link>
|
||
{tx("页面。", ".")}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|