connections page overhaul

# Conflicts:
#	src/lib/opnsense/wg.ts

.env.example

@@ -3,6 +3,8 @@ 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_KEY=
 OPNSENSE_API_SECRET=
+OPNSENSE_WG_IFNAME=wg2

bruno/environments/dev.bru

@@ -1,6 +1,8 @@
 vars {
   opnsense_key: 33NhXqaJwrWy1T4Qi60GK90RXJuS3PWIYwlwYPnQ8f5YPe/J1q/g6/l4bZ2/kJk71MFhwP+9mr+IiQPi
+  base: https://opnsense.home
 }
 vars:secret [
+  vpn_endpoint,
   opnsense_secret
 ]

bruno/opnsense-api/Add Client Builder.bru

@@ -0,0 +1,38 @@
+meta {
+  name: Add Client Builder
+  type: http
+  seq: 9
+}
+
+post {
+  url: {{base}}/api/wireguard/client/addClientBuilder
+  body: json
+  auth: inherit
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "configbuilder": {
+      "enabled": "1",
+      "name": "{{clientName}}",
+      "pubkey": "{{clientPubkey}}",
+      "psk": "{{psk}}",
+      "tunneladdress": "{{clientTunnelAddress}}",
+      "keepalive": "",
+      "server": "{{serverUuid}}",
+      "endpoint": "{{vpn_endpoint}}"
+    }
+  }
+}
+
+vars:pre-request {
+  clientName: vpgen-test
+  clientPubkey: BJ5faPVJsDP4CCxNYilmKnwlQXOtXEOJjqIwb4U/CgM=
+  psk: 0LWopbrISXBNHUxr+WOhCSAg+0hD8j3TLmpyzHkBHCQ=
+  clientTunnelAddress: 10.18.11.101/32,fd00::1/128
+  serverUuid: 99f278fb-5b79-4fde-b3d8-afab19f1fc07
+}

bruno/opnsense-api/Get Interfaces.bru

@@ -5,14 +5,13 @@ meta {
 }
 
 post {
-  url: https://opnsense.home/api/wireguard/service/show
+  url: {{base}}/api/wireguard/service/show
   body: json
   auth: inherit
 }
 
 headers {
   Content-Type: application/json
-  Accept: application/json
 }
 
 body:json {
@@ -20,9 +19,13 @@ body:json {
     "current": 1,
     "rowCount": 7,
     "sort": {},
-    "searchPhrase": "",
+    "searchPhrase": "{{searchPhrase}}",
     "type": [
       "interface"
     ]
   }
 }
+
+vars:pre-request {
+  searchPhrase: 
+}

bruno/opnsense-api/Get Key Pair.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Get Key Pair
+  type: http
+  seq: 7
+}
+
+get {
+  url: {{base}}/api/wireguard/server/key_pair
+  body: none
+  auth: inherit
+}

bruno/opnsense-api/Get PSK.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Get PSK
+  type: http
+  seq: 8
+}
+
+get {
+  url: {{base}}/api/wireguard/client/psk
+  body: none
+  auth: inherit
+}

bruno/opnsense-api/Get Peers.bru

@@ -5,14 +5,13 @@ meta {
 }
 
 post {
-  url: https://opnsense.home/api/wireguard/service/show
+  url: {{base}}/api/wireguard/service/show
   body: json
   auth: inherit
 }
 
 headers {
   Content-Type: application/json
-  Accept: application/json
 }
 
 body:json {
@@ -20,9 +19,13 @@ body:json {
     "current": 1,
     "rowCount": 7,
     "sort": {},
-    "searchPhrase": "",
+    "searchPhrase": "{{searchPhrase}}",
     "type": [
       "peer"
     ]
   }
 }
+
+vars:pre-request {
+  searchPhrase: 
+}

bruno/opnsense-api/Get Server Info.bru

@@ -0,0 +1,15 @@
+meta {
+  name: Get Server Info
+  type: http
+  seq: 6
+}
+
+get {
+  url: {{base}}/api/wireguard/client/get_server_info/:server_uuid
+  body: none
+  auth: inherit
+}
+
+params:path {
+  server_uuid: 8799c789-b6fb-4aa8-9dac-edf18d860340
+}

