Stuck after session expired (#7491)

Co-authored-by: gitstart <[email protected]>

changelog/unreleased/bugfix-stuck-after-session-expired

@@ -0,0 +1,8 @@
+Bugfix: Stuck After Session Expired
+
+We've fixed exit link to redirect to login once session expires
+
+We've removed the logout click handler and created a new logout component
+
+https://github.com/owncloud/web/issues/7453
+https://github.com/owncloud/web/pull/7491

packages/web-runtime/src/pages/accessDenied.vue

@@ -11,8 +11,9 @@
           <span v-translate>Login Error</span>
         </h3>
         <h4 v-translate class="oc-mb-m">Your user session is invalid or has expired.</h4>
-        <div v-translate class="oc-mb-m" @click="performLogout">
-          If you like to login with a different user please proceed to <a id="exitAnchor">exit</a>.
+        <div v-translate class="oc-mb-m">
+          If you like to login with a different user please proceed to
+          <router-link id="exitAnchor" :to="{ name: 'login' }">exit</router-link>
         </div>
         <div v-translate class="oc-m-rm">
           <strong>Attention:</strong> this will log you out from all applications you are running in
@@ -31,7 +32,6 @@
 <script lang="ts">
 import { defineComponent } from '@vue/runtime-core'
 import { mapGetters } from 'vuex'
-import { authService } from '../services/auth'
 export default defineComponent({
   name: 'AccessDeniedPage',
   computed: {
@@ -74,13 +74,6 @@ export default defineComponent({
     backgroundImg() {
       return this.configuration.currentTheme.loginPage.backgroundImg
     }
-  },
-  methods: {
-    performLogout(event) {
-      if (event.target.id === 'exitAnchor') {
-        authService.logoutUser()
-      }
-    }
   }
 })
 </script>

packages/web-runtime/src/pages/logout.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p v-translate>Please wait while you're being logged out.</p>
+  </div>
+</template>
+<script>
+import { authService } from '../services/auth'
+export default {
+  name: 'LogoutPage',
+  async created() {
+    await authService.logoutUser()
+    this.router.push({ name: 'login' })
+  }
+}
+</script>

packages/web-runtime/src/router/index.ts

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import AccessDeniedPage from '../pages/accessDenied.vue'
 import Account from '../pages/account.vue'
 import LoginPage from '../pages/login.vue'
+import LogoutPage from '../pages/logout.vue'
 import OidcCallbackPage from '../pages/oidcCallback.vue'
 import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import { setupAuthGuard } from './setupAuthGuard'
@@ -40,6 +41,12 @@ export const router = patchRouter(
         component: LoginPage,
         meta: { title: $gettext('Login') }
       },
+      {
+        path: '/logout',
+        name: 'logout',
+        component: LogoutPage,
+        meta: { title: $gettext('Logout') }
+      },
       {
         path: '/oidc-callback',
         name: 'oidcCallback',