mirror of
https://github.com/gurucomputing/headscale-ui.git
synced 2026-07-21 10:29:15 +00:00
refactor: fixed store use for booleans
This commit is contained in:
Christopher Bisset
parent
53df2ab7bc
commit
04c2c5819c
6 changed files with 90 additions and 30 deletions
|
|
@ -13,11 +13,11 @@
|
|||
headscaleURLStore.set(localStorage.getItem('headscaleURL') || '');
|
||||
headscaleAPIKeyStore.set(localStorage.getItem('headscaleAPIKey') || '');
|
||||
|
||||
preAuthHideStore.set(localStorage.getItem('headscalePreAuthHide') || 'false');
|
||||
preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
|
||||
|
||||
// subscribe to store's state and update the local storage where needed
|
||||
headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
|
||||
preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val));
|
||||
preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
|
||||
|
||||
headscaleURLStore.subscribe((val) => localStorage.setItem('headscaleURL', val));
|
||||
headscaleAPIKeyStore.subscribe((val) => localStorage.setItem('headscaleAPIKey', val));
|
||||
|
|
|
|||
|
|
@ -207,6 +207,38 @@
|
|||
return headscalePreAuthKey;
|
||||
}
|
||||
|
||||
export async function newPreAuthKey(userName: string): Promise<any> {
|
||||
// variables in local storage
|
||||
let headscaleURL = localStorage.getItem('headscaleURL') || '';
|
||||
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
|
||||
|
||||
// endpoint url for editing users
|
||||
let endpointURL = '/api/v1/preauthkey';
|
||||
|
||||
await fetch(headscaleURL + endpointURL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
Authorization: `Bearer ${headscaleAPIKey}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
namespace: userName
|
||||
})
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response;
|
||||
} else {
|
||||
return response.text().then((text) => {
|
||||
throw JSON.parse(text).message;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export async function newDevice(key: string, userName: string): Promise<any> {
|
||||
// variables in local storage
|
||||
let headscaleURL = localStorage.getItem('headscaleURL') || '';
|
||||
|
|
@ -264,4 +296,6 @@
|
|||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const headscaleThemeStore = writable('');
|
|||
export const headscaleURLStore = writable('');
|
||||
export const headscaleAPIKeyStore = writable('');
|
||||
// stores preauth key preference
|
||||
export const preAuthHideStore = writable('');
|
||||
export const preAuthHideStore = writable(false);
|
||||
// stores user and device data
|
||||
export const headscaleUserStore = writable([new User()]);
|
||||
export const headscaleDeviceStore = writable([new Device()]);
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { getPreauthKeys } from '$lib/common/apiFunctions.svelte';
|
||||
import { getPreauthKeys, newPreAuthKey } from '$lib/common/apiFunctions.svelte';
|
||||
import { PreAuthKey, User } from '$lib/common/classes';
|
||||
import { alertStore, preAuthHideStore } from '$lib/common/stores';
|
||||
import NewPreAuthKey from './PreAuthKeys/NewPreAuthKey.svelte';
|
||||
|
||||
// function for refreshing users from parent
|
||||
export let user = new User();
|
||||
let keyList = [new PreAuthKey()];
|
||||
let preAuthHide = ($preAuthHideStore == 'true');
|
||||
let newPreAuthKeyShow = false;
|
||||
|
||||
// If the key hasn't expired or key hasn't been used, flag as green, otherwise flag as red
|
||||
function testExpiry(keyExpiry: string, keyUsed: boolean): string {
|
||||
if (new Date(keyExpiry).getTime() > new Date().getTime()) {
|
||||
if (!keyUsed) {
|
||||
return 'text-success';
|
||||
}
|
||||
}
|
||||
return 'text-error';
|
||||
function NewPreAuthKeyAction() {
|
||||
newPreAuthKey(user.name)
|
||||
.then(() => {
|
||||
getPreauthKeysAction();
|
||||
})
|
||||
.catch((error) => {
|
||||
$alertStore = error;
|
||||
});
|
||||
}
|
||||
|
||||
function getPreauthKeysAction() {
|
||||
|
|
@ -34,23 +35,45 @@
|
|||
<div>
|
||||
Preauth Keys <button on:click={getPreauthKeysAction} class="ml-2">
|
||||
<!-- refresh icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg></button
|
||||
>
|
||||
</div>
|
||||
<div class="border rounded p-1 -mx-2 w-fit">
|
||||
<input type="checkbox" bind:checked="{preAuthHide}" on:change="{() => {preAuthHide ? $preAuthHideStore = 'true': $preAuthHideStore = 'false'}}" class="checkbox checkbox-xs text-base-content" /><span
|
||||
<button
|
||||
on:click={() => {
|
||||
$preAuthHideStore == 'true' ? $preAuthHideStore = 'false' : $preAuthHideStore = 'true';
|
||||
preAuthHide = ($preAuthHideStore == 'true');
|
||||
newPreAuthKeyShow = !newPreAuthKeyShow;
|
||||
}}
|
||||
>
|
||||
{#if !newPreAuthKeyShow}
|
||||
<!-- plus icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
|
||||
</svg>
|
||||
<!-- minus icon -->
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="border rounded p-1 -mx-2 mt-2 w-fit">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={($preAuthHideStore)}
|
||||
class="checkbox checkbox-xs text-base-content"
|
||||
/><span
|
||||
on:click={() => {
|
||||
$preAuthHideStore = !$preAuthHideStore
|
||||
}}
|
||||
class="font-normal ml-2">Hide Expired/Used Keys</span
|
||||
>
|
||||
</div>
|
||||
<!-- plus icon -->
|
||||
</th>
|
||||
<td>
|
||||
{#if newPreAuthKeyShow}
|
||||
<NewPreAuthKey />
|
||||
{/if}
|
||||
<table class="table table-compact w-full">
|
||||
<tbody>
|
||||
{#each keyList as key}
|
||||
|
|
@ -58,17 +81,17 @@
|
|||
<tr><td>Refresh to see contents</td></tr>
|
||||
{:else}
|
||||
<!-- hide if key is expired or used (and not reusable) and checkbox is checked -->
|
||||
<tr class:hidden={preAuthHide && ((key.used && !key.reusable) || new Date(key.expiration).getTime() < new Date().getTime())}>
|
||||
<tr class:hidden={$preAuthHideStore && ((key.used && !key.reusable) || new Date(key.expiration).getTime() < new Date().getTime())}>
|
||||
<th>{key.id}</th>
|
||||
<td
|
||||
><code class="border p-1 rounded">{key.key}</code>
|
||||
<div class="tooltip" data-tip="{new Date(key.expiration).toLocaleString()}">
|
||||
{#if new Date(key.expiration).getTime() > new Date().getTime()}
|
||||
<div class="btn btn-xs capitalize bg-success text-success-content mx-1">active</div>
|
||||
{:else}
|
||||
<div class="btn btn-xs capitalize bg-error text-error-content mx-1">expired</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="tooltip" data-tip={new Date(key.expiration).toLocaleString()}>
|
||||
{#if new Date(key.expiration).getTime() > new Date().getTime()}
|
||||
<div class="btn btn-xs capitalize bg-success text-success-content mx-1">active</div>
|
||||
{:else}
|
||||
<div class="btn btn-xs capitalize bg-error text-error-content mx-1">expired</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !key.used}
|
||||
<div class="btn btn-xs capitalize bg-primary text-primary-content mx-1">unused</div>
|
||||
{:else}
|
||||
|
|
@ -80,9 +103,11 @@
|
|||
</td>
|
||||
<td>
|
||||
<!-- trash symbol -->
|
||||
<button class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<button class="mr-2"
|
||||
><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg></button>
|
||||
</svg></button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
|
|
|||
1
src/lib/index/UserCard/PreAuthKeys/NewPreAuthKey.svelte
Normal file
1
src/lib/index/UserCard/PreAuthKeys/NewPreAuthKey.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<div class=card-pending>test</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue