feat: expand platform management, admin controls, and learning workflows
这个提交包含在：
Codex CLI
@@ -1,25 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { API_BASE, apiFetch } from "@/lib/api";
|
||||
import { saveToken } from "@/lib/auth";
|
||||
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): { label: string; color: string } {
|
||||
if (password.length >= 12) return { label: "强", color: "text-emerald-600" };
|
||||
if (password.length >= 8) return { label: "中", color: "text-blue-600" };
|
||||
return { label: "弱", color: "text-orange-600" };
|
||||
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 ?? "");
|
||||
@@ -29,10 +32,18 @@ export default function AuthPage() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [resp, setResp] = useState<AuthResp | null>(null);
|
||||
|
||||
const usernameErr = username.trim().length < 3 ? "用户名至少 3 位" : "";
|
||||
const passwordErr = password.length < 6 ? "密码至少 6 位" : "";
|
||||
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 ? "两次密码不一致" : "";
|
||||
mode === "register" && password !== confirmPassword ? tx("两次密码不一致", "Passwords do not match") : "";
|
||||
|
||||
const canSubmit = !loading && !usernameErr && !passwordErr && !confirmErr;
|
||||
|
||||
@@ -49,7 +60,7 @@ export default function AuthPage() {
|
||||
if (j.ok) {
|
||||
saveToken(j.token);
|
||||
setTimeout(() => {
|
||||
router.push("/problems");
|
||||
router.replace("/problems");
|
||||
}, 350);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
@@ -59,20 +70,28 @@ export default function AuthPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const strength = passwordScore(password);
|
||||
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-6 py-10">
|
||||
<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">欢迎回来，开始刷题</h1>
|
||||
<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>• 题库按 CSP-J / CSP-S / NOIP 入门组织</p>
|
||||
<p>• 题目页支持本地草稿与试运行</p>
|
||||
<p>• 生成式题解会异步入库，支持多解法</p>
|
||||
<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>
|
||||
@@ -92,7 +111,7 @@ export default function AuthPage() {
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
登录
|
||||
{tx("登录", "Sign In")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -105,46 +124,46 @@ export default function AuthPage() {
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
注册
|
||||
{tx("注册", "Register")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">用户名</label>
|
||||
<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="例如：csp_student"
|
||||
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">密码</label>
|
||||
<span className={`text-xs ${strength.color}`}>强度：{strength.label}</span>
|
||||
<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="至少 6 位"
|
||||
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">确认密码</label>
|
||||
<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="再输入一次密码"
|
||||
placeholder={tx("再输入一次密码", "Enter password again")}
|
||||
/>
|
||||
{confirmErr && <p className="mt-1 text-xs text-red-600">{confirmErr}</p>}
|
||||
</div>
|
||||
@@ -156,7 +175,7 @@ export default function AuthPage() {
|
||||
checked={showPassword}
|
||||
onChange={(e) => setShowPassword(e.target.checked)}
|
||||
/>
|
||||
显示密码
|
||||
{tx("显示密码", "Show password")}
|
||||
</label>
|
||||
|
||||
<button
|
||||
@@ -164,7 +183,7 @@ export default function AuthPage() {
|
||||
onClick={() => void submit()}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
{loading ? "提交中..." : mode === "register" ? "注册并登录" : "登录"}
|
||||
{loading ? tx("提交中...", "Submitting...") : mode === "register" ? tx("注册并登录", "Register & Sign In") : tx("登录", "Sign In")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -175,21 +194,21 @@ export default function AuthPage() {
|
||||
}`}
|
||||
>
|
||||
{resp.ok
|
||||
? "登录成功，正在跳转到题库..."
|
||||
: `操作失败：${resp.error}`}
|
||||
? tx("登录成功，正在跳转到题库...", "Signed in. Redirecting to problem set...")
|
||||
: `${tx("操作失败：", "Action failed: ")}${resp.error}`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
登录后 Token 自动保存在浏览器 localStorage，可直接前往
|
||||
{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>
|
||||
|
||||
在新工单中引用
屏蔽一个用户