From d4c40a2a5363e6fc5537d66ce7b226fbcda44488 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Mon, 19 Aug 2024 21:09:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=BC=20Updates=20password=20input=20com?=
 =?UTF-8?q?ponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/InputPassword.svelte   | 60 -------------------
 .../lib/components/input/InputPassword.svelte | 23 +++++++
 app/src/lib/components/login.svelte           |  2 +-
 app/src/routes/user/+page.svelte              |  2 +-
 app/src/routes/user/EditUser.svelte           |  2 +-
 app/src/routes/wifi/ap/Accesspoint.svelte     |  2 +-
 app/src/routes/wifi/sta/Wifi.svelte           |  2 +-
 7 files changed, 28 insertions(+), 65 deletions(-)
 delete mode 100644 app/src/lib/components/InputPassword.svelte
 create mode 100644 app/src/lib/components/input/InputPassword.svelte

diff --git a/app/src/lib/components/InputPassword.svelte b/app/src/lib/components/InputPassword.svelte
deleted file mode 100644
index 11b4f72..0000000
--- a/app/src/lib/components/InputPassword.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	let show = false;
-	$: type = show ? 'text' : 'password';
-
-	export let value = '';
-	export let id = '';
-	function handleInput(e: any) {
-		value = e.target.value;
-	}
-</script>
-
-<div class="relative">
-	<input {type} class="input input-bordered w-full" {value} on:input={handleInput} {id} />
-	<div class="absolute inset-y-0 right-0 flex items-center pr-1">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}"
-			on:click={() => (show = false)}
-			width="40"
-			height="40"
-			viewBox="0 0 24 24"
-			stroke-width="2"
-			stroke="currentColor"
-			fill="none"
-            role="button"
-            tabindex="0"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-			<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
-			<path
-				d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
-			/>
-			<path d="M3 3l18 18" />
-		</svg>
-
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}"
-			on:click={() => (show = true)}
-			width="40"
-			height="40"
-			viewBox="0 0 24 24"
-			stroke-width="2"
-			stroke="currentColor"
-			fill="none"
-            role="button"
-            tabindex="0"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-			<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-			<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-		</svg>
-	</div>
-</div>
diff --git a/app/src/lib/components/input/InputPassword.svelte b/app/src/lib/components/input/InputPassword.svelte
new file mode 100644
index 0000000..26c73f5
--- /dev/null
+++ b/app/src/lib/components/input/InputPassword.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import MdiEyeOutline from '~icons/mdi/eye-outline';
+    import MdiEyeOffOutline from '~icons/mdi/eye-off-outline';
+
+	export let show = false;
+	export let value = '';
+	export let id = '';
+    
+	$: type = show ? 'text' : 'password';
+
+	const handleInput = (e: any) => value = e.target.value
+
+    const togglePassword = () => show = !show
+</script>
+
+<label class="input input-bordered flex items-center gap-2">
+    <input {type} class="grow" {value} on:input={handleInput} {id} />
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div on:click={togglePassword} role="button" tabindex="0">
+        <MdiEyeOffOutline class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}" />
+        <MdiEyeOutline class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}" />
+    </div>
+</label>
\ No newline at end of file
diff --git a/app/src/lib/components/login.svelte b/app/src/lib/components/login.svelte
index 741730a..d94f1b7 100644
--- a/app/src/lib/components/login.svelte
+++ b/app/src/lib/components/login.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import logo from '$lib/assets/logo512.png';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import { user } from '$lib/stores/user';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { fade, fly } from 'svelte/transition';
diff --git a/app/src/routes/user/+page.svelte b/app/src/routes/user/+page.svelte
index cc4ac12..b5c2a0d 100644
--- a/app/src/routes/user/+page.svelte
+++ b/app/src/routes/user/+page.svelte
@@ -7,7 +7,7 @@
 	import type { userProfile } from '$lib/stores/user';
 	import { page } from '$app/stores';
 	import { notifications } from '$lib/components/toasts/notifications';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import EditUser from './EditUser.svelte';
diff --git a/app/src/routes/user/EditUser.svelte b/app/src/routes/user/EditUser.svelte
index 50b00cb..a6393cf 100644
--- a/app/src/routes/user/EditUser.svelte
+++ b/app/src/routes/user/EditUser.svelte
@@ -2,7 +2,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { closeModal } from 'svelte-modals';
 	import { fly } from 'svelte/transition';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import Cancel from '~icons/tabler/x';
 	import Save from '~icons/tabler/device-floppy';
 
diff --git a/app/src/routes/wifi/ap/Accesspoint.svelte b/app/src/routes/wifi/ap/Accesspoint.svelte
index c6ae730..fc0e116 100644
--- a/app/src/routes/wifi/ap/Accesspoint.svelte
+++ b/app/src/routes/wifi/ap/Accesspoint.svelte
@@ -2,7 +2,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import { user } from '$lib/stores/user';
 	import { page } from '$app/stores';
diff --git a/app/src/routes/wifi/sta/Wifi.svelte b/app/src/routes/wifi/sta/Wifi.svelte
index 2959a5e..8b5b07d 100644
--- a/app/src/routes/wifi/sta/Wifi.svelte
+++ b/app/src/routes/wifi/sta/Wifi.svelte
@@ -10,7 +10,7 @@
 	import { notifications } from '$lib/components/toasts/notifications';
 	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import ScanNetworks from './Scan.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';