pin code refactor

8 files changed, 88 insertions, 62 deletions

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index cc923b7d..fddaae3e 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,21 +1,34 @@
 <script>
+	import { Pin } from '$comp';
 	import { f, s, sat, sats } from '$lib/utils';
-	import { animatedRate } from '$lib/store';
+	import { animatedRate, pin } from '$lib/store';
 	import { t } from '$lib/translations';
 
+	let show;
 	export let user;
 </script>
 
+{#if show && user.haspin && $pin?.length !== 6}
+	<Pin />
+{/if}
+
 <div class="space-y-2">
-	<div class="text-5xl font-bold tabular-nums">
-		{#if isNaN($animatedRate)}
-			<div class="text-gray-200">&mdash;</div>
-		{:else}
-			{f((user.balance * $animatedRate) / sats, user.currency)}
-		{/if}
-	</div>
+	{#if user.haspin && !$pin}
+		<button
+			class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
+			on:click={() => (show = true)}>Show Balance</button
+		>
+	{:else}
+		<div class="text-5xl font-bold tabular-nums">
+			{#if isNaN($animatedRate)}
+				<div class="text-gray-200">&mdash;</div>
+			{:else}
+				{f((user.balance * $animatedRate) / sats, user.currency)}
+			{/if}
+		</div>
 
-	<div class="text-secondary text-2xl">
-		⚡️{s(user.balance)}
-	</div>
+		<div class="text-secondary text-2xl">
+			⚡️{s(user.balance)}
+		</div>
+	{/if}
 </div>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 1d7ed65b..40a53b8b 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,31 +1,59 @@
 <script>
 	import { t } from '$lib/translations';
-	import { focus } from '$lib/utils';
+	import { post, success, fail, focus } from '$lib/utils';
 	import { Pinpad } from '$comp';
+	import { pin } from '$lib/store';
+	import { onMount } from 'svelte';
 
 	export let value = '';
 	export let title = $t('user.settings.verifyPIN');
-	export let cancel = () => (pin = '');
+	export let cancel = () => (p = '');
+	export let persist = true;
+	export let notify = true;
 
-	let pin = '';
+	let p = '';
 
 	$: update(value);
-	let update = (v) => (pin = v);
+	let update = (value) => (p = value);
 
-	$: pin.toString().length > 5 && (value = pin.toString());
+	$: p.toString().length > 5 && (value = p.toString());
+
+	let loaded;
+	onMount(() => setTimeout(() => (loaded = true), 500));
+
+	$: loaded && checkPin(p);
+	let checkPin = async (p) => {
+		if (p?.length !== 6) return;
+		let result;
+		try {
+			result = await post('/pin', { pin: p });
+		} catch (e) {
+			console.log('PIN ERR', e);
+		}
+
+		if (result) {
+			if (notify) success('Pin confirmed');
+			if (persist) $pin = p;
+		} else {
+			fail('Invalid pin');
+			value = '';
+		}
+	};
 </script>
 
-<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
-				class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-				on:click|preventDefault={cancel}
-			>
-				<div class="my-auto">Cancel</div>
-			</button>
+{#if loaded}
+	<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={p} {cancel} />
+			<div class="w-full flex">
+				<button
+					class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+					on:click|preventDefault={cancel}
+				>
+					<div class="my-auto">Cancel</div>
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
+{/if}
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index bf3778f7..f55dc40d 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,7 +1,6 @@
 <script>
 	import { Left, Icon } from '$comp';
-	import { pin, selectedRate } from '$lib/store';
-	import { f, s, focus, post, warning, sat, sats } from '$lib/utils';
+	import { focus, post, warning } from '$lib/utils';
 	import { t } from '$lib/translations';
 
 	export let v;
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 997d8b4a..1b212abe 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -112,13 +112,10 @@
 
 		loading = false;
 	}
-
-	let loaded;
-	onMount(() => setTimeout(() => (loaded = true), 50));
 </script>
 
-{#if loaded && user.haspin && $pin?.length !== 6}
-	<Pin bind:value={$pin} />
+{#if user.haspin && $pin?.length !== 6}
+	<Pin />
 {/if}
 
 <form
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index eb3b405e..01047344 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -148,9 +148,9 @@
 		{$t('user.settings.securityPINDescription')}
 	</p>
 	{#if verifying}
-		<Pin bind:value={verify} {cancel} />
+		<Pin bind:value={verify} {cancel} notify={false} />
 	{:else if settingPin}
-		<Pin bind:value={pin} title={$t('user.settings.setPIN')} {cancel} />
+		<Pin bind:value={pin} title={$t('user.settings.setPIN')} {cancel} notify={false} />
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
 			><Icon icon="lock" style="mr-1" />
@@ -192,7 +192,7 @@
 	{/if}
 
 	{#if confirming2fa || disabling2fa}
-		<Pin bind:value={token} title="Enter 2FA Code" {cancel} />
+		<Pin bind:value={token} title="Enter 2FA Code" {cancel} persist={false} />
 	{/if}
 </div>
 
diff --git a/src/routes/(app)/login/+page.svelte b/src/routes/(app)/login/+page.svelte
index 75998cd0..eb3ae26b 100644
--- a/src/routes/(app)/login/+page.svelte
+++ b/src/routes/(app)/login/+page.svelte
@@ -1,5 +1,13 @@
 <script>
 	import { RegisterOrLogin } from '$comp';
+	import { onMount } from 'svelte';
+	import { pin } from '$lib/store';
+
+	onMount(() => {
+		$pin = undefined;
+		localStorage.clear();
+		sessionStorage.clear();
+	});
 
 	export let form;
 </script>
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 020efdbb..d3cc0b1b 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -113,9 +113,9 @@
 	{/if}
 
 	{#if user.username.toLowerCase() === 'laughingbean'}
-	<button
-		class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
-		on:click={print}>Print Receipt</button
-	>
+		<button
+			class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
+			on:click={print}>Print Receipt</button
+		>
 	{/if}
 </div>
diff --git a/src/routes/(app)/send/+layout.svelte b/src/routes/(app)/send/+layout.svelte
index e5c9c051..6192cd40 100644
--- a/src/routes/(app)/send/+layout.svelte
+++ b/src/routes/(app)/send/+layout.svelte
@@ -8,30 +8,11 @@
 
 	export let data;
 
-	let loaded;
 	let { user } = data;
-
-	onMount(() => setTimeout(() => (loaded = true), 500));
 	let cancel = () => goto(`/${user.username}`);
-
-	$: browser && loaded && checkPin($pin);
-	let checkPin = async (p) => {
-		if (p?.length !== 6 || p === JSON.parse(sessionStorage.getItem('pin'))) return;
-		let result;
-		try {
-			result = await post('/pin', { pin: p });
-		} catch (e) {}
-
-		if (result) {
-			success('Pin confirmed');
-		} else {
-			fail('Invalid pin');
-			$pin = '';
-		}
-	};
 </script>
 
-{#if loaded && user.haspin && (!$pin || $pin?.length !== 6)}
+{#if user.haspin && (!$pin || $pin?.length !== 6)}
 	<Pin bind:value={$pin} {cancel} />
 {/if}