feat(web): W3-1 login, session shell, home dashboard, settings, engine panel and audit pages

- /login: setup/login/TOTP states driven by server error codes, fixed-height error slot - console layout: GET /auth/session gate, redirect to /login, account popover (change password, logout) - home: six dashboard sections with SSE-driven refresh, automation switch and read-only reconcile toggle - settings tabs: downloaders, media servers, library roots, path mappings, site credentials, API keys (one-time plaintext), Pi upstream, cache/organize/retention/budget, automation - engine: runs list (status/name filters, cursor paging, stats tiles), run detail (step timeline, json payloads, signals, cancel) - audit: filterable list with detail sheet - vite: allow repo root in server.fs so deno-installed deps under node_modules/.deno load in dev Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-27 20:40:41 +08:00
1 parent ef73abe3df
commit 0dec0854df
@@ -0,0 +1,172 @@
+import { PasswordChangeRequest, type SessionInfo } from "@umt/contracts";
+import { KeyRound, LoaderCircle, LogOut, UserRound } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+import { useChangePassword, useLogout } from "~/api/auth.ts";
+import { Button } from "~/components/ui/button.tsx";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog.tsx";
+import { Input } from "~/components/ui/input.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
+import { errorMessage, LOGIN_PATH } from "~/lib/api.ts";
+import { formatDateTime } from "~/lib/utils.ts";
+import { FormField, zodFieldErrors } from "./form-field.tsx";
+
+const PasswordForm = PasswordChangeRequest.extend({ confirm: z.string() }).refine((v) => v.newPassword === v.confirm, {
+  message: "两次输入的新密码不一致",
+  path: ["confirm"],
+});
+
+function ChangePasswordDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
+  const change = useChangePassword();
+  const [form, setForm] = useState({ currentPassword: "", newPassword: "", confirm: "" });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const parsed = PasswordForm.safeParse(form);
+    if (!parsed.success) {
+      setErrors(zodFieldErrors(parsed.error.issues));
+      return;
+    }
+    setErrors({});
+    try {
+      const r = await change.mutateAsync({ currentPassword: form.currentPassword, newPassword: form.newPassword });
+      toast.success(r.revokedSessions ? `密码已修改，已注销其它 ${r.revokedSessions} 个会话` : "密码已修改");
+      setForm({ currentPassword: "", newPassword: "", confirm: "" });
+      onOpenChange(false);
+    } catch (err) {
+      const msg = errorMessage(err);
+      if (/旧密码|当前密码|password/i.test(msg)) setErrors({ currentPassword: "当前密码不正确" });
+      else toast.error(msg);
+    }
+  };
+
+  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
+    setForm((f) => ({ ...f, [k]: e.target.value }));
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !change.isPending && onOpenChange(o)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>修改密码</DialogTitle>
+          <DialogDescription>修改后其它设备上的会话会被注销，当前会话保留。</DialogDescription>
+        </DialogHeader>
+        <form id="pwd-form" onSubmit={submit} className="grid gap-1" noValidate>
+          <FormField label="当前密码" htmlFor="pwd-cur" error={errors.currentPassword}>
+            <Input
+              id="pwd-cur"
+              type="password"
+              autoComplete="current-password"
+              value={form.currentPassword}
+              onChange={set("currentPassword")}
+              aria-invalid={!!errors.currentPassword}
+            />
+          </FormField>
+          <FormField label="新密码" htmlFor="pwd-new" error={errors.newPassword} hint="至少 10 个字符">
+            <Input
+              id="pwd-new"
+              type="password"
+              autoComplete="new-password"
+              value={form.newPassword}
+              onChange={set("newPassword")}
+              aria-invalid={!!errors.newPassword}
+            />
+          </FormField>
+          <FormField label="确认新密码" htmlFor="pwd-confirm" error={errors.confirm}>
+            <Input
+              id="pwd-confirm"
+              type="password"
+              autoComplete="new-password"
+              value={form.confirm}
+              onChange={set("confirm")}
+              aria-invalid={!!errors.confirm}
+            />
+          </FormField>
+        </form>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={change.isPending}>
+            取消
+          </Button>
+          <Button type="submit" form="pwd-form" disabled={change.isPending}>
+            {change.isPending ? <LoaderCircle className="animate-spin" /> : null}
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** 右上角账户弹层:当前身份、会话到期、改密、登出 */
+export function AccountMenu({ session }: { session: SessionInfo }) {
+  const [open, setOpen] = useState(false);
+  const [pwdOpen, setPwdOpen] = useState(false);
+  const logout = useLogout();
+  const actor = session.actor;
+  const isCookie = !!session.expiresAt;
+
+  const doLogout = async () => {
+    try {
+      await logout.mutateAsync();
+    } catch {
+      // 会话已失效也照样回登录页
+    }
+    window.location.assign(LOGIN_PATH);
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm" className="max-w-40" aria-label="账户">
+            <UserRound />
+            <span className="hidden truncate sm:inline">{actor?.name ?? "账户"}</span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-64 p-2">
+          <div className="px-2 pt-1 pb-2">
+            <p className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">当前账户</p>
+            <p className="mt-1 truncate text-sm font-medium text-foreground">{actor?.name ?? "—"}</p>
+            <p className="text-meta text-muted-foreground">
+              {actor?.type === "api_key" ? "API Key 调用" : "管理员"}
+              {isCookie ? ` · 会话到 ${formatDateTime(session.expiresAt)}` : ""}
+            </p>
+          </div>
+          <div className="border-t border-border pt-1">
+            {isCookie ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setOpen(false);
+                  setPwdOpen(true);
+                }}
+                className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06]"
+              >
+                <KeyRound className="h-4 w-4 text-muted-foreground" />
+                修改密码
+              </button>
+            ) : null}
+            <button
+              type="button"
+              onClick={doLogout}
+              disabled={logout.isPending}
+              className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06] disabled:opacity-50"
+            >
+              <LogOut className="h-4 w-4 text-muted-foreground" />
+              退出登录
+            </button>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <ChangePasswordDialog open={pwdOpen} onOpenChange={setPwdOpen} />
+    </>
+  );
+}