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
@@ -4,12 +4,27 @@ import { assertHttpStatus } from "./http-pages-store.js";
|
||||
|
||||
const MAX_NAME_LENGTH = 128;
|
||||
const NAME_RE = /^[A-Za-z0-9._-]+$/;
|
||||
const UUID_RE =
|
||||
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
||||
const ALLOWED_TYPES = new Set(["bearer", "basic", "header"]);
|
||||
|
||||
function nowIso() {
|
||||
return new Date().toISOString();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {unknown} id
|
||||
* @returns {string}
|
||||
*/
|
||||
export function assertAuthId(id) {
|
||||
if (typeof id !== "string" || !UUID_RE.test(id)) {
|
||||
const err = new Error("invalid auth id");
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
return id.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {unknown} name
|
||||
* @returns {string}
|
||||
@@ -218,10 +233,11 @@ function publicAuth(row, { includeConfig = true } = {}) {
|
||||
|
||||
/**
|
||||
* Internal: full config including literals (for runtime auth checks).
|
||||
* @param {string} name
|
||||
* @param {string} id
|
||||
*/
|
||||
export async function getHttpAuthInternal(name) {
|
||||
const row = await db("http_auths").where({ name: assertAuthName(name) }).first();
|
||||
export async function getHttpAuthInternal(id) {
|
||||
const authId = assertAuthId(id);
|
||||
const row = await db("http_auths").where({ id: authId }).first();
|
||||
if (!row) return null;
|
||||
return {
|
||||
id: row.id,
|
||||
@@ -235,11 +251,11 @@ export async function getHttpAuthInternal(name) {
|
||||
|
||||
/**
|
||||
* Return only plaintext literal credential fields (not KV refs or encrypted secrets).
|
||||
* @param {string} name
|
||||
* @returns {Promise<{ name: string, type: string, literals: Record<string, string> } | null>}
|
||||
* @param {string} id
|
||||
* @returns {Promise<{ id: string, name: string, type: string, literals: Record<string, string> } | null>}
|
||||
*/
|
||||
export async function revealHttpAuthLiterals(name) {
|
||||
const internal = await getHttpAuthInternal(name);
|
||||
export async function revealHttpAuthLiterals(id) {
|
||||
const internal = await getHttpAuthInternal(id);
|
||||
if (!internal) return null;
|
||||
/** @type {Record<string, string>} */
|
||||
const literals = {};
|
||||
@@ -248,7 +264,12 @@ export async function revealHttpAuthLiterals(name) {
|
||||
const v = cfg[key];
|
||||
if (typeof v === "string") literals[key] = v;
|
||||
}
|
||||
return { name: internal.name, type: internal.type, literals };
|
||||
return {
|
||||
id: internal.id,
|
||||
name: internal.name,
|
||||
type: internal.type,
|
||||
literals,
|
||||
};
|
||||
}
|
||||
|
||||
export async function listHttpAuths() {
|
||||
@@ -256,24 +277,23 @@ export async function listHttpAuths() {
|
||||
return rows.map((r) => publicAuth(r));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} name
|
||||
*/
|
||||
export async function getHttpAuthByName(name) {
|
||||
const row = await db("http_auths").where({ name: assertAuthName(name) }).first();
|
||||
return row ? publicAuth(row) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} id
|
||||
*/
|
||||
export async function getHttpAuthById(id) {
|
||||
const row = await db("http_auths").where({ id }).first();
|
||||
let authId;
|
||||
try {
|
||||
authId = assertAuthId(id);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
const row = await db("http_auths").where({ id: authId }).first();
|
||||
return row ? publicAuth(row) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* id?: string | null,
|
||||
* name: string,
|
||||
* type: string,
|
||||
* config?: unknown,
|
||||
@@ -282,6 +302,7 @@ export async function getHttpAuthById(id) {
|
||||
* }} opts
|
||||
*/
|
||||
export async function upsertHttpAuth({
|
||||
id,
|
||||
name,
|
||||
type,
|
||||
config,
|
||||
@@ -290,7 +311,26 @@ export async function upsertHttpAuth({
|
||||
}) {
|
||||
const authName = assertAuthName(name);
|
||||
const authType = assertAuthType(type);
|
||||
const existing = await db("http_auths").where({ name: authName }).first();
|
||||
|
||||
/** @type {Record<string, unknown> | null} */
|
||||
let existing = null;
|
||||
if (id != null && String(id).length > 0) {
|
||||
const authId = assertAuthId(id);
|
||||
existing = await db("http_auths").where({ id: authId }).first();
|
||||
if (!existing) {
|
||||
const err = new Error("auth not found");
|
||||
err.statusCode = 404;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const nameClash = await db("http_auths").where({ name: authName }).first();
|
||||
if (nameClash && (!existing || nameClash.id !== existing.id)) {
|
||||
const err = new Error(`auth name "${authName}" already exists`);
|
||||
err.statusCode = 409;
|
||||
throw err;
|
||||
}
|
||||
|
||||
const prevConfig = existing ? parseConfig(existing.config) : {};
|
||||
const normalized = normalizeAuthConfig(authType, config, {
|
||||
keepLiteralsFrom: prevConfig,
|
||||
@@ -315,18 +355,19 @@ export async function upsertHttpAuth({
|
||||
await db("http_auths")
|
||||
.where({ id: existing.id })
|
||||
.update({
|
||||
name: authName,
|
||||
type: authType,
|
||||
config: configJson,
|
||||
unauthorized_status: unauthStatus,
|
||||
unauthorized_response: unauthResponse,
|
||||
updated_at: now,
|
||||
});
|
||||
return getHttpAuthById(existing.id);
|
||||
return getHttpAuthById(/** @type {string} */ (existing.id));
|
||||
}
|
||||
|
||||
const id = randomUUID();
|
||||
const newId = randomUUID();
|
||||
await db("http_auths").insert({
|
||||
id,
|
||||
id: newId,
|
||||
name: authName,
|
||||
type: authType,
|
||||
config: configJson,
|
||||
@@ -335,7 +376,7 @@ export async function upsertHttpAuth({
|
||||
created_at: now,
|
||||
updated_at: now,
|
||||
});
|
||||
return getHttpAuthById(id);
|
||||
return getHttpAuthById(newId);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -343,6 +384,7 @@ export async function upsertHttpAuth({
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
export async function deleteHttpAuth(id) {
|
||||
const n = await db("http_auths").where({ id }).del();
|
||||
const authId = assertAuthId(id);
|
||||
const n = await db("http_auths").where({ id: authId }).del();
|
||||
return n > 0;
|
||||
}
|
||||
|
||||
@@ -77,23 +77,28 @@ export async function resolveCredentialValue(field, ctx) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize trigger.auth into an inline auth mechanism object.
|
||||
* @param {unknown} authField
|
||||
* @returns {Promise<{
|
||||
* @typedef {{
|
||||
* type: string,
|
||||
* config: Record<string, unknown>,
|
||||
* unauthorized_status?: number | null,
|
||||
* unauthorized_response?: string | null,
|
||||
* label: string,
|
||||
* } | null>}
|
||||
* }} AuthMechanism
|
||||
*/
|
||||
export async function resolveAuthMechanism(authField) {
|
||||
if (authField == null || authField === false) return null;
|
||||
|
||||
if (typeof authField === "string") {
|
||||
const named = await getHttpAuthInternal(authField);
|
||||
/**
|
||||
* Resolve one auth entry (auth profile id UUID, or inline object).
|
||||
* @param {unknown} entry
|
||||
* @returns {Promise<AuthMechanism | null>}
|
||||
*/
|
||||
export async function resolveAuthMechanism(entry) {
|
||||
if (entry == null || entry === false) return null;
|
||||
|
||||
if (typeof entry === "string") {
|
||||
try {
|
||||
const named = await getHttpAuthInternal(entry);
|
||||
if (!named) {
|
||||
log.warn({ name: authField }, "http auth: named profile not found");
|
||||
log.warn({ id: entry }, "http auth: profile id not found");
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
@@ -101,14 +106,18 @@ export async function resolveAuthMechanism(authField) {
|
||||
config: named.config,
|
||||
unauthorized_status: named.unauthorized_status,
|
||||
unauthorized_response: named.unauthorized_response,
|
||||
label: authField,
|
||||
label: named.name,
|
||||
};
|
||||
} catch (err) {
|
||||
log.warn({ err, id: entry }, "http auth: invalid profile id");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof authField === "object" && !Array.isArray(authField)) {
|
||||
const obj = /** @type {Record<string, unknown>} */ (authField);
|
||||
if (typeof obj.name === "string" && obj.name.length > 0 && !obj.type) {
|
||||
return resolveAuthMechanism(obj.name);
|
||||
if (typeof entry === "object" && !Array.isArray(entry)) {
|
||||
const obj = /** @type {Record<string, unknown>} */ (entry);
|
||||
if (typeof obj.id === "string" && obj.id.length > 0 && !obj.type) {
|
||||
return resolveAuthMechanism(obj.id);
|
||||
}
|
||||
try {
|
||||
const type = assertAuthType(obj.type);
|
||||
@@ -116,6 +125,7 @@ export async function resolveAuthMechanism(authField) {
|
||||
const config = { ...obj };
|
||||
delete config.type;
|
||||
delete config.name;
|
||||
delete config.id;
|
||||
return {
|
||||
type,
|
||||
config,
|
||||
@@ -133,18 +143,64 @@ export async function resolveAuthMechanism(authField) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Label for mermaid / summary (sync, no DB).
|
||||
* Normalize trigger.auth (array of auth ids / inline objects) into mechanisms.
|
||||
* Empty / null / false → no auth. Any entry that fails to resolve is skipped;
|
||||
* if the field was non-empty but nothing resolves, returns [] (caller treats as unauthorized).
|
||||
* @param {unknown} authField
|
||||
* @returns {Promise<AuthMechanism[]>}
|
||||
*/
|
||||
export function authLabel(authField) {
|
||||
if (authField == null) return null;
|
||||
if (typeof authField === "string") return authField;
|
||||
if (typeof authField === "object" && !Array.isArray(authField)) {
|
||||
const o = /** @type {Record<string, unknown>} */ (authField);
|
||||
if (typeof o.name === "string" && o.name) return o.name;
|
||||
export async function resolveAuthMechanisms(authField) {
|
||||
if (authField == null || authField === false) return [];
|
||||
if (!Array.isArray(authField) || authField.length === 0) return [];
|
||||
|
||||
/** @type {AuthMechanism[]} */
|
||||
const out = [];
|
||||
for (const entry of authField) {
|
||||
const mech = await resolveAuthMechanism(entry);
|
||||
if (mech) out.push(mech);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* True if any mechanism accepts the request (OR).
|
||||
* @param {import("fastify").FastifyRequest} req
|
||||
* @param {AuthMechanism[]} mechanisms
|
||||
* @param {{ owner: string, workflowKey: string }} ctx
|
||||
*/
|
||||
export async function checkAnyHttpAuth(req, mechanisms, ctx) {
|
||||
for (const mechanism of mechanisms) {
|
||||
if (await checkHttpAuth(req, mechanism, ctx)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Label for mermaid / summary (sync). Prefer resolved display names when provided.
|
||||
* @param {unknown} authField
|
||||
* @param {Map<string, string> | Record<string, string>} [nameById]
|
||||
*/
|
||||
export function authLabel(authField, nameById) {
|
||||
if (authField == null || authField === false) return null;
|
||||
if (!Array.isArray(authField) || authField.length === 0) return null;
|
||||
const lookup =
|
||||
nameById instanceof Map
|
||||
? (id) => nameById.get(id)
|
||||
: nameById
|
||||
? (id) => nameById[id]
|
||||
: () => undefined;
|
||||
const parts = authField.map((entry) => {
|
||||
if (typeof entry === "string") return lookup(entry) ?? entry;
|
||||
if (entry && typeof entry === "object" && !Array.isArray(entry)) {
|
||||
const o = /** @type {Record<string, unknown>} */ (entry);
|
||||
if (typeof o.id === "string" && o.id && !o.type) {
|
||||
return lookup(o.id) ?? o.id;
|
||||
}
|
||||
if (typeof o.type === "string" && o.type) return o.type;
|
||||
}
|
||||
return "auth";
|
||||
});
|
||||
return parts.join("|");
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
assertAuthId,
|
||||
assertAuthName,
|
||||
assertAuthType,
|
||||
listHttpAuths,
|
||||
getHttpAuthById,
|
||||
getHttpAuthByName,
|
||||
upsertHttpAuth,
|
||||
deleteHttpAuth,
|
||||
revealHttpAuthLiterals,
|
||||
@@ -18,28 +18,28 @@ export default async function httpAuthsPlugin(fastify) {
|
||||
return { auths: await listHttpAuths() };
|
||||
});
|
||||
|
||||
fastify.get("/http-auths/:name/reveal", async (req, reply) => {
|
||||
const { name } = /** @type {{ name: string }} */ (req.params);
|
||||
fastify.get("/http-auths/:id/reveal", async (req, reply) => {
|
||||
const { id } = /** @type {{ id: string }} */ (req.params);
|
||||
try {
|
||||
assertAuthName(name);
|
||||
assertAuthId(id);
|
||||
} catch (err) {
|
||||
return reply.code(err.statusCode ?? 400).send({ error: err.message });
|
||||
}
|
||||
const revealed = await revealHttpAuthLiterals(name);
|
||||
const revealed = await revealHttpAuthLiterals(id);
|
||||
if (!revealed) {
|
||||
return reply.code(404).send({ error: "auth not found" });
|
||||
}
|
||||
return revealed;
|
||||
});
|
||||
|
||||
fastify.get("/http-auths/:name", async (req, reply) => {
|
||||
const { name } = /** @type {{ name: string }} */ (req.params);
|
||||
fastify.get("/http-auths/:id", async (req, reply) => {
|
||||
const { id } = /** @type {{ id: string }} */ (req.params);
|
||||
try {
|
||||
assertAuthName(name);
|
||||
assertAuthId(id);
|
||||
} catch (err) {
|
||||
return reply.code(err.statusCode ?? 400).send({ error: err.message });
|
||||
}
|
||||
const auth = await getHttpAuthByName(name);
|
||||
const auth = await getHttpAuthById(id);
|
||||
if (!auth) {
|
||||
return reply.code(404).send({ error: "auth not found" });
|
||||
}
|
||||
@@ -48,6 +48,7 @@ export default async function httpAuthsPlugin(fastify) {
|
||||
|
||||
fastify.put("/http-auths", async (req, reply) => {
|
||||
const body = /** @type {{
|
||||
id?: string | null,
|
||||
name?: string,
|
||||
type?: string,
|
||||
config?: unknown,
|
||||
@@ -57,6 +58,9 @@ export default async function httpAuthsPlugin(fastify) {
|
||||
try {
|
||||
assertAuthName(String(body.name ?? ""));
|
||||
assertAuthType(body.type);
|
||||
if (body.id != null && String(body.id).length > 0) {
|
||||
assertAuthId(String(body.id));
|
||||
}
|
||||
if (
|
||||
body.unauthorized_response != null &&
|
||||
String(body.unauthorized_response).length > 0
|
||||
@@ -69,6 +73,7 @@ export default async function httpAuthsPlugin(fastify) {
|
||||
);
|
||||
}
|
||||
const auth = await upsertHttpAuth({
|
||||
id: body.id != null && String(body.id).length > 0 ? String(body.id) : null,
|
||||
name: String(body.name),
|
||||
type: String(body.type),
|
||||
config: body.config,
|
||||
@@ -83,6 +88,11 @@ export default async function httpAuthsPlugin(fastify) {
|
||||
|
||||
fastify.delete("/http-auths/:id", async (req, reply) => {
|
||||
const { id } = /** @type {{ id: string }} */ (req.params);
|
||||
try {
|
||||
assertAuthId(id);
|
||||
} catch (err) {
|
||||
return reply.code(err.statusCode ?? 400).send({ error: err.message });
|
||||
}
|
||||
const existing = await getHttpAuthById(id);
|
||||
if (!existing) {
|
||||
return reply.code(404).send({ error: "auth not found" });
|
||||
|
||||
@@ -12,9 +12,12 @@ import {
|
||||
getHttpAuthInternal,
|
||||
} from "../http-auths-store.js";
|
||||
import {
|
||||
authLabel,
|
||||
checkAnyHttpAuth,
|
||||
checkHttpAuth,
|
||||
coerceCredentialString,
|
||||
resolveAuthMechanism,
|
||||
resolveAuthMechanisms,
|
||||
resolveCredentialValue,
|
||||
resolveUnauthorizedSpec,
|
||||
sendHttpPageOrJson,
|
||||
@@ -180,7 +183,7 @@ const secret = await upsertSecret({
|
||||
assert(!missingSec, "missing secret fails closed");
|
||||
}
|
||||
|
||||
// --- named profile ---
|
||||
// --- named profile (by id) ---
|
||||
const profile = await upsertHttpAuth({
|
||||
name: "webhook-smoke",
|
||||
type: "bearer",
|
||||
@@ -188,9 +191,10 @@ const profile = await upsertHttpAuth({
|
||||
unauthorized_status: 403,
|
||||
unauthorized_response: "deny-smoke",
|
||||
});
|
||||
assert(typeof profile.id === "string" && profile.id.length > 0, "profile has id");
|
||||
{
|
||||
const mech = await resolveAuthMechanism("webhook-smoke");
|
||||
assert(mech?.label === "webhook-smoke", "named profile");
|
||||
const mech = await resolveAuthMechanism(profile.id);
|
||||
assert(mech?.label === "webhook-smoke", "profile by id");
|
||||
const ok = await checkHttpAuth(
|
||||
mockReq({ authorization: "Bearer named-token" }),
|
||||
mech,
|
||||
@@ -202,9 +206,68 @@ const profile = await upsertHttpAuth({
|
||||
assert(pageName === "deny-smoke", "profile unauth page");
|
||||
}
|
||||
|
||||
// --- rename keeps id ---
|
||||
{
|
||||
const renamed = await upsertHttpAuth({
|
||||
id: profile.id,
|
||||
name: "webhook-renamed",
|
||||
type: "bearer",
|
||||
config: { token: { keep: true } },
|
||||
unauthorized_status: 403,
|
||||
unauthorized_response: "deny-smoke",
|
||||
});
|
||||
assert(renamed.id === profile.id, "rename keeps id");
|
||||
assert(renamed.name === "webhook-renamed", "rename updates name");
|
||||
const mech = await resolveAuthMechanism(profile.id);
|
||||
assert(mech?.label === "webhook-renamed", "resolve uses new name label");
|
||||
const ok = await checkHttpAuth(
|
||||
mockReq({ authorization: "Bearer named-token" }),
|
||||
mech,
|
||||
ctx,
|
||||
);
|
||||
assert(ok, "credentials survive rename");
|
||||
}
|
||||
|
||||
// --- multi-auth OR ---
|
||||
const basicProfile = await upsertHttpAuth({
|
||||
name: "basic-smoke",
|
||||
type: "basic",
|
||||
config: { user: "bob", password: "p@ss" },
|
||||
});
|
||||
{
|
||||
const mechs = await resolveAuthMechanisms([profile.id, basicProfile.id]);
|
||||
assert(mechs.length === 2, "resolve two mechanisms");
|
||||
assert(
|
||||
authLabel([profile.id, basicProfile.id], {
|
||||
[profile.id]: "webhook-renamed",
|
||||
[basicProfile.id]: "basic-smoke",
|
||||
}) === "webhook-renamed|basic-smoke",
|
||||
"authLabel",
|
||||
);
|
||||
const viaBearer = await checkAnyHttpAuth(
|
||||
mockReq({ authorization: "Bearer named-token" }),
|
||||
mechs,
|
||||
ctx,
|
||||
);
|
||||
assert(viaBearer, "OR accepts bearer");
|
||||
const encoded = Buffer.from("bob:p@ss").toString("base64");
|
||||
const viaBasic = await checkAnyHttpAuth(
|
||||
mockReq({ authorization: `Basic ${encoded}` }),
|
||||
mechs,
|
||||
ctx,
|
||||
);
|
||||
assert(viaBasic, "OR accepts basic");
|
||||
const neither = await checkAnyHttpAuth(
|
||||
mockReq({ authorization: "Bearer wrong" }),
|
||||
mechs,
|
||||
ctx,
|
||||
);
|
||||
assert(!neither, "OR rejects when none match");
|
||||
}
|
||||
|
||||
// trigger-level override
|
||||
{
|
||||
const mech = await getHttpAuthInternal("webhook-smoke");
|
||||
const mech = await getHttpAuthInternal(profile.id);
|
||||
const { status, pageName } = resolveUnauthorizedSpec(
|
||||
{ unauthorized: { status: 401, response: "deny-smoke" } },
|
||||
mech,
|
||||
@@ -226,7 +289,7 @@ await validateWorkflowHttpTriggers({
|
||||
type: "HTTP",
|
||||
method: "POST",
|
||||
path: "/x",
|
||||
auth: "webhook-smoke",
|
||||
auth: [profile.id, basicProfile.id],
|
||||
response: "deny-smoke",
|
||||
},
|
||||
],
|
||||
@@ -235,12 +298,38 @@ await validateWorkflowHttpTriggers({
|
||||
let threw = false;
|
||||
try {
|
||||
await validateWorkflowHttpTriggers({
|
||||
triggers: [{ type: "HTTP", path: "/x", auth: "no-such-profile" }],
|
||||
triggers: [{ type: "HTTP", path: "/x", auth: profile.id }],
|
||||
});
|
||||
} catch {
|
||||
threw = true;
|
||||
}
|
||||
assert(threw, "unknown auth fails validation");
|
||||
assert(threw, "non-array auth fails validation");
|
||||
|
||||
threw = false;
|
||||
try {
|
||||
await validateWorkflowHttpTriggers({
|
||||
triggers: [{ type: "HTTP", path: "/x", auth: ["webhook-renamed"] }],
|
||||
});
|
||||
} catch {
|
||||
threw = true;
|
||||
}
|
||||
assert(threw, "name string fails validation");
|
||||
|
||||
threw = false;
|
||||
try {
|
||||
await validateWorkflowHttpTriggers({
|
||||
triggers: [
|
||||
{
|
||||
type: "HTTP",
|
||||
path: "/x",
|
||||
auth: ["00000000-0000-4000-8000-000000000000"],
|
||||
},
|
||||
],
|
||||
});
|
||||
} catch {
|
||||
threw = true;
|
||||
}
|
||||
assert(threw, "unknown auth id fails validation");
|
||||
|
||||
threw = false;
|
||||
try {
|
||||
@@ -280,6 +369,7 @@ assert(threw, "unknown page fails validation");
|
||||
|
||||
// cleanup
|
||||
await deleteHttpAuth(profile.id);
|
||||
await deleteHttpAuth(basicProfile.id);
|
||||
await deleteHttpPage(page.id);
|
||||
await deleteSecret(secret.id);
|
||||
const leftover = (await listSecrets({ owner })).find(
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
/**
|
||||
* Validate HTTP trigger auth / response fields on workflow save.
|
||||
*/
|
||||
import { assertAuthType, getHttpAuthByName } from "./http-auths-store.js";
|
||||
import {
|
||||
assertAuthId,
|
||||
assertAuthType,
|
||||
getHttpAuthById,
|
||||
} from "./http-auths-store.js";
|
||||
import { getHttpPageByName, assertHttpResponsePage } from "./http-pages-store.js";
|
||||
import { authLabel } from "./http-trigger-auth.js";
|
||||
|
||||
@@ -24,49 +28,78 @@ function assertCredentialFieldShape(field, label) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {unknown} entry
|
||||
* @param {string} path
|
||||
*/
|
||||
async function validateAuthEntry(entry, path) {
|
||||
if (typeof entry === "string") {
|
||||
try {
|
||||
assertAuthId(entry);
|
||||
} catch {
|
||||
const err = new Error(`${path} must be an auth profile UUID`);
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
const named = await getHttpAuthById(entry);
|
||||
if (!named) {
|
||||
const err = new Error(`unknown auth profile id "${entry}"`);
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry && typeof entry === "object" && !Array.isArray(entry)) {
|
||||
const obj = /** @type {Record<string, unknown>} */ (entry);
|
||||
if (typeof obj.id === "string" && obj.id.length > 0 && !obj.type) {
|
||||
await validateAuthEntry(obj.id, path);
|
||||
return;
|
||||
}
|
||||
const type = assertAuthType(obj.type);
|
||||
if (type === "bearer") {
|
||||
assertCredentialFieldShape(obj.token, `${path}.token`);
|
||||
} else if (type === "basic") {
|
||||
assertCredentialFieldShape(obj.user, `${path}.user`);
|
||||
if (obj.password != null && obj.password !== "") {
|
||||
assertCredentialFieldShape(obj.password, `${path}.password`);
|
||||
}
|
||||
} else if (type === "header") {
|
||||
if (typeof obj.header !== "string" || obj.header.length === 0) {
|
||||
const err = new Error(`${path}.header must be a non-empty string`);
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
assertCredentialFieldShape(obj.value, `${path}.value`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const err = new Error(
|
||||
`${path} must be an auth profile UUID or an inline auth object`,
|
||||
);
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
|
||||
/**
|
||||
* auth is an array of auth profile UUIDs and/or inline auth objects (OR).
|
||||
* null / false / [] = no auth.
|
||||
* @param {unknown} auth
|
||||
*/
|
||||
async function validateAuthField(auth) {
|
||||
if (auth == null || auth === false) return;
|
||||
|
||||
if (typeof auth === "string") {
|
||||
const named = await getHttpAuthByName(auth);
|
||||
if (!named) {
|
||||
const err = new Error(`unknown auth profile "${auth}"`);
|
||||
if (!Array.isArray(auth)) {
|
||||
const err = new Error(
|
||||
"auth must be an array of auth profile UUIDs and/or inline auth objects",
|
||||
);
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof auth === "object" && !Array.isArray(auth)) {
|
||||
const obj = /** @type {Record<string, unknown>} */ (auth);
|
||||
if (typeof obj.name === "string" && obj.name.length > 0 && !obj.type) {
|
||||
await validateAuthField(obj.name);
|
||||
return;
|
||||
for (let i = 0; i < auth.length; i++) {
|
||||
await validateAuthEntry(auth[i], `auth[${i}]`);
|
||||
}
|
||||
const type = assertAuthType(obj.type);
|
||||
if (type === "bearer") {
|
||||
assertCredentialFieldShape(obj.token, "auth.token");
|
||||
} else if (type === "basic") {
|
||||
assertCredentialFieldShape(obj.user, "auth.user");
|
||||
if (obj.password != null && obj.password !== "") {
|
||||
assertCredentialFieldShape(obj.password, "auth.password");
|
||||
}
|
||||
} else if (type === "header") {
|
||||
if (typeof obj.header !== "string" || obj.header.length === 0) {
|
||||
const err = new Error("auth.header must be a non-empty string");
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
assertCredentialFieldShape(obj.value, "auth.value");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const err = new Error("auth must be a profile name or an auth object");
|
||||
err.statusCode = 400;
|
||||
throw err;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -13,4 +13,5 @@ triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /dev-zte-sms
|
||||
auth: basic-auth
|
||||
auth:
|
||||
- 0f78d6d7-bd44-45d7-a826-f51c027b767f
|
||||
|
||||
@@ -36,4 +36,5 @@ triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /send-gmail
|
||||
auth: basic-auth
|
||||
auth:
|
||||
- 0f78d6d7-bd44-45d7-a826-f51c027b767f
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
name: time to ntfy example
|
||||
description: |
|
||||
this workflow will send a message to ntfy with the current time
|
||||
enabled: false
|
||||
scripts:
|
||||
- script: plugin/get-current-time
|
||||
config:
|
||||
@@ -12,3 +13,5 @@ triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /time-to-ntfy
|
||||
auth:
|
||||
- 0f78d6d7-bd44-45d7-a826-f51c027b767f
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import cronstrue from "cronstrue";
|
||||
@@ -138,15 +138,27 @@ function typeLabel(type) {
|
||||
return type || "Trigger";
|
||||
}
|
||||
|
||||
function Field({ label, children, hint }) {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{label ? <span className="text-sm font-medium opacity-80">{label}</span> : null}
|
||||
{children}
|
||||
{hint ? <span className="text-xs opacity-60">{hint}</span> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDestinations }) {
|
||||
const path = trigger.path || "/";
|
||||
const url = namespacedPath(owner || "owner", path);
|
||||
const authIsInline = trigger.auth != null && typeof trigger.auth === "object";
|
||||
const authSelect = authIsInline
|
||||
? "__inline__"
|
||||
: typeof trigger.auth === "string" && trigger.auth
|
||||
? trigger.auth
|
||||
: "";
|
||||
const authEntries = Array.isArray(trigger.auth) ? trigger.auth : [];
|
||||
const selectedIds = authEntries.filter((e) => typeof e === "string" && e).map(String);
|
||||
const inlineEntries = authEntries.filter((e) => e && typeof e === "object");
|
||||
|
||||
function setAuthIds(nextIds) {
|
||||
const next = [...nextIds, ...inlineEntries];
|
||||
onChange({ ...trigger, auth: next.length ? next : null });
|
||||
}
|
||||
|
||||
function copyUrl() {
|
||||
if (typeof navigator?.clipboard?.writeText === "function") {
|
||||
@@ -155,11 +167,10 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Method</span>
|
||||
<div className="space-y-3">
|
||||
<Field label="Method">
|
||||
<select
|
||||
className="select select-sm"
|
||||
className="select select-bordered select-sm w-full"
|
||||
value={trigger.method || "POST"}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, method: e.target.value })}
|
||||
@@ -173,51 +184,48 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
|
||||
<option value={trigger.method}>{trigger.method}</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Path</span>
|
||||
</Field>
|
||||
|
||||
<Field label="Path">
|
||||
<input
|
||||
className="input input-sm font-mono"
|
||||
className="input input-bordered input-sm w-full font-mono"
|
||||
value={trigger.path ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, path: e.target.value })}
|
||||
placeholder="/hook"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex items-center gap-2 text-xs font-mono opacity-80">
|
||||
<span className="truncate">{url}</span>
|
||||
<button type="button" className="btn btn-ghost btn-xs btn-square" title="Copy URL" onClick={copyUrl}>
|
||||
</Field>
|
||||
|
||||
<Field label="URL">
|
||||
<div className="flex w-full items-center gap-1">
|
||||
<input
|
||||
className="input input-bordered input-sm w-full font-mono opacity-80"
|
||||
value={url}
|
||||
readOnly
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm btn-square shrink-0"
|
||||
title="Copy URL"
|
||||
onClick={copyUrl}
|
||||
>
|
||||
<LuCopy className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Auth</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={authSelect}
|
||||
</Field>
|
||||
|
||||
<AuthPicker
|
||||
auths={auths}
|
||||
selectedIds={selectedIds}
|
||||
inlineCount={inlineEntries.length}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "" || v === "__inline__") {
|
||||
onChange({ ...trigger, auth: v === "__inline__" ? trigger.auth : null });
|
||||
} else {
|
||||
onChange({ ...trigger, auth: v });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{auths.map((a) => (
|
||||
<option key={a.name} value={a.name}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
{authIsInline ? <option value="__inline__">Inline (edit in YAML)</option> : null}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Response page</span>
|
||||
onChange={setAuthIds}
|
||||
/>
|
||||
|
||||
<Field label="Response page">
|
||||
<select
|
||||
className="select select-sm"
|
||||
className="select select-bordered select-sm w-full"
|
||||
value={trigger.response ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, response: e.target.value })}
|
||||
@@ -232,7 +240,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
|
||||
<option value={trigger.response}>{trigger.response}</option>
|
||||
) : null}
|
||||
</select>
|
||||
</label>
|
||||
</Field>
|
||||
|
||||
<FailureAlertFields
|
||||
trigger={trigger}
|
||||
disabled={disabled}
|
||||
@@ -243,6 +252,165 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Searchable dropdown: pick an auth to add; chips with X to remove.
|
||||
* YAML stores profile UUIDs; UI shows names.
|
||||
*/
|
||||
function AuthPicker({ auths, selectedIds, inlineCount, disabled, onChange }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const rootRef = useRef(null);
|
||||
const inputRef = useRef(null);
|
||||
const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
|
||||
const byId = useMemo(() => new Map(auths.map((a) => [a.id, a])), [auths]);
|
||||
|
||||
const available = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
return auths
|
||||
.filter((a) => !selectedSet.has(a.id))
|
||||
.filter((a) => {
|
||||
if (!q) return true;
|
||||
return (
|
||||
a.name.toLowerCase().includes(q) ||
|
||||
String(a.type).toLowerCase().includes(q) ||
|
||||
a.id.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}, [auths, selectedSet, query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onDoc(e) {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target)) {
|
||||
setOpen(false);
|
||||
setQuery("");
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", onDoc);
|
||||
return () => document.removeEventListener("mousedown", onDoc);
|
||||
}, [open]);
|
||||
|
||||
function addAuth(id) {
|
||||
if (selectedSet.has(id)) return;
|
||||
onChange([...selectedIds, id]);
|
||||
setQuery("");
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
function removeAuth(id) {
|
||||
onChange(selectedIds.filter((x) => x !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1" ref={rootRef}>
|
||||
<span className="text-sm font-medium opacity-80">Auth (any of)</span>
|
||||
|
||||
{selectedIds.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedIds.map((id) => {
|
||||
const auth = byId.get(id);
|
||||
return (
|
||||
<span
|
||||
key={id}
|
||||
className="badge badge-outline gap-1 h-7 px-2 font-normal"
|
||||
title={id}
|
||||
>
|
||||
<span className="max-w-[10rem] truncate">
|
||||
{auth ? (
|
||||
<>
|
||||
{auth.name}
|
||||
<span className="opacity-60"> · {auth.type}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="opacity-60">missing</span>
|
||||
)}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs btn-square -mr-1"
|
||||
title="Remove"
|
||||
aria-label={`Remove ${auth?.name ?? id}`}
|
||||
disabled={disabled}
|
||||
onClick={() => removeAuth(id)}
|
||||
>
|
||||
<LuX className="size-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="join w-full">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="search"
|
||||
className="input input-bordered input-sm join-item w-full min-w-0"
|
||||
placeholder={auths.length === 0 ? "No auth profiles yet" : "Add auth…"}
|
||||
value={query}
|
||||
disabled={disabled || auths.length === 0}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setOpen(true);
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
setOpen(false);
|
||||
setQuery("");
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
if (available[0]) addAuth(available[0].id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm join-item btn-square"
|
||||
disabled={disabled || auths.length === 0}
|
||||
aria-label="Open auth list"
|
||||
onClick={() => {
|
||||
setOpen((v) => !v);
|
||||
if (!open) inputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<LuChevronDown className={`size-4 transition-transform ${open ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
{open && !disabled && auths.length > 0 ? (
|
||||
<ul className="menu menu-sm absolute z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-box border border-base-300 bg-base-100 shadow-lg p-1">
|
||||
{available.length === 0 ? (
|
||||
<li className="disabled">
|
||||
<span className="opacity-60">
|
||||
{query.trim() ? "No matches" : "All profiles selected"}
|
||||
</span>
|
||||
</li>
|
||||
) : (
|
||||
available.map((a) => (
|
||||
<li key={a.id}>
|
||||
<button type="button" onClick={() => addAuth(a.id)}>
|
||||
<span className="font-mono text-sm">{a.name}</span>
|
||||
<span className="opacity-60 text-xs">{a.type}</span>
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{inlineCount > 0 ? (
|
||||
<span className="text-xs opacity-60">
|
||||
+ {inlineCount} inline auth{inlineCount === 1 ? "" : "s"} (edit in YAML)
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CronFields({ trigger, disabled, onChange, alertDestinations }) {
|
||||
const preset = matchCronPreset(trigger.schedule);
|
||||
let human = "";
|
||||
@@ -302,12 +470,11 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
|
||||
|
||||
function FailureAlertFields({ trigger, disabled, onChange, alertDestinations }) {
|
||||
return (
|
||||
<div className="space-y-2 border-t border-base-300 pt-3">
|
||||
<p className="text-xs font-medium opacity-80">Failure alert</p>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Consecutive failures</span>
|
||||
<div className="space-y-3 border-t border-base-300 pt-3">
|
||||
<p className="text-sm font-medium opacity-80">Failure alert</p>
|
||||
<Field label="Consecutive failures">
|
||||
<input
|
||||
className="input input-sm"
|
||||
className="input input-bordered input-sm w-full"
|
||||
type="number"
|
||||
min="1"
|
||||
step="1"
|
||||
@@ -318,11 +485,19 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
|
||||
}
|
||||
placeholder="e.g. 3"
|
||||
/>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">On failure, start</span>
|
||||
</Field>
|
||||
<Field
|
||||
label="On failure, start"
|
||||
hint={
|
||||
<>
|
||||
After this many sequential failed runs for this trigger, JerapahFlow starts the
|
||||
selected workflow (it must declare a <span className="font-mono">workflow</span>{" "}
|
||||
trigger).
|
||||
</>
|
||||
}
|
||||
>
|
||||
<select
|
||||
className="select select-sm"
|
||||
className="select select-bordered select-sm w-full"
|
||||
value={trigger.onFailureWorkflow ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, onFailureWorkflow: e.target.value })}
|
||||
@@ -340,12 +515,7 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
|
||||
<option value={trigger.onFailureWorkflow}>{trigger.onFailureWorkflow}</option>
|
||||
) : null}
|
||||
</select>
|
||||
</label>
|
||||
<p className="text-xs opacity-60">
|
||||
After this many sequential failed runs for this trigger, JerapahFlow starts the
|
||||
selected workflow (it must declare a <span className="font-mono">workflow</span>{" "}
|
||||
trigger).
|
||||
</p>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -291,7 +291,7 @@ function normalizeTrigger(raw) {
|
||||
? ""
|
||||
: String(raw.onConsecutiveFailures),
|
||||
onFailureWorkflow: readOnFailureWorkflow(raw),
|
||||
auth: raw.auth ?? null,
|
||||
auth: Array.isArray(raw.auth) ? raw.auth : null,
|
||||
response: typeof raw.response === "string" ? raw.response : "",
|
||||
unauthorized: raw.unauthorized ?? null,
|
||||
extra: Object.keys(extra).length ? extra : undefined,
|
||||
@@ -345,7 +345,7 @@ function dumpTrigger(t) {
|
||||
method: t.method || "POST",
|
||||
path: t.path || "/",
|
||||
};
|
||||
if (t.auth != null && t.auth !== false && t.auth !== "") out.auth = t.auth;
|
||||
if (Array.isArray(t.auth) && t.auth.length > 0) out.auth = t.auth;
|
||||
if (t.response) out.response = t.response;
|
||||
if (t.unauthorized != null && t.unauthorized !== "") out.unauthorized = t.unauthorized;
|
||||
dumpFailureTriggerFields(t, out);
|
||||
|
||||
@@ -1,163 +1,16 @@
|
||||
import { useState } from "react";
|
||||
import { LuEye, LuEyeOff, LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import { LuEye, LuEyeOff, LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
fetchHttpAuthLiterals,
|
||||
useDeleteHttpAuth,
|
||||
useHttpAuths,
|
||||
useHttpPages,
|
||||
useUpsertHttpAuth,
|
||||
} from "../api/hooks.js";
|
||||
import { AuthEditorModal } from "../components/AuthEditorModal.jsx";
|
||||
import { formatTime } from "../lib/format.jsx";
|
||||
|
||||
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 ?? "",
|
||||
};
|
||||
}
|
||||
// literal — prefer revealed value when available
|
||||
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 CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-1 border-base-300 border rounded-box p-3">
|
||||
<label className="label py-0">{label}</label>
|
||||
<select
|
||||
className="select select-sm 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>
|
||||
{cred.source === "literal" ? (
|
||||
<>
|
||||
<div className="flex gap-1 items-center">
|
||||
<input
|
||||
type={masked && !show ? "password" : "text"}
|
||||
className="input input-sm 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-sm btn-square"
|
||||
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>
|
||||
{cred.keep && !cred.value ? (
|
||||
<p className="text-xs opacity-60">
|
||||
A value is already set. Enter a new one to replace it.
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
{cred.source === "kv" ? (
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
placeholder="namespace (optional)"
|
||||
value={cred.namespace}
|
||||
onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
placeholder="key"
|
||||
value={cred.kv}
|
||||
onChange={(e) => onChange({ ...cred, kv: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{cred.source === "secret" ? (
|
||||
<>
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
placeholder="secret name"
|
||||
value={cred.secret}
|
||||
onChange={(e) => onChange({ ...cred, secret: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
/>
|
||||
<p className="text-xs opacity-60">
|
||||
Encrypted secret — value is never shown here. Manage it on the Secrets page.
|
||||
</p>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* List cell: literals show *** with reveal; secrets never reveal; kv shows ref only.
|
||||
*/
|
||||
function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
|
||||
function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
@@ -181,7 +34,6 @@ function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
|
||||
return <span className="font-mono text-xs">{ref}</span>;
|
||||
}
|
||||
|
||||
// literal
|
||||
const revealed = cache?.[fieldKey];
|
||||
const shown = open && typeof revealed === "string";
|
||||
|
||||
@@ -197,7 +49,7 @@ function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await fetchHttpAuthLiterals(authName);
|
||||
const data = await fetchHttpAuthLiterals(authId);
|
||||
onRevealed?.(data.literals ?? {});
|
||||
setOpen(true);
|
||||
} catch (err) {
|
||||
@@ -241,7 +93,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
|
||||
<CredDisplay
|
||||
field={cfg.token}
|
||||
fieldKey="token"
|
||||
authName={auth.name}
|
||||
authId={auth.id}
|
||||
cache={cache}
|
||||
onRevealed={onRevealed}
|
||||
/>
|
||||
@@ -255,7 +107,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
|
||||
<CredDisplay
|
||||
field={cfg.user}
|
||||
fieldKey="user"
|
||||
authName={auth.name}
|
||||
authId={auth.id}
|
||||
cache={cache}
|
||||
onRevealed={onRevealed}
|
||||
/>
|
||||
@@ -265,7 +117,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
|
||||
<CredDisplay
|
||||
field={cfg.password}
|
||||
fieldKey="password"
|
||||
authName={auth.name}
|
||||
authId={auth.id}
|
||||
cache={cache}
|
||||
onRevealed={onRevealed}
|
||||
/>
|
||||
@@ -279,7 +131,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
|
||||
<CredDisplay
|
||||
field={cfg.value}
|
||||
fieldKey="value"
|
||||
authName={auth.name}
|
||||
authId={auth.id}
|
||||
cache={cache}
|
||||
onRevealed={onRevealed}
|
||||
/>
|
||||
@@ -287,122 +139,70 @@ function CredentialsCell({ auth, cache, onRevealed }) {
|
||||
);
|
||||
}
|
||||
|
||||
const emptyForm = () => ({
|
||||
name: "",
|
||||
type: "bearer",
|
||||
token: emptyCred(),
|
||||
user: emptyCred(),
|
||||
password: emptyCred(),
|
||||
header: "",
|
||||
value: emptyCred(),
|
||||
unauthorized_status: "",
|
||||
unauthorized_response: "",
|
||||
});
|
||||
|
||||
export function AuthProfilesPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { name: routeName } = useParams();
|
||||
const isNewRoute = /\/auth\/new\/?$/.test(location.pathname);
|
||||
const isEditRoute = Boolean(routeName) && !isNewRoute;
|
||||
|
||||
const { data: auths = [], isLoading } = useHttpAuths();
|
||||
const { data: pages = [] } = useHttpPages();
|
||||
const upsert = useUpsertHttpAuth();
|
||||
const del = useDeleteHttpAuth();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [editor, setEditor] = useState(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
/** @type {[Record<string, Record<string, string>>, Function]} */
|
||||
const [revealCache, setRevealCache] = useState({});
|
||||
const [editLoading, setEditLoading] = useState(false);
|
||||
const openedRouteKey = useRef(null);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setForm(emptyForm());
|
||||
function closeEditor() {
|
||||
setEditor(null);
|
||||
openedRouteKey.current = null;
|
||||
if (isNewRoute || isEditRoute) {
|
||||
navigate("/auth", { replace: true });
|
||||
}
|
||||
}
|
||||
|
||||
async function openEdit(a) {
|
||||
setEditLoading(true);
|
||||
/** @type {Record<string, string>} */
|
||||
let literals = {};
|
||||
try {
|
||||
const data = await fetchHttpAuthLiterals(a.name);
|
||||
literals = data.literals ?? {};
|
||||
setRevealCache((prev) => ({ ...prev, [a.name]: literals }));
|
||||
} catch {
|
||||
// keep empty; form still works with keep markers
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
const cfg = a.config ?? {};
|
||||
setMode("edit");
|
||||
setForm({
|
||||
name: a.name,
|
||||
type: a.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: a.unauthorized_status ?? "",
|
||||
unauthorized_response: a.unauthorized_response ?? "",
|
||||
});
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isNewRoute) return;
|
||||
if (openedRouteKey.current === "new") return;
|
||||
openedRouteKey.current = "new";
|
||||
setEditor({ mode: "add" });
|
||||
}, [isNewRoute]);
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
setForm(emptyForm());
|
||||
useEffect(() => {
|
||||
if (!isEditRoute) {
|
||||
if (!isNewRoute) openedRouteKey.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
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(
|
||||
{
|
||||
name: form.name,
|
||||
type: form.type,
|
||||
config,
|
||||
unauthorized_status:
|
||||
form.unauthorized_status === "" ? null : Number(form.unauthorized_status),
|
||||
unauthorized_response: form.unauthorized_response || null,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setRevealCache((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[form.name];
|
||||
return next;
|
||||
});
|
||||
closeForm();
|
||||
},
|
||||
},
|
||||
);
|
||||
if (isLoading) return;
|
||||
const key = `edit:${routeName}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
openedRouteKey.current = key;
|
||||
const auth = auths.find((a) => a.name === routeName);
|
||||
if (!auth) {
|
||||
setEditor({ mode: "add" });
|
||||
return;
|
||||
}
|
||||
setEditor({ mode: "edit", auth });
|
||||
}, [isEditRoute, isNewRoute, routeName, isLoading, auths]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<h1 className="text-xl font-semibold">Auth</h1>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => navigate("/auth/new")}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm opacity-70">
|
||||
Named HTTP trigger auth profiles. Reference in YAML as{" "}
|
||||
<code className="font-mono text-xs">auth: name</code>. Secrets are managed on the Secrets
|
||||
page; KV values stay in KV.
|
||||
HTTP trigger auth profiles. Rename freely — workflows keep working via a stable id.
|
||||
Add them to a trigger from the workflow editor dropdown. Secrets are managed on the
|
||||
Secrets page; KV values stay in KV.
|
||||
</p>
|
||||
|
||||
{isLoading ? (
|
||||
@@ -429,9 +229,9 @@ export function AuthProfilesPage() {
|
||||
<td>
|
||||
<CredentialsCell
|
||||
auth={a}
|
||||
cache={revealCache[a.name]}
|
||||
cache={revealCache[a.id]}
|
||||
onRevealed={(literals) =>
|
||||
setRevealCache((prev) => ({ ...prev, [a.name]: literals }))
|
||||
setRevealCache((prev) => ({ ...prev, [a.id]: literals }))
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
@@ -441,8 +241,7 @@ export function AuthProfilesPage() {
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
disabled={editLoading}
|
||||
onClick={() => openEdit(a)}
|
||||
onClick={() => navigate(`/auth/${encodeURIComponent(a.name)}/edit`)}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
@@ -462,116 +261,21 @@ export function AuthProfilesPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="fieldset bg-base-100 border-base-300 rounded-box max-w-xl border p-4 space-y-2"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<legend className="fieldset-legend">
|
||||
{mode === "add" ? "New auth profile" : `Edit ${form.name}`}
|
||||
</legend>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm btn-square"
|
||||
onClick={closeForm}
|
||||
aria-label="Close"
|
||||
>
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<label className="label">Name</label>
|
||||
<input
|
||||
className="input w-full font-mono"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
disabled={mode === "edit"}
|
||||
{editor ? (
|
||||
<AuthEditorModal
|
||||
mode={editor.mode}
|
||||
auth={editor.auth}
|
||||
onClose={closeEditor}
|
||||
onSaved={(saved) => {
|
||||
const id = saved?.id || editor.auth?.id;
|
||||
if (!id) return;
|
||||
setRevealCache((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[id];
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<label className="label">Type</label>
|
||||
<select
|
||||
className="select 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>
|
||||
|
||||
{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" ? (
|
||||
<>
|
||||
<label className="label">Header name</label>
|
||||
<input
|
||||
className="input w-full font-mono"
|
||||
value={form.header}
|
||||
onChange={(e) => setForm({ ...form, header: e.target.value })}
|
||||
required
|
||||
placeholder="X-Webhook-Secret"
|
||||
/>
|
||||
<CredentialFields
|
||||
label="Header value"
|
||||
cred={form.value}
|
||||
onChange={(value) => setForm({ ...form, value })}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<label className="label">Unauthorized status (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input w-full"
|
||||
value={form.unauthorized_status}
|
||||
onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
|
||||
min={100}
|
||||
max={599}
|
||||
placeholder="401"
|
||||
/>
|
||||
<label className="label">Unauthorized response page (optional)</label>
|
||||
<select
|
||||
className="select 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>
|
||||
|
||||
{upsert.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(upsert.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
|
||||
Reference in New Issue
Block a user