deep rework of login and logout with dashboard page

probablyjassin · Nov 13, 2024 · 5e1e5d3 · 5e1e5d3
1 parent 78aa153
commit 5e1e5d3
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 84 deletions.
diff --git a/app.vue b/app.vue
@@ -1,7 +1,8 @@
 <template>
 	<div>
-		<UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
-		<NuxtPage />
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
 	</div>
 </template>
 
@@ -15,24 +16,6 @@ useHead
 		}],
 	})
 
-const links = [
-	{
-		label: "Home",
-		icon: "i-heroicons-home",
-		to: "/",
-	},
-	{
-		label: "Stundenplan",
-		icon: "i-heroicons-clock",
-		to: "/stundenplan",
-	},
-	{
-		label: "Wie finde ich mein Passwort (Hash)?",
-		icon: "i-heroicons-document-text",
-		to: "/hash",
-	},
-];
-
 const username = useCookie("username")
 const password = useCookie("password")
 const isLoggedIn = useState("isLoggedIn", (() => false))

diff --git a/layouts/dash.vue b/layouts/dash.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <UHorizontalNavigation :links='[
+            [{
+                label: "Dashboard",
+                icon: "i-heroicons-home",
+                to: "/dash",
+            },
+            {
+                label: "Stundenplan",
+                icon: "i-heroicons-clock",
+                to: "/dash/stundenplan",
+            }], [
+                {
+                    label: "Logout",
+                    icon: "i-heroicons-arrow-turn-down-left",
+                    to: "/logout",
+                }],
+        ]' class="border-b border-gray-200 dark:border-gray-800" />
+        <slot />
+    </div>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <UHorizontalNavigation :links='[
+            [{
+                label: "Home",
+                icon: "i-heroicons-home",
+                to: "/",
+            },
+            {
+                label: "Wie finde ich mein Passwort (Hash)?",
+                icon: "i-heroicons-document-text",
+                to: "/hash",
+            }], [
+                {
+                    label: "Login",
+                    icon: "i-heroicons-finger-print",
+                    to: "/login",
+                }],
+        ]' class="border-b border-gray-200 dark:border-gray-800" />
+        <slot />
+    </div>
+</template>
diff --git a/middleware/isLoggedIn.global.ts b/middleware/isLoggedIn.global.ts
@@ -1,11 +1,19 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
 	if (import.meta.server) return true
-	if (to.fullPath !== "/stundenplan") {
+
+	const isLoggedIn = useState("isLoggedIn", (() => false) as () => boolean)
+
+	if (["/", "/hash", "/login"].includes(to.fullPath)) {
+		if (isLoggedIn.value) {
+			return navigateTo("/dash")
+		}
+	}
+
+	if (!to.fullPath.includes("dash")) {
 		return true
 	}
 	const username = useCookie("username")
 	const password = useCookie("password")
-	const isLoggedIn = useState("isLoggedIn", (() => false) as () => boolean)
 
 	if (!isLoggedIn.value) {
 		try {

diff --git a/pages/dash/index.vue b/pages/dash/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <span class="flex">
+            <p>Hi! Der Stundenplan ist hier drüben</p>
+            <UIcon name="i-heroicons-arrow-up-left" />
+        </span>
+        <p>Hier kommen vielleicht noch andere Infos hin, sofern campusdual es supported.</p>
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    layout: 'dash'
+});
+</script>
diff --git a/pages/stundenplan.vue → pages/dash/stundenplan.vue b/pages/stundenplan.vue → pages/dash/stundenplan.vue
@@ -32,18 +32,15 @@
 
 		</ClientOnly>
 
-		<button @click="logout()" class="mt-5 p-2 bg-primary text-white rounded">
-			Anmeldedaten zurücksetzen
-		</button>
-
 	</div>
 </template>
 
 <script setup>
 definePageMeta({
+	layout: 'dash',
 	keepalive: true,
 	key: route => route.fullPath,
-})
+});
 
 const router = useRouter();
 
@@ -131,11 +128,4 @@ onMounted(async () => {
 
 	hasLoaded.value = true;
 });
-
-function logout() {
-	username.value = "";
-	password.value = "";
-	isLoggedIn.value = false;
-	router.push("/login");
-}
 </script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -13,11 +13,9 @@
             </p>
             <span>
                 <p>Zum Github-Repo:</p>
-                <a class="text-accent underline" href="https://github.com/probablyjassin/studenplancampusdual">probablyjassin/stundenplancampusdual</a>
+                <a class="text-accent underline"
+                    href="https://github.com/probablyjassin/studenplancampusdual">probablyjassin/stundenplancampusdual</a>
             </span>
         </div>
     </div>
 </template>
