home page improvements: link to create new client

.dockerignore

@@ -0,0 +1,33 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# SQLite
+*.db
+
+# Git
+/.git
+
+# IntelliJ
+/.idea
+
+# Bruno (API Docs)
+/bruno

.env.example

@@ -2,9 +2,8 @@ DATABASE_URL=file:local.db
 AUTH_DOMAIN=auth.lab.cazzzer.com
 AUTH_CLIENT_ID=
 AUTH_CLIENT_SECRET=
-AUTH_REDIRECT_URI=http://localhost:5173/auth/authentik/callback
 
-OPNSENSE_API_URL=https://opnsense.home
+OPNSENSE_API_URL=https://opnsense.cazzzer.com
 OPNSENSE_API_KEY=
 OPNSENSE_API_SECRET=
 OPNSENSE_WG_IFNAME=wg2
@@ -16,3 +15,5 @@ IP_MAX_INDEX=100
 VPN_ENDPOINT=vpn.lab.cazzzer.com:51820
 VPN_DNS=10.18.11.1,fd00:10:18:11::1
 MAX_CLIENTS_PER_USER=20
+
+ORIGIN=http://localhost:5173

Dockerfile

@@ -0,0 +1,45 @@
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+FROM oven/bun:1-alpine AS base
+WORKDIR /app
+COPY package.json bun.lockb /app/
+
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base AS install
+RUN mkdir -p /temp/dev
+COPY package.json bun.lockb /temp/dev/
+RUN cd /temp/dev && bun install --frozen-lockfile
+
+# install with --production (exclude devDependencies)
+RUN mkdir -p /temp/prod
+COPY package.json bun.lockb /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
+
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS builder
+COPY --from=install /temp/dev/node_modules /app/node_modules
+COPY . /app
+RUN bun run build
+
+FROM base
+# Metadata
+LABEL org.opencontainers.image.title="VPGen"
+LABEL org.opencontainers.image.description="A VPN config generator built with SvelteKit."
+LABEL org.opencontainers.image.url="https://gitea.cazzzer.com/CaZzzer/vpgen"
+LABEL org.opencontainers.image.source="https://gitea.cazzzer.com/CaZzzer/vpgen"
+LABEL org.opencontainers.image.version="0.1"
+
+COPY ./entrypoint.sh /entrypoint.sh
+COPY --from=install /temp/prod/node_modules /app/node_modules
+COPY --from=builder /app/build /app/build
+COPY --from=builder /app/drizzle /app/drizzle
+COPY --from=builder /app/drizzle.config.ts /app/
+
+EXPOSE 3000
+
+# entrypoint for drizzle migrations
+ENTRYPOINT ["sh", "/entrypoint.sh"]
+
+CMD ["bun", "./build"]

README.md

@@ -36,3 +36,5 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+When deploying, set `ORIGIN` to the URL of your site to prevent cross-site request errors.

entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+# Run database migrations
+bun run db:migrate
+
+# Execute the CMD passed to the container
+exec "$@"

package.json

@@ -17,8 +17,11 @@
 		"db:seed": "bun run ./src/lib/server/db/seed.ts"
 	},
 	"devDependencies": {
+		"@oslojs/crypto": "^1.0.1",
+		"@oslojs/encoding": "^1.1.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/adapter-node": "^5.2.11",
+		"@sveltejs/kit": "^2.15.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/forms": "^0.5.9",
@@ -26,17 +29,20 @@
 		"@types/better-sqlite3": "^7.6.11",
 		"@types/eslint": "^9.6.0",
 		"@types/qrcode-svg": "^1.1.5",
+		"arctic": "^2.2.1",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.21.16",
+		"bits-ui": "^0.22.0",
 		"clsx": "^2.1.1",
-		"drizzle-kit": "^0.30.1",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
+		"ip-address": "^10.0.1",
+		"lucide-svelte": "^0.469.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
+		"qrcode-svg": "^1.1.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^2.5.4",
@@ -48,12 +54,7 @@
 	},
 	"dependencies": {
 		"@libsql/client": "^0.14.0",
-		"@oslojs/crypto": "^1.0.1",
+		"drizzle-kit": "^0.30.1",
-		"@oslojs/encoding": "^1.1.0",
+		"drizzle-orm": "^0.38.2"
-		"arctic": "^2.2.1",
-		"drizzle-orm": "^0.38.2",
-		"ip-address": "^10.0.1",
-		"lucide-svelte": "^0.454.0",
-		"qrcode-svg": "^1.1.0"
 	}
 }

