tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improved login page / login status

Browse Source
This commit is contained in:
Tobias Kurze
2019-11-26 15:25:36 +01:00
parent a9a94d6f3c
commit 42366def40
6 changed files with 191 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/App.vue
View File

@@ -28,8 +28,6 @@
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/about">About</b-nav-item>
<b-nav-item v-if="authenticated" to="/logout">Logout</b-nav-item>
<b-nav-item v-else="authenticated" to="/login">Login</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
@@ -57,18 +55,25 @@
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<b-nav-item-dropdown v-if="authenticated" right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item :to="{name: 'profile'}">Profile</b-dropdown-item>
<b-dropdown-item to="/logout">Sign Out</b-dropdown-item>
<b-dropdown-item to="/logout" @click.prevent="logout()">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item v-else to="/login">Login</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<span>({{tokenValidity}})</span> |
<span>({{refreshTokenValidity}})</span>
<span v-if="tokenValidity">({{$t('Session will timeout in: ')}}{{tokenValidity}})</span>
<span v-else>{{$t('Session has expired!')}} <a v-if="refreshTokenValidity" href="~"
@click.prevent="refreshToken()">{{$t('Click here to refresh session')}}</a></span>
<span v-if="refreshTokenValidity">&nbsp;|&nbsp;({{refreshTokenValidity}})
<input type="checkbox" id="auto_renew_cb" v-model="autoRenewSession">
<label for="auto_renew_cb">{{$t('auto renew session')}}</label>
</span>
<span v-else>{{$t('Can\'t renew session – please login again!')}}</span>
</div>
<router-view/>
</div>
@@ -94,6 +99,7 @@
langs: ['de', 'en', 'es'],
dismissSecs: 5,
dismissCountDown: 0,
autoRenewSession: false,
};
},
methods: {
@@ -105,6 +111,14 @@
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
logout() {
this.$store.dispatch('logout', {revokeRefreshToken: true});
this.$router.push({name: 'home'});
},
refreshToken() {
this.$store.dispatch('refreshToken');
}
},
mounted() {
EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -113,23 +127,37 @@
EventBus.$on('failedLoadingRooms', (msg) => {
this.showErrorMessage(msg);
});
EventBus.$on('failedRefreshingToken', (msg)=>{
EventBus.$on('failedRefreshingToken', (msg) => {
this.refreshFailed = true;
});
this.$nextTick(() => {
window.setInterval(() => {
// this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
//this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
let tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
//this.tokenValidity = this.tokenValidity.format('mm:ss');
let refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state);
if (this.tokenValidity < 50 && this.refreshTokenValidity > 30 && !this.refreshFailed) {
if (tokenValidity < 50 && refreshTokenValidity > 30 && this.autoRenewSession && !this.refreshFailed) {
this.$store.dispatch('refreshToken'); // renew access token
}
if(this.refreshFailed){
if (this.autoRenewSession && this.refreshFailed) {
this.$store.dispatch('resetToken'); // delete all token info if refresh fails
this.$router.push({ name: 'login'});
this.$router.push({name: 'login'});
this.refreshFailed = false;
}
if (isNaN(tokenValidity)) {
this.tokenValidity = false;
} else {
this.tokenValidity = new Date(1000 * tokenValidity).toISOString().substr(14, 5);
}
if (isNaN(tokenValidity)) {
this.refreshTokenValidity = false;
} else {
this.refreshTokenValidity = new Date(1000 * refreshTokenValidity).toISOString().substr(11, 8);
}
}, 1000);
});