From 63f1a6780bab85ebb48ca1fc142cc6beaf772faa Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 3 Oct 2022 23:13:49 -0700
Subject: refactoring

---
 src/components/AppHeader.svelte       | 49 +++++++++++++++++++----------------
 src/components/LandingHeader.svelte   |  9 +++----
 src/components/LandingHero.svelte     | 19 +++++++-------
 src/components/LocationsMap.svelte    |  2 +-
 src/components/Numpad.svelte          | 11 +++++---
 src/components/Qr.svelte              | 19 +++++---------
 src/components/RegisterOrLogin.svelte | 20 +++++++-------
 7 files changed, 64 insertions(+), 65 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 62cfd940..fca11272 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,13 +1,16 @@
 <script>
 	import OutClick from 'svelte-outclick';
-	import { subject, user, newPayment, colorTheme, tempProfileFiles } from '$lib/store';
+	import { newPayment, colorTheme, tempProfileFiles } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { page } from '$app/stores';
 
+	export let data;
 	export let avatarPosition = 'left-[calc(50vw-64px)] bottom-[-64px]';
 
+	let { subject, user } = data;
+
 	const menuButtons = [
 		{ stringID: 'nav.dashboard', icon: 'dash', goto: 'dashboard' },
 		{ stringID: 'nav.settings', icon: 'settings', goto: 'settings' },
@@ -22,34 +25,34 @@
 			goto('/logout');
 		} else {
 			showMenu = false;
-			goto(`/${$user.username + '/' + item}`);
+			goto(`/${user.username + '/' + item}`);
 		}
 	};
 
 	$: background =
 		$tempProfileFiles && $tempProfileFiles.banner
 			? `url(${$tempProfileFiles.banner})`
-			: $subject?.banner
-			? `url(/api/public/${$subject.username}-banner.png)`
+			: subject?.banner
+			? `url(/api/public/${subject.username}-banner.png)`
 			: undefined;
 </script>
 
 <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background>
 	<nav class="flex justify-end items-center space-x-4 p-5">
