55 lines
1.7 KiB
React
55 lines
1.7 KiB
React
import { useState } from "react";
|
|
import { LockKeyhole, TerminalSquare } from "lucide-react";
|
|
import { api } from "../api.js";
|
|
|
|
export function LoginPage({ onLogin }) {
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function submit(event) {
|
|
event.preventDefault();
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.login(password);
|
|
onLogin();
|
|
} catch (requestError) {
|
|
setError(requestError.message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="login-shell">
|
|
<form className="login-panel" onSubmit={submit}>
|
|
<span className="logo login-logo" aria-hidden="true"><TerminalSquare size={18} strokeWidth={1.8} /></span>
|
|
<div>
|
|
<h1>AgentDock</h1>
|
|
<p>AI CLI 管理控制台</p>
|
|
</div>
|
|
<label className="login-field">
|
|
<span>管理员密码</span>
|
|
<span className="login-input-wrap">
|
|
<LockKeyhole size={15} aria-hidden="true" />
|
|
<input
|
|
autoFocus
|
|
autoComplete="current-password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
placeholder="输入管理员密码"
|
|
/>
|
|
</span>
|
|
</label>
|
|
{error ? <p className="form-error" role="alert">{error}</p> : null}
|
|
<button className="btn btn-primary" type="submit" disabled={busy || !password}>
|
|
{busy ? "正在验证" : "登录"}
|
|
</button>
|
|
<span className="meta login-meta">仅允许局域网内访问</span>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|