diff options
| author | Adam Soltys <[email protected]> | 2022-10-24 22:26:13 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-10-24 22:26:13 -0700 |
| commit | 0e17224e71296cf6a0336c5a2e7340a3b63cd2dc (patch) | |
| tree | 3bb9624a9635c9fa0bec168c0efb011e55dfda93 /src/components/Pin.svelte | |
| parent | a67f9cbc9f609aa56e445fe8f422ba3be14e9345 (diff) | |
| download | coinos-ui-0e17224e71296cf6a0336c5a2e7340a3b63cd2dc.tar.gz coinos-ui-0e17224e71296cf6a0336c5a2e7340a3b63cd2dc.zip | |
pin code
Diffstat (limited to 'src/components/Pin.svelte')
| -rw-r--r-- | src/components/Pin.svelte | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte new file mode 100644 index 00000000..3e5769b0 --- /dev/null +++ b/src/components/Pin.svelte @@ -0,0 +1,44 @@ +<script> + import { tick } from "svelte"; + import { pin } from '$lib/store'; + import { Pincode, PincodeInput } from 'svelte-pincode'; + let complete = () => {}; + let pinCode = []; + let pinInput; + + let submit, loading; + + $: pinInput && tick().then(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:complete bind:code={pinCode} bind:this={pinInput}> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + </Pincode> + </div> + + <div class="w-full flex"> + <button + bind:this={submit} + type="submit" + class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto" + class:bg-black={loading} + > + {#if loading} + <Spinner /> + {:else} + <div class="my-auto">Cancel</div> + {/if} + </button> + </div> + </div> +</div> |