From da3e6f679cc3fd50ab123b1df99096261c04c219 Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Fri, 12 Aug 2022 16:14:25 +1000
Subject: [PATCH] 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}
 	</label>
 	<div class="flex relative">
-		<input bind:value={headscaleAPIKey} minlength="54" maxlength="54" class="form-input" type="password" required placeholder="******************" />
-		<!-- eye off -->
-		<button type="button" class="absolute right-40">
+		<input bind:value={headscaleAPIKey} {...{ type: apiKeyInputState }} minlength="54" maxlength="54" class="form-input" required placeholder="******************" />
+		<button type="button" class="absolute right-40" on:click={() => {apiKeyInputState == 'text' ? apiKeyInputState = 'password' : apiKeyInputState = 'text'}}>
+			{#if apiKeyInputState == 'password'}
+			<!-- eye off -->
 			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 my-1.5" 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="h-6 w-6 my-1.5" 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>
 		<button class="btn btn-sm btn-secondary capitalize ml-4" type="button">Rollover API Key</button>
 	</div>