@yackey-labs/yauth-ui-solidjs 0.12.2 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yackey-labs/yauth-ui-solidjs",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/yackey-labs/yauth"
@@ -23,8 +23,8 @@
   "dependencies": {
     "@simplewebauthn/browser": "^13.0.0",
     "solid-js": "^1.9.5",
-    "@yackey-labs/yauth-client": "0.12.2",
-    "@yackey-labs/yauth-shared": "0.12.2"
+    "@yackey-labs/yauth-client": "0.12.4",
+    "@yackey-labs/yauth-shared": "0.12.4"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",

package/src/components/audit-destination-create.tsx

@@ -0,0 +1,410 @@
+import { Show, createSignal } from "solid-js";
+import {
+	type CreateDestinationInput,
+	createAuditDestinations,
+} from "../hooks/create-audit-destinations";
+
+/**
+ * Audit-export admin add-destination form (issue #96).
+ *
+ * Mirror of the Vue component — kind switcher (webhook / syslog / s3 /
+ * splunk / datadog), per-kind fields, and an HMAC secret password input
+ * for webhooks with a pointer to the docs verifier helper.
+ *
+ * Splunk + Datadog branches still warn the user that they're "follow-up";
+ * the warnings stay so the wire-shape feedback is unambiguous if the
+ * operator picks them in a version of yauth that pre-dates Phase B. The
+ * dispatcher itself does the real round-trip in Phase B.
+ */
+export interface AuditDestinationCreateProps {
+	organizationId?: string | null;
+	onCreated?: () => void;
+}
+
+export function AuditDestinationCreate(props: AuditDestinationCreateProps) {
+	const { create, submitting, error } = createAuditDestinations(
+		() => props.organizationId ?? null,
+	);
+
+	const [kindTag, setKindTag] = createSignal<
+		"webhook" | "syslog" | "s3" | "splunk" | "datadog"
+	>("webhook");
+	const [name, setName] = createSignal("");
+
+	// Webhook
+	const [webhookUrl, setWebhookUrl] = createSignal("");
+	const [webhookFormat, setWebhookFormat] = createSignal<
+		"json" | "cef" | "rfc5424"
+	>("json");
+	const [webhookHmac, setWebhookHmac] = createSignal("");
+
+	// Syslog
+	const [syslogHost, setSyslogHost] = createSignal("");
+	const [syslogPort, setSyslogPort] = createSignal(6514);
+	const [syslogTransport, setSyslogTransport] = createSignal<
+		"tcp" | "udp" | "tls"
+	>("tcp");
+	const [syslogFacility, setSyslogFacility] = createSignal(13);
+
+	// S3
+	const [s3Bucket, setS3Bucket] = createSignal("");
+	const [s3Prefix, setS3Prefix] = createSignal("audit");
+	const [s3Region, setS3Region] = createSignal("us-east-1");
+	const [s3Partition, setS3Partition] = createSignal<
+		"by_date" | "by_org" | "by_date_and_org"
+	>("by_date");
+
+	// Splunk
+	const [splunkHecUrl, setSplunkHecUrl] = createSignal("");
+	const [splunkHecToken, setSplunkHecToken] = createSignal("");
+
+	// Datadog
+	const [ddSite, setDdSite] = createSignal("datadoghq.com");
+	const [ddApiKey, setDdApiKey] = createSignal("");
+
+	const handleSubmit = async (e: Event) => {
+		e.preventDefault();
+		let kind: CreateDestinationInput["kind"];
+		switch (kindTag()) {
+			case "webhook":
+				kind = {
+					type: "webhook",
+					url: webhookUrl().trim(),
+					format: webhookFormat(),
+					hmac_secret: webhookHmac().trim() || undefined,
+				};
+				break;
+			case "syslog":
+				kind = {
+					type: "syslog",
+					host: syslogHost().trim(),
+					port: syslogPort(),
+					transport: syslogTransport(),
+					facility: syslogFacility(),
+				};
+				break;
+			case "s3":
+				kind = {
+					type: "s3",
+					bucket: s3Bucket().trim(),
+					prefix: s3Prefix().trim(),
+					region: s3Region().trim(),
+					partition: s3Partition(),
+				};
+				break;
+			case "splunk":
+				kind = {
+					type: "splunk",
+					hec_url: splunkHecUrl().trim(),
+					hec_token: splunkHecToken().trim(),
+				};
+				break;
+			case "datadog":
+				kind = {
+					type: "datadog",
+					site: ddSite().trim(),
+					api_key: ddApiKey().trim(),
+				};
+				break;
+		}
+		const created = await create({
+			name: name().trim(),
+			organization_id: props.organizationId ?? null,
+			kind,
+		});
+		if (created) {
+			props.onCreated?.();
+			setName("");
+			setWebhookUrl("");
+			setWebhookHmac("");
+			setSyslogHost("");
+			setS3Bucket("");
+			setSplunkHecUrl("");
+			setSplunkHecToken("");
+			setDdApiKey("");
+		}
+	};
+
+	return (
+		<form
+			class="space-y-3 rounded-md border border-border p-4"
+			onSubmit={handleSubmit}
+		>
+			<h3 class="text-base font-semibold">Add destination</h3>
+
+			<Show when={error()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error()}
+				</div>
+			</Show>
+
+			<label class="block">
+				<span class="text-xs font-medium">Name</span>
+				<input
+					type="text"
+					required
+					value={name()}
+					onInput={(e) => setName(e.currentTarget.value)}
+					class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="text-xs font-medium">Kind</span>
+				<select
+					value={kindTag()}
+					onChange={(e) =>
+						setKindTag(
+							e.currentTarget.value as
+								| "webhook"
+								| "syslog"
+								| "s3"
+								| "splunk"
+								| "datadog",
+						)
+					}
+					class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+				>
+					<option value="webhook">Webhook (HTTPS POST)</option>
+					<option value="syslog">Syslog (RFC 5424)</option>
+					<option value="s3">S3-compatible object storage</option>
+					<option value="splunk">Splunk HEC</option>
+					<option value="datadog">Datadog logs</option>
+				</select>
+			</label>
+
+			<Show when={kindTag() === "webhook"}>
+				<fieldset class="space-y-2">
+					<label class="block">
+						<span class="text-xs font-medium">URL</span>
+						<input
+							type="url"
+							required
+							placeholder="https://hooks.example.com/yauth-audit"
+							value={webhookUrl()}
+							onInput={(e) => setWebhookUrl(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Format</span>
+						<select
+							value={webhookFormat()}
+							onChange={(e) =>
+								setWebhookFormat(
+									e.currentTarget.value as "json" | "cef" | "rfc5424",
+								)
+							}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						>
+							<option value="json">JSON</option>
+							<option value="cef">CEF</option>
+							<option value="rfc5424">RFC 5424 syslog body</option>
+						</select>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">HMAC secret (optional)</span>
+						<input
+							type="password"
+							placeholder="cryptographic random, 32 bytes recommended"
+							value={webhookHmac()}
+							onInput={(e) => setWebhookHmac(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+						<p class="mt-1 text-xs text-muted-foreground">
+							When set, each request carries{" "}
+							<code class="font-mono">
+								X-Yauth-Signature: t=&lt;unix&gt;,v1=&lt;hex&gt;
+							</code>
+							. See <code>docs/audit-export/webhook.md</code> for the verifier
+							helper (Node + Python).
+						</p>
+					</label>
+				</fieldset>
+			</Show>
+
+			<Show when={kindTag() === "syslog"}>
+				<fieldset class="space-y-2">
+					<label class="block">
+						<span class="text-xs font-medium">Host</span>
+						<input
+							type="text"
+							required
+							placeholder="siem.example.internal"
+							value={syslogHost()}
+							onInput={(e) => setSyslogHost(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Port</span>
+						<input
+							type="number"
+							required
+							min="1"
+							max="65535"
+							value={syslogPort()}
+							onInput={(e) =>
+								setSyslogPort(Number(e.currentTarget.value) || 0)
+							}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Transport</span>
+						<select
+							value={syslogTransport()}
+							onChange={(e) =>
+								setSyslogTransport(
+									e.currentTarget.value as "tcp" | "udp" | "tls",
+								)
+							}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						>
+							<option value="tcp">TCP (RFC 6587 octet-counted)</option>
+							<option value="udp">
+								UDP (unauthenticated, not recommended)
+							</option>
+							<option value="tls">TCP + TLS (port 6514)</option>
+						</select>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Facility (0–23)</span>
+						<input
+							type="number"
+							required
+							min="0"
+							max="23"
+							value={syslogFacility()}
+							onInput={(e) =>
+								setSyslogFacility(Number(e.currentTarget.value) || 0)
+							}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+				</fieldset>
+			</Show>
+
+			<Show when={kindTag() === "s3"}>
+				<fieldset class="space-y-2">
+					<label class="block">
+						<span class="text-xs font-medium">Bucket</span>
+						<input
+							type="text"
+							required
+							value={s3Bucket()}
+							onInput={(e) => setS3Bucket(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Prefix</span>
+						<input
+							type="text"
+							value={s3Prefix()}
+							onInput={(e) => setS3Prefix(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Region</span>
+						<input
+							type="text"
+							required
+							value={s3Region()}
+							onInput={(e) => setS3Region(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">Partition</span>
+						<select
+							value={s3Partition()}
+							onChange={(e) =>
+								setS3Partition(
+									e.currentTarget.value as
+										| "by_date"
+										| "by_org"
+										| "by_date_and_org",
+								)
+							}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						>
+							<option value="by_date">By date</option>
+							<option value="by_org">By org</option>
+							<option value="by_date_and_org">By date and org</option>
+						</select>
+					</label>
+				</fieldset>
+			</Show>
+
+			<Show when={kindTag() === "splunk"}>
+				<fieldset class="space-y-2">
+					<label class="block">
+						<span class="text-xs font-medium">HEC URL</span>
+						<input
+							type="url"
+							required
+							placeholder="https://splunk.example.com:8088"
+							value={splunkHecUrl()}
+							onInput={(e) => setSplunkHecUrl(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">HEC token</span>
+						<input
+							type="password"
+							required
+							value={splunkHecToken()}
+							onInput={(e) => setSplunkHecToken(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+				</fieldset>
+			</Show>
+
+			<Show when={kindTag() === "datadog"}>
+				<fieldset class="space-y-2">
+					<label class="block">
+						<span class="text-xs font-medium">Site</span>
+						<select
+							value={ddSite()}
+							onChange={(e) => setDdSite(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						>
+							<option value="datadoghq.com">datadoghq.com (US1)</option>
+							<option value="us3.datadoghq.com">us3.datadoghq.com (US3)</option>
+							<option value="us5.datadoghq.com">us5.datadoghq.com (US5)</option>
+							<option value="datadoghq.eu">datadoghq.eu (EU)</option>
+							<option value="ap1.datadoghq.com">ap1.datadoghq.com (AP1)</option>
+							<option value="ddog-gov.com">ddog-gov.com (US1-FED)</option>
+						</select>
+					</label>
+					<label class="block">
+						<span class="text-xs font-medium">API key</span>
+						<input
+							type="password"
+							required
+							value={ddApiKey()}
+							onInput={(e) => setDdApiKey(e.currentTarget.value)}
+							class="mt-1 block w-full rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm"
+						/>
+					</label>
+				</fieldset>
+			</Show>
+
+			<button
+				type="submit"
+				disabled={submitting()}
+				class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+			>
+				Add destination
+			</button>
+		</form>
+	);
+}

package/src/components/audit-destination-list.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * Smoke test for the SolidJS audit-destination hook (issue #96).
+ *
+ * We test the headless `createAuditDestinations` hook (signal-only, no
+ * DOM) so the test suite doesn't need a Solid DOM testing-library. The
+ * component itself is a thin wrapper around this hook — covered by
+ * typecheck + build.
+ */
+import { configureClient } from "@yackey-labs/yauth-client";
+import { createRoot } from "solid-js";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createAuditDestinations } from "../hooks/create-audit-destinations";
+
+beforeEach(() => {
+	// The typed client reads its baseUrl from the global config; tests
+	// install an empty baseUrl so the mocked `fetch` sees the raw paths.
+	configureClient({ baseUrl: "" });
+});
+
+function mockFetch(response: unknown, status = 200) {
+	const text = typeof response === "string" ? response : JSON.stringify(response);
+	const fn = vi.fn().mockResolvedValue({
+		ok: status >= 200 && status < 300,
+		status,
+		statusText: status === 200 ? "OK" : "ERR",
+		text: () => Promise.resolve(text),
+		json: () => Promise.resolve(response),
+	});
+	(globalThis as unknown as { fetch: typeof fetch }).fetch =
+		fn as unknown as typeof fetch;
+	return fn;
+}
+
+afterEach(() => {
+	vi.restoreAllMocks();
+});
+
+describe("createAuditDestinations", () => {
+	it("fetches destinations on mount and exposes them via the signal", async () => {
+		mockFetch([
+			{
+				id: "019e36bf-1234-7000-8000-aaaaaaaaaaaa",
+				organization_id: null,
+				name: "prod-splunk",
+				kind_tag: "splunk",
+				kind: { type: "splunk", hec_url: "https://splunk.example.com" },
+				status: "active",
+				last_success_at: null,
+				last_failure_at: null,
+				created_at: "2026-05-17T12:00:00Z",
+				updated_at: "2026-05-17T12:00:00Z",
+			},
+		]);
+
+		await createRoot(async (dispose) => {
+			const hook = createAuditDestinations(() => null);
+			// Allow the createEffect → refresh chain to run.
+			await new Promise((r) => setTimeout(r, 5));
+			expect(hook.destinations()).toHaveLength(1);
+			expect(hook.destinations()[0]?.name).toBe("prod-splunk");
+			expect(hook.error()).toBeNull();
+			dispose();
+		});
+	});
+
+	it("surfaces fetch errors via the error signal", async () => {
+		mockFetch({ error: "audit-export down" }, 500);
+		await createRoot(async (dispose) => {
+			const hook = createAuditDestinations(() => null);
+			await new Promise((r) => setTimeout(r, 5));
+			expect(hook.destinations()).toHaveLength(0);
+			expect(hook.error()).toMatch(/audit-export down/);
+			dispose();
+		});
+	});
+
+	it("includes scope query string based on the org accessor", async () => {
+		const fetchSpy = mockFetch([]);
+		await createRoot(async (dispose) => {
+			createAuditDestinations(() => "org-uuid-123");
+			await new Promise((r) => setTimeout(r, 5));
+			const callUrl = (fetchSpy.mock.calls[0]?.[0] as string) ?? "";
+			expect(callUrl).toContain("organization_id=org-uuid-123");
+			dispose();
+		});
+	});
+});

package/src/components/audit-destination-list.tsx

@@ -0,0 +1,134 @@
+import { For, Show, createMemo } from "solid-js";
+import { createAuditDestinations } from "../hooks/create-audit-destinations";
+
+/**
+ * Audit-export admin destinations list (issue #96).
+ *
+ * Mirror of the Vue component — shows deployment-wide OR per-org
+ * destinations with their sanitized kind JSON, status badge, and
+ * last_success_at / last_failure_at timestamps. No secrets are ever
+ * displayed (the server strips `hmac_secret`, `hec_token`, Datadog
+ * `api_key` before returning).
+ */
+export interface AuditDestinationListProps {
+	/**
+	 * `null` => deployment-wide destinations. A UUID string => per-org
+	 * destinations for that org.
+	 */
+	organizationId?: string | null;
+}
+
+function fmtDate(s: string | null | undefined): string {
+	if (!s) return "—";
+	try {
+		return new Date(s).toLocaleString();
+	} catch {
+		return s;
+	}
+}
+
+export function AuditDestinationList(props: AuditDestinationListProps) {
+	const scope = createMemo(() => props.organizationId ?? null);
+	const { destinations, loading, error, disable, remove, submitting, refresh } =
+		createAuditDestinations(() => scope());
+
+	return (
+		<section class="space-y-4">
+			<header class="flex items-center justify-between">
+				<h2 class="text-lg font-semibold">
+					{props.organizationId
+						? "Per-org SIEM destinations"
+						: "Deployment-wide SIEM destinations"}
+				</h2>
+				<button
+					type="button"
+					class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-input bg-transparent px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+					disabled={loading() || submitting()}
+					onClick={() => void refresh()}
+				>
+					Refresh
+				</button>
+			</header>
+
+			<Show when={error()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={loading()}>
+				<p class="text-sm text-muted-foreground">Loading…</p>
+			</Show>
+
+			<Show
+				when={!loading() && destinations().length > 0}
+				fallback={
+					<Show when={!loading()}>
+						<p class="text-sm text-muted-foreground">
+							No destinations configured. Use the “Add destination” form below.
+						</p>
+					</Show>
+				}
+			>
+				<ul class="divide-y divide-border">
+					<For each={destinations()}>
+						{(d) => (
+							<li class="flex items-start justify-between gap-3 py-3">
+								<div class="min-w-0 flex-1 space-y-1">
+									<div class="flex flex-wrap items-center gap-2">
+										<span class="font-medium">{d.name}</span>
+										<span class="rounded-full bg-muted px-2 py-0.5 text-xs uppercase text-muted-foreground">
+											{d.kind_tag}
+										</span>
+										<span
+											classList={{
+												"rounded-full px-2 py-0.5 text-xs": true,
+												"bg-emerald-500/10 text-emerald-700":
+													d.status === "active",
+												"bg-muted text-muted-foreground":
+													d.status === "disabled",
+											}}
+										>
+											{d.status}
+										</span>
+									</div>
+									<pre class="overflow-x-auto rounded-md bg-muted/50 p-2 text-xs leading-snug">
+										{JSON.stringify(d.kind, null, 2)}
+									</pre>
+									<p class="text-xs text-muted-foreground">
+										Last success: {fmtDate(d.last_success_at)} · Last failure:{" "}
+										{fmtDate(d.last_failure_at)}
+									</p>
+								</div>
+								<div class="flex flex-col gap-2">
+									<Show when={d.status === "active"}>
+										<button
+											type="button"
+											class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-input bg-transparent px-3 text-xs font-medium shadow-sm hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
+											disabled={submitting()}
+											onClick={() => void disable(d.id)}
+										>
+											Disable
+										</button>
+									</Show>
+									<button
+										type="button"
+										class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-destructive bg-transparent px-3 text-xs font-medium text-destructive shadow-sm hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50"
+										disabled={submitting()}
+										onClick={() => void remove(d.id)}
+									>
+										Delete
+									</button>
+								</div>
+							</li>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</section>
+	);
+}