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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<script lang="ts">
import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
import PhEyeBold from "virtual:icons/ph/eye-bold";
import Left from "$comp/Left.svelte";
import { focus, post, warning } from "$lib/utils";
import { t } from "$lib/translations";
let { v = $bindable(), cancel } = $props();
let arrow = "<";
let loading = false;
const numPad = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "C", "0", "<"];
const handleInput = (e, n) => {
e.preventDefault();
e.stopPropagation();
v = (v || "").toString();
if (n === "C") return (v = "");
if (n === "<") return (v = v.length > 1 ? Math.floor(v / 10) : "");
if (v.length > 5) n = "";
if (parseInt(n) >= 0) v += n;
};
let validate = (e) => {
let k = e.key || e.code;
if (k === "Escape") cancel();
if (e.key.length <= 1 && !(e.metaKey || e.ctrlKey || e.altKey) && !(k >= "0" && k <= "9")) {
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
};
let hide = $state(true);
let toggle = (e) => {
e.preventDefault();
e.stopPropagation();
hide = !hide;
};
</script>
<label class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2">
{#if hide}
<input
onkeydown={validate}
use:focus
bind:value={v}
type="password"
class="clean text-center !text-5xl !w-96 block"
pattern="[0-9]+"
placeholder="_ _ _ _ _ _"
/>
{:else}
<input
onkeydown={validate}
use:focus
bind:value={v}
class="clean text-center !text-5xl !w-96 block"
type="text"
pattern="[0-9]+"
placeholder="_ _ _ _ _ _"
/>
{/if}
<button
type="button"
class="contents"
onclick={toggle}
aria-label={hide ? "Show PIN" : "Hide PIN"}
>
{#if hide}
<PhEyeSlashBold width="32" />
{:else}
<PhEyeBold width="32" />
{/if}
</button>
</label>
<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
{#each numPad as value}
{#if value === arrow}
<button type="button" class="btn" onclick={(e) => handleInput(e, value)}>
<Left />
</button>
{:else}
<button type="button" class="btn" onclick={(e) => handleInput(e, value)}>{value}</button>
{/if}
{/each}
</div>
|
