From 92cf68cdb199870247fd4488c4a4246529ce6609 Mon Sep 17 00:00:00 2001
From: Chris Bisset <chris@gurucomputing.com.au>
Date: Sat, 15 Mar 2025 05:09:32 +0000
Subject: [PATCH] test connectivity on app load

---
 src/lib/components/settings/server-settings.svelte    | 2 +-
 src/lib/components/settings/server-settings.svelte.ts | 5 ++---
 src/routes/+layout.svelte                             | 4 ++++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/settings/server-settings.svelte b/src/lib/components/settings/server-settings.svelte
index 14d5c34..f8f0b82 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -27,7 +27,7 @@
 				<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 			</svg>
 		{:else}
-		<svg data-slot="icon" fill="none" stroke-width="1.5" class="inline h-6 w-6 fill-none stroke-error" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+		<svg in:fly|global={{ x: 10, duration: 600 }} data-slot="icon" fill="none" stroke-width="1.5" class="inline h-6 w-6 fill-none stroke-error" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
 		  </svg>
 		{/if}
diff --git a/src/lib/components/settings/server-settings.svelte.ts b/src/lib/components/settings/server-settings.svelte.ts
index 06eebf8..523a9e8 100644
--- a/src/lib/components/settings/server-settings.svelte.ts
+++ b/src/lib/components/settings/server-settings.svelte.ts
@@ -1,7 +1,7 @@
 import { newToastAlert } from "../layout/toast.svelte.ts";
 import { appSettings, persistentAppSettings } from "../common/state.svelte";
 
-export async function testAPIConnectivity(submission: SubmitEvent) {
+export async function testAPIConnectivity() {
     const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
         method: 'GET',
         headers: {
@@ -11,12 +11,11 @@ export async function testAPIConnectivity(submission: SubmitEvent) {
     });
 
     if (!response.ok) {
-        newToastAlert(`API error! Status: ${response.status}`);
+        newToastAlert(`API error! Status: ${response.status}. Check your API settings`);
         appSettings.apiTested = false;
     }
 
     const data = await response.json();
-    newToastAlert('Successfully connected to headscale!');
     appSettings.apiTested = true;
 
     if (persistentAppSettings.debugLogging) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e960165..7928a7c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import '../app.css';
+	import { testAPIConnectivity } from '$lib/components/settings/server-settings.svelte.ts';
 	let { children } = $props();
 
 	onMount(async () => {
@@ -20,6 +21,9 @@
 			localStorage.setItem('persistentAppSettings', JSON.stringify(persistentAppSettings));
 		});
 
+		// perform an initial API test
+		testAPIConnectivity();
+
 		// delay load until page is hydrated
 		appSettings.appLoaded = true;