bruno/opnsense-api/List Servers.bru

@@ -0,0 +1,11 @@
+meta {
+  name: List Servers
+  type: http
+  seq: 6
+}
+
+get {
+  url: {{base}}/api/wireguard/client/list_servers
+  body: none
+  auth: inherit
+}

bruno/opnsense-api/Reconfigure.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Reconfigure
+  type: http
+  seq: 10
+}
+
+post {
+  url: {{base}}/api/wireguard/service/reconfigure
+  body: none
+  auth: inherit
+}

bruno/opnsense-api/Search Client.bru

@@ -0,0 +1,30 @@
+meta {
+  name: Search Client
+  type: http
+  seq: 5
+}
+
+post {
+  url: {{base}}/api/wireguard/client/searchClient
+  body: json
+  auth: inherit
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "current": 1,
+    "rowCount": 7,
+    "sort": {},
+    "servers": ["{{serverUuid}}"],
+    "searchPhrase": "{{searchPhrase}}"
+  }
+}
+
+vars:pre-request {
+  searchPhrase: 
+  serverUuid: 64e1d6ec-980a-463d-8583-c863d8e9852b
+}

bruno/opnsense-api/Search Server.bru

@@ -0,0 +1,28 @@
+meta {
+  name: Search Server
+  type: http
+  seq: 4
+}
+
+post {
+  url: {{base}}/api/wireguard/server/searchServer
+  body: json
+  auth: inherit
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "current": 1,
+    "rowCount": 7,
+    "sort": {},
+    "searchPhrase": "{{searchPhrase}}"
+  }
+}
+
+vars:pre-request {
+  searchPhrase: 
+}

bruno/opnsense-api/folder.bru

@@ -0,0 +1,7 @@
+meta {
+  name: opnsense-api
+}
+
+headers {
+  Accept: application/json
+}

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

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

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/opnsense/wg.ts

@@ -12,6 +12,31 @@ export interface PeerRow {
 	ifname: string;
 }
 
