moved status checks to individual pages

src/lib/components/common/classes.svelte

@@ -15,7 +15,6 @@
 
 	export class AppSettingsObject {
 		navbarTitle = ''; // for setting the title of the page
-		appLoaded = false; // for hiding the screen until hydration has completed
 		sidebarDrawerOpen = false; // for determining if the sidebar is open when on a small screen
 		toastAlerts = new SvelteMap<string, toastAlert>(); // for adding or removing alerts
 		apiTested = true; // used to hide the app if the api tests are failing

src/lib/components/layout/auth-functions.svelte

@@ -1,30 +0,0 @@
-<script module lang="ts">
-	import { goto } from '$app/navigation';
-	import{ resolve } from '$app/paths';
-	import { appSettings } from '../common/state.svelte';
-	
-	export async function checkAuth() {
-		let validLogin = appSettings.pb.authStore.isValid;
-
-		if(validLogin) {
-			try {
-				appSettings.pb.collection("users").authRefresh();
-			} catch (error) {
-				validLogin = false;
-			}
-		}
-		
-		if(!validLogin) {
-			goto(resolve(`/login.html`));
-		}
-	}
-// try {
-// 				let authData = await appSettings.pb.collection("_superusers").authWithPassword('superadmin@breakglass.local', 'firsttimepasswordchangeme');
-// 				if (authData) {
-// 					appSettings.pb.authStore.clear();
-// 					goto(resolve(`/firstregistration.html`));
-// 				}
-// 			} catch (error) {
-// 				goto(resolve(`/login.html`))
-// 			}
-</script>

src/routes/+layout.svelte

@@ -7,10 +7,10 @@
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import '../app.css';
-	import { checkAuth } from '$lib/components/layout/auth-functions.svelte';
 	let { children } = $props();
+	let pageStatus = $state('');
 
-	onMount(async () => {
+	onMount(() => {
 		// monitor the persistent app store and read/write to local storage as required
 		// load existing persistentAppSettings from localStorage
 		let localStorageAppSettings = JSON.parse(localStorage.getItem('persistentAppSettings') || '{}') as PersistentAppSettingsObject;
@@ -20,29 +20,11 @@
 		$effect(() => {
 			localStorage.setItem('persistentAppSettings', JSON.stringify(persistentAppSettings));
 		});
-
-
-		// populate any settings being passed through by url params
-		const urlParams = new URLSearchParams(window.location.search);
-		let headscaleApiKeyParam = urlParams.get('apikey');
-		let headscaleUrlParam = urlParams.get('url');
-
-		if (headscaleApiKeyParam) {
-			persistentAppSettings.headscaleAPIKey = headscaleApiKeyParam;
-		}
-		if (headscaleUrlParam) {
-			persistentAppSettings.headscaleURL = headscaleUrlParam;
-		}
-
-		// do an initial authentication check
-		await checkAuth();
-
-		// delay load until page is hydrated
-		appSettings.appLoaded = true;
+		pageStatus = 'loaded';
 	});
 </script>
 
-{#if appSettings.appLoaded}
+{#if pageStatus == 'loaded'}
 	<!-- daisy UI theme and menu settings -->
 	<main data-theme={persistentAppSettings.daisyUITheme} in:fade={{ duration: 200 }} class="drawer lg:drawer-open">
 		<input id="drawer-toggle" type="checkbox" class="drawer-toggle" checked={appSettings.sidebarDrawerOpen ? true : null} />
@@ -56,11 +38,11 @@
 				{/each}
 			</div>
 			<!-- Navbar Content -->
-			<div class="navbar w-full h-10 min-h-0 border-b-2 bg-base-100">
+			<div class="navbar bg-base-100 h-10 min-h-0 w-full border-b-2">
 				<Navbar></Navbar>
 			</div>
 			<!-- Page Content -->
-			<div class="ml-5 mr-5 mt-5 min-h-[calc(100vh-(var(--spacing)*15))] items-center justify-center">
+			<div class="mt-5 mr-5 ml-5 min-h-[calc(100vh-(var(--spacing)*15))] items-center justify-center">
 				{@render children()}
 			</div>
 		</div>
@@ -73,7 +55,7 @@
 					appSettings.sidebarDrawerOpen = false;
 				}}
 			></button>
-			<ul class="menu min-h-full w-44 border-e-2 bg-base-100 p-1">
+			<ul class="menu bg-base-100 min-h-full w-44 border-e-2 p-1">
 				<Sidebar></Sidebar>
 			</ul>
 		</div>

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

@@ -2,13 +2,16 @@
 	import { appSettings } from '$lib/components/common/state.svelte';
 	import { fade } from 'svelte/transition';
 	import { loginOrRegister } from '$lib/components/login/auth-functions.svelte';
+	import { onMount } from 'svelte';
 
 	appSettings.navbarTitle = 'Login';
 	appSettings.sidebarDrawerOpen = false;
-
 	let loginType = $state('none');
-	loginOrRegister().then(function (loginResult) {
-		loginType = loginResult;
+
+	onMount(() => {
+		loginOrRegister().then(function (loginResult) {
+			loginType = loginResult;
+		});
 	});
 </script>
 

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

@@ -2,6 +2,21 @@
 	import { appSettings } from '$lib/components/common/state.svelte';
 	import ServerSettings from '$lib/components/settings/server-settings.svelte';
 	import ThemeSettings from '$lib/components/settings/theme-settings.svelte';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { onMount } from 'svelte';
+
+	let pageStatus = $state('none');
+
+	onMount(() => {
+		if (!appSettings.pb.authStore.isValid) {
+			goto(resolve('/login.html'));
+		} else {
+			appSettings.navbarTitle = 'Settings';
+			appSettings.sidebarDrawerOpen = false;
+			pageStatus = 'loaded';
+		}
+	});
 
 	appSettings.navbarTitle = 'Settings';
 	appSettings.sidebarDrawerOpen = false;

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

@@ -1,11 +1,23 @@
 <script lang="ts">
 	import { appSettings } from '$lib/components/common/state.svelte';
 	import UserCards from '$lib/components/users/user-cards.svelte';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { onMount } from 'svelte';
 
-	appSettings.navbarTitle = 'Users';
-	appSettings.sidebarDrawerOpen = false;
+	let pageStatus = $state('none');
+
+	onMount(() => {
+		appSettings.navbarTitle = 'Users';
+		appSettings.sidebarDrawerOpen = false;
+		if (!appSettings.pb.authStore.isValid) {
+			goto(resolve('/login.html'));
+		} else {
+			pageStatus = 'loaded';
+		}
+	});
 </script>
 
-{#if appSettings.apiTested}
+{#if pageStatus == 'loaded'}
 	<UserCards></UserCards>
 {/if}

svelte.config.js

@@ -22,6 +22,9 @@ const config = {
 		}
 	},
 	compilerOptions: {
+		experimental: {
+			async: true
+		},
 		runes: true
 	}
 };