From dd49cb5e8754ee82fb2370b375db6b46a1eefd52 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 26 Nov 2024 20:54:49 -0800
Subject: warnings

---
 src/components/PasswordInput.svelte | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/PasswordInput.svelte

(limited to 'src/components/PasswordInput.svelte')

diff --git a/src/components/PasswordInput.svelte b/src/components/PasswordInput.svelte
new file mode 100644
index 00000000..5885304b
--- /dev/null
+++ b/src/components/PasswordInput.svelte
@@ -0,0 +1,20 @@
+<script>
+  let { value = $bindable() } = $props();
+  let toggle = (e) => (show = !show);
+  let show = $state(false);
+  let icon = $derived(show ? "ph:eye-bold" : "ph:eye-slash-bold");
+</script>
+
+<label
+  for="password"
+  class="input flex items-center justify-center gap-2 w-full"
+>
+  {#if show}
+    <input name="password" type="text" bind:value class="clean" />
+  {:else}
+    <input name="password" type="password" bind:value class="clean" />
+  {/if}
+  <button type="button" aria-label="Toggle" onclick={toggle} class="contents">
+    <iconify-icon {icon} width="32"></iconify-icon>
+  </button>
+</label>
-- 
cgit v1.2.3