save account settings

6 files changed, 100 insertions, 36 deletions

diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index fbd53cd0..9edc43e1 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -1,4 +1,4 @@
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import cookie from 'cookie';
 import { protectedRoutes } from '$lib/utils';
 import { get, post, auth } from '$lib/utils';
@@ -11,18 +11,23 @@ export async function load({ request, setHeaders, url, params }) {
 	let rates;
 
 	if (token) {
-		user = await get('/me', { accept: 'application/json', authorization: `Bearer ${token}` });
+		try {
+			user = await get('/me', { accept: 'application/json', authorization: `Bearer ${token}` });
+		} catch (e) {
+			throw redirect(301, '/logout');
+		}
+
 		if (protectedRoutes.find((p) => url.pathname.match(p))) {
 			if (user.username !== params.username) throw error(404, 'user not found');
 		}
 
-    let account = user.accounts.find((a) => a.asset === btc && !a.pubkey);
-    if (account) {
-      let { id } = account;
-      if (user.account_id !== id) {
-        user = await post("/shiftAccount", { id }, auth(request));
-      }
-    }
+		let account = user.accounts.find((a) => a.asset === btc && !a.pubkey);
+		if (account) {
+			let { id } = account;
+			if (user.account_id !== id) {
+				user = await post('/shiftAccount', { id }, auth(request));
+			}
+		}
 	}
 
 	rates = await get('/rates');
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 1d162ef2..c6d7d3c0 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -5,6 +5,8 @@
 
 	import { AppHeader, Icon } from '$comp';
 	import { t } from '$lib/translations';
+	import { failure, success, put } from '$lib/utils';
+	import { user } from '$lib/store';
 
 	let tab = 'account';
 
@@ -15,29 +17,42 @@
 	];
 
 	$: ({ comp } = tabs.find((t) => t.name === tab));
+
+	let save = async () => {
+		try {
+			await put('/user', $user);
+			success('Settings saved');
+		} catch (e) {
+			failure('Something went wrong');
+		}
+	};
 </script>
 
 <AppHeader />
 
-<div class="my-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')}
-	</h1>
-
-	<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-		{#each tabs as { name, key }}
-			<button class:text-black={tab === name} on:click={() => (tab = name)}
-				>{$t(`user.settings.${key}`)}</button
-			>
-		{/each}
-	</div>
+<form on:submit|preventDefault={save}>
+	<div class="my-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')}
+		</h1>
 
-	<svelte:component this={comp} />
-</div>
+		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+			{#each tabs as { name, key }}
+				<button class:text-black={tab === name} on:click|preventDefault={() => (tab = name)}
+					>{$t(`user.settings.${key}`)}</button
+				>
+			{/each}
+		</div>
 
-<div class="fixed bottom-0 bg-white shadow border w-full">
-	<button class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto">
-		<Icon icon="save" style="m-auto mr-2" />
-		<div class="my-auto">Save Settings</div>
-	</button>
-</div>
+		<svelte:component this={comp} />
+	</div>
+	<div class="fixed bottom-0 bg-white shadow border w-full">
+		<button
+			type="submit"
+			class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary"
+		>
+			<Icon icon="save" style="w-6 h-6 mr-1" />
+			<div class="my-auto">Save Settings</div>
+		</button>
+	</div>
+</form>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 2ce78554..68af0841 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -3,9 +3,9 @@
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 
-	let password;
 	let selectedTheme = 1;
 	let revealPassword = false;
+	let password;
 
 	const colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
@@ -15,6 +15,13 @@
 		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
 		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
 	];
+
+	const handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
+
+	$: $user.password = $user.confirm = password;
 </script>
 
 <div>
@@ -24,7 +31,12 @@
 
 <div>
 	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-  <input type="email" name="email" class="block border rounded-xl p-3 w-full" bind:value={$user.email} />
+	<input
+		type="email"
+		name="email"
+		class="block border rounded-xl p-3 w-full"
+		bind:value={$user.email}
+	/>
 </div>
 
 <div>
@@ -32,7 +44,7 @@
 	<input
 		type="text"
 		name="username"
-		value={$user.username}
+		bind:value={$user.username}
 		class="block border rounded-xl p-3 w-full"
 	/>
 </div>
@@ -55,7 +67,12 @@
 
 <div>
 	<label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label>
-	<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
+	<input
+		type="text"
+		name="address"
+		class="block border rounded-xl p-3 w-full"
+		bind:value={$user.address}
+	/>
 </div>
 
 <div>
@@ -83,6 +100,7 @@
 	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
 	{#each colorThemes as colors}
 		<button
+			type="button"
 			class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
 			colors.theme
 				? 'border-black'
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 197317fc..78b63497 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -8,7 +8,7 @@
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
-	<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+	<button type="submit" class="p-3 border rounded-3xl font-bold flex justify-center items-center"
 		><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 	>
 </div>
@@ -32,7 +32,7 @@
 	<p class="text-secondary mb-1">
 		{$t('user.settings.twofaDescription')}
 	</p>
-	<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+	<button type="submit" class="p-3 border rounded-3xl font-bold flex justify-center items-center"
 		><Icon icon="mobile" style="mr-1" /> {$t('user.settings.twofaSetup')}</button
 	>
 </div>
diff --git a/src/routes/logout/done/+page.svelte b/src/routes/logout/done/+page.svelte
index fe526357..2c7ee6e8 100644
--- a/src/routes/logout/done/+page.svelte
+++ b/src/routes/logout/done/+page.svelte
@@ -8,6 +8,6 @@
 		$token = null;
 		$user = null;
 		close();
+    goto('/');
 	});
-	goto('/');
 </script>
diff --git a/src/routes/user/+server.js b/src/routes/user/+server.js
new file mode 100644
index 00000000..f7c6d165
--- /dev/null
+++ b/src/routes/user/+server.js
@@ -0,0 +1,26 @@
+import { auth, post } from "$lib/utils";
+import cookie from 'cookie';
+
+export async function PUT({ request, setHeaders }) {
+  console.log(setHeaders)
+	let user = await request.json();
+	let res = await post('/user', user, auth(request));
+
+	let maxAge = 30 * 24 * 60 * 60;
+
+	let expires = new Date();
+	expires.setSeconds(expires.getSeconds() + maxAge);
+
+	setHeaders({
+    'content-type': 'application/json',
+		'set-cookie': cookie.serialize('token', res.token, {
+			httpOnly: true,
+			maxAge,
+			sameSite: 'lax',
+			path: '/',
+			expires
+		})
+	});
+
+	return new Response(JSON.stringify(res));
+}