src/components/Pinpad.svelte



66740dea ^
38ba5cb6 ^

216a6002 ^

66740dea ^
216a6002 ^

66740dea ^
216a6002 ^

66740dea ^
216a6002 ^
66740dea ^
216a6002 ^


66740dea ^
216a6002 ^


66740dea ^
216a6002 ^
66740dea ^


216a6002 ^


77edd303 ^
216a6002 ^


b419ccff ^

216a6002 ^


66740dea ^
216a6002 ^


b419ccff ^

216a6002 ^


66740dea ^

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>
  import Left from "$comp/Left.svelte";
  import Icon from "$comp/Icon.svelte";
  import { focus, post, warning } from "$lib/utils";
  import { t } from "$lib/translations";

  export let v;
  export let cancel;

  let arrow = "<";
  let loading = false;

  const numPad = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "C", "0", "<"];

  const handleInput = (n) => {
    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 = true;
</script>

<div class="flex justify-center items-center">
  <div class="space-y-5">
    <div class="text-5xl md:text-6xl font-semibold relative w-[300px]">
      {#if hide}
        <input
          on:keydown={validate}
          use:focus
          bind:value={v}
          type="password"
          class="outline-none border-0 text-center py-0"
          pattern="[0-9]+"
        />
      {:else}
        <input
          on:keydown={validate}
          use:focus
          bind:value={v}
          class="outline-none border-0 text-center py-0"
          type="text"
          pattern="[0-9]+"
        />
      {/if}
      <button
        type="button"
        on:click={() => (hide = !hide)}
        class="absolute -right-5 top-5"
      >
        <Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
      </button>
    </div>

    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
      {#each numPad as value}
        {#if value === arrow}
          <button
            type="button"
            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
            on:click={() => handleInput(value)}
          >
            <Left />
          </button>
        {:else}
          <button
            type="button"
            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
            on:click={() => handleInput(value)}>{value}</button
          >
        {/if}
      {/each}
    </div>
  </div>
</div>