🧼 Updates password input component

app/src/lib/components/InputPassword.svelte

@@ -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>

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>

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';

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';

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';
 

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';

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';