From 14dd7c6949bbc1e08d6356a7b750441d731fe7a0 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Thu, 11 Aug 2022 14:46:07 +1000 Subject: [PATCH 01/14] scaffold html --- src/lib/settings/ServerSettings.svelte | 11 ++++++++++- src/routes/settings.html.svelte | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index 4579ef0..a0be2bb 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -41,7 +41,16 @@

URL for your headscale server instance

- +
+ + + + +

Generate an API key for your headscale instance and place it here.

diff --git a/src/routes/settings.html.svelte b/src/routes/settings.html.svelte index 332d364..67f6cdb 100644 --- a/src/routes/settings.html.svelte +++ b/src/routes/settings.html.svelte @@ -19,7 +19,7 @@ {#if componentLoaded} -
+
From e12d6d1a1b9e0e7e8fee133b4a185c86e0ad86da Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Thu, 11 Aug 2022 16:24:23 +1000 Subject: [PATCH 02/14] added indicator to show time left in API Key --- src/lib/settings/ServerSettings.svelte | 26 ++++++++++++++----- .../ServerSettings/APIKeyTimeLeft.svelte | 4 +++ 2 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index a0be2bb..13adfec 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -3,6 +3,8 @@ import { URLStore } from '$lib/common/stores.js'; import { APIKeyStore } from '$lib/common/stores.js'; import { getUsers } from '$lib/common/apiFunctions.svelte'; + import { onMount } from 'svelte'; + import ApiKeyTimeLeft from './ServerSettings/APIKeyTimeLeft.svelte'; // Server Settings let headscaleURL = $URLStore; @@ -33,6 +35,11 @@ $URLStore = headscaleURL; $APIKeyStore = headscaleAPIKey; } + + onMount(() => { + // test api settings on page load + TestServerSettings(); + });
@@ -40,14 +47,19 @@

URL for your headscale server instance

- +
- - -
diff --git a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte new file mode 100644 index 0000000..4a2d3f8 --- /dev/null +++ b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte @@ -0,0 +1,4 @@ + \ No newline at end of file From da3e6f679cc3fd50ab123b1df99096261c04c219 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Fri, 12 Aug 2022 16:14:25 +1000 Subject: [PATCH 03/14] added ability to toggle api key visibility --- src/lib/settings/ServerSettings.svelte | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index 13adfec..c21ceb8 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -11,6 +11,7 @@ let headscaleAPIKey = $APIKeyStore; let serverSettingsForm: HTMLFormElement; let apiStatus = 'untested'; + let apiKeyInputState = 'password'; function TestServerSettings() { getUsers() @@ -54,12 +55,20 @@ {/if}
- - -
From ad9b840ddb33c06a46415f44e08f9542d12204ed Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 10:23:56 +1000 Subject: [PATCH 04/14] added getAPIKeys function --- src/lib/common/apiFunctions.svelte | 47 ++++++++++++++++++++++++++++-- src/lib/common/classes.ts | 12 ++++++++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte index 1325c69..7144df8 100644 --- a/src/lib/common/apiFunctions.svelte +++ b/src/lib/common/apiFunctions.svelte @@ -1,5 +1,5 @@ + \ No newline at end of file + + + From d91cda082a923e8117b2459e37d23c1b42d3f671 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 11:14:39 +1000 Subject: [PATCH 06/14] added expiry warning --- .../ServerSettings/APIKeyTimeLeft.svelte | 41 ++++++++++++++----- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte index b12b2d6..7bb1f14 100644 --- a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte +++ b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte @@ -1,27 +1,46 @@ - From 7e4aab06ada52c02f17a7fe80652661979aa55bf Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 11:19:47 +1000 Subject: [PATCH 07/14] minor fixups --- src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte index 7bb1f14..93e9645 100644 --- a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte +++ b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte @@ -14,7 +14,7 @@ // match up the current apikey to the keylist keyList.forEach(key => { if($APIKeyStore.includes(key.prefix)) { - timeLeftTip = timeLeft(new Date(key.expiration)); + timeLeft(new Date(key.expiration)); } }); }) @@ -23,8 +23,8 @@ }); } - // returns time last seen in human readable format - function timeLeft(date: Date) { + // sets time expiry in human readable format + function timeLeft(date: Date): void { let currentTime = new Date(); // gets time difference in seconds let timeDifferenceDays = Math.round((date.getTime() - currentTime.getTime()) / 1000 / 60 / 60 / 24); @@ -32,7 +32,7 @@ $alertStore = `${timeDifferenceDays} days left before expiry, consider rolling your key` timeLeftWarning = true; } - return `${timeDifferenceDays} days left before expiry`; + timeLeftTip = `${timeDifferenceDays} days left before expiry`; } onMount(() => { From 0cd07d4f90ed2bad979506ed7851bb8344d8c347 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 11:22:00 +1000 Subject: [PATCH 08/14] more minor fixups --- src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte index 93e9645..a3813b2 100644 --- a/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte +++ b/src/lib/settings/ServerSettings/APIKeyTimeLeft.svelte @@ -29,7 +29,7 @@ // gets time difference in seconds let timeDifferenceDays = Math.round((date.getTime() - currentTime.getTime()) / 1000 / 60 / 60 / 24); if(timeDifferenceDays < 30) { - $alertStore = `${timeDifferenceDays} days left before expiry, consider rolling your key` + $alertStore = `${timeDifferenceDays} days left before API Key expiry, consider rolling your key` timeLeftWarning = true; } timeLeftTip = `${timeDifferenceDays} days left before expiry`; From 44d98afac013683afc255e461fa13e64e04c706a Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 11:35:32 +1000 Subject: [PATCH 09/14] fix bug with server setting test --- src/lib/settings/ServerSettings.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index c21ceb8..4bd45e5 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -2,7 +2,7 @@ import { fly } from 'svelte/transition'; import { URLStore } from '$lib/common/stores.js'; import { APIKeyStore } from '$lib/common/stores.js'; - import { getUsers } from '$lib/common/apiFunctions.svelte'; + import { getAPIKeys } from '$lib/common/apiFunctions.svelte'; import { onMount } from 'svelte'; import ApiKeyTimeLeft from './ServerSettings/APIKeyTimeLeft.svelte'; @@ -14,7 +14,7 @@ let apiKeyInputState = 'password'; function TestServerSettings() { - getUsers() + getAPIKeys() .then(() => { apiStatus = 'succeeded'; }) @@ -50,7 +50,7 @@

URL for your headscale server instance

From 4f3f17adc2cc4200b56478306f53d02a9ab6d3f6 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 18:52:49 +1000 Subject: [PATCH 10/14] basic functionality for api key rollover --- src/lib/common/apiFunctions.svelte | 71 +++++++++++++++++++ src/lib/settings/ServerSettings.svelte | 22 ++---- .../ServerSettings/RolloverAPI.svelte | 50 +++++++++++++ 3 files changed, 127 insertions(+), 16 deletions(-) create mode 100644 src/lib/settings/ServerSettings/RolloverAPI.svelte diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte index 5891b0f..51710dc 100644 --- a/src/lib/common/apiFunctions.svelte +++ b/src/lib/common/apiFunctions.svelte @@ -83,6 +83,77 @@ }); } + export async function newAPIKey(APIKeyExpiration: string): Promise { + // variables in local storage + let headscaleURL = localStorage.getItem('headscaleURL') || ''; + let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || ''; + + // endpoint url for editing users + let endpointURL = '/api/v1/apikey'; + + let APIKeyResponse = new Response(); + let APIKeyString = ''; + + await fetch(headscaleURL + endpointURL, { + method: 'POST', + headers: { + Accept: 'application/json', + Authorization: `Bearer ${headscaleAPIKey}` + }, + body: JSON.stringify({ + expiration: APIKeyExpiration + }) + }) + .then((response) => { + if (response.ok) { + APIKeyResponse = response; + } else { + return response.text().then((text) => { + throw JSON.parse(text).message; + }); + } + }) + .catch((error) => { + throw error; + }); + await APIKeyResponse.json().then((data) => { + APIKeyString = data.apiKey; + }); + + return APIKeyString; + } + + export async function expireAPIKey(APIKeyPrefix: string) { + // variables in local storage + let headscaleURL = localStorage.getItem('headscaleURL') || ''; + let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || ''; + + // endpoint url for editing users + let endpointURL = '/api/v1/apikey/expire'; + + await fetch(headscaleURL + endpointURL, { + method: 'POST', + headers: { + Accept: 'application/json', + Authorization: `Bearer ${headscaleAPIKey}` + }, + body: JSON.stringify({ + prefix: APIKeyPrefix + }) + }) + .then((response) => { + if (response.ok) { + } else { + return response.text().then((text) => { + throw JSON.parse(text).message; + }); + } + }) + .catch((error) => { + throw error; + }); + } + export async function updateTags(deviceID: string, tags: string[]): Promise { // variables in local storage let headscaleURL = localStorage.getItem('headscaleURL') || ''; diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index 4bd45e5..d954e3f 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -5,6 +5,7 @@ import { getAPIKeys } from '$lib/common/apiFunctions.svelte'; import { onMount } from 'svelte'; import ApiKeyTimeLeft from './ServerSettings/APIKeyTimeLeft.svelte'; +import RolloverApi from './ServerSettings/RolloverAPI.svelte'; // Server Settings let headscaleURL = $URLStore; @@ -23,18 +24,11 @@ }); } - function SaveServerSettings(): void { - if (serverSettingsForm.reportValidity()) { - $URLStore = headscaleURL; - $APIKeyStore = headscaleAPIKey; - } - } - function ClearServerSettings() { headscaleURL = ''; headscaleAPIKey = ''; - $URLStore = headscaleURL; - $APIKeyStore = headscaleAPIKey; + $URLStore = ''; + $APIKeyStore = ''; } onMount(() => { @@ -46,7 +40,7 @@

Server Settings

- +

URL for your headscale server instance

- + - +

Generate an API key for your headscale instance and place it here.

- -
- -
{#if apiStatus === 'succeeded'} diff --git a/src/lib/settings/ServerSettings/RolloverAPI.svelte b/src/lib/settings/ServerSettings/RolloverAPI.svelte new file mode 100644 index 0000000..f8b113a --- /dev/null +++ b/src/lib/settings/ServerSettings/RolloverAPI.svelte @@ -0,0 +1,50 @@ + + + From acff41daf44ff529fc65d881c7189c31192ab143 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 19:12:45 +1000 Subject: [PATCH 11/14] update server form to handle dynamic api key changes --- src/lib/settings/ServerSettings.svelte | 49 +++++++++++++++----------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index d954e3f..c939ffe 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -5,12 +5,9 @@ import { getAPIKeys } from '$lib/common/apiFunctions.svelte'; import { onMount } from 'svelte'; import ApiKeyTimeLeft from './ServerSettings/APIKeyTimeLeft.svelte'; -import RolloverApi from './ServerSettings/RolloverAPI.svelte'; + import RolloverApi from './ServerSettings/RolloverAPI.svelte'; // Server Settings - let headscaleURL = $URLStore; - let headscaleAPIKey = $APIKeyStore; - let serverSettingsForm: HTMLFormElement; let apiStatus = 'untested'; let apiKeyInputState = 'password'; @@ -25,10 +22,9 @@ import RolloverApi from './ServerSettings/RolloverAPI.svelte'; } function ClearServerSettings() { - headscaleURL = ''; - headscaleAPIKey = ''; $URLStore = ''; $APIKeyStore = ''; + apiStatus = 'untested'; } onMount(() => { @@ -37,7 +33,7 @@ import RolloverApi from './ServerSettings/RolloverAPI.svelte'; }); - +

Server Settings

@@ -45,28 +41,41 @@ import RolloverApi from './ServerSettings/RolloverAPI.svelte';
- - - +

Generate an API key for your headscale instance and place it here.

+ {#if apiStatus != 'succeeded'} + + {:else} + + {/if} {#if apiStatus === 'succeeded'} From 2ad12f5a9225f07cdeb0fe11dbeba416b8b3d4e8 Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 19:18:22 +1000 Subject: [PATCH 12/14] fix notification for time/date --- src/lib/settings/ServerSettings.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte index c939ffe..9d301c6 100644 --- a/src/lib/settings/ServerSettings.svelte +++ b/src/lib/settings/ServerSettings.svelte @@ -41,7 +41,7 @@

Generate an API key for your headscale instance and place it here.

{#if apiStatus != 'succeeded'} diff --git a/src/lib/settings/ServerSettings/RolloverAPI.svelte b/src/lib/settings/ServerSettings/RolloverAPI.svelte index f8b113a..fd77633 100644 --- a/src/lib/settings/ServerSettings/RolloverAPI.svelte +++ b/src/lib/settings/ServerSettings/RolloverAPI.svelte @@ -4,6 +4,7 @@ import { alertStore, APIKeyStore } from '$lib/common/stores'; let keyList = [new APIKey()]; let currentKey = new APIKey(); + export let apiStatus = ''; // get current API keys // Match to current key @@ -46,5 +47,5 @@ getAPIKeysAction(); }} class="btn btn-sm btn-secondary capitalize ml-4" - type="button">Rollover API KeyRollover API Key From ecce526964a427fca1e494f7e141be1e5c7ec64f Mon Sep 17 00:00:00 2001 From: Christopher Bisset Date: Sat, 13 Aug 2022 19:43:19 +1000 Subject: [PATCH 14/14] smoothed loading for settings page --- src/routes/settings.html.svelte | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/routes/settings.html.svelte b/src/routes/settings.html.svelte index 67f6cdb..d510bf3 100644 --- a/src/routes/settings.html.svelte +++ b/src/routes/settings.html.svelte @@ -12,19 +12,19 @@ onMount(async () => { // Display component frontend + await new Promise(r => setTimeout(r, 200)); componentLoaded = true; }); - {#if componentLoaded} -
- -
- -
-

Version

insert-version -
- {/if} +