milestone 9: react spa admin ui, frontend ci and embedded dist

2026-08-02 13:04:09 +02:00
parent 5253c47303
commit 617cc966a2
82 changed files with 11833 additions and 17 deletions
@@ -0,0 +1,128 @@
+import { useReducer, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { clientPrefixesPutMutation } from "@/lib/queries";
+import type { ClientPrefix, Group } from "@/lib/types";
+import { firstProblem, initPrefixEditor, isDirty, prefixEditorReducer, toInputs } from "./prefixEditor";
+import InlineError from "@/lib/InlineError";
+
+interface Props {
+	prefixes: ClientPrefix[];
+	groups: Group[];
+}
+
+const inputClass = "rounded border border-zinc-300 bg-white px-2 py-1.5 text-sm dark:border-zinc-700 dark:bg-zinc-900";
+
+export default function PrefixesEditor({ prefixes, groups }: Props) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(clientPrefixesPutMutation(queryClient));
+	const [state, dispatch] = useReducer(prefixEditorReducer, prefixes, initPrefixEditor);
+	const [validation, setValidation] = useState<string | null>(null);
+	const dirty = isDirty(state);
+	const defaultGroupId = groups.find((group) => group.id === 1)?.id ?? groups[0]?.id ?? 1;
+
+	const save = () => {
+		const problem = firstProblem(state.rows);
+		setValidation(problem);
+		if (problem !== null) return;
+		mutation.mutate(toInputs(state.rows), {
+			onSuccess: (stored) => dispatch({ type: "reset", prefixes: stored }),
+		});
+	};
+
+	return (
+		<section className="mt-10">
+			<h2 className="text-xl font-semibold">Client prefixes</h2>
+			<p className="mt-1 text-sm text-zinc-500">
+				Prefixes assign a group to whole address ranges. The list is saved as a whole; the highest priority
+				match wins.
+			</p>
+			{state.rows.length === 0 ? (
+				<p className="mt-4 text-sm text-zinc-500">No prefixes configured.</p>
+			) : (
+				<ul className="mt-4 space-y-2">
+					{state.rows.map((row, index) => (
+						<li key={index} className="flex flex-wrap items-center gap-2">
+							<input
+								type="text"
+								aria-label={`Prefix ${index + 1}`}
+								placeholder="192.168.1.0/24"
+								value={row.prefix}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { prefix: event.target.value } })
+								}
+								className={`${inputClass} w-52`}
+							/>
+							<select
+								aria-label={`Group for prefix ${index + 1}`}
+								value={String(row.group_id)}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { group_id: Number(event.target.value) } })
+								}
+								className={inputClass}
+							>
+								{groups.map((group) => (
+									<option key={group.id} value={String(group.id)}>
+										{group.name}
+									</option>
+								))}
+							</select>
+							<input
+								type="text"
+								inputMode="numeric"
+								aria-label={`Priority for prefix ${index + 1}`}
+								placeholder="100"
+								value={row.priority}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { priority: event.target.value } })
+								}
+								className={`${inputClass} w-20`}
+							/>
+							<button
+								type="button"
+								onClick={() => dispatch({ type: "remove", index })}
+								className="rounded border border-zinc-300 px-2 py-1.5 text-sm text-red-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700 dark:text-red-400"
+							>
+								Remove
+							</button>
+						</li>
+					))}
+				</ul>
+			)}
+			{validation !== null && (
+				<p role="alert" className="mt-2 text-sm text-red-700 dark:text-red-400">
+					{validation}
+				</p>
+			)}
+			<InlineError error={mutation.error} />
+			<div className="mt-4 flex gap-2">
+				<button
+					type="button"
+					onClick={() => dispatch({ type: "add", groupId: defaultGroupId })}
+					className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
+				>
+					Add prefix
+				</button>
+				<button
+					type="button"
+					onClick={save}
+					disabled={!dirty || mutation.isPending}
+					className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+				>
+					Save prefixes
+				</button>
+				{dirty && (
+					<button
+						type="button"
+						onClick={() => {
+							setValidation(null);
+							dispatch({ type: "reset", prefixes });
+						}}
+						className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
+					>
+						Discard changes
+					</button>
+				)}
+			</div>
+		</section>
+	);
+}