M apps/web/src/App.vue → apps/web/src/App.vue

@@ -3,11 +3,14 @@ import { computed, onMounted, ref } from "vue";
 import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
 
 import UserChip from "./components/UserChip.vue";
+import { LOGIN_LINK } from "./lib/constants";
 import { useApiStore } from "./stores/api";
 
 const api = useApiStore();
 const route = useRoute();
 const router = useRouter();
+
+const isAuthenticated = computed(() => api.isAuthenticated);
 
 const guildActors = computed(() => api.actors);
 const firstActor = computed(() => Object.values(guildActors.value)[0]);
@@ -109,7 +112,12 @@ </div>
 		</aside>
 
 		<main class="main">
-			<RouterView v-slot="{ Component }">
+			<div class="login" v-if="!isAuthenticated">
+				<h1>You're signed out</h1>
+				<p>To access the ticket system, you must be logged in.</p>
+				<a :href="LOGIN_LINK">Login</a>
+			</div>
+			<RouterView v-slot="{ Component }" else>
 				<KeepAlive include="TicketsView">
 					<component :is="Component" />
 				</KeepAlive>
@@ -162,6 +170,18 @@ background-color: hsla(var(--mantle));
 		border-radius: 2rem;
 		height: 100%;
 		overflow-y: auto;
+	}
+}
+
+.login {
+	a {
+		display: inline-block;
+		margin-top: 0.5rem;
+		background-color: hsl(var(--accent));
+		color: hsl(var(--surface0));
+		padding: 0.5rem 1.5rem;
+		border-radius: 5rem;
+		text-decoration: none;
 	}
 }
 

M apps/web/src/views/NotFound.vue → apps/web/src/views/NotFound.vue

@@ -1,4 +1,7 @@
 <template>
-    <h1>404 - Not Found</h1>
-    <p>whoops, if you're trying to view a ticket, please run `/ticket view [id]` and click the link from there.</p>
+	<h1>404 - Not Found</h1>
+	<p>
+		whoops, if you're trying to view a ticket, please run `/ticket view [id]` and click the link
+		from there.
+	</p>
 </template>