Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-08-04 13:42:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

set api key visibility

Browse source
This commit is contained in:
Chris Bisset 2025-03-15 05:26:57 +00:00
parent 92cf68cdb1
commit ced918c7fb
2 changed files with 19 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ export class AppSettingsObject {
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
apiSecretHidden = true // for hiding or showing the API key
public constructor(init?: Partial<AppSettingsObject>) {
Object.assign(this, init);

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

@ -15,7 +15,21 @@
<span class="label-text-alt">URL for your headscale server instance (does not need populating if it's on the same subdomain)</span>
</label>
<label class="mb-2 block font-bold text-secondary" for="headscaleKey"> Headscale API Key </label>
<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type="password" required placeholder="******************" />
<div class="relative flex">
<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type={appSettings.apiSecretHidden ? "password" : "text"} required placeholder="******************" />
<button class="ml-2" onclick={() => {appSettings.apiSecretHidden = !appSettings.apiSecretHidden }}
>{#if appSettings.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="label">
<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
</label>
@ -27,9 +41,9 @@
<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>
<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>