improved login page / login status
This commit is contained in:
@@ -2,54 +2,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!authenticated">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h2 class="title">Login or Register</h2>
|
||||
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(provider, index) in loginProviders" v-bind:id="index">
|
||||
<a :href="provider.url">{{ index }} ({{provider.type}})</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Users</h3>
|
||||
<ul>
|
||||
<li v-for="(user) in users">
|
||||
<a href="#">({{user.id}}) {{user.first_name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-on:click="oidc_login">Login via OIDC</button>
|
||||
<a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="field">
|
||||
<label class="label is-large" for="email">Email:</label>
|
||||
<div class="control">
|
||||
<input type="email" class="input is-large" id="email" v-model="email">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h2 class="title">Login or Register</h2>
|
||||
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label is-large" for="password">Password:</label>
|
||||
<div class="control">
|
||||
<input type="password" class="input is-large" id="password" v-model="password">
|
||||
<ul>
|
||||
<li v-for="(provider, index) in loginProviders" v-bind:id="index">
|
||||
<a :href="provider.url">{{ index }} ({{provider.type}})</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Users</h3>
|
||||
<ul>
|
||||
<li v-for="(user) in users">
|
||||
<a href="#">({{user.id}}) {{user.first_name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-on:click="oidc_login">Login via OIDC</button>
|
||||
<a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="field">
|
||||
<label class="label is-large" for="email">Email:</label>
|
||||
<div class="control">
|
||||
<input type="email" class="input is-large" id="email" v-model="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label is-large" for="password">Password:</label>
|
||||
<div class="control">
|
||||
<input type="password" class="input is-large" id="password" v-model="password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<a class="button is-large is-primary" @click="authenticate">Login</a>
|
||||
<a class="button is-large is-success" @click="register">Register</a>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-large is-primary" @click="authenticate">Login</a>
|
||||
<a class="button is-large is-success" @click="register">Register</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>{{ $t('You are already logged in!') }}</h1>
|
||||
<p><a href="some_logout_url">{{$t('logout')}}</a></p>
|
||||
<h2>{{$t('Redirecting you to')}} <router-link :to="{name: redirectTarget}">{{redirectTarget}}</router-link> {{$t('in')}} {{redirectTime}} {{$t('seconds')}}.</h2>
|
||||
<p><a href="" @click.prevent="logout()">{{$t('logout')}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -64,6 +65,9 @@
|
||||
email: '',
|
||||
password: '',
|
||||
errorMsg: '',
|
||||
redirectMsg: '',
|
||||
redirectTarget: 'profile',
|
||||
redirectTime: 5,
|
||||
loginProviders: [],
|
||||
};
|
||||
},
|
||||
@@ -79,6 +83,10 @@
|
||||
oidc_login() {
|
||||
this.$store.dispatch('oidc_login', '\\oidc_login_redirection');
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch('logout', {revokeRefreshToken: true});
|
||||
this.$router.push({name: 'home'});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.$parent.$data.isLoading = true;
|
||||
@@ -104,6 +112,22 @@
|
||||
this.$cookies.remove('tokens');
|
||||
}
|
||||
this.$log.debug(this.$cookies.keys());
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.authenticated) {
|
||||
if (this.$route.query.redirectionTarget) {
|
||||
this.redirectTarget = this.$route.query.redirectionTarget;
|
||||
}
|
||||
let interval = window.setInterval(() => {
|
||||
console.log(this.redirectTime);
|
||||
this.redirectTime = this.redirectTime - 1;
|
||||
if (this.redirectTime < 0) {
|
||||
clearInterval(interval);
|
||||
this.$router.push({name: this.redirectTarget});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('failedRegistering');
|
||||
|
||||
Reference in New Issue
Block a user