From f10e0537bdadd287292ed2fb7861e59ca40f0b71 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Thu, 4 Jul 2024 19:33:51 +0100
Subject: [PATCH] feat(#14): Replace profile page with account page

---
 src/lib/components/SignUp.svelte   |  2 +-
 src/routes/+layout.svelte          |  2 +-
 src/routes/account/+page.server.ts | 55 +++++++++++++++++++++++++
 src/routes/account/+page.svelte    | 64 ++++++++++++++++++++++++++++++
 src/routes/profile/+page.svelte    | 16 --------
 5 files changed, 121 insertions(+), 18 deletions(-)
 create mode 100644 src/routes/account/+page.server.ts
 create mode 100644 src/routes/account/+page.svelte
 delete mode 100644 src/routes/profile/+page.svelte

diff --git a/src/lib/components/SignUp.svelte b/src/lib/components/SignUp.svelte
index a4b435f..c1db49e 100644
--- a/src/lib/components/SignUp.svelte
+++ b/src/lib/components/SignUp.svelte
@@ -17,7 +17,7 @@
 				password: password,
 				options: {
 					// Redirect URL after successful sign-up
-					redirectTo: '/profile'
+					redirectTo: '/account'
 				}
 			});
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3b9e286..fc71e3b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -138,7 +138,7 @@
 						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
 					>
 						<li>
-							<a href="/profile"> Profile </a>
+							<a href="/account"> Account </a>
 						</li>
 						<li><a href="/settings">Settings</a></li>
 						<li><SignOut {supabase} /></li>
diff --git a/src/routes/account/+page.server.ts b/src/routes/account/+page.server.ts
new file mode 100644
index 0000000..f2a414a
--- /dev/null
+++ b/src/routes/account/+page.server.ts
@@ -0,0 +1,55 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {
+	const { session } = await safeGetSession();
+
+	if (!session) {
+		redirect(303, '/');
+	}
+
+	const { data: profile } = await supabase
+		.from('profiles')
+		.select(`username, full_name`)
+		.eq('id', session.user.id)
+		.single();
+
+	return { session, profile };
+};
+
+export const actions: Actions = {
+	update: async ({ request, locals: { supabase, safeGetSession } }) => {
+		const formData = await request.formData();
+		const fullName = formData.get('fullName') as string;
+
+		const { session } = await safeGetSession();
+
+		const { error } = await supabase.from('profiles').upsert({
+			id: session?.user.id,
+			full_name: fullName,
+			username: session?.user.email,
+			updated_at: new Date()
+		});
+
+		console.error(error);
+
+		if (error) {
+			return fail(500, {
+				fullName,
+				username: session?.user.email
+			});
+		}
+
+		return {
+			fullName,
+			username: session?.user.email
+		};
+	},
+	signout: async ({ locals: { supabase, safeGetSession } }) => {
+		const { session } = await safeGetSession();
+		if (session) {
+			await supabase.auth.signOut();
+			redirect(303, '/');
+		}
+	}
+};
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
new file mode 100644
index 0000000..5e26972
--- /dev/null
+++ b/src/routes/account/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { SubmitFunction } from '@sveltejs/kit';
+
+	export let data;
+	export let form;
+
+	let { session, supabase, profile } = data;
+	$: ({ session, supabase, profile } = data);
+
+	let profileForm: HTMLFormElement;
+	let loading = false;
+	let fullName: string = profile?.full_name ?? '';
+
+	const handleSubmit: SubmitFunction = () => {
+		loading = true;
+		return async () => {
+			loading = false;
+		};
+	};
+
+	const handleSignOut: SubmitFunction = () => {
+		loading = true;
+		return async ({ update }) => {
+			loading = false;
+			update();
+		};
+	};
+</script>
+
+<div class="form-widget">
+	<form
+		class="form-widget"
+		method="post"
+		action="?/update"
+		use:enhance={handleSubmit}
+		bind:this={profileForm}
+	>
+		<div>
+			<label for="email">Username</label>
+			<input id="email" type="text" value={session.user.email} disabled />
+		</div>
+
+		<div>
+			<label for="fullName">Full Name</label>
+			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />
+		</div>
+
+		<div>
+			<input
+				type="submit"
+				class="button block primary"
+				value={loading ? 'Loading...' : 'Update'}
+				disabled={loading}
+			/>
+		</div>
+	</form>
+
+	<form method="post" action="?/signout" use:enhance={handleSignOut}>
+		<div>
+			<button class="button block" disabled={loading}>Sign Out</button>
+		</div>
+	</form>
+</div>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
deleted file mode 100644
index 6b9d79f..0000000
--- a/src/routes/profile/+page.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-	import { type User } from '@supabase/auth-js';
-
-	export let data;
-	let { supabase, session } = data;
-	$: ({ supabase, session } = data);
-</script>
-
-<div class="h-screen">
-	{#if session?.user}
-		{session?.user?.email}
-	{:else}
-		<p>Please log in to view this page</p>
-	{/if}
-</div>