clients page improvements: convert ip allocation index to addresses

src/lib/server/clients.ts

@@ -87,7 +87,7 @@ export async function createClient(params: {
 				username: params.user.username,
 				pubkey: keys.pubkey,
 				psk: keys.psk,
-				allowedIps: getAllowedIps(ipAllocationId - 1),
+				allowedIps: getIpsFromIndex(ipAllocationId - 1).join(','),
 			});
 			const opnsenseResJson = await opnsenseRes.json();
 			if (opnsenseResJson['result'] !== 'saved') {
@@ -124,7 +124,7 @@ async function getKeys() {
 	};
 }
 
-function getAllowedIps(ipIndex: number) {
+export function getIpsFromIndex(ipIndex: number) {
 	const v4StartingAddr = new Address4(IPV4_STARTING_ADDR);
 	const v6StartingAddr = new Address6(IPV6_STARTING_ADDR);
 	const v4Allowed = Address4.fromBigInt(v4StartingAddr.bigInt() + BigInt(ipIndex));
@@ -132,9 +132,11 @@ function getAllowedIps(ipIndex: number) {
 	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 + '/' + IPV6_CLIENT_PREFIX_SIZE,
+	];
 }
-
 async function opnsenseCreateClient(params: {
 	username: string;
 	pubkey: string;

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

@@ -3,7 +3,7 @@ import { wgClients } from '$lib/server/db/schema';
 import { db } from '$lib/server/db';
 import { eq } from 'drizzle-orm';
 import type { RequestHandler } from './$types';
-import { createClient } from '$lib/server/clients';
+import { createClient, getIpsFromIndex } from '$lib/server/clients';
 
 export const GET: RequestHandler = async (event) => {
 	if (!event.locals.user) {
@@ -19,11 +19,30 @@ export const GET: RequestHandler = async (event) => {
 };
 
 async function findClients(userId: string) {
-	return db.query.wgClients.findMany({
-		where: eq(wgClients.userId, userId),
+	const clientsData = await db.query.wgClients.findMany({
+		columns: {
+			id: true,
+			name: true,
+			publicKey: true,
+			privateKey: true,
+			preSharedKey: true,
+		},
 		with: {
 			ipAllocation: true,
 		},
+		where: eq(wgClients.userId, userId),
+	});
+	// replace ip index with actual addresses
+	return clientsData.map((client) => {
+		const ips = getIpsFromIndex(client.ipAllocation.id);
+		return {
+			id: client.id,
+			name: client.name,
+			publicKey: client.publicKey,
+			privateKey: client.privateKey,
+			preSharedKey: client.preSharedKey,
+			ips,
+		};
 	});
 }
 

src/routes/clients/+page.svelte

@@ -27,8 +27,10 @@
 				<Table.Cell class="truncate max-w-[10ch]">{client.publicKey}</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>
-					<Badge class="bg-background select-auto" variant="secondary">{client.ipAllocation.id}</Badge>
+				<Table.Cell class="flex gap-1">
+					{#each client.ips as ip}
+						<Badge class="bg-background select-auto" variant="secondary">{ip}</Badge>
+					{/each}
 				</Table.Cell>
 			</Table.Row>
 		{/each}