pin code

2 files changed, 45 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>
diff --git a/src/components/index.js b/src/components/index.js
index d0af4c38..c3a5000c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Pin } from './Pin.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Lock } from './Lock.svelte';
 export { default as Calendar } from './Calendar.svelte';