-
-<script setup>
-</script>
diff --git a/pages/login.vue b/pages/login.vue
@@ -12,69 +12,63 @@
 		</div>
 	</div>
 	<div class="flex flex-col space-y-5 max-w-md mx-auto">
-		<input
-			type="text"
-			name="username"
-			id="username"
-			placeholder="Username"
-			v-model="username"
-			:class="{ 'border-red-500': !usernameValid }"
-			class="p-2 border rounded" />
+		<input type="text" name="username" id="username" placeholder="Username" v-model="username"
+			:class="{ 'border-red-500': !usernameValid }" class="p-2 border rounded" />
 		<p v-if="!usernameValid" class="text-red-500 text-sm">Bitte geben Sie einen Benutzernamen ein.</p>
 
-		<input
-			type="password"
-			name="Hash"
-			id="hash"
-			placeholder="Passwort (Hash)"
-			v-model="password"
-			:class="{ 'border-red-500': !passwordValid }"
-			class="p-2 border rounded" />
+		<input type="password" name="Hash" id="hash" placeholder="Passwort (Hash)" v-model="password"
+			:class="{ 'border-red-500': !passwordValid }" class="p-2 border rounded" />
 		<p v-if="!passwordValid" class="text-red-500 text-sm">Bitte geben Sie ein Passwort ein.</p>
 
-		<button @click="login()" class="p-3 bg-primary text-text rounded">Login</button>
-		<p v-if="error" class="text-red-500 text-sm">Der Login ist fehlgeschlagen. Überprüfe ob du tatsächlich deinen aktuellen Hash von der CampusDual API hast.</p>
+		<UButton @click="login" :loading="isLoading && !error" class="p-3 bg-primary text-text rounded">Login</UButton>
+		<p v-if="error" class="text-red-500 text-sm">Der Login ist fehlgeschlagen. Überprüfe ob du tatsächlich deinen
+			aktuellen Hash von der CampusDual API hast.</p>
 	</div>
 </template>
 
 <script setup>
-	const router = useRouter();
+const router = useRouter();
 
-	const username = ref("");
-	const password = ref("");
-	const usernameValid = ref(true);
-	const passwordValid = ref(true);
+const username = ref("");
+const password = ref("");
+const usernameValid = ref(true);
+const passwordValid = ref(true);
 
-    const error = ref(false);
+const isLoading = ref(false);
+const error = ref(false);
 
-	const usernameCookie = useCookie("username", { expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000) });
-	const passwordCookie = useCookie("password", { expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000) });
+const usernameCookie = useCookie("username", { expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000) });
+const passwordCookie = useCookie("password", { expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000) });
 
-	async function login() {
-		usernameValid.value = username.value !== "";
-		passwordValid.value = password.value !== "";
+async function login() {
+	isLoading.value = true;
 
-		if (!usernameValid.value || !passwordValid.value) {
-			return;
-		}
+	usernameValid.value = username.value !== "";
+	passwordValid.value = password.value !== "";
 
-		const test_url = `https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Fdash%2Fgetcp%3Fuser%3D${username.value}%26hash%3D${password.value}`;
-		const response = await $fetch(test_url);
+	if (!usernameValid.value || !passwordValid.value) {
+		return;
+	}
+
+	const test_url = `https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Fdash%2Fgetcp%3Fuser%3D${username.value}%26hash%3D${password.value}`;
+	const response = await $fetch(test_url);
 
-		if (response == 0) {
-			usernameCookie.value = username.value;
-			passwordCookie.value = password.value;
-			return router.push("/stundenplan");
-		}
-        error.value = true;
+	if (response == 0) {
+		usernameCookie.value = username.value;
+		passwordCookie.value = password.value;
+		return router.push("/dash");
 	}
+	error.value = true;
+	isLoading.value = false;
+}
 </script>
 
 <style scoped>
-	.border-red-500 {
-		border-color: #f56565;
-	}
-	.text-red-500 {
-		color: #f56565;
-	}
+.border-red-500 {
+	border-color: #f56565;
+}
+
+.text-red-500 {
+	color: #f56565;
+}
 </style>
diff --git a/pages/logout.vue b/pages/logout.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <UProgress animation="carousel" />
+    </div>
+</template>
+
+<script setup>
+const router = useRouter();
+
+onMounted(() => {
+    const isLoggedIn = useState("isLoggedIn");
+    const username = useCookie("username", { sameSite: "strict" });
+    const password = useCookie("password", { sameSite: "strict" });
+    localStorage.removeItem('stundenplan');
+
+    username.value = "";
+    password.value = "";
+    isLoggedIn.value = false;
+    router.push("/");
+});
+</script>