From 02af363d2f0d552a72dc1c90bf8d785e04465d3a Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 17 Oct 2022 23:29:32 -0700
Subject: invoice redirect

---
 src/lib/utils.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'src/lib/utils.js')

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 54e965d9..76ce5077 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -9,6 +9,17 @@ export function scroll(section) {
 
 const base = browser ? '' : env.PUBLIC_COINOS_URL;
 
+export const g = (url, fetch, headers) =>
+	fetch(base + url, { headers })
+		.then((r) => r.text())
+		.then((body) => {
+			try {
+				return JSON.parse(body);
+			} catch (e) {
+				throw new Error(body);
+			}
+		});
+
 export const get = (url, headers = {}) =>
 	fetch(base + url, { headers })
 		.then((r) => r.text())
-- 
cgit v1.2.3


From a005ef51ee46618a1875dee4559ccddfec41dfcd Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 21 Oct 2022 13:29:04 -0700
Subject: move 2fa to separate step

---
 src/components/RegisterOrLogin.svelte | 199 ++++++++++++++++++++--------------
 src/lib/utils.js                      |  13 ++-
 src/routes/login/+page.server.js      |   8 +-
 src/routes/login/+page.svelte         |   1 +
 4 files changed, 132 insertions(+), 89 deletions(-)

(limited to 'src/lib/utils.js')

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 7f254400..bf2d2084 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { tick } from 'svelte';
+	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
@@ -6,13 +8,21 @@
 	import { loginRedirect } from '$lib/store';
 	import { t } from '$lib/translations';
 
+	let token, tokenInput;
+	let code = [];
+
+	$: need2fa = form?.message === '2fa';
+	$: if (need2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+
 	export let form;
 	export let pageID;
 
-	let username,
-		password,
-		email,
-		twofa = '';
+	let username, password, email, submit;
+
+	$: update(form);
+	let update = (form) => form && ({ username, password } = form);
+
+	$: token && token?.length === 6 && tick().then(() => submit.click());
 
 	let revealPassword = false;
 
@@ -31,101 +41,122 @@
 
 	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
-			<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
+			{#if need2fa}
+				<h1 class="text-2xl font-bold text-center">Enter 2FA Code</h1>
 
-			{#if form?.error}
-				<div class="text-red-600 text-center" in:fly>
-					{form.error}
-				</div>
-			{/if}
+				{#if form?.token}
+					<div class="text-red-600 text-center" in:fly>Invalid token, try again</div>
+				{/if}
+
+				<form class="space-y-5" {action} method="POST" use:enhance>
+					<input type="hidden" name="username" value={username} />
+					<input type="hidden" name="password" value={password} />
+					<input type="hidden" name="token" value={token} />
 
-			<form class="space-y-5" {action} method="POST" use:enhance>
-				{#if $loginRedirect}
-					<input type="hidden" name="loginRedirect" value={$loginRedirect} />
+					<div>
+						<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+							<PincodeInput />
+							<PincodeInput />
+							<PincodeInput />
+							<PincodeInput />
+							<PincodeInput />
+							<PincodeInput />
+						</Pincode>
+					</div>
+					<button
+						bind:this={submit}
+						type="submit"
+						class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+						>{$t('login.' + pageID)}
+					</button>
+				</form>
+			{:else}
+				<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
+
+				{#if form?.error}
+					<div class="text-red-600 text-center" in:fly>
+						{form.error}
+					</div>
 				{/if}
 
-				<div>
-					<label for="username" class="font-semibold">{$t('login.username')}</label>
-					<input
-						name="username"
-						type="text"
-						required
-						class="bg-primary"
-						bind:value={username}
-						use:focus
-						autocapitalize="none"
-					/>
-				</div>
-
-				<div class="relative">
-					<label for="password" class="block font-semibold">{$t('login.password')}</label>
-					{#if revealPassword}
+				<form class="space-y-5" {action} method="POST" use:enhance>
+					{#if $loginRedirect}
+						<input type="hidden" name="loginRedirect" value={$loginRedirect} />
+					{/if}
+
+					<div>
+						<label for="username" class="font-semibold">{$t('login.username')}</label>
 						<input
-							name="password"
+							name="username"
 							type="text"
 							required
 							class="bg-primary"
-							bind:value={password}
+							bind:value={username}
+							use:focus
 							autocapitalize="none"
 						/>
-					{:else}
-						<input
-							name="password"
-							type="password"
-							required
-							class="bg-primary"
-							bind:value={password}
-							autocapitalize="none"
-						/>
-					{/if}
-					<button
-						type="button"
-						on:click={() => (revealPassword = !revealPassword)}
-						class="absolute right-5 top-10"
-					>
-						<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
-					</button>
-				</div>
+					</div>
 
-				{#if pageID === 'signIn'}
-					<div>
-						<label for="token" class="font-semibold"
-							>{$t('login.token')}
-							<span class="text-secondary">({$t('login.optional')})</span></label
+					<div class="relative">
+						<label for="password" class="block font-semibold">{$t('login.password')}</label>
+						{#if revealPassword}
+							<input
+								name="password"
+								type="text"
+								required
+								class="bg-primary"
+								bind:value={password}
+								autocapitalize="none"
+							/>
+						{:else}
+							<input
+								name="password"
+								type="password"
+								required
+								class="bg-primary"
+								bind:value={password}
+								autocapitalize="none"
+							/>
+						{/if}
+						<button
+							type="button"
+							on:click={() => (revealPassword = !revealPassword)}
+							class="absolute right-5 top-10"
 						>
-						<input name="token" type="text" class="bg-primary" bind:value={twofa} />
+							<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
+						</button>
 					</div>
-				{/if}
 
-				{#if pageID === 'register'}
-					<p class="text-secondary text-sm">
-						{$t('login.passwordRecommendation')}
-					</p>
-				{:else}
-					<!-- TODO -->
-					<!-- <div class="flex justify-end items-center"> -->
-					<!-- 	<a href="/forgot" class="underline underline-offset-4 text-black text-sm" -->
-					<!-- 		>{$t('login.forgotUserOrPassword')}</a -->
-					<!-- 	> -->
-					<!-- </div> -->
-				{/if}
+					{#if pageID === 'register'}
+						<p class="text-secondary text-sm">
+							{$t('login.passwordRecommendation')}
+						</p>
+					{:else}
+						<!-- TODO -->
+						<!-- <div class="flex justify-end items-center"> -->
+						<!-- 	<a href="/forgot" class="underline underline-offset-4 text-black text-sm" -->
+						<!-- 		>{$t('login.forgotUserOrPassword')}</a -->
+						<!-- 	> -->
+						<!-- </div> -->
+					{/if}
 
-				<button
-					type="submit"
-					class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
-					>{$t('login.' + pageID)}
-				</button>
-			</form>
-
-			<p class="text-secondary text-center font-medium">
-				{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
-				<a
-					href={pageID === 'register' ? '/login' : '/register'}
-					class="block md:inline text-black underline underline-offset-4 hover:opacity-80"
-				>
-					{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
-				</a>
-			</p>
+					<button
+						type="submit"
+						class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+						>{$t('login.' + pageID)}
+					</button>
+				</form>
+
+				<p class="text-secondary text-center font-medium">
+					{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
+					<a
+						href={pageID === 'register' ? '/login' : '/register'}
+						class="block md:inline text-black underline underline-offset-4 hover:opacity-80"
+					>
+						{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
+					</a>
+				</p>
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 76ce5077..7cb09c61 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -36,6 +36,7 @@ export const post = (url, body, headers) => {
 	return fetch(base + url, { method: 'POST', body: JSON.stringify(body), headers })
 		.then((r) => r.text())
 		.then((body) => {
+			console.log('BODY', body);
 			try {
 				body = JSON.parse(body);
 			} catch (e) {
@@ -108,7 +109,17 @@ export const info = (m) => {
 
 export const login = async (user, cookies) => {
 	let maxAge = 30 * 24 * 60 * 60;
-	let { token } = await post('/login', user);
+	let res = await fetch(base + '/login', {
+		method: 'POST',
+		body: JSON.stringify(user),
+		headers: { 'content-type': 'application/json', accept: 'application/json' }
+	});
+	if (res.status === 401) {
+		let text = await res.text();
+		if (text.startsWith('2fa')) throw new Error('2fa');
+	}
+
+	let { token } = await res.json();
 	if (!token) throw new Error('Login failed');
 
 	let expires = new Date();
diff --git a/src/routes/login/+page.server.js b/src/routes/login/+page.server.js
index aa8797f9..b46af49e 100644
--- a/src/routes/login/+page.server.js
+++ b/src/routes/login/+page.server.js
@@ -4,13 +4,13 @@ import { login } from '$lib/utils';
 export const actions = {
 	default: async ({ cookies, request }) => {
 		let form = Object.fromEntries(await request.formData());
-		let { username, password, loginRedirect } = form;
-		let user = { username, password };
+		let { username, password, token, loginRedirect } = form;
+		let user = { username, password, token };
 
 		try {
-			await login(user, cookies);
+			let r = await login(user, cookies);
 		} catch (e) {
-			return invalid(400, { error: 'Login failed' });
+			return invalid(400, { error: 'Login failed', message: e.message, ...form });
 		}
 
 		throw redirect(303, loginRedirect || `/${user.username}/dashboard`);
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index cf7cb517..75998cd0 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { RegisterOrLogin } from '$comp';
+
 	export let form;
 </script>
 
-- 
cgit v1.2.3


From a67f9cbc9f609aa56e445fe8f422ba3be14e9345 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 21 Oct 2022 21:18:10 -0700
Subject: pin code input

---
 src/components/Qr.svelte                        |   4 +-
 src/lib/upload.js                               |   1 -
 src/lib/utils.js                                |   1 -
 src/routes/[username]/settings/+page.server.js  |   4 +-
 src/routes/[username]/settings/+page.svelte     |  28 +++++--
 src/routes/[username]/settings/_account.svelte  |  18 +++-
 src/routes/[username]/settings/_security.svelte | 104 +++++++++++++++++++-----
 7 files changed, 125 insertions(+), 35 deletions(-)

(limited to 'src/lib/utils.js')

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 0ae028b9..3870abe0 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -57,8 +57,8 @@
 {#if mask}
 	<div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
 {/if}
-<div bind:this={qr} on:click={toggle} class:hidden={full} class="relative overflow-visible" />
-<div bind:this={fullQr} on:click={toggle} class:hidden={!full} />
+<div bind:this={qr} on:click={toggle} on:keydown={toggle} class:hidden={full} class="relative overflow-visible" />
+<div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} />
 
 <style>
 	div {
diff --git a/src/lib/upload.js b/src/lib/upload.js
index 0e8a2908..099e2f30 100644
--- a/src/lib/upload.js
+++ b/src/lib/upload.js
@@ -1,5 +1,4 @@
 export const upload = async (file, type, progress, token) => {
-	console.log('FILE', file);
 	let url = `/api/upload/${type}`;
 	let formData = new FormData();
 	formData.append('file', file);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 7cb09c61..d8a7b60c 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -36,7 +36,6 @@ export const post = (url, body, headers) => {
 	return fetch(base + url, { method: 'POST', body: JSON.stringify(body), headers })
 		.then((r) => r.text())
 		.then((body) => {
-			console.log('BODY', body);
 			try {
 				body = JSON.parse(body);
 			} catch (e) {
diff --git a/src/routes/[username]/settings/+page.server.js b/src/routes/[username]/settings/+page.server.js
index 7053a939..deb4356e 100644
--- a/src/routes/[username]/settings/+page.server.js
+++ b/src/routes/[username]/settings/+page.server.js
@@ -3,9 +3,11 @@ import { auth, get, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
+		let form = Object.fromEntries(await request.formData())
+
 		let user = {
 			...(await get('/me', auth(cookies))),
-			...Object.fromEntries(await request.formData())
+			...form
 		};
 
 		try {
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index c1ac20d0..a584fc56 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -4,7 +4,7 @@
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { Icon } from '$comp';
+	import { Icon, Spinner } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success } from '$lib/utils';
 	import { avatarUpload, bannerUpload } from '$lib/store';
@@ -26,19 +26,29 @@
 
 	$: ({ comp } = tabs.find((t) => t.name === tab));
 
-	let save = async () => {
+	let loading, submit;
+	let save = async (msg) => {
+		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);
 			}
+
 			if ($bannerUpload) {
 				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
 			}
-			success('Settings saved');
+
+			success(msg);
 		} catch (e) {
 			console.log(e);
 			failure('Something went wrong');
 		}
+
+		loading = false;
 	};
 </script>
 
@@ -58,16 +68,22 @@
 			{/each}
 		</div>
 
-		<svelte:component this={comp} {user} {rates} />
+		<svelte:component this={comp} {user} {rates} {submit} />
 	</div>
 	<div
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
 	>
 		<button
+  bind:this={submit}
 			type="submit"
-			class="bg-black text-white rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+			class:bg-black={loading}
 		>
-			<div class="my-auto">Save Settings</div>
+			{#if loading}
+				<Spinner />
+			{:else}
+				<div class="my-auto">Save Settings</div>
+			{/if}
 		</button>
 	</div>
 </form>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 10756c7a..d7ab9f5e 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -17,6 +17,7 @@
 	$: banner = files.banner.src;
 	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
 
+	let togglePassword = () => (revealPassword = !revealPassword);
 	let colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
 		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
@@ -88,7 +89,8 @@
 	{/if}
 	<button
 		type="button"
-		on:click={() => (revealPassword = !revealPassword)}
+		on:click={togglePassword}
+		on:keydown={togglePassword}
 		class="absolute right-5 top-11"
 	>
 		<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
@@ -129,6 +131,7 @@
 			<div
 				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<img
 					src={profile}
@@ -140,6 +143,7 @@
 			<div
 				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<img
 					src={`/api/public/${user.username}-profile.webp`}
@@ -151,6 +155,7 @@
 			<div
 				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<Icon icon="logo-symbol-white" style="mx-auto" />
 			</div>
@@ -160,7 +165,9 @@
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-				on:click={() => select('profile')}>Select</button
+    on:click={() => select('profile')}
+    on:keydown={() => select('profile')}
+    >Select</button
 			>
 			<input
 				type="file"
@@ -190,6 +197,7 @@
 			src={banner}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{:else if user.banner}
@@ -197,12 +205,14 @@
 			src={`/api/public/${user.username}-banner.webp`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{/if}
@@ -211,7 +221,8 @@
 	<button
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-		on:click={() => select('banner')}>Select</button
+		on:click={() => select('banner')}
+		on:keydown={() => select('banner')}>Select</button
 	>
 	<input
 		type="file"
@@ -240,6 +251,7 @@
 				? 'border-black'
 				: ''}"
 			on:click={() => handleThemeClick(colors)}
+			on:keydown={() => handleThemeClick(colors)}
 		/>
 	{/each}
 </div> -->
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 2a490aa4..a74517aa 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -5,25 +5,75 @@
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { post, success, failure } from '$lib/utils';
 
-	export let user;
+	export let user, submit;
 
 	let settingPin, setting2fa, disabling2fa;
 
-	let code = [];
-	let pin = '';
 	let token = '';
-	let tokenInput, pinInput;
+	let pinCode = [];
+	let verifyCode = [];
+	let tokenInput, pinInput, verifyInput;
+	let verifying = false;
 
+	let startVerifying = () => {
+		verifying = true;
+	};
+
+	$: pin = pinCode.join('');
+
+	let locked;
+	$: verifyCode.join('').length > 5 && checkPin();
+	let checkPin = async () => {
+		if (locked) return;
+		locked = true;
+
+		let verify = verifyCode.join('');
+
+		pinCode = ['', '', '', '', '', ''];
+		verifyCode = ['', '', '', '', '', ''];
+		settingPin = false;
+
+		try {
+			if (pin.length > 5 && pin === verify) {
+				user.pin = pin;
+				submit.click();
+			} else {
+				failure('Pin mismatch, try again');
+				settingPin = true;
+				pinInput.focusFirstInput();
+			}
+		} catch (e) {
+			failure('Problem setting PIN');
+		}
+
+		verifying = false;
+
+		await new Promise((r) => setTimeout(r, 500));
+		locked = false;
+	};
+
+	$: if (verifying) verifyInput && tick().then(verifyInput.focusFirstInput);
 	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
-	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput?.focusFirstInput);
 
 	let reset = () => {
 		token = '';
-		code = [];
 		return true;
 	};
 
-	let togglePin = () => (settingPin = !settingPin);
+	let togglePin = async () => {
+		if (user.pin) {
+			try {
+				user.pin = null;
+				submit.click();
+			} catch (e) {
+				failure('Failed to disable pin');
+			}
+		} else {
+			settingPin = true;
+		}
+	};
+
 	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
 	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
 
@@ -58,31 +108,43 @@
 	$: otpUri = `otpauth://totp/coinos:${user.username}?secret=${user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
-<!-- TODO
 <div>
-	<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
+	<input type="hidden" name="pin" value={pin} />
+	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
 	{#if settingPin}
 		<div class="flex my-4">
 			<div class="mx-auto">
-				<Pincode bind:code bind:value={user.pin} bind:this={pinInput}>
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-				</Pincode>
+				<div class:hidden={verifying}>
+					<Pincode on:complete={startVerifying} bind:code={pinCode} bind:this={pinInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
+				<div class:hidden={!verifying}>
+					<Pincode bind:code={verifyCode} bind:this={verifyInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
 			</div>
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
+			><Icon icon="lock" style="mr-1" /> {user.pin ? 'Disable Pin' : 'Enable Pin'}</button
 		>
 	{/if}
-</div> -->
+</div>
 
 <!-- TODO
 <div>
@@ -116,7 +178,7 @@
 
 		<div class="text-center my-4">
 			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<Pincode bind:value={token} bind:this={tokenInput}>
 				<PincodeInput />
 				<PincodeInput />
 				<PincodeInput />
@@ -128,7 +190,7 @@
 	{:else if disabling2fa}
 		<div class="text-center my-4">
 			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<Pincode bind:value={token} bind:this={tokenInput}>
 				<PincodeInput />
 				<PincodeInput />
 				<PincodeInput />
-- 
cgit v1.2.3


From b1f81daaab3b04e8ae0b3e4edd4984aeade8098e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 25 Oct 2022 00:11:35 -0700
Subject: send pin

---
 src/components/Pin.svelte                              |  6 ++----
 src/lib/store.js                                       | 11 +++++++++--
 src/lib/utils.js                                       |  2 ++
 src/routes/send/+layout.svelte                         | 18 ++++++++++++++++++
 src/routes/send/[uuid=uuid]/+page.server.js            | 15 ++++++++++-----
 src/routes/send/[uuid=uuid]/+page.svelte               | 15 ++++++++++++++-
 src/routes/send/bitcoin/[address]/+page.server.js      | 13 +++++++++----
 src/routes/send/bitcoin/[address]/+page.svelte         | 16 ++++++++++++++++
 src/routes/send/lightning/[payreq]/+page.server.js     | 16 +++++++++++-----
 src/routes/send/lightning/[payreq]/+page.svelte        | 14 ++++++++++++++
 .../send/user/[username]/[...amount]/+page.server.js   | 15 ++++++++++-----
 .../send/user/[username]/[...amount]/+page.svelte      | 16 +++++++++++++++-
 12 files changed, 130 insertions(+), 27 deletions(-)
 create mode 100644 src/routes/send/+layout.svelte

(limited to 'src/lib/utils.js')

diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 3e5769b0..86e78ac1 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -2,11 +2,10 @@
   import { tick } from "svelte";
 	import { pin } from '$lib/store';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
-	let complete = () => {};
 	let pinCode = [];
 	let pinInput;
 
-	let submit, loading;
+	let loading;
 
 	$: pinInput && tick().then(pinInput.focusFirstInput);
 	$: pinCode.length > 5 && ($pin = pinCode.join(''));
@@ -16,7 +15,7 @@
 	<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}>
+			<Pincode bind:code={pinCode} bind:this={pinInput}>
 				<PincodeInput />
 				<PincodeInput />
 				<PincodeInput />
@@ -28,7 +27,6 @@
 
 		<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}
diff --git a/src/lib/store.js b/src/lib/store.js
index 4e5421ba..c648a657 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -2,13 +2,20 @@ import { get, writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 // creates a Svelte store synced to sessionStorage with the given key and default value
-const persistSession = (key, defaultValue) => {
+const persistSession = (key, defaultValue, expiry = 60 * 5 * 1000) => {
+	if (browser && new Date() - expiry > sessionStorage.getItem(key + 'time')) {
+		console.log('expired', sessionStorage.getItem(key + 'time'));
+		sessionStorage.removeItem(key);
+	}
+
 	let s = writable(
 		browser && sessionStorage.getItem(key) && sessionStorage.getItem(key) !== 'undefined'
 			? JSON.parse(sessionStorage.getItem(key))
 			: defaultValue
 	);
 
+	browser && sessionStorage.setItem(key + 'time', Date.now());
+
 	s.subscribe((v) => browser && sessionStorage.setItem(key, JSON.stringify(v)));
 
 	return s;
@@ -38,4 +45,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();
+export const pin = persistSession('pin');
diff --git a/src/lib/utils.js b/src/lib/utils.js
index d8a7b60c..7eeab648 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -42,6 +42,8 @@ export const post = (url, body, headers) => {
 				throw new Error(body);
 			}
 
+
+      if (body.error) throw body.error;
 			if (body instanceof Error) throw body;
 			if (body.name === 'Error') throw new Error(body.message);
 
diff --git a/src/routes/send/+layout.svelte b/src/routes/send/+layout.svelte
new file mode 100644
index 00000000..c9122466
--- /dev/null
+++ b/src/routes/send/+layout.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { Pin } from '$comp';
+	import { pin } from '$lib/store';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let loaded;
+	let { user } = data;
+
+	onMount(() => setTimeout(() => (loaded = true), 50));
+</script>
+
+{#if loaded && user.haspin && $pin?.length !== 6}
+	<Pin />
+{/if}
+
+<slot />
diff --git a/src/routes/send/[uuid=uuid]/+page.server.js b/src/routes/send/[uuid=uuid]/+page.server.js
index 661e9e7b..c9c77f70 100644
--- a/src/routes/send/[uuid=uuid]/+page.server.js
+++ b/src/routes/send/[uuid=uuid]/+page.server.js
@@ -10,14 +10,19 @@ export async function load({ params, parent }) {
 
 export const actions = {
 	default: async ({ cookies, params, request }) => {
-		let body = Object.fromEntries(await request.formData());
-		let { confirmed } = body;
+		try {
+			let body = Object.fromEntries(await request.formData());
+			let { confirmed } = body;
 
-		if (!confirmed) {
-			return invalid(403, { amount, confirm: true });
+			if (!confirmed) {
+				return invalid(403, { amount, confirm: true });
+			}
+
+			await post('/send', body, auth(cookies));
+		} catch (e) {
+			return invalid(400, { message: e.message });
 		}
 
-		await post('/send', body, auth(cookies));
 		throw redirect(307, '/sent');
 	}
 };
diff --git a/src/routes/send/[uuid=uuid]/+page.svelte b/src/routes/send/[uuid=uuid]/+page.svelte
index aa798bc1..73712f71 100644
--- a/src/routes/send/[uuid=uuid]/+page.svelte
+++ b/src/routes/send/[uuid=uuid]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { selectedRate } from '$lib/store';
+	import { pin, selectedRate } from '$lib/store';
 	import { enhance } from '$app/forms';
 	import { Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
@@ -31,12 +31,24 @@
 
 	let loading;
 	let submit = () => (loading = true);
+
+	$: update(form);
+	let update = () => {
+		if (form?.message.includes('pin')) $pin = undefined;
+		loading = false;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={handleBack}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
+{#if form?.message}
+	<div class="text-red-600 text-center">
+		{form.message}
+	</div>
+{/if}
+
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
@@ -61,6 +73,7 @@
 		<input name="payreq" value={payreq} type="hidden" />
 		<input name="username" value={recipient.username} type="hidden" />
 		<input name="confirmed" value={form?.confirm} type="hidden" />
+		<input name="pin" value={$pin} type="hidden" />
 
 		<div class="flex w-full">
 			{#if amount}
diff --git a/src/routes/send/bitcoin/[address]/+page.server.js b/src/routes/send/bitcoin/[address]/+page.server.js
index 9b29a6da..642593ab 100644
--- a/src/routes/send/bitcoin/[address]/+page.server.js
+++ b/src/routes/send/bitcoin/[address]/+page.server.js
@@ -1,11 +1,16 @@
-import { redirect } from '@sveltejs/kit';
+import { invalid, redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let { address, amount } = Object.fromEntries(await request.formData());
-		let { tx } = await post('/bitcoin/fee', { address, amount }, auth(cookies));
-		await post('/bitcoin/send', { address, tx }, auth(cookies));
+		try {
+			let { address, amount, pin } = Object.fromEntries(await request.formData());
+			let { tx } = await post('/bitcoin/fee', { address, amount }, auth(cookies));
+			await post('/bitcoin/send', { address, pin, tx }, auth(cookies));
+		} catch (e) {
+			return invalid(400, { message: e.message });
+		}
+
 		throw redirect(307, '/sent');
 	}
 };
diff --git a/src/routes/send/bitcoin/[address]/+page.svelte b/src/routes/send/bitcoin/[address]/+page.svelte
index 8c9e72ff..c9023180 100644
--- a/src/routes/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/send/bitcoin/[address]/+page.svelte
@@ -3,19 +3,33 @@
 	import { Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
 	import { back } from '$lib/utils';
+	import { pin } from '$lib/store';
+
 	export let data;
+	export let form;
 
 	let { address } = $page.params;
 	let { currency } = data.user;
 	let amount, loading;
 
 	let submit = () => (loading = true);
+	$: update(form);
+	let update = () => {
+		if (form?.message.includes('pin')) $pin = undefined;
+    loading = false;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
+{#if form?.message}
+	<div class="text-red-600 text-center">
+		{form.message}
+	</div>
+{/if}
+
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	<div class="text-center mb-8">
 		<h1 class="text-3xl md:text-4xl font-semibold mb-2">Send to</h1>
@@ -26,6 +40,8 @@
 	<form method="POST" use:enhance on:submit={submit}>
 		<input name="address" value={address} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
+		<input name="pin" value={$pin} type="hidden" />
+
 		<div class="flex w-full">
 			<button
 				type="submit"
diff --git a/src/routes/send/lightning/[payreq]/+page.server.js b/src/routes/send/lightning/[payreq]/+page.server.js
index f17d6a60..49ebac1c 100644
--- a/src/routes/send/lightning/[payreq]/+page.server.js
+++ b/src/routes/send/lightning/[payreq]/+page.server.js
@@ -7,14 +7,20 @@ export async function load({ params }) {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let body = Object.fromEntries(await request.formData());
-		let { amount, confirmed } = body;
+		try {
+			let body = Object.fromEntries(await request.formData());
+			let { amount, confirmed } = body;
 
-		if (!confirmed) {
-			return invalid(403, { amount, confirm: true });
+			if (!confirmed) {
+				return invalid(403, { amount, confirm: true });
+			}
+
+			await post('/lightning/send', body, auth(cookies));
+		} catch (e) {
+      if (e.message.includes("unusable")) e.message = "Failed to route payment, try sending a lower amount"
+			return invalid(400, { message: e.message });
 		}
 
-		await post('/lightning/send', body, auth(cookies));
 		throw redirect(307, '/sent');
 	}
 };
diff --git a/src/routes/send/lightning/[payreq]/+page.svelte b/src/routes/send/lightning/[payreq]/+page.svelte
index 973550f6..bda10038 100644
--- a/src/routes/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/send/lightning/[payreq]/+page.svelte
@@ -3,6 +3,8 @@
 	import { Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
 	import { back, s } from '$lib/utils';
+	import { pin } from '$lib/store';
+
 	export let data;
 	export let form;
 
@@ -14,12 +16,23 @@
 
 	let loading;
 	let submit = () => (loading = true);
+	$: update(form);
+	let update = () => {
+		if (form?.message.includes('pin')) $pin = undefined;
+    loading = false;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
+{#if form?.message}
+	<div class="text-red-600 text-center">
+		{form.message}
+	</div>
+{/if}
+
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
@@ -38,6 +51,7 @@
 		<input name="payreq" value={payreq} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
 		<input name="confirmed" value={form?.confirm} type="hidden" />
+		<input name="pin" value={$pin} type="hidden" />
 
 		<div class="flex w-full">
 			<button
diff --git a/src/routes/send/user/[username]/[...amount]/+page.server.js b/src/routes/send/user/[username]/[...amount]/+page.server.js
index 12bae186..a659eef3 100644
--- a/src/routes/send/user/[username]/[...amount]/+page.server.js
+++ b/src/routes/send/user/[username]/[...amount]/+page.server.js
@@ -11,14 +11,19 @@ export async function load({ params, parent }) {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let body = Object.fromEntries(await request.formData());
-		let { amount, confirmed } = body;
+		try {
+			let body = Object.fromEntries(await request.formData());
+			let { amount, confirmed } = body;
 
-		if (!confirmed) {
-			return invalid(403, { amount, confirm: true });
+			if (!confirmed) {
+				return invalid(403, { amount, confirm: true });
+			}
+
+			await post('/send', body, auth(cookies));
+		} catch (e) {
+			return invalid(400, { message: e.message });
 		}
 
-		await post('/send', body, auth(cookies));
 		throw redirect(307, '/sent');
 	}
 };
diff --git a/src/routes/send/user/[username]/[...amount]/+page.svelte b/src/routes/send/user/[username]/[...amount]/+page.svelte
index e50acd5b..6f4cb313 100644
--- a/src/routes/send/user/[username]/[...amount]/+page.svelte
+++ b/src/routes/send/user/[username]/[...amount]/+page.svelte
@@ -1,10 +1,11 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { selectedRate } from '$lib/store';
+	import { pin, selectedRate } from '$lib/store';
 	import { enhance } from '$app/forms';
 	import { Avatar, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
 	import { back, f, s, sats } from '$lib/utils';
+
 	export let data;
 	export let form;
 
@@ -31,12 +32,24 @@
 
 	let loading;
 	let submit = () => (loading = true);
+
+	$: update(form);
+	let update = () => {
+		if (form?.message.includes('pin')) $pin = undefined;
+		loading = false;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={handleBack}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
+{#if form?.message}
+	<div class="text-red-600 text-center">
+		{form.message}
+	</div>
+{/if}
+
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
@@ -63,6 +76,7 @@
 		<input name="amount" value={amount} type="hidden" />
 		<input name="username" value={recipient.username} type="hidden" />
 		<input name="confirmed" value={form?.confirm} type="hidden" />
+		<input name="pin" value={$pin} type="hidden" />
 
 		<div class="flex w-full">
 			{#if amount}
-- 
cgit v1.2.3