mirror of
https://github.com/gurucomputing/headscale-ui.git
synced 2026-07-29 02:30:24 +00:00
redesigned settings menu
This commit is contained in:
Chris Bisset
parent
9e7ac0904b
commit
93bf3849bb
2 changed files with 55 additions and 52 deletions
|
|
@ -16,58 +16,61 @@
|
|||
</script>
|
||||
|
||||
<div class="form-control">
|
||||
<h1 class="bold mb-4 text-xl text-primary">Server Settings</h1>
|
||||
|
||||
<h1 class="bold text-primary mb-4 text-xl">Server Settings</h1>
|
||||
<form id="server-settings" onsubmit={getAPIKeys}>
|
||||
<label class="mb-2 block font-bold text-secondary" for="headscaleURL"> Headscale URL </label>
|
||||
<input id="headscaleURL" bind:value={persistentAppSettings.headscaleURL} class="input input-sm input-bordered w-full" type="url" placeholder="https://hs.yourdomain.com.au" />
|
||||
<label for="headscaleURL" class="label">
|
||||
<span class="label-text-alt">URL for your headscale server instance (does not need populating if it's on the same subdomain)</span>
|
||||
</label>
|
||||
<div class="relative flex">
|
||||
<label class="mb-2 block font-bold text-secondary" for="headscaleKey"> Headscale API Key </label>
|
||||
{#if appSettings.apiKeyExpiration != undefined}
|
||||
<button type="button" disabled={rotateButtonDisabled} onclick={rotateAPIKeyClick} class="tooltip" data-tip="{appSettings.apiKeyExpiration} days left. Click to rotate key" aria-label="check time left"
|
||||
><svg data-slot="icon" fill="none" class="-my-3 ml-2 h-5 w-5 {appSettings.apiKeyExpiration >= 30 ? "stroke-success" : "stroke-error"}" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path>
|
||||
</svg></button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<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
|
||||
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>
|
||||
{:else}
|
||||
<!-- eye on -->
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs min-w-full border p-4">
|
||||
<legend class="fieldset-legend">API Settings</legend>
|
||||
|
||||
<label for="headscaleURL" class="fieldset-legend">Headscale URL</label>
|
||||
<input id="headscaleURL" bind:value={persistentAppSettings.headscaleURL} type="url" class="input w-full" placeholder="https://hs.yourdomain.com.au" />
|
||||
<label for="headscaleURL" class="fieldset-label">URL of your headscale instance (does not need to be populated if it's on the same subdomain)</label>
|
||||
|
||||
<div class="relative flex">
|
||||
<label class="fieldset-legend" for="headscaleKey"> Headscale API Key </label>
|
||||
{#if appSettings.apiKeyExpiration != undefined}
|
||||
<button type="button" disabled={rotateButtonDisabled} onclick={rotateAPIKeyClick} class="tooltip" data-tip="{appSettings.apiKeyExpiration} days left. Click to rotate key" aria-label="check time left"
|
||||
><svg data-slot="icon" fill="none" class="ml-2 h-4 w-4 {appSettings.apiKeyExpiration >= 30 ? 'stroke-success' : 'stroke-error'}" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path>
|
||||
</svg></button
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<label for="headscaleKey" class="label">
|
||||
<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="relative flex">
|
||||
<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input 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>
|
||||
{:else}
|
||||
<!-- eye on -->
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<label for="headscaleKey" class="fieldset-label">Generate an API key for your headscale instance and place it here.</label>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button form="server-settings" class="btn btn-dash {appSettings.apiTested ? "btn-success" : "btn-error"} mt-4 w-48"
|
||||
>Test API
|
||||
{#if appSettings.apiTested}
|
||||
<svg in:fly|global={{ x: 10, duration: 600 }} xmlns="http://www.w3.org/2000/svg" class="stroke-success inline h-6 w-6 fill-none" 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 in:fly|global={{ x: 10, duration: 600 }} data-slot="icon" fill="none" stroke-width="1.5" class="stroke-error inline h-6 w-6 fill-none" 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}
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<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 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}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
appSettings.sidebarDrawerOpen = false;
|
||||
</script>
|
||||
|
||||
<div class="max-w-full lg:max-w-96">
|
||||
<div class="max-w-128">
|
||||
<ServerSettings></ServerSettings>
|
||||
<ThemeSettings></ThemeSettings>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue