Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 02:34:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added ability to pass settings in URL

Browse source
This commit is contained in:
Chris Bisset 2025-03-20 00:35:15 +00:00
parent 50e822c63e
commit 58cb788f22
4 changed files with 53 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/lib/components/settings/server-settings-functions.svelte.ts Normal file
View file

@ -0,0 +1,32 @@
import { newToastAlert } from "../layout/toast.svelte.ts";
import { appSettings, persistentAppSettings } from "../common/state.svelte";
export async function testAPIConnectivity() {
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(`API test failed (check your server settings): ${response.status}`);
appSettings.apiTested = false;
}
const data = await response.json();
appSettings.apiTested = true;
if (persistentAppSettings.debugLogging) {
newToastAlert(`API Response: ${JSON.stringify(data)}`);
}
} catch (error) {
let message
if (error instanceof Error) { message = error.message }
else { message = String(error) }
newToastAlert(`API test failed (check your server settings): ${message}`)
appSettings.apiTested = false;
}
}

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

@ -1,6 +1,6 @@
<script lang="ts">
import { persistentAppSettings } from '$lib/components/common/state.svelte';
import { testAPIConnectivity } from './server-settings.svelte.ts';
import { testAPIConnectivity } from './server-settings-functions.svelte.ts';
import { appSettings } from '$lib/components/common/state.svelte';
import { fly } from 'svelte/transition';
@ -18,8 +18,12 @@
</label>
<label class="mb-2 block font-bold text-secondary" for="headscaleKey"> Headscale API Key </label>
<div class="relative flex">
<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type={apiSecretHidden ? "password" : "text"} required placeholder="******************" />
<button class="ml-2" onclick={() => {apiSecretHidden = !apiSecretHidden }}
<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type={apiSecretHidden ? 'password' : 'text'} required placeholder="******************" />
<button type="button"
class="ml-2"
onclick={() => {
apiSecretHidden = !apiSecretHidden;
}}
>{#if apiSecretHidden}
<!-- eye off -->
<svg xmlns="http://www.w3.org/2000/svg" class="my-1.5 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /></svg>

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

@ -1,24 +0,0 @@
import { newToastAlert } from "../layout/toast.svelte.ts";
import { appSettings, persistentAppSettings } from "../common/state.svelte";
export async function testAPIConnectivity() {
const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${persistentAppSettings.headscaleAPIKey}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
newToastAlert(`API error! Status: ${response.status}. Check your API settings`);
appSettings.apiTested = false;
}
const data = await response.json();
appSettings.apiTested = true;
if (persistentAppSettings.debugLogging) {
newToastAlert(`API Response: ${JSON.stringify(data)}`);
}
}

17
src/routes/+layout.svelte
View file

@ -7,7 +7,7 @@
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import '../app.css';
import { testAPIConnectivity } from '$lib/components/settings/server-settings.svelte.ts';
import { testAPIConnectivity } from '$lib/components/settings/server-settings-functions.svelte';
let { children } = $props();
onMount(async () => {
@ -21,13 +21,24 @@
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;
}
// perform an initial API test
testAPIConnectivity();
// delay load until page is hydrated
appSettings.appLoaded = true;
});
});
</script>
{#if appSettings.appLoaded}