src/app.css

@@ -26,6 +26,7 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --accent: 210 26% 86%;
+    --accent-light: 210 26% 86%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 72.2% 50.6%;

src/hooks.server.ts

@@ -1,7 +1,11 @@
 import { type Handle, redirect } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
 import { dev } from '$app/environment';
 import * as auth from '$lib/server/auth';
-import { sequence } from '@sveltejs/kit/hooks';
+import { fetchOpnsenseServer } from '$lib/server/opnsense';
+
+// fetch opnsense server info on startup
+await fetchOpnsenseServer();
 
 const handleAuth: Handle = async ({ event, resolve }) => {
 	const sessionId = event.cookies.get(auth.sessionCookieName);

src/lib/components/app/auth-form/auth-form.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
 	import { LucideLoaderCircle } from 'lucide-svelte';
-	import { Button } from "$lib/components/ui/button";
+	import { Button } from '$lib/components/ui/button';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
-	let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
+	let { class: className, ...rest }: { class?: string; rest?: { [p: string]: unknown } } = $props();
 
 	let isLoading = $state(false);
 </script>
 
-<div class={cn("grid gap-6", className)} {...rest}>
+<div class={cn('flex gap-6', className)} {...rest}>
 	<form method="get" action="/auth/authentik">
-		<Button type="submit" onclick={() => {isLoading=true}}>
+		<Button
+			type="submit"
+			onclick={() => {
+				isLoading = true;
+			}}
+		>
 			{#if isLoading}
 				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 			{:else}
-				<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" />
+				<img
+					class="mr-2 h-4 w-4"
+					alt="Authentik Logo"
+					src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg"
+				/>
 			{/if}
 			Sign in with Authentik
 		</Button>

src/lib/components/app/code-snippet/code-snippet.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
+
+	const {
+		data,
+		filename,
+		copy,
+		download,
+	}: {
+		data: string;
+		filename?: string;
+		copy?: boolean;
+		download?: boolean;
+	} = $props();
+
+	let wasCopied = $state(false);
+
+	async function copyToClipboard() {
+		await navigator.clipboard.writeText(data);
+		wasCopied = true;
+	}
+</script>
+
+<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent">
+	<div class="flex items-start overflow-x-auto p-2">
+		<pre><code>{data}</code></pre>
+
+		{#if copy || download}
+			<!--Copy button-->
+			<!--Flex reverse for peer hover to work properly-->
+			<div class="absolute right-2 flex flex-col gap-2">
+				{#if copy}
+					<div class="flex flex-row-reverse items-center gap-1">
+						<Button
+							class="peer size-10 p-2"
+							onclick={copyToClipboard}
+							onmouseleave={() => (wasCopied = false)}
+						>
+							<LucideClipboardCopy />
+						</Button>
+						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
+							{wasCopied ? 'Copied' : 'Copy to clipboard'}
+						</span>
+					</div>
+				{/if}
+
+				{#if download}
+					<div class="flex flex-row-reverse items-center gap-1">
+						<a
+							class="peer contents"
+							href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data)}`}
+							download={filename}
+						>
+							<Button class="size-10 p-2">
+								<LucideDownload />
+							</Button>
+						</a>
+						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
+							Download
+						</span>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

src/lib/components/app/code-snippet/index.ts

@@ -0,0 +1,7 @@
+import Root from "./code-snippet.svelte";
+
+export {
+	Root,
+	//
+	Root as CodeSnippet,
+};

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import * as Dialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

src/lib/server/clients.ts

@@ -1,17 +1,9 @@
 import type { User } from '$lib/server/db/schema';
+import { ipAllocations, wgClients } from '$lib/server/db/schema';
 import { db } from '$lib/server/db';
-import { wgClients, ipAllocations } from '$lib/server/db/schema';
 import { opnsenseAuth, opnsenseUrl, serverPublicKey, serverUuid } from '$lib/server/opnsense';
 import { Address4, Address6 } from 'ip-address';
-import {
+import { env } from '$env/dynamic/private';
-	IP_MAX_INDEX,
-	IPV4_STARTING_ADDR,
-	IPV6_CLIENT_PREFIX_SIZE,
-	IPV6_STARTING_ADDR,
-	MAX_CLIENTS_PER_USER,
-	VPN_DNS,
-	VPN_ENDPOINT,
-} from '$env/static/private';
 import { and, count, eq, isNull } from 'drizzle-orm';
 import { err, ok, type Result } from '$lib/types';
 import type { ClientDetails } from '$lib/types/clients';
@@ -60,21 +52,21 @@ export function mapClientToDetails(
 		preSharedKey: client.preSharedKey,
 		ips,
 		vpnPublicKey: serverPublicKey,
-		vpnEndpoint: VPN_ENDPOINT,
+		vpnEndpoint: env.VPN_ENDPOINT,
-		vpnDns: VPN_DNS,
+		vpnDns: env.VPN_DNS,
 	};
 }
 
 export async function createClient(params: {
 	name: string;
 	user: User;
-}): Promise<Result<null, [400 | 500, string]>> {
+}): Promise<Result<number, [400 | 500, string]>> {
 	// check if user exceeds the limit of clients
 	const [{ clientCount }] = await db
 		.select({ clientCount: count() })
 		.from(wgClients)
 		.where(eq(wgClients.userId, params.user.id));
-	if (clientCount >= parseInt(MAX_CLIENTS_PER_USER))
+	if (clientCount >= parseInt(env.MAX_CLIENTS_PER_USER))
 		return err([400, 'Maximum number of clients reached'] as [400, string]);
 
 	// this is going to be quite long
@@ -84,7 +76,7 @@ export async function createClient(params: {
 	// 2.3. update the allocation with the client id
 	// 3. create the client in opnsense
 	// 4. reconfigure opnsense to enable the new client
-	const error = await db.transaction(async (tx) => {
+	return await db.transaction(async (tx) => {
 		const [keys, availableAllocation, lastAllocation] = await Promise.all([
 			// fetch params for new client from opnsense api
 			getKeys(),
@@ -105,7 +97,7 @@ export async function createClient(params: {
 		]);
 
 		// check for existing allocation or if we have any IPs left
-		if (!availableAllocation && lastAllocation && lastAllocation.id >= parseInt(IP_MAX_INDEX)) {
+		if (!availableAllocation && lastAllocation && lastAllocation.id >= parseInt(env.IP_MAX_INDEX)) {
 			return err([500, 'No more IP addresses available'] as [500, string]);
 		}
 
@@ -151,10 +143,9 @@ export async function createClient(params: {
 
 			// reconfigure opnsense
 			await opnsenseReconfigure();
+			return ok(newClient.id);
 		});
 	});
-	if (error) return error;
-	return ok(null);
 }
 
 async function getKeys() {
@@ -179,14 +170,14 @@ async function getKeys() {
 
 export function getIpsFromIndex(ipIndex: number) {
 	ipIndex -= 1; // 1-indexed in the db
-	const v4StartingAddr = new Address4(IPV4_STARTING_ADDR);
+	const v4StartingAddr = new Address4(env.IPV4_STARTING_ADDR);
-	const v6StartingAddr = new Address6(IPV6_STARTING_ADDR);
+	const v6StartingAddr = new Address6(env.IPV6_STARTING_ADDR);
 	const v4Allowed = Address4.fromBigInt(v4StartingAddr.bigInt() + BigInt(ipIndex));
-	const v6Offset = BigInt(ipIndex) << (128n - BigInt(IPV6_CLIENT_PREFIX_SIZE));
+	const v6Offset = BigInt(ipIndex) << (128n - BigInt(env.IPV6_CLIENT_PREFIX_SIZE));
 	const v6Allowed = Address6.fromBigInt(v6StartingAddr.bigInt() + v6Offset);
 	const v6AllowedShort = v6Allowed.parsedAddress.join(':');
 
-	return [v4Allowed.address + '/32', v6AllowedShort + '/' + IPV6_CLIENT_PREFIX_SIZE];
+	return [v4Allowed.address + '/32', v6AllowedShort + '/' + env.IPV6_CLIENT_PREFIX_SIZE];
 }
 
 async function opnsenseCreateClient(params: {
@@ -210,7 +201,7 @@ async function opnsenseCreateClient(params: {
 				psk: params.psk,
 				tunneladdress: params.allowedIps,
 				server: serverUuid,
-				endpoint: VPN_ENDPOINT,
+				endpoint: env.VPN_ENDPOINT,
 			},
 		}),
 	});

src/lib/server/db/index.ts

@@ -1,5 +1,5 @@
 import { drizzle } from 'drizzle-orm/libsql';
 import * as schema from './schema';
-import { DATABASE_URL } from '$env/static/private';
+import { env } from '$env/dynamic/private';
 
-export const db= drizzle(DATABASE_URL, { schema });
+export const db= drizzle(env.DATABASE_URL, { schema });

src/lib/server/oauth.ts

@@ -1,9 +1,9 @@
 import { Authentik } from 'arctic';
-import * as env from '$env/static/private';
+import { env } from '$env/dynamic/private';
 
 export const authentik = new Authentik(
 	env.AUTH_DOMAIN,
 	env.AUTH_CLIENT_ID,
 	env.AUTH_CLIENT_SECRET,
-	env.AUTH_REDIRECT_URI
+	`${env.ORIGIN}/auth/authentik/callback`,
 );

src/lib/server/opnsense/index.ts

@@ -4,11 +4,6 @@ import { encodeBasicCredentials } from 'arctic/dist/request';
 import { dev } from '$app/environment';
 import type { OpnsenseWgServers } from '$lib/opnsense/wg';
 
-assert(env.OPNSENSE_API_URL, 'OPNSENSE_API_URL is not set');
-assert(env.OPNSENSE_API_KEY, 'OPNSENSE_API_KEY is not set');
-assert(env.OPNSENSE_API_SECRET, 'OPNSENSE_API_SECRET is not set');
-assert(env.OPNSENSE_WG_IFNAME, 'OPNSENSE_WG_IFNAME is not set');
-
 export const opnsenseUrl = env.OPNSENSE_API_URL;
 export const opnsenseAuth =
 	'Basic ' + encodeBasicCredentials(env.OPNSENSE_API_KEY, env.OPNSENSE_API_SECRET);
@@ -17,33 +12,38 @@ export const opnsenseIfname = env.OPNSENSE_WG_IFNAME;
 // unset secret for security
 if (!dev) env.OPNSENSE_API_SECRET = '';
 
+export let serverUuid: string, serverPublicKey: string;
+
+export async function fetchOpnsenseServer() {
 // this might be pretty bad if the server is down and in a bunch of other cases
 // TODO: write a retry loop later
-const resServers = await fetch(`${opnsenseUrl}/api/wireguard/client/list_servers`, {
+	const resServers = await fetch(`${opnsenseUrl}/api/wireguard/client/list_servers`, {
-	method: 'GET',
-	headers: {
-		Authorization: opnsenseAuth,
-		Accept: 'application/json',
-	},
-});
-assert(resServers.ok, 'Failed to fetch OPNsense WireGuard servers');
-const servers = (await resServers.json()) as OpnsenseWgServers;
-assert.equal(servers.status, 'ok', 'Failed to fetch OPNsense WireGuard servers');
-export const serverUuid = servers.rows.find((server) => server.name === opnsenseIfname)?.uuid;
-assert(serverUuid, 'Failed to find server UUID for OPNsense WireGuard server');
-console.log('OPNsense WireGuard server UUID:', serverUuid);
-
-const resServerInfo = await fetch(
-	`${opnsenseUrl}/api/wireguard/client/get_server_info/${serverUuid}`,
-	{
 		method: 'GET',
 		headers: {
 			Authorization: opnsenseAuth,
 			Accept: 'application/json',
 		},
-	},
+	});
-);
+	assert(resServers.ok, 'Failed to fetch OPNsense WireGuard servers');
-assert(resServerInfo.ok, 'Failed to fetch OPNsense WireGuard server info');
+	const servers = (await resServers.json()) as OpnsenseWgServers;
-const serverInfo = await resServerInfo.json();
+	assert.equal(servers.status, 'ok', 'Failed to fetch OPNsense WireGuard servers');
-assert.equal(serverInfo.status, 'ok', 'Failed to fetch OPNsense WireGuard server info');
+	const uuid = servers.rows.find((server) => server.name === opnsenseIfname)?.uuid;
-export const serverPublicKey = serverInfo['pubkey'];
+	assert(uuid, 'Failed to find server UUID for OPNsense WireGuard server');
+	serverUuid = uuid;
+	console.log('OPNsense WireGuard server UUID:', serverUuid);
+
+	const resServerInfo = await fetch(
+		`${opnsenseUrl}/api/wireguard/client/get_server_info/${serverUuid}`,
+		{
+			method: 'GET',
+			headers: {
+				Authorization: opnsenseAuth,
+				Accept: 'application/json',
+			},
+		},
+	);
+	assert(resServerInfo.ok, 'Failed to fetch OPNsense WireGuard server info');
+	const serverInfo = await resServerInfo.json();
+	assert.equal(serverInfo.status, 'ok', 'Failed to fetch OPNsense WireGuard server info');
+	serverPublicKey = serverInfo['pubkey'];
+}

src/routes/+layout.svelte

@@ -1,35 +1,39 @@
 <script lang="ts">
 	import '../app.css';
-	import { page } from '$app/stores';
 	import { cn } from '$lib/utils';
+	import { page } from '$app/state';
 
 	const { data, children } = $props();
 	const { user } = data;
 
 	function getNavClass(path: RegExp) {
-		return cn('hover:text-foreground/80 transition-colors',
+		return cn(
-			path.test($page.url.pathname) ? 'text-foreground' : 'text-foreground/60');
+			'hover:text-foreground/80 transition-colors',
+			path.test(page.url.pathname) ? 'text-foreground' : 'text-foreground/60',
+		);
 	}
 </script>
 
 <header class="p-4 sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
-	<nav class="flex items-center gap-6 text-sm">
+	<nav>
-		<a href="/" class={getNavClass(/^\/$/)}>Home</a>
+		<ul class="flex items-center gap-6 text-sm">
-		{#if user}
+			<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
-			<a href="/user" class={getNavClass(/^\/user$/)}>Profile</a>
+			{#if user}
-			<a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a>
+				<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
-			<a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a>
+				<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
-		{/if}
+				<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
+			{/if}
+		</ul>
 	</nav>
 </header>
-<main class="flex flex-col flex-grow p-4">
+<main class="flex flex-grow flex-col p-4">
 	{@render children()}
 </main>
 
 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
-<footer class="p-4 relative text-center inset-x-0 bottom-0">
+<footer class="relative inset-x-0 bottom-0 p-4 text-center">
 	<p>&copy; 2024</p>
 </footer>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { AuthForm } from '$lib/components/app/auth-form';
+	import { Button } from '$lib/components/ui/button';
 
 	const { data } = $props();
 	const { user } = data;
@@ -9,10 +10,27 @@
 	<title>VPGen</title>
 </svelte:head>
 
-<h1>Welcome to VPGen</h1>
+<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
+	Welcome to VPGen
+</h1>
 
-{#if user }
+{#if user}
-	<p>Hi {user.name}</p>
+	<p>
+		Hi {user.name}!
+	</p>
+	<section id="get-started" class="border-l-2 pl-6">
+		<p>
+			To get started,
+			<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
+		</p>
+	</section>
 {:else}
 	<AuthForm class="p-4" />
+	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
 {/if}
+
+<style>
+	p {
+		@apply my-2;
+	}
+</style>

src/routes/auth/authentik/callback/+server.ts

@@ -34,7 +34,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 			status: 400
 		});
 	}
-	const claims = decodeIdToken(tokens.idToken());
+	const claims = decodeIdToken(tokens.idToken()) as { sub: string, preferred_username: string, name: string };
 	console.log("claims", claims);
 	const userId: string = claims.sub;
 	const username: string = claims.preferred_username;

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

@@ -1,6 +1,6 @@
 import type { Actions } from './$types';
 import { createClient } from '$lib/server/clients';
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 
 export const actions = {
 	create: async (event) => {
@@ -15,9 +15,7 @@ export const actions = {
 
 		switch (res._tag) {
 			case 'ok': {
-				return {
+				return redirect(303, `/clients/${res.value}`);
-					status: 201,
-				};
 			}
 			case 'err': {
 				const [status, message] = res.error;

src/routes/clients/+page.svelte

@@ -1,42 +1,58 @@
 <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 } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
-	import type { PageData } from './$types';
 	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>Clients</title>
 </svelte:head>
 
-<Table.Root class="bg-accent rounded-lg overflow-hidden divide-y-2 divide-background">
+<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">Private Key</Table.Head>-->
-<!--			<Table.Head scope="col">Pre-Shared 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.clients as client}
-			<Table.Row class="hover:bg-background hover:bg-opacity-40 group">
+			<Table.Row class="group hover:bg-background hover:bg-opacity-40">
 				<Table.Head scope="row">
-					<a href={`/clients/${client.id}`} class="flex items-center size-full group-hover:underline">
+					<a
+						href={`/clients/${client.id}`}
+						class="flex size-full items-center group-hover:underline"
+					>
 						{client.name}
 					</a>
 				</Table.Head>
 				<Table.Cell class="truncate">{client.publicKey}</Table.Cell>
-<!--				<Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>-->
+				<!--				<Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>-->
-<!--				<Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>-->
+				<!--				<Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>-->
 				<Table.Cell class="flex flex-wrap gap-1">
 					{#each client.ips as ip}
-						<Badge class="bg-background select-auto" variant="secondary">{ip}</Badge>
+						<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
 					{/each}
 				</Table.Cell>
 			</Table.Row>
@@ -46,10 +62,35 @@
 
 <!--Floating action button for adding a new client-->
 <!--Not sure if this is the best place for the input field, will think about it later-->
-<form class="flex self-end mt-auto pt-4" method="post" action="?/create">
+<div class="mt-auto flex self-end pt-4">
-	<Input type="text" name="name" placeholder="New Client" class="mr-2" />
+	<Dialog.Root bind:open={dialogOpen}>
-	<Button type="submit">
+		<Dialog.Trigger asChild let:builder>
-		<LucidePlus class="mr-2 h-4 w-4" />
+			<Button builders={[builder]}>
-		Add Client
+				<LucidePlus class="mr-2 h-4 w-4" />
-	</Button>
+				Add Client
-</form>
+			</Button>
+		</Dialog.Trigger>
+		<Dialog.Content class="max-w-xs">
+			<form class="contents" method="post" action="?/create">
+				<Dialog.Header class="">
+					<Dialog.Title>Create a new client</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 Client"
+						class="max-w-[20ch]"
+					/>
+				</div>
+				<Dialog.Footer>
+					<Button type="submit">Create</Button>
+				</Dialog.Footer>
+			</form>
+		</Dialog.Content>
+	</Dialog.Root>
+</div>

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

@@ -1,55 +1,33 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { LucideClipboardCopy } from 'lucide-svelte';
-	import { Button } from '$lib/components/ui/button';
 	import QRCode from 'qrcode-svg';
+	import { CodeSnippet } from '$lib/components/app/code-snippet';
 
 	const { data }: { data: PageData } = $props();
 
-	let tooltipText = $state('Copy to clipboard');
+	// Clean the client name for the file name,
+	// things can break otherwise (too long or invalid characters)
+	// https://github.com/pirate/wireguard-docs
+	const clientWgCleanedName =
+		data.client.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))',
 	});
-
-	async function copyToClipboard() {
-		await navigator.clipboard.writeText(data.config);
-		tooltipText = 'Copied!';
-	}
-
-	function onMouseLeave() {
-		tooltipText = 'Copy to clipboard';
-	}
 </script>
 
 <svelte:head>
 	<title></title>
 </svelte:head>
 
-<h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
+<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
 
 <div class="flex flex-wrap gap-4">
-	<div class="relative bg-accent rounded-lg max-w-fit">
+	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
-		<div class="flex items-start p-2 overflow-x-auto">
-			<pre><code>{data.config}</code></pre>
 
-			<!--Copy button for the configuration-->
+	<div class="overflow-hidden rounded-lg">
-			<!--Flex reverse for peer hover to work properly-->
-			<div class="absolute group flex flex-row-reverse items-center gap-1 right-2">
-				<Button class="peer size-10 p-2"
-								onclick={copyToClipboard}
-								onmouseleave={onMouseLeave}
-				>
-					<LucideClipboardCopy />
-				</Button>
-				<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
-				{tooltipText}
-			</span>
-			</div>
-		</div>
-	</div>
-
-	<div class="rounded-lg overflow-hidden">
 		{@html qrCode.svg()}
 	</div>
 </div>

src/routes/user/+page.svelte

@@ -2,6 +2,7 @@
 	import { invalidate, invalidateAll } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import { LucideLoaderCircle, LucideLogOut, LucideRefreshCw } from 'lucide-svelte';
+	import { CodeSnippet } from '$lib/components/app/code-snippet/index.js';
 
 	let { data } = $props();
 	let isLoadingSignOut = $state(false);
@@ -16,25 +17,28 @@
 	}
 </script>
 
-<svelte:head>
+<div class="flex flex-col gap-2">
-	<title>User Profile</title>
+	<CodeSnippet data={JSON.stringify(data.user, null, 2)} />
-</svelte:head>
 
-<pre>{JSON.stringify(data.user, null, 2)}</pre>
+	<div class="flex gap-2">
-
+		<Button onclick={refetch}>
-<div class="flex gap-2">
+			<LucideRefreshCw class="mr-2 h-4 w-4" />
-	<Button onclick={refetch}>
+			Invalidate Data
-		<LucideRefreshCw class="mr-2 h-4 w-4" />
-		Invalidate Data
-	</Button>
-	<form class="inline-flex" method="post" action="/auth?/logout">
-		<Button type="submit" onclick={() => {isLoadingSignOut = true}}>
-			{#if isLoadingSignOut}
-				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
-			{:else}
-				<LucideLogOut class="mr-2 h-4 w-4" />
-			{/if}
-			Sign Out
 		</Button>
-	</form>
+		<form class="inline-flex" method="post" action="/auth?/logout">
+			<Button
+				type="submit"
+				onclick={() => {
+					isLoadingSignOut = true;
+				}}
+			>
+				{#if isLoadingSignOut}
+					<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+				{:else}
+					<LucideLogOut class="mr-2 h-4 w-4" />
+				{/if}
+				Sign Out
+			</Button>
+		</form>
+	</div>
 </div>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */