From 40cb91f8d05ca97e1be3e8cf63941864c2c42dbe Mon Sep 17 00:00:00 2001
From: Chris Bisset <chris@gurucomputing.com.au>
Date: Fri, 28 Mar 2025 02:46:29 +0000
Subject: [PATCH] populated user section

---
 src/lib/components/common/classes.svelte      | 16 +++++++++
 .../users/user-cards-functions.svelte         | 33 +++++++++++++++++++
 src/lib/components/users/user-cards.svelte    | 15 +++++++++
 .../users/user-cards/user-card.svelte         | 13 ++++++++
 src/routes/users.html/+page.svelte            |  5 ++-
 5 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/users/user-cards-functions.svelte
 create mode 100644 src/lib/components/users/user-cards.svelte
 create mode 100644 src/lib/components/users/user-cards/user-card.svelte

diff --git a/src/lib/components/common/classes.svelte b/src/lib/components/common/classes.svelte
index d4cef8a..c2ff1e2 100644
--- a/src/lib/components/common/classes.svelte
+++ b/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>
diff --git a/src/lib/components/users/user-cards-functions.svelte b/src/lib/components/users/user-cards-functions.svelte
new file mode 100644
index 0000000..343cd16
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/users/user-cards.svelte b/src/lib/components/users/user-cards.svelte
new file mode 100644
index 0000000..df55d68
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/users/user-cards/user-card.svelte b/src/lib/components/users/user-cards/user-card.svelte
new file mode 100644
index 0000000..840c36f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/users.html/+page.svelte b/src/routes/users.html/+page.svelte
index 8538d4a..fd3f40d 100644
--- a/src/routes/users.html/+page.svelte
+++ b/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}
\ No newline at end of file