-		{#if $user}
-			<a href={`/${$user.username}/receive`}>
+		{#if user}
+			<a href={`/${user.username}/receive`}>
 				<button
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
-						.url.pathname === `/${$user.username}/receive`
+						.url.pathname === `/${user.username}/receive`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'}"
 					><Icon icon="numpad" style="mx-auto" />
 				</button>
 			</a>
-			<a href={`/${$user.username}/transactions`}>
+			<a href={`/${user.username}/transactions`}>
 				<button
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
-						.url.pathname === `/${$user.username}/transactions`
+						.url.pathname === `/${user.username}/transactions`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'} relative"
 					><Icon icon="clock" style="mx-auto" />
@@ -65,10 +68,10 @@
 					{/if}
 				</button>
 			</a>
-			<a href={`/${$user.username}`}>
+			<a href={`/${user.username}`}>
 				<button
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
-						.url.pathname === `/${$user.username}`
+						.url.pathname === `/${user.username}`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'}"
 					><Icon icon="profile" style="mx-auto" />
@@ -78,9 +81,9 @@
 				<OutClick on:outclick={() => (showMenu = false)}>
 					<button
 						class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
-							.url.pathname === `/${$user.username}/dashboard` ||
-						$page.url.pathname === `/${$user.username}/settings` ||
-						$page.url.pathname === `/${$user.username}/support`
+							.url.pathname === `/${user.username}/dashboard` ||
+						$page.url.pathname === `/${user.username}/settings` ||
+						$page.url.pathname === `/${user.username}/support`
 							? 'opacity-100'
 							: `opacity-70 hover:opacity-80 ${showMenu ? 'opacity-80' : ''}`}"
 						on:click={() => (showMenu = !showMenu)}
@@ -114,18 +117,18 @@
 			</a>
 		{/if}
 	</nav>
-	{#if $subject?.profile}
+	{#if subject?.profile}
 		<div
 			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32"
 		>
-    <a href={`/${$subject.username}`}>
-			<img
-				src={$tempProfileFiles && $tempProfileFiles.profile
-					? $tempProfileFiles.profile
-					: `/api/public/${$subject.username}-profile.png`}
-				class="w-full h-full object-cover object-center overflow-hidden"
-			/>
-      </a>
+			<a href={`/${subject.username}`}>
+				<img
+					src={$tempProfileFiles && $tempProfileFiles.profile
+						? $tempProfileFiles.profile
+						: `/api/public/${subject.username}-profile.png`}
+					class="w-full h-full object-cover object-center overflow-hidden"
+				/>
+			</a>
 		</div>
 	{:else}
 		<div
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index adeac98e..1f12e049 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -2,7 +2,6 @@
 	import { goto } from '$app/navigation';
 	import { scroll } from '$lib/utils';
 	import { Icon } from '$comp';
-	import { user } from '$lib/store';
 	import { t } from '$lib/translations';
 
 	export let howItWorks;
@@ -32,7 +31,7 @@
 			>
 			<button class="hover:opacity-80" on:click={() => scroll(faq)}>{$t('faq.header')}</button>
 			<button class="hover:opacity-80" on:click={() => scroll(about)}>{$t('about.header')}</button>
-			{#if !$user}
+			{#if !user}
 				<button
 					class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
 					on:click={() => goto('/register')}
@@ -47,7 +46,7 @@
 			{:else}
 				<button
 					class="border rounded-full px-6 py-2 font-bold"
-					on:click={() => goto(`/${$user.username}/dashboard`)}
+					on:click={() => goto(`/${user.username}/dashboard`)}
 					>{$t('nav.account')}
 				</button>
 				<button
@@ -80,7 +79,7 @@
 				<button on:click={() => mobileMenuButtonClick(about)} class="block"
 					>{$t('about.header')}</button
 				>
-				{#if !$user}
+				{#if !user}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block w-full"
 						on:click={() => goto('/register')}
@@ -95,7 +94,7 @@
 				{:else}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
-						on:click={() => goto(`/${$user.username}/dashboard`)}
+						on:click={() => goto(`/${user.username}/dashboard`)}
 						>{$t('nav.account')}
 					</button>
 					<button
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 466a6194..74c192fb 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,8 +1,9 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
-	import { user } from '$lib/store';
 	import { t } from '$lib/translations';
+
+	export let user;
 </script>
 
 <div class="mt-[96.88px] md:mt-0">
@@ -22,18 +23,18 @@
 		>
 			{$t('landing.subheader')}
 		</h2>
-		{#if !$user}
+		{#if !user}
 			<div class="flex justify-center">
-				<button
-					class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
-					on:click={() => goto('/register')}
-				>
-					{$t('nav.startInSeconds')}
-				</button>
+				<a href="/register">
+					<button
+						class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
+					>
+						{$t('nav.startInSeconds')}
+					</button>
+				</a>
 			</div>
 		{/if}
 	</div>
 
-	<!-- hero image -->
 	<Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" />
 </div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 8a8599c4..6d0b086e 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -77,7 +77,7 @@
 			locations.forEach(({ lat, lng, info }) => {
 				let marker = L.marker([lat, lng]);
 
-        marker.bindPopup(info);
+				marker.bindPopup(info);
 				markers.addLayer(marker);
 			});
 
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 3555688c..9de4a0dc 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Left, Icon } from '$comp';
-	import { selectedRate, user } from '$lib/store';
+	import { selectedRate } from '$lib/store';
 	import { f, s, post, warning, sats } from '$lib/utils';
 	import { t } from '$lib/translations';
 
@@ -32,7 +32,7 @@
 
 	$: amountSatsFormatted = s(amountSats);
 
-	$: amountFiatConverted = f(amountSats * ($selectedRate / sats), $user.currency);
+	$: amountFiatConverted = f(amountSats * ($selectedRate / sats), currency);
 
 	$: amountSatsConverted = s(amountFiat / ($selectedRate / sats));
 
@@ -90,13 +90,14 @@
 		<div class="text-center">
 			<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
 				{useFiat ? `${symbol}${amountFiat}` : amountSatsFormatted}<span
-					class="tracking-normal text-base font-normal">{useFiat ? $user.currency : 'SAT'}</span
+					class="tracking-normal text-base font-normal">{useFiat ? currency : 'SAT'}</span
 				>
 			</div>
 			<span class="text-secondary mr-1"
 				>{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
 			>
 			<button
+				type="button"
 				on:click={() => {
 					if (useFiat) {
 						amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
@@ -115,13 +116,15 @@
 			{#each numPad as value}
 				{#if value === '<'}
 					<button
+						type="button"
 						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
 						on:click={() => handleInput(value)}
 					>
-          <Left />
+						<Left />
 					</button>
 				{:else}
 					<button
+						type="button"
 						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
 						on:click={() => handleInput(value)}>{value}</button
 					>
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 35146ec3..988faf25 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,17 +1,20 @@
 <script>
+	import screenfull from 'screenfull';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
 	import { copy } from '$lib/utils';
 
 	export let image, text, qr, disabled;
 
+	let toggle = () => screenfull.toggle(qr.firstChild);
+
 	$: update(text);
-	let update = async (text) => {
+	let update = async (text, fullscreen) => {
 		if (!(browser && text)) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
 		const qrCode = new QRCodeStyling({
-			width: window.screen.width < 640 ? 250 : 300,
+			width: 300,
 			type: 'canvas',
 			data: text,
 			backgroundOptions: {
@@ -35,22 +38,14 @@
 	};
 </script>
 
-<div
-	bind:this={qr}
-	on:click={() => {
-		if (!disabled) copy(text);
-	}}
-/>
+<div bind:this={qr} on:click={toggle} />
 
 <style>
 	div {
-		@apply px-5
-      md:px-0
-      w-[300px]
+		@apply w-[300px]
       h-[300px]
       rounded-3xl
       block
-      md:flex
       justify-center
       items-center
       cursor-pointer
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 8f10fadd..de886314 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,14 +1,11 @@
 <script>
-	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
-	import { tick } from 'svelte';
+	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
-	import { focus, post, failure } from '$lib/utils';
-	import { redirect, user, token } from '$lib/store';
-	import { auth } from '$lib/socket';
-	import { goto } from '$app/navigation';
+	import { focus } from '$lib/utils';
+	import { redirect } from '$lib/store';
 	import { t } from '$lib/translations';
 
+	export let form;
 	export let pageID;
 
 	let username,
@@ -22,9 +19,6 @@
 		register: '/register',
 		signIn: '/login'
 	}[pageID];
-
-	// TODO: move to server side
-	$: if (browser && $user) goto(`/${$user.username}/receive`);
 </script>
 
 <div class="pt-10">
@@ -38,7 +32,11 @@
 		<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>
 
-			<form class="space-y-5" {action} method="POST">
+			{#if form?.error}
+				Login failed
+			{/if}
+
+			<form class="space-y-5" {action} method="POST" use:enhance>
 				{#if $redirect}
 					<input type="hidden" name="redirect" value={$redirect} />
 				{/if}
-- 
cgit v1.2.3