rename clients to devices

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

@@ -0,0 +1,26 @@
+import type { Actions } from './$types';
+import { createDevice } from '$lib/server/devices';
+import { error, 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');
+		const res = await createDevice({
+			name: name.trim(),
+			user: event.locals.user,
+		});
+
+		switch (res._tag) {
+			case 'ok': {
+				return redirect(303, `/devices/${res.value}`);
+			}
+			case 'err': {
+				const [status, message] = res.error;
+				return error(status, message);
+			}
+		}
+	},
+} satisfies Actions;

src/routes/devices/+page.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { LucidePlus } from 'lucide-svelte';
+	import type { PageData } from './$types';
+	import { Label } from '$lib/components/ui/label';
+	import { page } from '$app/state';
+
+	const { data }: { data: PageData } = $props();
+
+	let dialogOpen = $state(page.url.searchParams.has('add'));
+	let dialogVal = $state(page.url.searchParams.get('add') ?? '');
+
+	$effect(() => {
+		if (dialogOpen) page.url.searchParams.set('add', dialogVal);
+		else page.url.searchParams.delete('add');
+
+		window.history.replaceState(history.state, '', page.url);
+	});
+</script>
+
+<svelte:head>
+	<title>Devices</title>
+</svelte:head>
+
+<Table.Root class="divide-y-2 divide-background overflow-hidden rounded-lg bg-accent">
+	<Table.Header>
+		<Table.Row>
+			<Table.Head scope="col">Name</Table.Head>
+			<Table.Head scope="col">Public Key</Table.Head>
+			<!--			<Table.Head scope="col">Private Key</Table.Head>-->
+			<!--			<Table.Head scope="col">Pre-Shared Key</Table.Head>-->
+			<Table.Head scope="col">IP Allocation</Table.Head>
+		</Table.Row>
+	</Table.Header>
+	<Table.Body class="divide-y-2 divide-background">
+		{#each data.devices as device}
+			<Table.Row class="hover:bg-surface group">
+				<Table.Head scope="row">
+					<a
+						href={`/devices/${device.id}`}
+						class="flex size-full items-center group-hover:underline"
+					>
+						{device.name}
+					</a>
+				</Table.Head>
+				<Table.Cell class="truncate">{device.publicKey}</Table.Cell>
+				<!--				<Table.Cell class="truncate max-w-[10ch]">{device.privateKey}</Table.Cell>-->
+				<!--				<Table.Cell class="truncate max-w-[10ch]">{device.preSharedKey}</Table.Cell>-->
+				<Table.Cell class="flex flex-wrap gap-1">
+					{#each device.ips as ip}
+						<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
+					{/each}
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>
+
+<!--Floating action button for adding a new device-->
+<Dialog.Root bind:open={dialogOpen}>
+	<div class="mt-auto flex self-end pt-4">
+		<Dialog.Trigger class={buttonVariants({ variant: 'default' }) + ' flex gap-4'}>
+			<LucidePlus />
+			New Device
+		</Dialog.Trigger>
+	</div>
+	<Dialog.Content class="max-w-xs">
+		<form class="contents" method="post" action="?/create">
+			<Dialog.Header class="">
+				<Dialog.Title>Add a new device</Dialog.Title>
+			</Dialog.Header>
+			<div class="flex flex-wrap items-center justify-between gap-4">
+				<Label for="name">Name</Label>
+				<Input
+					bind:value={dialogVal}
+					required
+					pattern=".*[^\s]+.*"
+					type="text"
+					name="name"
+					placeholder="New Device"
+					class="max-w-[20ch]"
+				/>
+			</div>
+			<Dialog.Footer>
+				<Button type="submit">Add</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

src/routes/devices/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+import type { DeviceDetails } from '$lib/devices';
+
+export const load: PageLoad = async ({ fetch }) => {
+	const res = await fetch('/api/devices');
+	const { devices } = await res.json() as { devices: DeviceDetails[] };
+
+	return { devices };
+};

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import QRCode from 'qrcode-svg';
+	import { CodeSnippet } from '$lib/components/app/code-snippet';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide';
+
+	const { data }: { data: PageData } = $props();
+
+	// Clean the device name for the wg config filename,
+	// things can break otherwise (too long or invalid characters)
+	// https://github.com/pirate/wireguard-docs
+	const deviceWgCleanedName =
+		data.device.name.slice(0, 15).replace(/[^a-zA-Z0-9_=+.-]/g, '_') + '.conf';
+
+	let qrCode = new QRCode({
+		content: data.config,
+		join: true,
+		background: 'hsl(var(--accent-light))',
+		width: 296,
+		height: 296,
+	});
+</script>
+
+<svelte:head>
+	<title>{data.device.name}</title>
+</svelte:head>
+
+<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+
+<section id="device-configuration" class="flex flex-wrap items-center justify-center gap-4">
+	<CodeSnippet data={data.config} filename={deviceWgCleanedName} copy download />
+
+	<div class="size-fit overflow-auto rounded-lg">
+		{@html qrCode.svg()}
+	</div>
+</section>
+<section id="usage" class="flex w-full flex-col gap-2">
+	<h2 class="text-xl font-semibold">Usage</h2>
+	<p>To use VPGen, you need to install the WireGuard app on your device.</p>
+	<WireguardGuide />
+</section>

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

@@ -0,0 +1,15 @@
+import type { PageLoad } from './$types';
+import { type DeviceDetails, deviceDetailsToConfig } from '$lib/devices';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ fetch, params }) => {
+	const res = await fetch(`/api/devices/${params.id}`);
+	const resJson = await res.json();
+	if (!res.ok) {
+		return error(res.status, resJson['message']);
+	}
+	const device = resJson as DeviceDetails;
+	const config = deviceDetailsToConfig(device);
+
+	return { device, config };
+};