From 93d1c310c92e7fb49cc45ba817266c28c150202b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 5 Aug 2020 11:06:52 -0400
Subject: [PATCH] Navigate to empty route before logging

---
 app/src/router.ts                |  7 ++-----
 app/src/routes/logout/index.ts   |  4 ++++
 app/src/routes/logout/logout.vue | 28 ++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 app/src/routes/logout/index.ts
 create mode 100644 app/src/routes/logout/logout.vue

diff --git a/app/src/router.ts b/app/src/router.ts
index e713247525..73200620a2 100644
--- a/app/src/router.ts
+++ b/app/src/router.ts
@@ -1,5 +1,6 @@
 import VueRouter, { NavigationGuard, RouteConfig, Route } from 'vue-router';
 import LoginRoute from '@/routes/login';
+import LogoutRoute from '@/routes/logout';
 import InstallRoute from '@/routes/install';
 import ResetPasswordRoute from '@/routes/reset-password';
 import { refresh } from '@/auth';
@@ -8,7 +9,6 @@ import useAppStore from '@/stores/app';
 import useUserStore from '@/stores/user';
 import PrivateNotFoundRoute from '@/routes/private-not-found';
 import useSettingsStore from '@/stores/settings';
-import { logout } from '@/auth';
 
 import getRootPath from '@/utils/get-root-path';
 
@@ -50,10 +50,7 @@ export const defaultRoutes: RouteConfig[] = [
 	{
 		name: 'logout',
 		path: '/logout',
-		async beforeEnter(to, from, next) {
-			await logout({ navigate: false });
-			next('/login');
-		},
+		component: LogoutRoute,
 		meta: {
 			public: true,
 		},
diff --git a/app/src/routes/logout/index.ts b/app/src/routes/logout/index.ts
new file mode 100644
index 0000000000..7623c9914c
--- /dev/null
+++ b/app/src/routes/logout/index.ts
@@ -0,0 +1,4 @@
+import LogoutRoute from './logout.vue';
+
+export { LogoutRoute };
+export default LogoutRoute;
diff --git a/app/src/routes/logout/logout.vue b/app/src/routes/logout/logout.vue
new file mode 100644
index 0000000000..fb18e2b437
--- /dev/null
+++ b/app/src/routes/logout/logout.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="logout">
+		<v-progress-circular indeterminate />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from '@vue/composition-api';
+import { logout } from '@/auth';
+
+export default defineComponent({
+	setup() {
+		onMounted(() => {
+			logout();
+		});
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.logout {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>