populated user section

src/lib/components/common/classes.svelte

@@ -19,6 +19,7 @@
 		toastAlerts = new SvelteMap<string, toastAlert>(); // for adding or removing alerts
 		apiTested = true; // used to hide the app if the api tests are failing
 		apiKeyList: APIKey[] = []; //list of apikeys retrieved from headscale API
+		users: user[] = []; //list of users retrieved from headscale API
 		apiKeyExpiration?: number = undefined; // number of days left until the key in use expires
 
 		public constructor(init?: Partial<AppSettingsObject>) {
@@ -49,4 +50,19 @@
 			Object.assign(this, init);
 		}
 	}
+
+	export class user {
+		id = '';
+		name = '';
+		createdAt = '';
+		displayName = '';
+		email = '';
+		providerId = '';
+		provider = '';
+		profilePicUrl = '';
+
+		public constructor(init?: Partial<APIKey>) {
+			Object.assign(this, init);
+		}
+	}
 </script>

src/lib/components/users/user-cards-functions.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { persistentAppSettings, appSettings } from '../common/state.svelte';
+	import { newToastAlert } from '../layout/toast-functions.svelte';
+
+	export async function getUsers() {
+		try {
+			const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/user`, {
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${persistentAppSettings.headscaleAPIKey}`,
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (!response.ok) {
+				newToastAlert(`API test failed (check your server settings): ${response.status}`);
+				appSettings.apiTested = false;
+			} else {
+				appSettings.users = (await response.json()).users;
+				appSettings.apiTested = true;
+			}
+		} 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;
+		}
+	}
+</script>

src/lib/components/users/user-cards.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { getUsers } from './user-cards-functions.svelte';
+	import { appSettings } from '../common/state.svelte';
+	import UserCard from './user-cards/user-card.svelte';
+
+	getUsers();
+</script>
+
+<ul class="list bg-base-100 rounded-box shadow-md">
+	{#each appSettings.users as user}
+		<li class="list-row">
+			<UserCard userCard={user} />
+		</li>
+	{/each}
+</ul>

src/lib/components/users/user-cards/user-card.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { user } from "$lib/components/common/classes.svelte";
+
+	interface Props {
+		userCard: user;
+	}
+
+	let { userCard }: Props = $props();
+</script>
+
+<div>
+    {userCard.name}
+</div>

src/routes/users.html/+page.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { appSettings } from '$lib/components/common/state.svelte';
+	import UserCards from '$lib/components/users/user-cards.svelte';
 
 	appSettings.navbarTitle = 'Users';
 	appSettings.sidebarDrawerOpen = false;
 </script>
 
-Users
+{#if appSettings.apiTested}
+	<UserCards></UserCards>
+{/if}