blob: bac001348650d885cedac6656b164648a296735f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
let { value = $bindable(), focus = () => {} } = $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" use:focus />
{/if}
<button type="button" aria-label="Toggle" onclick={toggle} class="contents">
<iconify-icon {icon} width="32"></iconify-icon>
</button>
</label>
|
