warnings

1 files changed, 20 insertions, 0 deletions

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>