feat(webui): add reset-password and delete-user dialogs

src/app/components/UserDeleteDialog.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { ManagedUser } from "@/lib/userManagement";
+
+interface UserDeleteDialogProps {
+  user: ManagedUser;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onChanged: () => Promise<void>;
+}
+
+export function UserDeleteDialog({
+  user,
+  open,
+  onOpenChange,
+  onChanged,
+}: UserDeleteDialogProps) {
+  const t = useTranslations("userManagement");
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setError(null);
+      setSaving(false);
+    }
+  }, [open]);
+
+  const confirm = async () => {
+    if (saving) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/auth/users/${encodeURIComponent(user.username)}`,
+        { method: "DELETE", credentials: "same-origin" }
+      );
+      const body = (await response.json().catch(() => ({}))) as {
+        message?: string;
+        error?: string;
+      };
+      if (!response.ok) {
+        throw new Error(body.message || body.error || "Request failed.");
+      }
+      toast.success(t("remove.done", { username: user.username }));
+      onOpenChange(false);
+      await onChanged();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : "Request failed.");
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("remove.title")}</DialogTitle>
+          <DialogDescription>
+            {t("remove.description", { username: user.username })}
+          </DialogDescription>
+        </DialogHeader>
+        {error && (
+          <p role="alert" className="text-sm text-destructive">
+            {error}
+          </p>
+        )}
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={saving}
+          >
+            {t("remove.cancel")}
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={() => void confirm()}
+            disabled={saving}
+          >
+            {saving ? t("remove.deleting") : t("remove.submit")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/components/UserResetPasswordDialog.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { FormEvent, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { isValidPassword, type ManagedUser } from "@/lib/userManagement";
+
+interface UserResetPasswordDialogProps {
+  user: ManagedUser;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onChanged: () => Promise<void>;
+}
+
+export function UserResetPasswordDialog({
+  user,
+  open,
+  onOpenChange,
+  onChanged,
+}: UserResetPasswordDialogProps) {
+  const t = useTranslations("userManagement");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setPassword("");
+      setError(null);
+      setSaving(false);
+    }
+  }, [open]);
+
+  const canSubmit = isValidPassword(password) && !saving;
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/auth/users/${encodeURIComponent(user.username)}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({ password }),
+        }
+      );
+      const body = (await response.json().catch(() => ({}))) as {
+        message?: string;
+        error?: string;
+      };
+      if (!response.ok) {
+        throw new Error(body.message || body.error || "Request failed.");
+      }
+      toast.success(t("reset.done", { username: user.username }));
+      onOpenChange(false);
+      await onChanged();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : "Request failed.");
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("reset.title")}</DialogTitle>
+          <DialogDescription>
+            {t("reset.description", { username: user.username })}
+          </DialogDescription>
+        </DialogHeader>
+        <form method="post" onSubmit={submit} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="reset-password">{t("reset.password")}</Label>
+            <Input
+              id="reset-password"
+              type="password"
+              autoComplete="new-password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              disabled={saving}
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">
+              {t("reset.passwordHint")}
+            </p>
+          </div>
+          {error && (
+            <p role="alert" className="text-sm text-destructive">
+              {error}
+            </p>
+          )}
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={saving}
+            >
+              {t("reset.cancel")}
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {saving ? t("reset.resetting") : t("reset.submit")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}