Create the account setup page

This page is not behind (protected) because it must not use the (protected)/layout.
This means that this page also needs to handle it's own authentication, because it should not be open to the public either.

src/routes/(protected)/+layout.server.ts

@@ -1,12 +1,10 @@
-import type { LayoutServerLoad } from "./$types";
+import type { LayoutServerLoad } from './$types';
-import { error } from "@sveltejs/kit";
+import { error } from '@sveltejs/kit';
-import { prisma } from "$lib/db";
+import { prisma } from '$lib/db';
-
-// const authorizedRoles - Not an admin gate, therefore all authenticated roles are authorized.
 
 export const load: LayoutServerLoad = async ({ locals }) => {
-    const user = await prisma.user.findUnique({ where: { id: locals.user?.id } });
+	const user = await prisma.user.findUnique({ where: { id: locals.user?.id } });
-    if (!user) {
+	if (!user) {
-        throw error(403, "not authorized");
+		throw error(403, 'not authorized');
-    }
+	}
-}
+};

src/routes/(protected)/+layout.svelte

@@ -1,3 +1,9 @@
+<!-- This layout is used for all pages where a user must be authenticated to visit. 
+ Below the navigation bar, there should be two sections. A sidebar, containing links
+ to common "pages", and a window to the right of that sidebar, with it's contents expanded
+ to fill the entire area, to display the current "page". 
+ This layout also acts as a sort of 'gatekeeper' in that it is also the authorization layer.
+-->
 <script lang="ts">
 	import Window from '$lib/components/containers/Window.svelte';
 
@@ -6,8 +12,11 @@
 	let adminExpanded = $state(true);
 </script>
 
+<!-- Main Area -->
 <div class="flex min-h-0 flex-1">
+	<!-- Sidebar -->
 	<div class="mt-12 mr-12 flex flex-col gap-1">
+		<!-- Sidebar links -->
 		<a href="/dashboard" class="text-blue-600">Dashboard</a>
 		
 		<div class="flex flex-col">
@@ -24,7 +33,10 @@
 				</div>
 			{/if}
 		</div>
+		<!-- End Sidebar links -->
 	</div>
+	<!-- End Sidebar -->
+	 <!-- Page content within a "Window" -->
 	<Window>
 		{@render children()}
 	</Window>

src/routes/account/setup/+page.server.ts

@@ -0,0 +1,17 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { prisma } from '$lib/db';
+
+// Tell the page what to do when it loads
+export const load: PageServerLoad = async ({ locals }) => {
+	// If locals.user doesn't exist (i.e., undefined), then the user is not logged in, \
+	// i.e, not authenticated nor authorized! We skip the database check early and also
+	// solve a problem with Prisma in case of having an undefined locals.user.id.
+	if (!locals.user?.id) {
+		throw error(403, 'not authorized');
+	}
+
+	const user = await prisma.user.findUnique({ where: { id: locals.user.id } });
+
+	return { user };
+};

src/routes/account/setup/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { PageProps } from "./$types";
+
+    let { data }: PageProps = $props();
+    $inspect(data);
+</script>
+
+<div>
+    <h1>
+        Account Setup
+    </h1>
+</div>