feat(#14): Replace profile page with account page

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, '/');
+		}
+	}
+};

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>