feat: JWT过期自动重置 + 用户端登录页 + 系统设置前三个真实实现
agent-111 JWT过期重置+系统设置去占位: - ws.ts 识别401/过期 markAuthExpired(清token+停重连+expired态),isTokenExpired;wsParse.ts拆出压行371;scheduleReconnect有token未过期才重连 - api.ts REST 401→auth_expired+清token+引导重登;login走skipAuthExpired密码错不误清 - types.ts WsStatus加expired;TopBar/Nav expired显示登录过期;System.tsx去alert占位改4张事实卡+合并Notice agent-113 用户端登录页: - components/Login.tsx Miuix登录卡(用户名/密码→login()→setAuthToken);App !getAuthToken()→<Login>;AdminApp LoginGate指向 agent-112 系统设置前三个(owner+审计): - auth.APIKey.RevokeAll(吊销全部key);auth.JWTService.RotateSecret(≥32校验+并发安全+新密钥不回显) - gateway admin_system.go: POST revoke-keys/rotate-jwt/backup(VACUUM INTO)/restore(防路径穿越+恢复前自动备份+原子替换+需重启) - wire.go 传DatabasePath;全仓 build/vet/test绿+交叉编译;api-client v0.17系统设置契约 实机验证: 登录(role=owner)+revoke-keys 200+渠道列表含kook; 全仓绿+前端build绿; .env密码仅登录验证不打印
This commit is contained in:
Aska committed
1 parent
7e39153a69
commit
1ebc82fffd
19 files changed
+1164
-245
No files matched your search
@@ -0,0 +1,136 @@
|
||||
import { useState } from "react";
|
||||
import type { FormEvent, ReactNode } from "react";
|
||||
import { ApiError, getStoredRole, login, setAuthToken } from "../lib/api";
|
||||
import type { Role } from "../lib/types";
|
||||
import { Button, Spinner, Surface, Tag } from "./primitives";
|
||||
import { Icon } from "./Icon";
|
||||
|
||||
/** localStorage key for the optional "记住用户名" toggle. */
|
||||
const USERNAME_KEY = "cyrene.username";
|
||||
|
||||
export interface LoginProps {
|
||||
/** Called after a successful sign-in; the parent decides how to reflect the
|
||||
* new session (typically reload so connectWs + session/persona fetch re-run
|
||||
* with the fresh credential). */
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
function roleTone(role: Role): "accent" | "ok" | "neutral" {
|
||||
return role === "owner" ? "accent" : role === "admin" ? "ok" : "neutral";
|
||||
}
|
||||
|
||||
/** Map a login failure to a user-safe message. Never echoes credentials, and
|
||||
* collapses server detail into generic wording so nothing sensitive leaks. */
|
||||
function toLoginMessage(err: unknown): string {
|
||||
if (err instanceof ApiError) {
|
||||
if (err.status === 401 || err.code === "unauthorized") return "用户名或密码错误";
|
||||
if (err.code === "network_error" || err.status === 0) return "网络连接失败，请确认服务已启动";
|
||||
return err.message || "登录失败";
|
||||
}
|
||||
return "登录失败";
|
||||
}
|
||||
|
||||
const inputCls =
|
||||
"w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm text-[var(--mu-text-hi)] outline-none transition-all duration-200 focus:ring-1 focus:ring-[var(--mu-accent)] placeholder:text-[var(--mu-text-lo)]";
|
||||
|
||||
/**
|
||||
* Miuix user-facing login card. Rendered by App when no JWT is present, so the
|
||||
* user shell (TopBar/Sidebar/chat) stays unreachable until authenticated. It
|
||||
* carries no routing dependency — App owns what happens after onSuccess.
|
||||
*/
|
||||
export function Login({ onSuccess }: LoginProps): ReactNode {
|
||||
const [username, setUsername] = useState(() => localStorage.getItem(USERNAME_KEY) ?? "");
|
||||
const [password, setPassword] = useState("");
|
||||
const [remember, setRemember] = useState(() => localStorage.getItem(USERNAME_KEY) !== null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const role = getStoredRole();
|
||||
|
||||
const submit = async (e: FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await login(username.trim(), password);
|
||||
// Persist the JWT (and decoded role) immediately so App's next render sees
|
||||
// a real credential and proceeds to the main shell.
|
||||
setAuthToken(res.token);
|
||||
if (remember) localStorage.setItem(USERNAME_KEY, username.trim());
|
||||
else localStorage.removeItem(USERNAME_KEY);
|
||||
setPassword(""); // never keep the secret in component state after submit
|
||||
onSuccess();
|
||||
} catch (err: unknown) {
|
||||
setError(toLoginMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
<Surface className="w-full max-w-sm">
|
||||
<div className="flex flex-col items-center gap-1 pb-6 text-center">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-4)] text-[var(--mu-accent)]">
|
||||
<Icon name="lock" size={28} />
|
||||
</div>
|
||||
<div className="text-lg font-semibold">登录 Cyrene</div>
|
||||
<div className="text-xs text-[var(--mu-text-lo)]">输入账号凭证以继续使用用户端</div>
|
||||
{role ? (
|
||||
<Tag tone={roleTone(role)} className="mt-1">
|
||||
{role}
|
||||
</Tag>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<form className="flex flex-col gap-3" onSubmit={submit}>
|
||||
<label className="block space-y-1">
|
||||
<span className="text-xs text-[var(--mu-text-lo)]">用户名</span>
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
placeholder="用户名"
|
||||
disabled={busy}
|
||||
className={inputCls}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block space-y-1">
|
||||
<span className="text-xs text-[var(--mu-text-lo)]">密码</span>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
placeholder="密码"
|
||||
disabled={busy}
|
||||
className={inputCls}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex cursor-pointer select-none items-center gap-2 text-sm text-[var(--mu-text-mid)]">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={remember}
|
||||
onChange={(e) => setRemember(e.target.checked)}
|
||||
disabled={busy}
|
||||
className="h-4 w-4 accent-[var(--mu-accent)]"
|
||||
/>
|
||||
记住用户名
|
||||
</label>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-[var(--mu-radius)] bg-[var(--mu-err)]/15 px-3 py-2 text-xs text-[var(--mu-err)]">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Button type="submit" variant="primary" disabled={busy} className="mt-1 w-full">
|
||||
{busy ? <Spinner size={16} label="登录中…" /> : "登录"}
|
||||
</Button>
|
||||
</form>
|
||||
</Surface>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -27,6 +27,7 @@ function NavContent({ onNavigate }: { onNavigate: () => void }): React.ReactNode
|
||||
const [theme, setTheme] = useState<ThemeMode>(readTheme);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const connected = wsStatus === "connected";
|
||||
const wsLabel = connected ? "实时连接" : wsStatus === "expired" ? "登录过期" : "未连接";
|
||||
const hasToken = !!getAuthToken();
|
||||
|
||||
const toggleTheme = () => {
|
||||
@@ -78,7 +79,7 @@ function NavContent({ onNavigate }: { onNavigate: () => void }): React.ReactNode
|
||||
<NavItem
|
||||
active={connected}
|
||||
icon="channel"
|
||||
label={connected ? "实时连接" : "未连接"}
|
||||
label={wsLabel}
|
||||
onClick={onNavigate}
|
||||
hint={wsStatus}
|
||||
/>
|
||||
|
||||
@@ -23,6 +23,7 @@ const wsMeta: Record<WsStatus, { label: string; tone: "ok" | "warn" | "neutral"
|
||||
connected: { label: "实时", tone: "ok" },
|
||||
reconnecting: { label: "重连中", tone: "warn" },
|
||||
disconnected: { label: "已断开", tone: "err" },
|
||||
expired: { label: "登录过期", tone: "err" },
|
||||
};
|
||||
|
||||
export function TopBar({ onMenu }: { onMenu: () => void }): React.ReactNode {
|
||||
@@ -71,7 +72,7 @@ export function TopBar({ onMenu }: { onMenu: () => void }): React.ReactNode {
|
||||
<AwakenBadge />
|
||||
|
||||
<Tag tone={meta.tone} className="hidden sm:inline-flex">
|
||||
<span className={`inline-block h-1.5 w-1.5 rounded-full ${wsStatus === "connected" ? "bg-[var(--mu-ok)]" : "mu-blink"}`} />
|
||||
<span className={`inline-block h-1.5 w-1.5 rounded-full ${wsStatus === "connected" ? "bg-[var(--mu-ok)]" : wsStatus === "expired" ? "bg-[var(--mu-err)]" : "mu-blink"}`} />
|
||||
{meta.label}
|
||||
</Tag>
|
||||
|
||||
|
||||
Reference in new issue
Block a user