From 01d423ba045b0fb48d10ba93abd245f414ff1777 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Sat, 9 Apr 2022 09:48:40 +0200
Subject: [PATCH] :sparkles: Fixed #12

---
 frontend/src/lib/navbar.svelte              | 99 +++++++++++++--------
 frontend/src/lib/stores.ts                  |  1 +
 frontend/src/routes/account/__layout.svelte | 11 +++
 frontend/src/routes/create.svelte           |  5 ++
 frontend/src/routes/docs/__layout.svelte    | 11 +++
 frontend/src/routes/edit.svelte             |  5 ++
 frontend/src/routes/import.svelte           |  5 ++
 frontend/src/routes/index.svelte            | 11 +++
 frontend/src/routes/overview.svelte         |  3 +-
 frontend/src/routes/play.svelte             |  6 +-
 10 files changed, 120 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/navbar.svelte b/frontend/src/lib/navbar.svelte
index e699fda..e28aafc 100644
--- a/frontend/src/lib/navbar.svelte
+++ b/frontend/src/lib/navbar.svelte
@@ -1,6 +1,7 @@
 <script>
 	import '@fontsource/marck-script/index.css';
 	import { getLocalization } from '$lib/i18n';
+	import { signedIn } from '$lib/stores';
 
 	const { t } = getLocalization();
 
@@ -17,15 +18,11 @@
 <nav
 	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0"
 >
-	<!-- Our logo and button -->
 	<section class="w-full lg:w-max flex justify-between">
-		<!-- Logo -->
 		<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
 			>ClassQuiz</a
 		>
 
-		<!-- Our open/close buttons -->
-		<!-- Open menu -->
 		<button
 			class="lg:hidden"
 			id="open-menu"
@@ -76,41 +73,73 @@
 		</button>
 	</section>
 
-	<!-- Our list of items -->
 	<ul
 		id="menu-items"
 		class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
 		class:hidden={!menuItems}
 	>
-		<li class="py-2">
-			<a
-				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/play">{$t('words.play')}</a
-			>
-		</li>
-		<li class="py-2">
-			<a
-				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/account/register">{$t('words.register')}</a
-			>
-		</li>
-		<li class="py-2">
-			<a
-				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/account/login">{$t('words.login')}</a
-			>
-		</li>
-		<li class="py-2">
-			<a
-				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="https://github.com/mawoka-myblock/classquiz">GitHub</a
-			>
-		</li>
-		<li class="py-2">
-			<a
-				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/docs">{$t('words.docs')}</a
-			>
-		</li>
+		{#if $signedIn}
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/play">{$t('words.play')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/overview">{$t('words.overview')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="https://github.com/mawoka-myblock/classquiz">GitHub</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/api/v1/users/logout">{$t('words.logout')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/docs">{$t('words.docs')}</a
+				>
+			</li>
+		{:else}
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/play">{$t('words.play')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/account/register">{$t('words.register')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/account/login">{$t('words.login')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="https://github.com/mawoka-myblock/classquiz">GitHub</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/docs">{$t('words.docs')}</a
+				>
+			</li>
+		{/if}
 	</ul>
 </nav>
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index e6df5f2..7b05528 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -1,3 +1,4 @@
 import { writable } from 'svelte/store';
 
 export const navbarVisible = writable(true);
+export const signedIn = writable(false);
diff --git a/frontend/src/routes/account/__layout.svelte b/frontend/src/routes/account/__layout.svelte
index c5d1b81..884997c 100644
--- a/frontend/src/routes/account/__layout.svelte
+++ b/frontend/src/routes/account/__layout.svelte
@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
 
diff --git a/frontend/src/routes/create.svelte b/frontend/src/routes/create.svelte
index 2645e8e..c844048 100644
--- a/frontend/src/routes/create.svelte
+++ b/frontend/src/routes/create.svelte
@@ -1,4 +1,6 @@
 <script context="module" lang="ts">
+	import { signedIn } from '$lib/stores';
+
 	export async function load({ session, url }) {
 		if (!session.authenticated) {
 			return {
@@ -6,6 +8,9 @@
 				redirect: '/account/login'
 			};
 		}
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const token = url.searchParams.get('token');
 		const pin = url.searchParams.get('pin');
 		let auto_connect = url.searchParams.get('connect') !== null;
diff --git a/frontend/src/routes/docs/__layout.svelte b/frontend/src/routes/docs/__layout.svelte
index 6123188..f12f877 100644
--- a/frontend/src/routes/docs/__layout.svelte
+++ b/frontend/src/routes/docs/__layout.svelte
@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import Footer from '$lib/footer.svelte';
 	import { navbarVisible } from '$lib/stores';
diff --git a/frontend/src/routes/edit.svelte b/frontend/src/routes/edit.svelte
index 9e0b329..ce2a224 100644
--- a/frontend/src/routes/edit.svelte
+++ b/frontend/src/routes/edit.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
 	export async function load({ url, session }) {
 		if (!session.authenticated) {
 			return {
@@ -6,6 +7,10 @@
 				redirect: '/account/login'
 			};
 		}
+
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const quiz_id = url.searchParams.get('quiz_id');
 		if (quiz_id === null) {
 			return {
diff --git a/frontend/src/routes/import.svelte b/frontend/src/routes/import.svelte
index de2ebd4..34cf326 100644
--- a/frontend/src/routes/import.svelte
+++ b/frontend/src/routes/import.svelte
@@ -1,10 +1,15 @@
 <script context="module" lang="ts">
+	import { signedIn } from '$lib/stores';
 	export async function load({ session }) {
 		if (!session.authenticated) {
 			return {
 				status: 302,
 				redirect: '/account/login'
 			};
+		} else {
+			if (session.authenticated) {
+				signedIn.set(true);
+			}
 		}
 		return {
 			props: {
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index 6c6cfc4..0dfcea6 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
 	import { getLocalization } from '$lib/i18n';
diff --git a/frontend/src/routes/overview.svelte b/frontend/src/routes/overview.svelte
index 1be3b60..8318ae7 100644
--- a/frontend/src/routes/overview.svelte
+++ b/frontend/src/routes/overview.svelte
@@ -19,8 +19,9 @@
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
-	import { navbarVisible } from '$lib/stores';
+	import { navbarVisible, signedIn } from '$lib/stores';
 
+	signedIn.set(true);
 	navbarVisible.set(true);
 	const { t } = getLocalization();
 
diff --git a/frontend/src/routes/play.svelte b/frontend/src/routes/play.svelte
index 4fff660..3a00c12 100644
--- a/frontend/src/routes/play.svelte
+++ b/frontend/src/routes/play.svelte
@@ -1,5 +1,9 @@
 <script context="module" lang="ts">
-	export async function load({ url }) {
+	import { signedIn } from '$lib/stores';
+	export async function load({ url, session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const token = url.searchParams.get('pin');
 		return {
 			props: {