Refactor app component (#283)

Fix redirect to home

Move redirect to home to no auth component

Move setup stuff to separate functions

Renew token in authenticated component

Use vue's router object

Move auth type checks to computed properties

Move after route stuff to authenticated content component

More Cleanup

Cleanup

Hide the navigation on mobile in the navigation component

Load namespaces from inside the navigation component

Fix logout

Move not authenticated content to separate component

Fix favoriting lists

Move link share authenticated stuff to separate component

Move authenticated stuff to separate component

Move side navigation to separate component

Move top navigation bar to separate component

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/283
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>

src/components/home/contentAuth.vue

@@ -0,0 +1,107 @@
+<template>
+	<div>
+		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
+			<icon icon="times"></icon>
+		</a>
+		<div
+			:class="{'has-background': background}"
+			:style="{'background-image': `url(${background})`}"
+			class="app-container"
+		>
+			<navigation/>
+			<div
+				:class="[
+					{
+						'fullpage-overlay': fullpage,
+						'is-menu-enabled': menuActive,
+					},
+					$route.name,
+				]"
+				class="app-content"
+			>
+				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
+				<transition name="fade">
+					<router-view/>
+				</transition>
+				<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
+					<icon icon="keyboard"/>
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import Navigation from '@/components/home/navigation'
+
+export default {
+	name: 'contentAuth',
+	components: {Navigation},
+	watch: {
+		'$route': 'doStuffAfterRoute',
+	},
+	created() {
+		this.renewTokenOnFocus()
+	},
+	computed: mapState({
+		fullpage: IS_FULLPAGE,
+		namespaces(state) {
+			return state.namespaces.namespaces.filter(n => !n.isArchived)
+		},
+		currentList: CURRENT_LIST,
+		background: 'background',
+		menuActive: MENU_ACTIVE,
+	}),
+	methods: {
+		doStuffAfterRoute() {
+			// this.setTitle('') // Reset the title if the page component does not set one itself
+			this.$store.commit(IS_FULLPAGE, false)
+			this.resetCurrentList()
+		},
+		resetCurrentList() {
+			// Reset the current list highlight in menu if the current list is not list related.
+			if (
+				this.$route.name === 'home' ||
+				this.$route.name === 'namespace.edit' ||
+				this.$route.name === 'teams.index' ||
+				this.$route.name === 'teams.edit' ||
+				this.$route.name === 'tasks.range' ||
+				this.$route.name === 'labels.index' ||
+				this.$route.name === 'migrate.start' ||
+				this.$route.name === 'migrate.wunderlist' ||
+				this.$route.name === 'user.settings' ||
+				this.$route.name === 'namespaces.index'
+			) {
+				this.$store.commit(CURRENT_LIST, {})
+			}
+		},
+		renewTokenOnFocus() {
+			// Try renewing the token every time vikunja is loaded initially
+			// (When opening the browser the focus event is not fired)
+			this.$store.dispatch('auth/renewToken')
+
+			// Check if the token is still valid if the window gets focus again to maybe renew it
+			window.addEventListener('focus', () => {
+
+				const expiresIn = this.userInfo.exp - +new Date() / 1000
+
+				// If the token expiry is negative, it is already expired and we have no choice but to redirect
+				// the user to the login page
+				if (expiresIn < 0) {
+					this.$store.dispatch('auth/checkAuth')
+					this.$router.push({name: 'user.login'})
+					return
+				}
+
+				// Check if the token is valid for less than 60 hours and renew if thats the case
+				if (expiresIn < 60 * 3600) {
+					this.$store.dispatch('auth/renewToken')
+					console.debug('renewed token')
+				}
+			})
+		},
+	},
+}
+</script>