+/**
+ * Sample response from OPNsense WireGuard API
+ * ```json
+ * {
+ *   "total": 17,
+ *     "rowCount": 7,
+ *     "current": 1,
+ *     "rows": [
+ *   {
+ *     "if": "wg0",
+ *     "type": "peer",
+ *     "public-key": "iJa5JmJbMHNlbEluNwoB2Q8LyrPAfb7S/mluanMcI08=",
+ *     "endpoint": "10.17.20.107:42516",
+ *     "allowed-ips": "fd00::1/112,10.6.0.3/32",
+ *     "latest-handshake": 1729319339,
+ *     "transfer-rx": 1052194743,
+ *     "transfer-tx": 25203263456,
+ *     "persistent-keepalive": "off",
+ *     "name": "Yura-TPX13",
+ *     "ifname": "wg0"
+ *   }
+ * ]
+ * }
+ * ```
+ */
 export interface OpnsenseWgPeers {
 	total: number;
 	rowCount: number;
@@ -19,38 +44,18 @@ export interface OpnsenseWgPeers {
 	rows: PeerRow[];
 }
 
-// Sample request to OPNsense WireGuard API
-// const url = 'https://opnsense.home/api/wireguard/service/show';
-// const options = {
-//   method: 'POST',
-//   headers: {
-//     Authorization: 'Basic ...',
-//     'Content-Type': 'application/json',
-//     Accept: 'application/json',
-//     'content-type': 'application/json'
-//   },
-//   body: '{"current":1,"rowCount":7,"sort":{},"searchPhrase":"","type":["peer"]}'
-// };
-
-
-// Sample response from OPNsense WireGuard API
-// {
-//   "total": 17,
-//     "rowCount": 7,
-//     "current": 1,
-//     "rows": [
-//   {
-//     "if": "wg0",
-//     "type": "peer",
-//     "public-key": "iJa5JmJbMHNlbEluNwoB2Q8LyrPAfb7S/mluanMcI08=",
-//     "endpoint": "10.17.20.107:42516",
-//     "allowed-ips": "2600:1700:115f:300d:0:6:3:0/112,10.6.0.3/32",
-//     "latest-handshake": 1729319339,
-//     "transfer-rx": 1052194743,
-//     "transfer-tx": 25203263456,
-//     "persistent-keepalive": "off",
-//     "name": "Yura-TPX13",
-//     "ifname": "wg0"
-//   }
-// ]
-// }
+/**
+ * Sample request to OPNsense WireGuard API
+ * ```js
+ * const url = 'https://opnsense.home/api/wireguard/service/show';
+ * const options = {
+ *   method: 'POST',
+ *   headers: {
+ *     Authorization: 'Basic ...',
+ *     'Content-Type': 'application/json',
+ *     Accept: 'application/json',
+ *   },
+ *   body: '{"current":1,"rowCount":7,"sort":{},"searchPhrase":"","type":["peer"]}'
+ * };
+ * ```
+ */

src/lib/server/opnsense.ts

@@ -0,0 +1,11 @@
+import { env } from '$env/dynamic/private';
+import assert from 'node:assert';
+
+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 ${Buffer.from(`${env.OPNSENSE_API_KEY}:${env.OPNSENSE_API_SECRET}`).toString('base64')}`
+export const opnsenseIfname = env.OPNSENSE_WG_IFNAME;

src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <header class="p-4 sm:flex">
-	<span class=" mr-6 font-bold sm:inline-block">My App</span>
+	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
 	<nav class="flex items-center gap-6 text-sm">
 		<a href="/" class={getNavClass("/")}>Home</a>
 		{#if user}

src/routes/+page.svelte

@@ -6,10 +6,10 @@
 </script>
 
 <svelte:head>
-	<title>VpGen</title>
+	<title>VPGen</title>
 </svelte:head>
 
-<h1>Welcome to SvelteKit</h1>
+<h1>Welcome to VPGen</h1>
 
 {#if user }
 	<p>Hi {user.name}</p>

src/routes/api/connections/+server.ts

@@ -1,14 +1,14 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { env } from '$env/dynamic/private';
+import { opnsenseAuth, opnsenseIfname, opnsenseUrl } from '$lib/server/opnsense';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 
-export const GET: RequestHandler = async ({ url }) => {
-	const apiUrl = `${env.OPNSENSE_API_URL}/api/wireguard/service/show`;
+export const GET: RequestHandler = async () => {
+	const apiUrl = `${opnsenseUrl}/api/wireguard/service/show`;
 	const options: RequestInit = {
 		method: 'POST',
 		headers: {
-			Authorization: `Basic ${Buffer.from(`${env.OPNSENSE_API_KEY}:${env.OPNSENSE_API_SECRET}`).toString('base64')}`,
+			Authorization: opnsenseAuth,
 			Accept: 'application/json',
 			'Content-Type': 'application/json',
 		},
@@ -24,9 +24,15 @@ export const GET: RequestHandler = async ({ url }) => {
 
 	const res = await fetch(apiUrl, options);
 	const peers = await res.json() as OpnsenseWgPeers;
+	peers.rows = peers.rows.filter(peer => peer['latest-handshake'] && peer.ifname === opnsenseIfname)
 
 	if (!peers) {
 		error(500, "Error getting info from OPNsense API");
 	}
-	return new Response(JSON.stringify(peers));
+	return new Response(JSON.stringify(peers), {
+		headers: {
+			'Content-Type': 'application/json',
+			'Cache-Control': 'max-age=5',
+		}
+	});
 };

src/routes/connections/+page.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { invalidate } from '$app/navigation';
-	import { onMount } from 'svelte';
 	import * as Table from '$lib/components/ui/table';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { Label } from '$lib/components/ui/label';
+	import { Badge } from '$lib/components/ui/badge';
 
 	const { data }: { data: PageData } = $props();
-	let showOnlyActive = $state(false);
-	const peerRows = $derived(data.peers.rows.filter((peer) => showOnlyActive ? peer['latest-handshake'] : true));
 
-	onMount(() => {
+	$effect(() => {
 		// refresh every 5 seconds
-		setInterval(() => {
+		const interval = setInterval(() => {
 			console.log('Refreshing connections');
 			invalidate('/api/connections');
 		}, 5000);
+
+		return () => clearInterval(interval);
 	});
 
 	function getSize(size: number) {
@@ -35,45 +33,37 @@
 	<title>Connections</title>
 </svelte:head>
 
-<Checkbox id="showOnlyActive" bind:checked={showOnlyActive} />
-<Label for="showOnlyActive">Show only active connections</Label>
-
-{#if peerRows.length === 0}
-	<p>No active connections</p>
-
-{:else}
-	<Table.Root class="bg-accent rounded-xl">
-		<Table.Header>
-			<Table.Head>Name</Table.Head>
-			<Table.Head>Public Key</Table.Head>
-			<Table.Head>Endpoint</Table.Head>
-			<Table.Head>Allowed IPs</Table.Head>
-			<Table.Head>Latest Handshake</Table.Head>
-			<Table.Head>RX</Table.Head>
-			<Table.Head>TX</Table.Head>
-			<Table.Head>Persistent Keepalive</Table.Head>
-			<Table.Head>Interface Name</Table.Head>
-		</Table.Header>
-		<Table.Body>
-			{#each peerRows as peer}
-				<Table.Row class="border-y-2 border-background">
-					<Table.Cell>{peer.name}</Table.Cell>
-					<Table.Cell>{peer['public-key'].substring(0, 10)}</Table.Cell>
-					<Table.Cell>{peer.endpoint}</Table.Cell>
-					<Table.Cell>{peer['allowed-ips']}</Table.Cell>
-					{#if peer['latest-handshake']}
-						<Table.Cell>{new Date(peer['latest-handshake'] * 1000).toLocaleString()}</Table.Cell>
-						<Table.Cell>{getSize(peer['transfer-rx'])}</Table.Cell>
-						<Table.Cell>{getSize(peer['transfer-tx'])}</Table.Cell>
-					{:else}
-						<Table.Cell>Never</Table.Cell>
-						<Table.Cell>--</Table.Cell>
-						<Table.Cell>--</Table.Cell>
-					{/if}
-					<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
-					<Table.Cell>{peer.ifname}</Table.Cell>
-				</Table.Row>
-			{/each}
-		</Table.Body>
-	</Table.Root>
-{/if}
+<Table.Root class="bg-accent rounded-xl">
+	<Table.Header>
+		<Table.Head>Name</Table.Head>
+		<Table.Head>Public Key</Table.Head>
+		<Table.Head>Endpoint</Table.Head>
+		<Table.Head>Allowed IPs</Table.Head>
+		<Table.Head>Latest Handshake</Table.Head>
+		<Table.Head>RX</Table.Head>
+		<Table.Head>TX</Table.Head>
+		<Table.Head class="hidden">Persistent Keepalive</Table.Head>
+		<Table.Head class="hidden">Interface Name</Table.Head>
+	</Table.Header>
+	<Table.Body>
+		{#each data.peers.rows as peer}
+			<Table.Row class="border-y-2 border-background">
+				<Table.Cell>{peer.name}</Table.Cell>
+				<Table.Cell class="truncate max-w-[10ch]">{peer['public-key']}</Table.Cell>
+				<Table.Cell>{peer.endpoint}</Table.Cell>
+				<Table.Cell>
+					<div class="flex flex-wrap gap-1">
+						{#each peer['allowed-ips'].split(',') as addr}
+							<Badge class="bg-background" variant="secondary">{addr}</Badge>
+						{/each}
+					</div>
+				</Table.Cell>
+				<Table.Cell>{new Date(peer['latest-handshake'] * 1000).toLocaleString()}</Table.Cell>
+				<Table.Cell>{getSize(peer['transfer-rx'])}</Table.Cell>
+				<Table.Cell>{getSize(peer['transfer-tx'])}</Table.Cell>
+				<Table.Cell class="hidden">{peer['persistent-keepalive']}</Table.Cell>
+				<Table.Cell class="hidden">{peer.ifname}</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>

src/routes/connections/+page.ts

@@ -1,7 +1,7 @@
 import type { PageLoad } from './$types';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 
-export const load: PageLoad = async ({ fetch, params }) => {
+export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch('/api/connections');
 	const peers = await res.json() as OpnsenseWgPeers;