initial preauth keys work

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);
 		}
 	}

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}

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>

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}
+

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;