Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-07-21 02:25:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added success and failure states to setting

Browse source
This commit is contained in:
Chris Bisset 2025-03-15 05:03:50 +00:00
parent 28397cde21
commit 9592c273ca
3 changed files with 35 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/common/classes.svelte.ts
View file

@ -16,6 +16,7 @@ export class AppSettingsObject {
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
public constructor(init?: Partial<AppSettingsObject>) {
Object.assign(this, init);

17
src/lib/components/settings/server-settings.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts">
import { persistentAppSettings } from '$lib/components/common/state.svelte';
import { testAPIConnectivity } from "./server-settings.svelte.ts";
import { testAPIConnectivity } from './server-settings.svelte.ts';
import { appSettings } from '$lib/components/common/state.svelte';
import { fly } from 'svelte/transition';
</script>
<div class="form-control">
@ -18,5 +20,16 @@
<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
</label>
</form>
<button form="server-settings" class="btn btn-secondary btn-sm w-16">Save</button>
<span
><button form="server-settings" class="btn btn-secondary btn-sm w-24"> Test API</button>
{#if appSettings.apiTested}
<svg in:fly|global={{ x: 10, duration: 600 }} xmlns="http://www.w3.org/2000/svg" class="inline h-6 w-6 fill-none stroke-success" viewBox="0 0 24 24" stroke-width="2">
<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">
<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}
</span>
</div>

39
src/lib/components/settings/server-settings.svelte.ts
View file

@ -1,26 +1,25 @@
import { newToastAlert } from "../layout/toast.svelte.ts";
import { persistentAppSettings } from "../common/state.svelte";
import { appSettings, persistentAppSettings } from "../common/state.svelte";
export async function testAPIConnectivity(submission: SubmitEvent) {
try {
const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${persistentAppSettings.headscaleAPIKey}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
newToastAlert(`HTTP error! Status: ${response.status}`);
const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${persistentAppSettings.headscaleAPIKey}`,
'Content-Type': 'application/json'
}
const data = await response.json();
newToastAlert('success!');
if (persistentAppSettings.debugLogging) {
newToastAlert(`API Response: ${JSON.stringify(data)}`);
}
} catch (error) {
newToastAlert(`Error fetching API key: ${error}`);
});
if (!response.ok) {
newToastAlert(`API error! Status: ${response.status}`);
appSettings.apiTested = false;
}
const data = await response.json();
newToastAlert('Successfully connected to headscale!');
appSettings.apiTested = true;
if (persistentAppSettings.debugLogging) {
newToastAlert(`API Response: ${JSON.stringify(data)}`);
}
}