Implement account type restricted page

Add allowedAccountTypes page metadata which the authenticated middleware
uses to further restrict the types of accounts that can access the page.

If the account type is insufficent to access the page it will return an
HTTP 403 Forbidden status, which is rendered using the error page.

components/Header.vue

@@ -2,8 +2,15 @@
 	<header>
 		<nav>
 			<ul>
-				<NuxtLink to="/">Home</NuxtLink>
-				<NuxtLink to="/schedule">Schedule</NuxtLink>
+				<li>
+					<NuxtLink to="/">Home</NuxtLink>
+				</li>
+				<li>
+					<NuxtLink to="/schedule">Schedule</NuxtLink>
+				</li>
+				<li v-if="session?.account?.type === 'admin' || session?.account?.type === 'crew'">
+					<NuxtLink to="/edit">Edit</NuxtLink>
+				</li>
 			</ul>
 		</nav>
 		<div class="account">
@@ -45,5 +52,6 @@ nav ul {
 	padding: 0;
 	display: flex;
 	column-gap: 0.5em;
+	list-style: none;
 }
 </style>

error.vue

@@ -0,0 +1,21 @@
+<template>
+	<Header />
+	<h1>{{ error.statusCode }} {{ error.statusMessage }}</h1>
+	{{ error.message }}
+</template>
+
+<script setup lang="ts">
+defineProps<{ error: {
+	statusCode: number,
+	fatal: boolean,
+	unhandled: boolean,
+	statusMessage?: string,
+	data?: unknown,
+	cause?: unknown,
+
+	// Undocumented fields
+	url?: string,
+	message?: string,
+	stack?: string,
+} }>()
+</script>

index.d.ts

@@ -0,0 +1,13 @@
+declare module "#app" {
+	interface PageMeta {
+		allowedAccountTypes?: string[],
+	}
+}
+
+declare module "vue-router" {
+	interface RouteMeta {
+		allowedAccountTypes?: string[],
+	}
+}
+
+export {}

middleware/authenticated.ts

@@ -5,4 +5,15 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		console.log("Not logged in, redirecting to /login");
 		return navigateTo("/login");
 	}
+
+	if (
+		to.meta.allowedAccountTypes
+		&& !to.meta.allowedAccountTypes.includes(session.value.account.type)
+	) {
+		throw createError({
+			status: 403,
+			statusMessage: "Forbidden",
+			message: "You are not allowed to access this resource.",
+		})
+	}
 })

pages/edit.vue

@@ -0,0 +1,13 @@
+<template>
+	<main>
+		<h1>Edit</h1>
+		<p>Todo: implement editing</p>
+	</main>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+	middleware: ["authenticated"],
+	allowedAccountTypes: ["crew", "admin"],
+})
+</script>

pages/index.vue

@@ -3,8 +3,21 @@
 		<h1>Schedule Demo</h1>
 		<ul>
 			<li>
-				<NuxtLink to="/schedule">Schedule demo</NuxtLink>
+				<NuxtLink to="/schedule">View Schedule</NuxtLink>
+			</li>
+			<li v-if="session?.account?.type === 'admin' || session?.account?.type === 'crew'">
+				<NuxtLink to="/edit">Edit Schedule</NuxtLink>
+			</li>
+			<li v-if="session">
+				<NuxtLink to="/account/settings">Account Settings</NuxtLink>
+			</li>
+			<li v-if="!session">
+				<NuxtLink to="/login">Log In / Create Account</NuxtLink>
 			</li>
 		</ul>
 	</main>
 </template>
+
+<script lang="ts" setup>
+const { data: session } = await useAccountSession();
+</script>