diff --git a/frontend/src/components/SessionLogoutTimeout.spec.js b/frontend/src/components/SessionLogoutTimeout.spec.js
index a76ce1461..2a2b107e7 100644
--- a/frontend/src/components/SessionLogoutTimeout.spec.js
+++ b/frontend/src/components/SessionLogoutTimeout.spec.js
@@ -34,12 +34,13 @@ describe('SessionLogoutTimeout', () => {
const Wrapper = () => {
return mount(SessionLogoutTimeout, { localVue, mocks })
}
+
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
- it('renders the component div.transaction-link', () => {
+ it('renders the component div.session-logout-timeout', () => {
expect(wrapper.find('div.session-logout-timeout').exists()).toBe(true)
})
})
diff --git a/frontend/src/components/SessionLogoutTimeout.vue b/frontend/src/components/SessionLogoutTimeout.vue
index daed21ee3..1e5a27998 100644
--- a/frontend/src/components/SessionLogoutTimeout.vue
+++ b/frontend/src/components/SessionLogoutTimeout.vue
@@ -16,7 +16,7 @@
{{ $t('session.logoutIn') }}
- {{ closeTime }}
+ {{ tokenExpiresInSeconds }}
{{ $t('time.seconds') }}
@@ -46,19 +46,27 @@ export default {
name: 'SessionLogoutTimeout',
data() {
return {
- millisecondsShowModal: 75000,
- millisecondsCheckTokenInterval: 15000,
- closeTime: 60,
- sound: new Audio('sound/Air-Plane-Ding-SoundBible.com-496729130.mp3'),
+ now: new Date().getTime(),
}
},
+ timers: {
+ tokenExpires: {
+ time: 15000,
+ autostart: true,
+ repeat: true,
+ immediate: true,
+ },
+ },
methods: {
- timeout() {
- if (this.closeTime > 0) {
- this.closeTime = this.closeTime - 1
- } else {
- clearInterval(this.$options.interval2)
- clearInterval(this.$options.interval3)
+ tokenExpires() {
+ this.now = new Date().getTime()
+ if (this.tokenExpiresInSeconds < 75 && this.timers.tokenExpires.time !== 1000) {
+ this.timers.tokenExpires.time = 1000
+ this.$timer.restart('tokenExpires')
+ this.$bvModal.show('modalSessionTimeOut')
+ }
+ if (this.tokenExpiresInSeconds <= 0) {
+ this.$timer.stop('tokenExpires')
this.$emit('logout')
}
},
@@ -70,43 +78,23 @@ export default {
fetchPolicy: 'network-only',
})
.then((result) => {
- clearInterval(this.$options.interval2)
- clearInterval(this.$options.interval3)
+ this.timers.tokenExpires.time = 15000
+ this.$timer.restart('tokenExpires')
this.$bvModal.hide('modalSessionTimeOut')
- this.closeTime = 60
- this.$options.interval1 = setInterval(this.log, this.millisecondsCheckTokenInterval)
})
.catch(() => {
+ this.$timer.stop('tokenExpires')
this.$emit('logout')
})
},
- 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
- // console.log(diff)
- if (diff < this.millisecondsShowModal) {
- this.closeTime = Math.floor(diff / 1000)
- this.sound.play()
- this.$options.interval3 = setInterval(this.playSound, 13000)
- this.$options.interval2 = setInterval(this.timeout, 1000)
- clearInterval(this.$options.interval1)
- this.$bvModal.show('modalSessionTimeOut')
- }
- }
- },
- playSound() {
- this.sound.play()
- },
},
- created() {
- this.$options.interval1 = setInterval(this.log, this.millisecondsCheckTokenInterval)
+ computed: {
+ tokenExpiresInSeconds() {
+ return Math.floor((new Date(this.$store.state.tokenTime * 1000).getTime() - this.now) / 1000)
+ },
},
beforeDestroy() {
- clearInterval(this.$options.interval1)
- clearInterval(this.$options.interval2)
- clearInterval(this.$options.interval3)
+ this.$timer.stop('tokenExpires')
},
}