clients page: add required to new client input

.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,9 @@ 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
+AUTH_REDIRECT_URL=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 +16,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",
 		"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.454.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/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/server/clients.ts

@@ -3,15 +3,7 @@ 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,8 +52,8 @@ export function mapClientToDetails(
 		preSharedKey: client.preSharedKey,
 		ips,
 		vpnPublicKey: serverPublicKey,
-		vpnEndpoint: VPN_ENDPOINT,
+		vpnEndpoint: env.VPN_ENDPOINT,
-		vpnDns: VPN_DNS,
+		vpnDns: env.VPN_DNS,
 	};
 }
 
@@ -74,7 +66,7 @@ export async function createClient(params: {
 		.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
@@ -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]);
 		}
 
@@ -179,14 +171,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 +202,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.AUTH_REDIRECT_URL
 );

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/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.svelte

@@ -3,8 +3,8 @@
 	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';
 
 	const { data }: { data: PageData } = $props();
 </script>
@@ -13,30 +13,33 @@
 	<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,8 +49,8 @@
 
 <!--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">
+<form class="mt-auto flex self-end pt-4" method="post" action="?/create">
-	<Input type="text" name="name" placeholder="New Client" class="mr-2" />
+	<Input required type="text" name="name" placeholder="New Client" class="mr-2" />
 	<Button type="submit">
 		<LucidePlus class="mr-2 h-4 w-4" />
 		Add Client

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

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { LucideClipboardCopy } from 'lucide-svelte';
+	import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import QRCode from 'qrcode-svg';
 
 	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 configWasCopied = $state(false);
 	let qrCode = new QRCode({
 		content: data.config,
 		join: true,
@@ -14,12 +19,9 @@
 
 	async function copyToClipboard() {
 		await navigator.clipboard.writeText(data.config);
-		tooltipText = 'Copied!';
+		configWasCopied = true;
 	}
 
-	function onMouseLeave() {
-		tooltipText = 'Copy to clipboard';
-	}
 </script>
 
 <svelte:head>
@@ -29,22 +31,36 @@
 <h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
 
 <div class="flex flex-wrap gap-4">
-	<div class="relative bg-accent rounded-lg max-w-fit">
+	<div class="relative bg-accent rounded-lg max-w-fit overflow-x-hidden">
 		<div class="flex items-start p-2 overflow-x-auto">
 			<pre><code>{data.config}</code></pre>
 
 			<!--Copy button for the configuration-->
 			<!--Flex reverse for peer hover to work properly-->
-			<div class="absolute group flex flex-row-reverse items-center gap-1 right-2">
+			<div class="absolute flex flex-col gap-2 right-2">
-				<Button class="peer size-10 p-2"
+				<div class="group flex flex-row-reverse items-center gap-1">
-								onclick={copyToClipboard}
+					<Button class="peer size-10 p-2"
-								onmouseleave={onMouseLeave}
+									onclick={copyToClipboard}
-				>
+									onmouseleave={() => configWasCopied = false}
-					<LucideClipboardCopy />
+					>
-				</Button>
+						<LucideClipboardCopy />
-				<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
+					</Button>
-				{tooltipText}
+					<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
-			</span>
+						{configWasCopied ? 'Copied' : 'Copy config to clipboard'}
+					</span>
+				</div>
+
+				<div class="group flex flex-row-reverse items-center gap-1">
+					<a class="peer contents" href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data.config)}`}
+						 download={clientWgCleanedName}>
+						<Button class="size-10 p-2">
+							<LucideDownload />
+						</Button>
+					</a>
+					<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
+						Download config file
+					</span>
+				</div>
 			</div>
 		</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} */