feat(http-auth): resolve profiles by UUID and allow multi-auth triggers
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,422 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { LuEye, LuEyeOff } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
fetchHttpAuthLiterals,
|
||||
useHttpPages,
|
||||
useUpsertHttpAuth,
|
||||
} from "../api/hooks.js";
|
||||
|
||||
function emptyCred(source = "literal") {
|
||||
return { source, value: "", kv: "", namespace: "", secret: "" };
|
||||
}
|
||||
|
||||
function credFromPublic(field, literalValue) {
|
||||
if (!field || field.source === "missing") return emptyCred("literal");
|
||||
if (field.source === "kv") {
|
||||
return {
|
||||
source: "kv",
|
||||
value: "",
|
||||
kv: field.kv ?? "",
|
||||
namespace: field.namespace ?? "",
|
||||
secret: "",
|
||||
};
|
||||
}
|
||||
if (field.source === "secret") {
|
||||
return {
|
||||
source: "secret",
|
||||
value: "",
|
||||
kv: "",
|
||||
namespace: "",
|
||||
secret: field.secret ?? "",
|
||||
};
|
||||
}
|
||||
if (typeof literalValue === "string") {
|
||||
return {
|
||||
source: "literal",
|
||||
value: literalValue,
|
||||
kv: "",
|
||||
namespace: "",
|
||||
secret: "",
|
||||
keep: true,
|
||||
};
|
||||
}
|
||||
return {
|
||||
source: "literal",
|
||||
value: "",
|
||||
kv: "",
|
||||
namespace: "",
|
||||
secret: "",
|
||||
keep: field.set === true,
|
||||
};
|
||||
}
|
||||
|
||||
function toApiField(cred, { required = true } = {}) {
|
||||
if (cred.source === "kv") {
|
||||
const out = { kv: cred.kv };
|
||||
if (cred.namespace) out.namespace = cred.namespace;
|
||||
return out;
|
||||
}
|
||||
if (cred.source === "secret") {
|
||||
return { secret: cred.secret };
|
||||
}
|
||||
if (cred.value) return cred.value;
|
||||
if (cred.keep) return { keep: true };
|
||||
if (!required) return "";
|
||||
return null;
|
||||
}
|
||||
|
||||
function emptyForm() {
|
||||
return {
|
||||
id: null,
|
||||
name: "",
|
||||
type: "bearer",
|
||||
token: emptyCred(),
|
||||
user: emptyCred(),
|
||||
password: emptyCred(),
|
||||
header: "",
|
||||
value: emptyCred(),
|
||||
unauthorized_status: "",
|
||||
unauthorized_response: "",
|
||||
};
|
||||
}
|
||||
|
||||
function formFromAuth(auth, literals = {}) {
|
||||
const cfg = auth.config ?? {};
|
||||
return {
|
||||
id: auth.id,
|
||||
name: auth.name,
|
||||
type: auth.type,
|
||||
token: credFromPublic(cfg.token, literals.token),
|
||||
user: credFromPublic(cfg.user, literals.user),
|
||||
password: credFromPublic(cfg.password, literals.password),
|
||||
header: cfg.header ?? "",
|
||||
value: credFromPublic(cfg.value, literals.value),
|
||||
unauthorized_status: auth.unauthorized_status ?? "",
|
||||
unauthorized_response: auth.unauthorized_response ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
function Field({ label, children, hint }) {
|
||||
return (
|
||||
<div className="form-control w-full">
|
||||
<div className="label py-1">
|
||||
<span className="label-text text-sm font-medium">{label}</span>
|
||||
</div>
|
||||
{children}
|
||||
{hint ? (
|
||||
<div className="label py-1">
|
||||
<span className="label-text-alt opacity-60">{hint}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-3 rounded-box border border-base-300 p-3">
|
||||
<p className="text-sm font-medium">{label}</p>
|
||||
<Field label="Source">
|
||||
<select
|
||||
className="select select-bordered w-full"
|
||||
value={cred.source}
|
||||
onChange={(e) => onChange({ ...cred, source: e.target.value, keep: false })}
|
||||
>
|
||||
<option value="literal">Plain text</option>
|
||||
<option value="kv">From KV</option>
|
||||
<option value="secret">From secret</option>
|
||||
</select>
|
||||
</Field>
|
||||
{cred.source === "literal" ? (
|
||||
<Field
|
||||
label="Value"
|
||||
hint={
|
||||
cred.keep && !cred.value
|
||||
? "A value is already set. Enter a new one to replace it."
|
||||
: null
|
||||
}
|
||||
>
|
||||
<div className="flex w-full gap-1">
|
||||
<input
|
||||
type={masked && !show ? "password" : "text"}
|
||||
className="input input-bordered w-full font-mono"
|
||||
value={cred.value}
|
||||
onChange={(e) => onChange({ ...cred, value: e.target.value, keep: false })}
|
||||
placeholder={
|
||||
cred.keep && !cred.value ? "(unchanged — leave blank to keep)" : ""
|
||||
}
|
||||
required={!allowEmpty && !cred.keep && !cred.value}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{masked ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-square shrink-0"
|
||||
title={show ? "Hide" : "Reveal"}
|
||||
aria-label={show ? "Hide value" : "Reveal value"}
|
||||
onClick={() => setShow((v) => !v)}
|
||||
>
|
||||
{show ? <LuEyeOff className="size-4" /> : <LuEye className="size-4" />}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</Field>
|
||||
) : null}
|
||||
{cred.source === "kv" ? (
|
||||
<>
|
||||
<Field label="Namespace (optional)">
|
||||
<input
|
||||
className="input input-bordered w-full font-mono"
|
||||
placeholder="namespace"
|
||||
value={cred.namespace}
|
||||
onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Key">
|
||||
<input
|
||||
className="input input-bordered w-full font-mono"
|
||||
placeholder="key"
|
||||
value={cred.kv}
|
||||
onChange={(e) => onChange({ ...cred, kv: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
) : null}
|
||||
{cred.source === "secret" ? (
|
||||
<Field
|
||||
label="Secret name"
|
||||
hint="Encrypted secret — value is never shown here. Manage it on the Secrets page."
|
||||
>
|
||||
<input
|
||||
className="input input-bordered w-full font-mono"
|
||||
placeholder="secret name"
|
||||
value={cred.secret}
|
||||
onChange={(e) => onChange({ ...cred, secret: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add / edit an HTTP trigger auth profile.
|
||||
* Reusable: mount when open; pass `auth` for edit (literals loaded inside).
|
||||
*
|
||||
* @param {"add" | "edit"} mode
|
||||
* @param {object} [auth] Public auth row when mode is "edit"
|
||||
* @param {() => void} onClose
|
||||
* @param {(saved: unknown) => void} [onSaved]
|
||||
*/
|
||||
export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
|
||||
const { data: pages = [] } = useHttpPages();
|
||||
const upsert = useUpsertHttpAuth();
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [loading, setLoading] = useState(mode === "edit");
|
||||
|
||||
useEffect(() => {
|
||||
if (mode !== "edit" || !auth?.id) {
|
||||
setForm(emptyForm());
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
(async () => {
|
||||
/** @type {Record<string, string>} */
|
||||
let literals = {};
|
||||
try {
|
||||
const data = await fetchHttpAuthLiterals(auth.id);
|
||||
literals = data.literals ?? {};
|
||||
} catch {
|
||||
// Form still works with keep markers
|
||||
}
|
||||
if (cancelled) return;
|
||||
setForm(formFromAuth(auth, literals));
|
||||
setLoading(false);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [mode, auth]);
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
/** @type {Record<string, unknown>} */
|
||||
let config = {};
|
||||
if (form.type === "bearer") {
|
||||
const token = toApiField(form.token);
|
||||
if (token == null) return;
|
||||
config = { token };
|
||||
} else if (form.type === "basic") {
|
||||
const user = toApiField(form.user);
|
||||
if (user == null) return;
|
||||
const password = toApiField(form.password, { required: false });
|
||||
config = { user, password: password ?? "" };
|
||||
} else {
|
||||
const value = toApiField(form.value);
|
||||
if (value == null) return;
|
||||
config = { header: form.header, value };
|
||||
}
|
||||
|
||||
upsert.mutate(
|
||||
{
|
||||
id: form.id,
|
||||
name: form.name,
|
||||
type: form.type,
|
||||
config,
|
||||
unauthorized_status:
|
||||
form.unauthorized_status === "" ? null : Number(form.unauthorized_status),
|
||||
unauthorized_response: form.unauthorized_response || null,
|
||||
},
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
onSaved?.(data?.auth ?? data);
|
||||
onClose();
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const title = mode === "add" ? "New auth profile" : `Edit ${form.name || auth?.name || ""}`;
|
||||
|
||||
return (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box max-w-xl">
|
||||
<h3 className="font-bold">{title}</h3>
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-10">
|
||||
<span className="loading loading-spinner" />
|
||||
</div>
|
||||
) : (
|
||||
<form className="mt-3 space-y-4" onSubmit={onSubmit}>
|
||||
<Field label="Name">
|
||||
<input
|
||||
className="input input-bordered w-full font-mono"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Type">
|
||||
<select
|
||||
className="select select-bordered w-full"
|
||||
value={form.type}
|
||||
onChange={(e) => setForm({ ...form, type: e.target.value })}
|
||||
>
|
||||
<option value="bearer">bearer</option>
|
||||
<option value="basic">basic</option>
|
||||
<option value="header">header</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{form.type === "bearer" ? (
|
||||
<CredentialFields
|
||||
label="Token"
|
||||
cred={form.token}
|
||||
onChange={(token) => setForm({ ...form, token })}
|
||||
/>
|
||||
) : null}
|
||||
{form.type === "basic" ? (
|
||||
<>
|
||||
<CredentialFields
|
||||
label="User"
|
||||
cred={form.user}
|
||||
onChange={(user) => setForm({ ...form, user })}
|
||||
/>
|
||||
<CredentialFields
|
||||
label="Password"
|
||||
cred={form.password}
|
||||
onChange={(password) => setForm({ ...form, password })}
|
||||
allowEmpty
|
||||
masked
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
{form.type === "header" ? (
|
||||
<>
|
||||
<Field label="Header name">
|
||||
<input
|
||||
className="input input-bordered w-full font-mono"
|
||||
value={form.header}
|
||||
onChange={(e) => setForm({ ...form, header: e.target.value })}
|
||||
required
|
||||
placeholder="X-Webhook-Secret"
|
||||
/>
|
||||
</Field>
|
||||
<CredentialFields
|
||||
label="Header value"
|
||||
cred={form.value}
|
||||
onChange={(value) => setForm({ ...form, value })}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Field label="Unauthorized status (optional)">
|
||||
<input
|
||||
type="number"
|
||||
className="input input-bordered w-full"
|
||||
value={form.unauthorized_status}
|
||||
onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
|
||||
min={100}
|
||||
max={599}
|
||||
placeholder="401"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Unauthorized response page (optional)">
|
||||
<select
|
||||
className="select select-bordered w-full"
|
||||
value={form.unauthorized_response}
|
||||
onChange={(e) => setForm({ ...form, unauthorized_response: e.target.value })}
|
||||
>
|
||||
<option value="">(default JSON)</option>
|
||||
{pages.map((p) => (
|
||||
<option key={p.id} value={p.name}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{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>
|
||||
)}
|
||||
{loading ? (
|
||||
<div className="modal-action">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={onClose}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user