From 063592ca3de68a3dd679e1458018f6e850f8a787 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Tue, 21 Dec 2021 08:02:03 +0000
Subject: [PATCH] fix: auth and move logic to router (#1201)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1201
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/App.vue                           |  8 +++--
 src/components/home/contentAuth.vue   | 30 ++++++++++---------
 src/components/home/contentNoAuth.vue | 41 --------------------------
 src/main.ts                           |  2 +-
 src/router/{index.js => index.ts}     | 42 ++++++++++++++++++++-------
 5 files changed, 54 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/home/contentNoAuth.vue
 rename src/router/{index.js => index.ts} (94%)

diff --git a/src/App.vue b/src/App.vue
index 823fa284..e0b53d24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,8 +6,10 @@
 				<content-auth/>
 			</template>
 			<content-link-share v-else-if="authLinkShare"/>
-			<content-no-auth v-else/>
-			<notification/>
+			<no-auth-wrapper v-else>
+				<router-view/>
+			</no-auth-wrapper>
+			<Notification/>
 		</div>
 
 		<transition name="fade">
@@ -31,7 +33,7 @@ import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
 import TopNavigation from './components/home/topNavigation.vue'
 import ContentAuth from './components/home/contentAuth.vue'
 import ContentLinkShare from './components/home/contentLinkShare.vue'
-import ContentNoAuth from './components/home/contentNoAuth.vue'
+import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'
 
 import {setLanguage} from './i18n'
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 313d7954..d3f0dc8a 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -64,21 +64,25 @@ const route = useRoute()
 // hide menu on mobile
 watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
 
+// FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
-watch(() => route.fullPath, () => {
+watch(() => route.name as string, (routeName) => {
 	if (
-		[
-			'home',
-			'namespace.edit',
-			'teams.index',
-			'teams.edit',
-			'tasks.range',
-			'labels.index',
-			'migrate.start',
-			'migrate.wunderlist',
-			'namespaces.index',
-		].includes(route.name) || 
-		route.name.startsWith('user.settings')
+		routeName &&
+		(
+			[
+				'home',
+				'namespace.edit',
+				'teams.index',
+				'teams.edit',
+				'tasks.range',
+				'labels.index',
+				'migrate.start',
+				'migrate.wunderlist',
+				'namespaces.index',
+			].includes(routeName) || 
+			routeName.startsWith('user.settings')
+		)
 	) {
 		store.dispatch(CURRENT_LIST, null)
 	}
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
deleted file mode 100644
index 25a843d1..00000000
--- a/src/components/home/contentNoAuth.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-	<no-auth-wrapper>
-		<router-view/>
-	</no-auth-wrapper>
-</template>
-
-<script lang="ts" setup>
-import {watchEffect} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-
-import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
-
-import {saveLastVisited} from '@/helpers/saveLastVisited'
-
-const route = useRoute()
-
-watchEffect(() => {
-	if (!route.name) return
-	redirectToHome()
-})
-
-const router = useRouter()
-function redirectToHome() {
-	// Check if the user is already logged in and redirect them to the home page if not
-	if (
-		![
-			'user.login',
-			'user.password-reset.request',
-			'user.password-reset.reset',
-			'user.register',
-			'link-share.auth',
-			'openid.auth',
-		].includes(route.name) &&
-		localStorage.getItem('passwordResetToken') === null &&
-		localStorage.getItem('emailConfirmToken') === null
-	) {
-		saveLastVisited(route.name, route.params)
-		router.push({name: 'user.login'})
-	}
-}
-</script>
diff --git a/src/main.ts b/src/main.ts
index 48a6590d..d497bbee 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -133,8 +133,8 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }
 
-app.use(router)
 app.use(store)
+app.use(router)
 app.use(i18n)
 
 app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.ts
similarity index 94%
rename from src/router/index.js
rename to src/router/index.ts
index cb049928..21e4a96a 100644
--- a/src/router/index.js
+++ b/src/router/index.ts
@@ -1,4 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
+import {saveLastVisited} from '@/helpers/saveLastVisited'
+import {store} from '@/store'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
@@ -573,16 +575,34 @@ const router = createRouter({
 	],
 })
 
-// bad example if using named routes:
-router.resolve({
-	name: 'bad-not-found',
-	params: { pathMatch: 'not/found' },
-}).href // '/not%2Ffound'
+router.beforeEach((to) => {
+	return checkAuth(to)
+})
 
-// good example:
-router.resolve({
-	name: 'not-found',
-	params: { pathMatch: ['not', 'found'] },
-}).href // '/not/found'
+function checkAuth(route: RouteLocation) {
+	const authUser = store.getters['auth/authUser']
+	const authLinkShare = store.getters['auth/authLinkShare']
+
+	if (authUser || authLinkShare) {
+		return
+	}
+
+	// Check if the user is already logged in and redirect them to the home page if not
+	if (
+		![
+			'user.login',
+			'user.password-reset.request',
+			'user.password-reset.reset',
+			'user.register',
+			'link-share.auth',
+			'openid.auth',
+		].includes(route.name as string) &&
+		localStorage.getItem('passwordResetToken') === null &&
+		localStorage.getItem('emailConfirmToken') === null
+	) {
+		saveLastVisited(route.name as string, route.params)
+		return {name: 'user.login'}
+	}
+}
 
 export default router
\ No newline at end of file