Fix of auto logout bug / refactored to own component

Fixes the bug that the session would expire after a while, although the user is active. Also refactored the corresponding code into seperate component.

frontend/src/components/AutoLogout.vue

+<template>
+  <v-dialog
+    persistent
+    width="fit-content"
+    v-model="logoutDialog"
+  >
+    <v-card>
+      <v-card-title class="headline">
+        You'll be logged out!
+      </v-card-title>
+      <v-card-text>
+        Due to inactivity you'll be logged out in a couple of moments.<br/>
+        Any unsaved work will be lost.
+        Click Continue to stay logged in.
+      </v-card-text>
+      <v-card-actions>
+        <v-btn flat color="grey lighten-0"
+               @click="logout"
+        >Logout now</v-btn>
+        <v-spacer/>
+        <v-btn flat color="blue darken-2"
+               @click="continueWork"
+        >Continue</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  import {mapState} from 'vuex'
+
+  export default {
+    name: 'auto-logout',
+    data () {
+      return {
+        timer: 0,
+        logoutDialog: false
+      }
+    },
+    computed: {
+      ...mapState([
+        'lastAppInteraction'
+      ]),
+      ...mapState({
+        lastTokenRefreshTry: state => state.authentication.lastTokenRefreshTry,
+        refreshingToken: state => state.authentication.refreshingToken,
+        jwtTimeDelta: state => state.authentication.jwtTimeDelta
+      })
+    },
+    methods: {
+      logout () {
+        this.logoutDialog = false
+        this.$store.dispatch('logout')
+      },
+      continueWork () {
+        this.$store.dispatch('refreshJWT')
+        this.logoutDialog = false
+      }
+    },
+    watch: {
+      lastAppInteraction: function (val) {
+        const timeSinceLastRefresh = Date.now() - this.lastTokenRefreshTry
+        const timeDelta = this.jwtTimeDelta
+        // refresh jwt if it's older than 20% of his maximum age
+        if (this.$route.name !== 'login' && timeSinceLastRefresh > timeDelta * 0.2 &&
+          !this.refreshingToken) {
+          this.$store.dispatch('refreshJWT')
+        }
+      }
+    },
+    mounted () {
+      this.timer = setInterval(() => {
+        const timeToLogOutDialog = Math.min(600 * 1e3,
+          this.jwtTimeDelta ? this.jwtTimeDelta * 0.3 : Infinity)
+        if (this.$route.name !== 'login' && this.$store.getters.isLoggedIn) {
+          if (Date.now() > this.lastTokenRefreshTry + this.jwtTimeDelta) {
+            this.logoutDialog = false
+            this.$store.dispatch('logout', "You've been logged out due to inactivity.")
+          } else if (Date.now() + timeToLogOutDialog > this.lastTokenRefreshTry + this.jwtTimeDelta) {
+            this.logoutDialog = true
+          }
+        }
+      }, 5 * 1e3)
+    },
+    beforeDestroy () {
+      clearInterval(this.timer)
+    }
+  }
+</script>
+
+<style>
+</style>