diff options
| author | Adam Soltys <[email protected]> | 2023-02-06 16:40:14 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-02-06 16:40:14 -0800 |
| commit | 362674fa4055fdd95c71fd7167891cf569a6cc2e (patch) | |
| tree | f0fba3315e9bd585f819ca946f3dfe3d4b98ddf3 /src/components/Pin.svelte | |
| parent | 7f864350d156ade70675128be9838f9183d1d7aa (diff) | |
| download | coinos-ui-362674fa4055fdd95c71fd7167891cf569a6cc2e.tar.gz coinos-ui-362674fa4055fdd95c71fd7167891cf569a6cc2e.zip | |
new pinpad component
Diffstat (limited to 'src/components/Pin.svelte')
| -rw-r--r-- | src/components/Pin.svelte | 26 |
1 files changed, 15 insertions, 11 deletions
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte index 7225ac37..0db831ff 100644 --- a/src/components/Pin.svelte +++ b/src/components/Pin.svelte @@ -1,24 +1,28 @@ <script> + import { t } from '$lib/translations'; import { focus } from '$lib/utils'; - import { pin } from '$lib/store'; + import { Pinpad } from '$comp'; - let pinCode = ''; - let pinInput; + export let value = ''; + export let title = $t('user.settings.verifyPIN'); + export let cancel = () => (pin = ''); - let cancel = () => ($pin = '000000'); + let pin = ''; - $: pinCode.length > 5 && ($pin = pinCode); + $: update(value); + let update = (v) => (pin = v) || console.log('updated', v, pin); + + $: pin.toString().length > 5 && (value = pin.toString()); </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> - <input bind:value={pinCode} use:focus /> +<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> + <div class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"> + <h1 class="text-center text-2xl font-semibold">{title}</h1> + <Pinpad bind:v={pin} {cancel} /> <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" - on:click={cancel} + on:click|preventDefault={cancel} > <div class="my-auto">Cancel</div> </button> |