From 0e17224e71296cf6a0336c5a2e7340a3b63cd2dc Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 24 Oct 2022 22:26:13 -0700
Subject: pin code

---
 src/components/Pin.svelte                       | 44 +++++++++++++++++++++++++
 src/components/index.js                         |  1 +
 src/lib/store.js                                |  1 +
 src/locales/en.json                             |  2 +-
 src/locales/es.json                             |  2 +-
 src/routes/[username]/settings/+page.server.js  |  2 +-
 src/routes/[username]/settings/+page.svelte     | 21 +++++++++---
 src/routes/[username]/settings/_account.svelte  |  5 ++-
 src/routes/[username]/settings/_security.svelte | 15 ++++++---
 9 files changed, 77 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Pin.svelte

(limited to 'src')

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';
diff --git a/src/lib/store.js b/src/lib/store.js
index e317ed24..4e5421ba 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -38,3 +38,4 @@ export const colorTheme = writable('from-primary to-gradient');
 export const tempProfileFiles = writable();
 export const avatarUpload = writable();
 export const bannerUpload = writable();
+export const pin = writable();
diff --git a/src/locales/en.json b/src/locales/en.json
index 60cd1b0e..b5aef47a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -32,7 +32,7 @@
 				"bio": "Strategic & Project Management. Jack of all Trades. Can always find time to meet for coffee."
 			},
 			"cole": {
-				"name": "Cole Goodwin",
+				"name": "Cole",
 				"position": "Bitcoin Professional",
 				"bio": "As a Certified Bitcoin Professional, Cole is a driven individual with a passion for freedom. He came across bitcoin in 2016 and studied it in depth. Now he wants to introduce the lightning network to as many users as possible."
 			},
diff --git a/src/locales/es.json b/src/locales/es.json
index 5fad6dd8..068d93a5 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -32,7 +32,7 @@
 				"bio": "Gestión Estratégica y de Proyectos. Ella es una todóloga. Siempre encuentra tiempo para reunirse a tomar un café."
 			},
 			"cole": {
-				"name": "Cole Goodwin",
+				"name": "Cole",
 				"position": "Profesional en Bitcoin",
 				"bio": "Como profesional certificado de Bitcoin, Cole es una persona motivada y apasionada por la libertad. Encontró bitcoin en el año 2016 bitcoin y se dedicó a estudiarlo en profundidad. Ahora quiere presentar Lightning Network a tantos usuarios como sea posible."
 			},
diff --git a/src/routes/[username]/settings/+page.server.js b/src/routes/[username]/settings/+page.server.js
index deb4356e..ae7e0a78 100644
--- a/src/routes/[username]/settings/+page.server.js
+++ b/src/routes/[username]/settings/+page.server.js
@@ -3,7 +3,7 @@ import { auth, get, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData())
+		let form = Object.fromEntries(await request.formData());
 
 		let user = {
 			...(await get('/me', auth(cookies))),
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index a584fc56..7bd4ddcc 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,21 +1,28 @@
 <script>
+	import { fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import Account from './_account.svelte';
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { Icon, Spinner } from '$comp';
+	import { Icon, Spinner, Pin } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success } from '$lib/utils';
-	import { avatarUpload, bannerUpload } from '$lib/store';
+	import { avatarUpload, bannerUpload, pin } from '$lib/store';
 	import { upload } from '$lib/upload';
 
 	export let data;
+	export let form;
 
 	let { user, rates, token } = data;
 	$: update(data);
 	let update = () => ({ user, rates, token } = data);
 
+	$: if (form?.message?.startsWith('Pin')) {
+		failure('Wrong pin, try again');
+		$pin = '';
+	}
+
 	let tab = 'account';
 
 	let tabs = [
@@ -31,8 +38,6 @@
 		loading = true;
 		if (typeof msg !== 'string') msg = 'Settings saved';
 
-    console.log("SAVING ONCE")
-
 		try {
 			if ($avatarUpload) {
 				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
@@ -52,7 +57,13 @@
 	};
 </script>
 
+{#if user.haspin && $pin?.length !== 6}
+	<Pin />
+{/if}
+
 <form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
+	<input type="hidden" name="pin" value={$pin} />
+
 	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
@@ -74,7 +85,7 @@
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
 	>
 		<button
-  bind:this={submit}
+			bind:this={submit}
 			type="submit"
 			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
 			class:bg-black={loading}
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index d7ab9f5e..f139b3f4 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -165,9 +165,8 @@
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-    on:click={() => select('profile')}
-    on:keydown={() => select('profile')}
-    >Select</button
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}>Select</button
 			>
 			<input
 				type="file"
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index a74517aa..98b9b503 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -4,6 +4,7 @@
 	import { Icon, Qr } from '$comp';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { post, success, failure } from '$lib/utils';
+	import { pin as current } from '$lib/store';
 
 	export let user, submit;
 
@@ -14,6 +15,7 @@
 	let verifyCode = [];
 	let tokenInput, pinInput, verifyInput;
 	let verifying = false;
+	let old;
 
 	let startVerifying = () => {
 		verifying = true;
@@ -24,6 +26,7 @@
 	let locked;
 	$: verifyCode.join('').length > 5 && checkPin();
 	let checkPin = async () => {
+		old = $current;
 		if (locked) return;
 		locked = true;
 
@@ -35,7 +38,8 @@
 
 		try {
 			if (pin.length > 5 && pin === verify) {
-				user.pin = pin;
+				user.haspin = true;
+				$current = pin;
 				submit.click();
 			} else {
 				failure('Pin mismatch, try again');
@@ -62,9 +66,9 @@
 	};
 
 	let togglePin = async () => {
-		if (user.pin) {
+		if (user.haspin) {
 			try {
-				user.pin = null;
+				pin = null;
 				submit.click();
 			} catch (e) {
 				failure('Failed to disable pin');
@@ -109,7 +113,8 @@
 </script>
 
 <div>
-	<input type="hidden" name="pin" value={pin} />
+	<input type="hidden" name="newpin" value={pin} />
+
 	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
@@ -141,7 +146,7 @@
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {user.pin ? 'Disable Pin' : 'Enable Pin'}</button
+			><Icon icon="lock" style="mr-1" /> {user.haspin ? 'Disable Pin' : 'Enable Pin'}</button
 		>
 	{/if}
 </div>
-- 
cgit v1.2.3