76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { type FormEvent, useState } from "react";
|
|
|
|
import type { Route } from "./+types/login";
|
|
import { useAuth } from "../context/AuthContext";
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "登录 · 模型实验开发平台" },
|
|
{ name: "description", content: "登录模型实验开发平台" },
|
|
];
|
|
}
|
|
|
|
export default function LoginRoute() {
|
|
const { login } = useAuth();
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const submit = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!username.trim() || !password) {
|
|
setError("请输入用户名和密码");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
await login(username.trim(), password);
|
|
} catch (cause) {
|
|
setError(cause instanceof Error ? cause.message : "登录失败，请稍后重试");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="login-page">
|
|
<section className="login-card" aria-labelledby="login-title">
|
|
<div className="login-brand" aria-hidden="true">◆</div>
|
|
<p className="login-kicker">MODEL EXPERIMENT PLATFORM</p>
|
|
<h1 id="login-title">模型实验开发平台</h1>
|
|
<p className="login-description">使用平台账号登录并选择你的 Workspace。</p>
|
|
<form onSubmit={(event) => void submit(event)}>
|
|
<label>
|
|
<span>用户名</span>
|
|
<input
|
|
autoComplete="username"
|
|
autoFocus
|
|
value={username}
|
|
onChange={(event) => setUsername(event.target.value)}
|
|
placeholder="请输入用户名"
|
|
disabled={busy}
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>密码</span>
|
|
<input
|
|
type="password"
|
|
autoComplete="current-password"
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
placeholder="请输入密码"
|
|
disabled={busy}
|
|
/>
|
|
</label>
|
|
{error && <p className="login-error" role="alert">{error}</p>}
|
|
<button type="submit" disabled={busy}>
|
|
{busy ? "正在登录…" : "登录"}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|