From e8226e00626bc0fa3b8a0062dacfee661a6b08a8 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Sun, 9 Mar 2025 22:21:13 +0100
Subject: [PATCH] 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       | 12 ++++++++++--
 error.vue                   | 21 +++++++++++++++++++++
 index.d.ts                  | 13 +++++++++++++
 middleware/authenticated.ts | 11 +++++++++++
 pages/edit.vue              | 13 +++++++++++++
 pages/index.vue             | 15 ++++++++++++++-
 6 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 error.vue
 create mode 100644 index.d.ts
 create mode 100644 pages/edit.vue

diff --git a/components/Header.vue b/components/Header.vue
index 4ab147c..28de4eb 100644
--- a/components/Header.vue
+++ b/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>
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..6067d75
--- /dev/null
+++ b/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>
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..0b8cefb
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,13 @@
+declare module "#app" {
+	interface PageMeta {
+		allowedAccountTypes?: string[],
+	}
+}
+
+declare module "vue-router" {
+	interface RouteMeta {
+		allowedAccountTypes?: string[],
+	}
+}
+
+export {}
diff --git a/middleware/authenticated.ts b/middleware/authenticated.ts
index c19472f..5404929 100644
--- a/middleware/authenticated.ts
+++ b/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.",
+		})
+	}
 })
diff --git a/pages/edit.vue b/pages/edit.vue
new file mode 100644
index 0000000..c3d6f0c
--- /dev/null
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index b34a34c..345f7f5 100644
--- a/pages/index.vue
+++ b/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>