diff options
| author | secondl1ght <[email protected]> | 2022-10-25 18:01:56 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-10-25 18:01:56 -0600 |
| commit | a67b375473f1f40e1c0febfac16d7e36e0d72561 (patch) | |
| tree | 10a5fa750f2ccb53cff3510ab8fbbce108a35eb6 /src/components/Pin.svelte | |
| parent | aa6debcd83c0b4067e0f8ce9a11d9c9ac02476ad (diff) | |
| parent | 5a5ea3ccc327ff52fb1c313998d90e4bfefea90a (diff) | |
| download | coinos-ui-a67b375473f1f40e1c0febfac16d7e36e0d72561.tar.gz coinos-ui-a67b375473f1f40e1c0febfac16d7e36e0d72561.zip | |
Merge branch 'master' of github.com:coinos/coinos-ui-v2
Diffstat (limited to 'src/components/Pin.svelte')
| -rw-r--r-- | src/components/Pin.svelte | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte new file mode 100644 index 00000000..8f33a7f3 --- /dev/null +++ b/src/components/Pin.svelte @@ -0,0 +1,35 @@ +<script> + import { tick } from 'svelte'; + import { pin } from '$lib/store'; + import { Pincode, PincodeInput } from 'svelte-pincode'; + let pinCode = []; + let pinInput; + + $: pinInput && tick().then(pinInput && pinInput.focusFirstInput); + $: pinCode.length > 5 && ($pin = pinCode.join('')); +</script> + +<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"> + <div class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"> + <h1 class="text-center text-2xl font-semibold">Please enter your PIN</h1> + <div class="text-center"> + <Pincode bind:code={pinCode} bind:this={pinInput}> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + </Pincode> + </div> + + <div class="w-full flex"> + <button + type="submit" + class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto" + > + <div class="my-auto">Cancel</div> + </button> + </div> + </div> +</div> |