UHD_Media_Tool/apps/web/app/components/console/account-menu.tsx

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} />
    </>
  );
}