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,127 @@
+import { useState } from "react";
+import { errorMessage } from "../api/client.js";
+import { useOwners, useUpsertSecret } from "../api/hooks.js";
+
+/**
+ * Add / replace an encrypted secret.
+ * Reusable: mount when open; parent supplies mode + initial fields.
+ *
+ * @param {"add" | "replace"} mode
+ * @param {{ owner: string, name?: string }} initial
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ * @param {boolean} [lockOwner]
+ */
+export function SecretEditorModal({
+  mode,
+  initial,
+  onClose,
+  onSaved,
+  lockOwner = false,
+}) {
+  const { data: owners = [] } = useOwners();
+  const upsert = useUpsertSecret();
+  const [form, setForm] = useState(() => ({
+    owner: initial.owner || owners[0] || "default",
+    name: initial.name || "",
+    value: "",
+  }));
+
+  function onSubmit(e) {
+    e.preventDefault();
+    upsert.mutate(
+      { owner: form.owner, name: form.name, value: form.value },
+      {
+        onSuccess: (data) => {
+          onSaved?.(data?.secret ?? data);
+          onClose();
+        },
+      },
+    );
+  }
+
+  const title = mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`;
+
+  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">Owner</span>
+                {owners.length > 0 ? (
+                  <select
+                    className="select w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  >
+                    {owners.map((o) => (
+                      <option key={o} value={o}>
+                        {o}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    className="input w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  />
+                )}
+              </label>
+              <label className="form-control w-full">
+                <span className="label py-0 text-sm">Name</span>
+                <input
+                  className="input w-full font-mono"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  required
+                  pattern="[A-Za-z0-9._-]+"
+                  title="Letters, numbers, dots, underscores, hyphens"
+                />
+              </label>
+            </>
+          ) : null}
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Value</span>
+            <input
+              type="password"
+              className="input w-full"
+              value={form.value}
+              onChange={(e) => setForm({ ...form, value: e.target.value })}
+              required
+              autoComplete="new-password"
+            />
+          </label>
+          <p className="text-xs opacity-60">
+            Values are encrypted at rest and never shown again after save. Values shorter than 8
+            characters are not redacted from logs.
+          </p>
+          {upsert.isError ? (
+            <p className="text-error text-sm">{errorMessage(upsert.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={upsert.isPending}>
+              {upsert.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>
+  );
+}