step 1 automatic logout of session after 10 minutes, last 60 seconds warning modal

backend/src/config/index.ts

@@ -25,7 +25,7 @@ const constants = {
 const server = {
   PORT: process.env.PORT || 4000,
   JWT_SECRET: process.env.JWT_SECRET || 'secret123',
-  JWT_EXPIRES_IN: process.env.JWT_EXPIRES_IN || '30m',
+  JWT_EXPIRES_IN: process.env.JWT_EXPIRES_IN || '10m',
   GRAPHIQL: process.env.GRAPHIQL === 'true' || false,
   GDT_API_URL: process.env.GDT_API_URL || 'https://gdt.gradido.net',
   PRODUCTION: process.env.NODE_ENV === 'production' || false,

frontend/package.json

@@ -45,6 +45,7 @@
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jwt-decode": "^3.1.2",
     "portal-vue": "^2.1.7",
     "prettier": "^2.2.1",
     "qrcanvas-vue": "2.1.1",
@@ -59,6 +60,7 @@
     "vue-loading-overlay": "^3.4.2",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.0.6",
+    "vue-timers": "^2.0.4",
     "vue2-transitions": "^0.2.3",
     "vuex": "^3.6.0",
     "vuex-persistedstate": "^4.0.0-beta.3"

frontend/src/layouts/DashboardLayout.vue

@@ -32,6 +32,22 @@
           </fade-transition>
         </div>
         <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+        <b-modal id="modalSessionTimeOut">
+          <b-card header-tag="header" footer-tag="footer">
+            <b-card-text>
+              <div class="p-3">{{ $t('session.warningText') }}</div>
+              <div class="p-3 text-danger">
+                {{ $t('session.lightText') }}
+                <b>{{ closeTime }}</b>
+                {{ $t('time.seconds') }}
+              </div>
+            </b-card-text>
+          </b-card>
+          <template #modal-footer>
+            <b-button size="sm" variant="success" @click="handleOk">verlängern</b-button>
+            <b-button size="sm" variant="danger" @click="logout">Logout</b-button>
+          </template>
+        </b-modal>
       </div>
     </div>
   </div>
@@ -43,6 +59,7 @@ import { logout, transactionsQuery } from '@/graphql/queries'
 import ContentFooter from '@/components/ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
 import CONFIG from '@/config'
+import { verifyLogin } from '../graphql/queries'
 
 export default {
   name: 'DashboardLayout',
@@ -62,6 +79,10 @@ export default {
       pending: true,
       visible: false,
       tunneledEmail: null,
+      time: 0,
+      millisecondsShowModal: 75000,
+      millisecondsCheckTokenInterval: 15000,
+      closeTime: 60,
     }
   },
   provide() {
@@ -70,6 +91,41 @@ export default {
     }
   },
   methods: {
+    timeout() {
+      if (this.closeTime > 0) {
+        this.closeTime = this.closeTime - 1
+      } else {
+        this.logout()
+      }
+    },
+    handleOk(bvModalEvent) {
+      // Prevent modal from closing
+      bvModalEvent.preventDefault()
+      this.$apollo
+        .query({
+          query: verifyLogin,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          clearInterval(this.$options.interval2)
+          this.$bvModal.hide('modalSessionTimeOut')
+          this.closeTime = 60
+        })
+        .catch(() => {
+          this.logout()
+        })
+    },
+    async log() {
+      if (this.$route.meta.requiresAuth) {
+        const now = new Date().getTime()
+        const exp = new Date(this.$store.state.tokenTime * 1000).getTime()
+        const diff = exp - now
+        if (diff < this.millisecondsShowModal) {
+          this.$bvModal.show('modalSessionTimeOut')
+          this.$options.interval2 = setInterval(this.timeout, 1000)
+        }
+      }
+    },
     async logout() {
       this.$apollo
         .query({
@@ -139,6 +195,12 @@ export default {
       )
     },
   },
+  created() {
+    this.$options.interval = setInterval(this.log, this.millisecondsCheckTokenInterval)
+  },
+  beforeDestroy() {
+    clearInterval(this.$options.interval)
+  },
 }
 </script>
 <style>

frontend/src/locales/de.json

@@ -197,6 +197,10 @@
   "qrCode": "QR Code",
   "send_gdd": "GDD versenden",
   "send_per_link": "GDD versenden per Link",
+  "session": {
+    "warningText": "Die Session läuft gleich ab!",
+    "lightText": "Du wirst automatisch abgemeldet in"
+  },
   "settings": {
     "language": {
       "changeLanguage": "Sprache ändern",

frontend/src/locales/en.json

@@ -197,6 +197,10 @@
   "qrCode": "QR Code",
   "send_gdd": "GDD send",
   "send_per_link": "GDD send via link",
+  "session": {
+    "warningText": "The session is about to expire!",
+    "lightText": "You will be automatically logged out in"
+  },
   "settings": {
     "language": {
       "changeLanguage": "Change language",

frontend/src/plugins/dashboard-plugin.js

@@ -18,6 +18,8 @@ import 'vue-loading-overlay/dist/vue-loading.css'
 
 import VueApollo from 'vue-apollo'
 
+import VueTimers from 'vue-timers'
+
 export default {
   install(Vue) {
     Vue.use(GlobalComponents)
@@ -29,5 +31,6 @@ export default {
     Vue.use(FlatPickr)
     Vue.use(Loading)
     Vue.use(VueApollo)
+    Vue.use(VueTimers)
   },
 }

frontend/src/store/store.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 import { localeChanged } from 'vee-validate'
 import i18n from '@/i18n.js'
+import jwtDecode from 'jwt-decode'
 
 Vue.use(Vuex)
 
@@ -26,6 +27,11 @@ export const mutations = {
   },
   token: (state, token) => {
     state.token = token
+    if (token) {
+      state.tokenTime = jwtDecode(token).exp
+    } else {
+      state.tokenTime = null
+    }
   },
   newsletterState: (state, newsletterState) => {
     state.newsletterState = newsletterState
@@ -85,6 +91,7 @@ try {
       lastName: '',
       // username: '',
       token: null,
+      tokenTime: null,
       isAdmin: false,
       newsletterState: null,
       hasElopage: false,

frontend/yarn.lock

@@ -9821,6 +9821,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -14472,6 +14477,11 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-timers@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vue-timers/-/vue-timers-2.0.4.tgz#7e1c443abf2109db5eeab6e62b0f5a47e94cf70b"
+  integrity sha512-QOEVdO4V4o9WjFG6C0Kn9tfdTeeECjqvEQozcQlfL1Tn8v0qx4uUPhTYoc1+s6qoJnSbu8f68x8+nm1ZEir0kw==
+
 vue2-transitions@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/vue2-transitions/-/vue2-transitions-0.2.3.tgz#69c9d75b1db05f231b80980c03459d68490ba27d"