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/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 ++++++++++-----
 4 files changed, 29 insertions(+), 14 deletions(-)

(limited to 'src/routes')

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