43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
import { Navigate, useLocation } from "react-router-dom";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { toast } from "../components/Toaster";
|
|
import { btnPrimary, card, input } from "../components/ui";
|
|
|
|
export default function Login() {
|
|
const { login, user } = useAuth();
|
|
const loc = useLocation() as { state?: { from?: string } };
|
|
const [u, setU] = useState("");
|
|
const [p, setP] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
if (user) return <Navigate to={loc.state?.from ?? "/"} replace />;
|
|
|
|
async function submit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setBusy(true);
|
|
try {
|
|
await login(u, p);
|
|
} catch (err) {
|
|
toast("err", err instanceof Error ? err.message : "登录失败");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid h-full place-items-center p-4">
|
|
<form onSubmit={submit} className={`${card} w-full max-w-sm space-y-4 p-6`}>
|
|
<h1 className="text-lg font-semibold">BookLib 登录</h1>
|
|
<input className={input + " w-full"} value={u} onChange={(e) => setU(e.target.value)}
|
|
aria-label="用户名" placeholder="用户名" autoFocus autoComplete="username" />
|
|
<input className={input + " w-full"} type="password" value={p} onChange={(e) => setP(e.target.value)}
|
|
aria-label="密码" placeholder="密码" autoComplete="current-password" />
|
|
<button className={btnPrimary + " w-full"} disabled={busy || !u || !p}>
|
|
{busy ? "登录中…" : "登录"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|