From c11ee3a28004b2e12b91e1657ab52767ba5f89f4 Mon Sep 17 00:00:00 2001
From: Chris Bisset <chris@gurucomputing.com.au>
Date: Sat, 12 Jul 2025 23:12:37 +0000
Subject: [PATCH] initial preauth keys work

---
 src/lib/components/common/classes.svelte      | 20 ++++++++++-
 .../users/user-cards/user-card.svelte         |  5 +--
 .../user-card/preauthkeys-functions.svelte    | 34 +++++++++++++++++++
 .../user-cards/user-card/preauthkeys.svelte   | 19 +++++++++++
 .../user-card/username-functions.svelte       |  2 +-
 5 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/users/user-cards/user-card/preauthkeys-functions.svelte
 create mode 100644 src/lib/components/users/user-cards/user-card/preauthkeys.svelte

diff --git a/src/lib/components/common/classes.svelte b/src/lib/components/common/classes.svelte
index c2ff1e2..9cadec7 100644
--- a/src/lib/components/common/classes.svelte
+++ b/src/lib/components/common/classes.svelte
@@ -51,6 +51,7 @@
 		}
 	}
 
+	// used for describing headscale users
 	export class user {
 		id = '';
 		name = '';
@@ -61,7 +62,24 @@
 		provider = '';
 		profilePicUrl = '';
 
-		public constructor(init?: Partial<APIKey>) {
+		public constructor(init?: Partial<user>) {
+			Object.assign(this, init);
+		}
+	}
+
+	// used for describing keys associated with a user
+	export class preauthkey {
+		user = new user();
+		id = '';
+		key = '';
+		reusable = false;
+		ephemeral = false;
+		used = false;
+		expiration = '';
+		createdAt = '';
+		aclTags = [''];
+
+		public constructor(init?: Partial<preauthkey>) {
 			Object.assign(this, init);
 		}
 	}
diff --git a/src/lib/components/users/user-cards/user-card.svelte b/src/lib/components/users/user-cards/user-card.svelte
index 495084e..adebdce 100644
--- a/src/lib/components/users/user-cards/user-card.svelte
+++ b/src/lib/components/users/user-cards/user-card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { user } from '$lib/components/common/classes.svelte';
+	import Preauthkeys from './user-card/preauthkeys.svelte';
 	import Username from './user-card/username.svelte';
 	import { slide } from 'svelte/transition';
 
@@ -20,10 +21,10 @@
 	<div class="list-col-grow prose prose-sm">
 		<Username {userCard}></Username>
 		{#if cardExpanded}
-			<table transition:slide class="table -mx-10">
+			<table transition:slide class="table -ml-10 overflow-x-auto">
 				<tbody>
 					<!-- row 1 -->
-					<tr><th class="min-w-32">Preauth Keys</th><td>stuff and things and stuff stuff and things and stuff stuff and things and stuff stuff and things and stuff</td></tr>
+					<tr><th class="min-w-28">Preauth Keys</th><td class="min-w-96"><Preauthkeys {userCard}></Preauthkeys></td></tr>
 				</tbody>
 			</table>
 		{/if}
diff --git a/src/lib/components/users/user-cards/user-card/preauthkeys-functions.svelte b/src/lib/components/users/user-cards/user-card/preauthkeys-functions.svelte
new file mode 100644
index 0000000..a7ae282
--- /dev/null
+++ b/src/lib/components/users/user-cards/user-card/preauthkeys-functions.svelte
@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { preauthkey } from '$lib/components/common/classes.svelte';
+	import { persistentAppSettings, appSettings } from '$lib/components/common/state.svelte';
+	import { newToastAlert } from '$lib/components/layout/toast-functions.svelte';
+
+	export async function getPreauthKeys(userID: string) {
+        let preauthkeys: preauthkey[] = [];
+		try {
+			const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/preauthkey?user=${userID}`, {
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${persistentAppSettings.headscaleAPIKey}`,
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (response.ok) {
+                preauthkeys = (await response.json()).preAuthKeys as preauthkey[];
+			} else {
+                newToastAlert(`${response.status}: ${response.body}`);
+			}
+		} catch (error) {
+			let message: string;
+			if (error instanceof Error) {
+				message = error.message;
+			} else {
+				message = String(error);
+			}
+			newToastAlert(`API test failed (check your server settings): ${message}`);
+			appSettings.apiTested = false;
+		}
+		return preauthkeys;
+	}
+</script>
diff --git a/src/lib/components/users/user-cards/user-card/preauthkeys.svelte b/src/lib/components/users/user-cards/user-card/preauthkeys.svelte
new file mode 100644
index 0000000..be650ff
--- /dev/null
+++ b/src/lib/components/users/user-cards/user-card/preauthkeys.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { preauthkey, user } from '$lib/components/common/classes.svelte';
+	import { getPreauthKeys } from './preauthkeys-functions.svelte';
+
+	interface Props {
+		userCard: user;
+	}
+
+	let { userCard }: Props = $props();
+    let preauthKeys: preauthkey[] = $state([]);
+	getPreauthKeys(userCard.id).then((returnedPreAuthKeys) => {
+		preauthKeys = returnedPreAuthKeys;
+	});
+</script>
+
+{#each preauthKeys as preauthkey}
+<p>{preauthkey.key}</p>
+{/each}
+
diff --git a/src/lib/components/users/user-cards/user-card/username-functions.svelte b/src/lib/components/users/user-cards/user-card/username-functions.svelte
index 43a6276..9c3ebe1 100644
--- a/src/lib/components/users/user-cards/user-card/username-functions.svelte
+++ b/src/lib/components/users/user-cards/user-card/username-functions.svelte
@@ -19,7 +19,7 @@
 			if (response.ok) {
                 getUsers();
 			} else {
-                newToastAlert(`${response.status}`);
+                newToastAlert(`${response.status}: ${response.body}`);
 			}
 		} catch (error) {
 			let message: string;