add component SessionLogoutTimeout, add sound

frontend/src/components/SessionLogoutTimeout.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="session-logout-timeout">
+    <b-modal id="modalSessionTimeOut" class="bg-variant-danger">
+      <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="danger" @click="this.$emit('logout')">
+          {{ $t('navigation.logout') }}
+        </b-button>
+        <b-button size="lg" variant="success" @click="handleOk">
+          {{ $t('session.extend') }}
+        </b-button>
+      </template>
+    </b-modal>
+  </div>
+</template>
+<script>
+import { verifyLogin } from '@/graphql/queries'
+
+export default {
+  name: 'SessionLogoutTimeout',
+  data() {
+    return {
+      millisecondsShowModal: 75000,
+      millisecondsCheckTokenInterval: 15000,
+      closeTime: 60,
+    }
+  },
+  methods: {
+    timeout() {
+      if (this.closeTime > 0) {
+        this.closeTime = this.closeTime - 1
+      } else {
+        this.$emit('logout')
+      }
+    },
+    handleOk(bvModalEvent) {
+      // Prevent modal from closing
+      bvModalEvent.preventDefault()
+      this.$apollo
+        .query({
+          query: verifyLogin,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          clearInterval(this.$options.interval2)
+          clearInterval(this.$options.interval3)
+          this.$bvModal.hide('modalSessionTimeOut')
+          this.closeTime = 60
+          this.$options.interval1 = setInterval(this.log, this.millisecondsCheckTokenInterval)
+        })
+        .catch(() => {
+          this.$emit('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.playSound()
+          this.$options.interval3 = setInterval(this.playSound, 13000)
+          this.$bvModal.show('modalSessionTimeOut')
+          this.$options.interval2 = setInterval(this.timeout, 1000)
+          clearInterval(this.$options.interval1)
+        }
+      }
+    },
+    playSound() {
+      const audio = new Audio('sound/Air-Plane-Ding-SoundBible.com-496729130.mp3')
+      audio.play()
+    },
+  },
+  created() {
+    this.$options.interval1 = setInterval(this.log, this.millisecondsCheckTokenInterval)
+  },
+  beforeDestroy() {
+    clearInterval(this.$options.interval1)
+    clearInterval(this.$options.interval2)
+    clearInterval(this.$options.interval3)
+  },
+}
+</script>

frontend/src/layouts/DashboardLayout.vue

@@ -32,22 +32,7 @@
           </fade-transition>
         </div>
         <content-footer v-if="!$route.meta.hideFooter"></content-footer>
-        <b-modal id="modalSessionTimeOut">
+        <session-logout-timeout @logout="logout"></session-logout-timeout>
-          <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>
@@ -55,17 +40,18 @@
 <script>
 import Navbar from '@/components/Menu/Navbar.vue'
 import Sidebar from '@/components/Menu/Sidebar.vue'
+import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
 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',
   components: {
     Navbar,
     Sidebar,
+    SessionLogoutTimeout,
     ContentFooter,
     FadeTransition,
   },
@@ -79,10 +65,6 @@ export default {
       pending: true,
       visible: false,
       tunneledEmail: null,
-      time: 0,
-      millisecondsShowModal: 75000,
-      millisecondsCheckTokenInterval: 15000,
-      closeTime: 60,
     }
   },
   provide() {
@@ -91,41 +73,6 @@ 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({
@@ -195,12 +142,6 @@ export default {
       )
     },
   },
-  created() {
-    this.$options.interval = setInterval(this.log, this.millisecondsCheckTokenInterval)
-  },
-  beforeDestroy() {
-    clearInterval(this.$options.interval)
-  },
 }
 </script>
 <style>

frontend/src/locales/de.json

@@ -199,7 +199,8 @@
   "send_per_link": "GDD versenden per Link",
   "session": {
     "warningText": "Die Session läuft gleich ab!",
-    "lightText": "Du wirst automatisch abgemeldet in"
+    "lightText": "Du wirst automatisch abgemeldet in",
+    "extend":"Verlängern"
   },
   "settings": {
     "language": {

frontend/src/locales/en.json

@@ -199,7 +199,8 @@
   "send_per_link": "GDD send via link",
   "session": {
     "warningText": "The session is about to expire!",
-    "lightText": "You will be automatically logged out in"
+    "lightText": "You will be automatically logged out in",
+    "extend":"Extend"
   },
   "settings": {
     "language": {