devices page: implement delete option

bruno/opnsense-api/Delete Client.bru

@@ -0,0 +1,25 @@
+meta {
+  name: Delete Client
+  type: http
+  seq: 11
+}
+
+post {
+  url: {{base}}/api/wireguard/client/delClient/:clientUuid
+  body: none
+  auth: inherit
+}
+
+params:path {
+  clientUuid: d484d381-4d6f-4444-8e9d-9cda7b5b2243
+}
+
+body:json {
+  {
+    "current": 1,
+    "rowCount": 7,
+    "sort": {},
+    "servers": ["{{serverUuid}}"],
+    "searchPhrase": "{{searchPhrase}}"
+  }
+}

src/lib/server/devices/delete.ts

@@ -0,0 +1,73 @@
+import { and, eq } from 'drizzle-orm';
+import { db } from '$lib/server/db';
+import { devices } from '$lib/server/db/schema';
+import { err, ok, type Result } from '$lib/types';
+import { opnsenseAuth, opnsenseUrl } from '$lib/server/opnsense';
+
+export async function deleteDevice(
+	userId: string,
+	deviceId: number,
+): Promise<Result<null, [400 | 500, string]>> {
+	const device = await db.query.devices.findFirst({
+		columns: {
+			publicKey: true,
+		},
+		where: and(eq(devices.userId, userId), eq(devices.id, deviceId)),
+	});
+	if (!device) return err([400, 'Device not found']);
+	const opnsenseClientUuid = (await opnsenseFindClient(device.publicKey))?.['uuid'];
+	if (typeof opnsenseClientUuid !== 'string') {
+		console.error(
+			'failed to get OPNsense client for deletion for device',
+			deviceId,
+			device.publicKey,
+		);
+		return err([500, 'Error getting client from OPNsense']);
+	}
+
+	const opnsenseDeletionResult = await opnsenseDeleteClient(opnsenseClientUuid);
+	if (opnsenseDeletionResult?.['result'] !== 'deleted') {
+		console.error(
+			'failed to delete OPNsense client for device',
+			deviceId,
+			device.publicKey,
+			'\n',
+			'OPNsense client uuid:',
+			opnsenseClientUuid,
+		);
+		return err([500, 'Error deleting client in OPNsense']);
+	}
+
+	await db.delete(devices).where(eq(devices.id, deviceId));
+	return ok(null);
+}
+
+async function opnsenseFindClient(pubkey: string) {
+	const res = await fetch(`${opnsenseUrl}/api/wireguard/client/searchClient`, {
+		method: 'POST',
+		headers: {
+			Authorization: opnsenseAuth,
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			current: 1,
+			// "rowCount": 7,
+			sort: {},
+			searchPhrase: pubkey,
+			type: ['peer'],
+		}),
+	});
+	return (await res.json())?.rows?.[0] ?? null;
+}
+
+async function opnsenseDeleteClient(clientUuid: string) {
+	const res = await fetch(`${opnsenseUrl}/api/wireguard/client/delClient/${clientUuid}`, {
+		method: 'POST',
+		headers: {
+			Authorization: opnsenseAuth,
+			Accept: 'application/json',
+		},
+	});
+	return res.json();
+}

src/routes/devices/+page.server.ts

@@ -1,13 +1,13 @@
 import type { Actions } from './$types';
 import { createDevice } from '$lib/server/devices';
-import { error, redirect } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 
 export const actions = {
 	create: async (event) => {
 		if (!event.locals.user) return error(401, 'Unauthorized');
 		const formData = await event.request.formData();
 		const name = formData.get('name');
-		if (typeof name !== 'string' || name.trim() === '') return error(400, 'Invalid name');
+		if (typeof name !== 'string' || name.trim() === '') return fail(400, { name, invalid: true });
 		const res = await createDevice({
 			name: name.trim(),
 			user: event.locals.user,

src/routes/devices/+page.svelte

@@ -8,6 +8,7 @@
 	import type { PageData } from './$types';
 	import { Label } from '$lib/components/ui/label';
 	import { page } from '$app/state';
+	import DeleteDevice from './delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -56,6 +57,9 @@
 						<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
 					{/each}
 				</Table.Cell>
+				<Table.Cell class="py-0">
+					<DeleteDevice device={device} />
+				</Table.Cell>
 			</Table.Row>
 		{/each}
 	</Table.Body>
@@ -86,11 +90,11 @@
 					class="max-w-[20ch]"
 				/>
 			</div>
-			<Dialog.Footer>
+			<Dialog.Footer class="gap-y-2">
-				<Button type="submit" disabled={submitted}>
+				{#if submitted}
-					{#if submitted}
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
-						<LucideLoaderCircle class="size-4 mr-2 animate-spin" />
+				{/if}
-					{/if}
+				<Button type="submit" disabled={submitted} class="">
 					Add
 				</Button>
 			</Dialog.Footer>

src/routes/devices/[id]/+page.server.ts

@@ -0,0 +1,23 @@
+import { error, redirect } from '@sveltejs/kit';
+import { deleteDevice } from '$lib/server/devices/delete';
+import type { Actions } from './$types';
+
+export const actions = {
+	delete: async (event) => {
+		if (!event.locals.user) return error(401, 'Unauthorized');
+
+		const deviceId = Number.parseInt(event.params.id);
+		if (Number.isNaN(deviceId)) return error(400, 'Invalid device id');
+
+		const res = await deleteDevice(event.locals.user.id, deviceId);
+		switch (res._tag) {
+			case 'ok': {
+				return redirect(303, '/devices');
+			}
+			case 'err': {
+				const [status, message] = res.error;
+				return error(status, message);
+			}
+		}
+	},
+} satisfies Actions;

src/routes/devices/[id]/+page.svelte

@@ -3,6 +3,7 @@
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
 	import { WireguardGuide } from '$lib/components/app/wireguard-guide';
+	import DeleteDevice from '../delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -25,7 +26,10 @@
 	<title>{data.device.name}</title>
 </svelte:head>
 
-<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+<div class="flex justify-between">
+	<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+	<DeleteDevice device={data.device} />
+</div>
 
 <section id="device-configuration" class="flex flex-wrap items-center justify-center gap-4">
 	<CodeSnippet data={data.config} filename={deviceWgCleanedName} copy download />

src/routes/devices/delete-device.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { LucideLoaderCircle, LucideTrash } from 'lucide-svelte';
+
+	const { device } = $props();
+	let submitted = $state(false);
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class={buttonVariants({ variant: 'destructive', size: 'sm', class: 'bg-accent hover:bg-destructive' })}>
+		<LucideTrash />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<form class="contents" method="post" action="/devices/{device.id}?/delete"
+					onsubmit={() => submitted = true}
+		>
+			<Dialog.Header>
+				Are you sure you want to permanently delete "{device.name}"?
+			</Dialog.Header>
+			You will no longer be able to connect from this device.
+			<Dialog.Footer class="gap-y-2">
+				{#if submitted}
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
+				{/if}
+				<Button type="submit" variant="destructive" disabled={submitted}>
+					Delete
+				</Button>
+				<Dialog.Close asChild let:builder>
+					<button class={buttonVariants()} disabled={submitted} use:builder.action {...builder}>
+						Cancel
+					</button>
+				</Dialog.Close>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>