refactor(web): extract admin editor modals with deep-link routes

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-20 22:31:53 +07:00
parent aa3c2a25b2
commit ed9555e3fa
7 changed files with 804 additions and 444 deletions
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { errorMessage } from "../api/client.js";
+import { useCreateUser, useUpdateUser } from "../api/hooks.js";
+
+/**
+ * Add / edit a local user.
+ * Reusable: mount when open; pass `user` for edit.
+ *
+ * @param {"add" | "edit"} mode
+ * @param {{ id: string, username: string, role: string }} [user]
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ */
+export function UserEditorModal({ mode, user, onClose, onSaved }) {
+  const create = useCreateUser();
+  const update = useUpdateUser();
+  const [form, setForm] = useState(() => ({
+    username: user?.username || "",
+    password: "",
+    role: user?.role || "operator",
+    id: user?.id || null,
+  }));
+
+  const mutation = mode === "add" ? create : update;
+
+  function onSubmit(e) {
+    e.preventDefault();
+    if (mode === "add") {
+      create.mutate(
+        {
+          username: form.username,
+          password: form.password,
+          role: form.role,
+        },
+        {
+          onSuccess: (data) => {
+            onSaved?.(data?.user ?? data);
+            onClose();
+          },
+        },
+      );
+      return;
+    }
+    const body = { id: form.id, role: form.role };
+    if (form.password) body.password = form.password;
+    update.mutate(body, {
+      onSuccess: (data) => {
+        onSaved?.(data?.user ?? data);
+        onClose();
+      },
+    });
+  }
+
+  const title = mode === "add" ? "New user" : form.username;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-md">
+        <h3 className="font-bold">{title}</h3>
+        <form className="mt-3 space-y-2" onSubmit={onSubmit}>
+          {mode === "add" ? (
+            <label className="form-control w-full">
+              <span className="label py-0 text-sm">Username</span>
+              <input
+                className="input w-full"
+                value={form.username}
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                required
+              />
+            </label>
+          ) : null}
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">
+              {mode === "add" ? "Password" : "New password"}
+            </span>
+            <input
+              type="password"
+              className="input w-full"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              required={mode === "add"}
+              minLength={mode === "add" ? 8 : undefined}
+              placeholder={mode === "edit" ? "leave blank to keep" : ""}
+            />
+          </label>
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Role</span>
+            <select
+              className="select w-full"
+              value={form.role}
+              onChange={(e) => setForm({ ...form, role: e.target.value })}
+            >
+              <option value="operator">operator</option>
+              <option value="admin">admin</option>
+            </select>
+          </label>
+          {mutation.isError ? (
+            <p className="text-error text-sm">{errorMessage(mutation.error)}</p>
+          ) : null}
+          <div className="modal-action">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <span className="loading loading-spinner loading-xs" />
+              ) : null}
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}