blob: 8901fa273413a1809e4a645aa49077fdfa0c177b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script lang="ts">
import PhEyeBold from "virtual:icons/ph/eye-bold";
import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
let {
name = $bindable("password"),
show = $bindable(),
value = $bindable(),
focus = () => {},
placeholder = undefined,
} = $props();
let toggle = (e) => {
e?.preventDefault();
show = !show;
};
</script>
<label for="password" class="input flex items-center justify-center gap-2 w-full">
{#if show}
<input {name} type="text" bind:value class="clean" {placeholder} />
{:else}
<input {name} type="password" bind:value class="clean" use:focus {placeholder} />
{/if}
<button type="button" aria-label="Toggle" onclick={toggle} class="contents">
{#if show}
<PhEyeBold width="32" />
{:else}
<PhEyeSlashBold width="32" />
{/if}
</button>
</label>
|
