diff options
Diffstat (limited to 'src/components/PasswordInput.svelte')
| -rw-r--r-- | src/components/PasswordInput.svelte | 20 |
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> |