diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Pin.svelte | 20 | ||||
| -rw-r--r-- | src/routes/[username]/settings/+page.svelte | 6 |
2 files changed, 9 insertions, 17 deletions
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte index 854b9de0..288a7928 100644 --- a/src/components/Pin.svelte +++ b/src/components/Pin.svelte @@ -1,28 +1,16 @@ <script> - import { tick } from 'svelte'; import { pin } from '$lib/store'; - import { Pincode, PincodeInput } from 'svelte-pincode'; - let pinCode = []; + let pinCode = ''; let pinInput; - $: pinCode && pinInput && tick().then(pinInput && pinInput.focusNextEmptyInput()); - $: pinCode.length > 5 && ($pin = pinCode.join('')); + $: console.log(pinCode.length); + $: pinCode.length > 5 && ($pin = pinCode); </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> - + <input bind:value={pinCode} /> <div class="w-full flex"> <button type="submit" diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte index 7bd4ddcc..1451846b 100644 --- a/src/routes/[username]/settings/+page.svelte +++ b/src/routes/[username]/settings/+page.svelte @@ -1,4 +1,5 @@ <script> + import { onMount } from "svelte"; import { fly } from 'svelte/transition'; import { enhance } from '$app/forms'; import Account from './_account.svelte'; @@ -55,9 +56,12 @@ loading = false; }; + +let loaded; + onMount(() => setTimeout(() => (loaded = true), 50)); </script> -{#if user.haspin && $pin?.length !== 6} +{#if loaded && user.haspin && $pin?.length !== 6} <Pin /> {/if} |