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

nicer login

Browse Source
This commit is contained in:
Tobias Kurze
2020-07-28 15:06:13 +02:00
parent d3df9d5a30
commit 445c60bd65
4 changed files with 100 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/Login.vue
View File

@@ -4,52 +4,83 @@
<div v-if="!authenticated"> <div v-if="!authenticated">
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container">
<h2 class="title">Login or Register</h2> <div class="has-text-centered">
<p class="subtitle error-msg">{{ errorMsg }}</p> <h2 class="title">Login or Register</h2>
</div> <p class="subtitle error-msg">{{ errorMsg }}</p>
</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">
</div> </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 class="control"> <!--
<a class="button is-large is-primary" @click="authenticate">Login</a> <ul>
<a class="button is-large is-success" @click="register">Register</a> <li v-for="(provider, index) in loginProviders" v-bind:id="index">
</div> <a :href="provider.url">{{ index }} ({{provider.type}})</a>
</li>
</ul>
-->
<b-tabs>
<b-tab title="KIT Login" active>
<p>{{$t('Use your KIT account to connect to LRC. If this is your first login to LRC this creates a new account')}}!</p>
<div v-if="!this.$isProduction" style="background-color: lightcoral; padding: 10px; margin: 10px;">
<h4>DEBUG DEBUG</h4>
<button v-on:click="oidc_login">Login via OIDC (function)</button><br/>
<a class="btn btn-info" role="button"
href="//localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect (localhost)</a><br/>
<a href="https://ubkaps154.ubka.uni-karlsruhe.de:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect (ubkaps154.ubka.uni-karlsruhe.de)</a><br/>
<br/>
</div>
<a class="btn btn-primary" role="button" href="/api/auth/oidc?redirect_url=/login">{{$t('Login with KIT account')}}</a>
</b-tab>
<b-tab title="Alternative Login">
<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 class="control">
<a class="btn btn-primary is-large is-primary" @click="authenticate">Login</a>
</div>
</b-tab>
<b-tab :title="$t('Register')" v-bind:disabled="this.$isProduction">
<form
@submit="checkLoginForm">
<div class="field">
<label class="label is-large" for="email">Email:</label>
<div class="control">
<input type="email" class="input is-large" id="regEmail" v-model="regEmail">
</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="regPassword" v-model="regPassword">
</div>
</div>
<div class="control">
<a class="btn btn-primary is-large is-success" @click="register">{{$t('Register')}}</a>
</div>
</form>
</b-tab>
</b-tabs>
</div>
</div> </div>
</section> </section>
</div> </div>
<div v-else> <div v-else>
<h1>{{ $t('You are already logged in!') }}</h1> <h1>{{ $t('You are already logged in!') }}</h1>
<h2>{{$t('Redirecting you to')}} <router-link :to="{name: redirectTarget}">{{redirectTarget}}</router-link> {{$t('in')}} {{redirectTime}} {{$t('seconds')}}.</h2> <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> <p><a href="" @click.prevent="logout()">{{$t('logout')}}</a></p>
</div> </div>
</div> </div>
@@ -64,6 +95,8 @@
return { return {
email: '', email: '',
password: '', password: '',
regEmail: '',
regPassword: '',
errorMsg: '', errorMsg: '',
redirectMsg: '', redirectMsg: '',
redirectTarget: 'profile', redirectTarget: 'profile',
@@ -78,7 +111,7 @@
.then(() => this.$router.push('/')); .then(() => this.$router.push('/'));
}, },
register() { register() {
this.$store.dispatch('register', {email: this.email, password: this.password}) this.$store.dispatch('register', {email: this.regEmail, password: this.regPassword})
.then(() => this.$router.push('/')); .then(() => this.$router.push('/'));
}, },
oidc_login() { oidc_login() {
@@ -88,6 +121,22 @@
this.$store.dispatch('logout', {revokeRefreshToken: true}); this.$store.dispatch('logout', {revokeRefreshToken: true});
this.$router.push({name: 'home'}); this.$router.push({name: 'home'});
}, },
checkLoginForm(e) {
if (this.email && this.password){
return true;
}
this.errors = [];
if (!this.email){
this.errors.push('E-Mail required')
}
if (!this.password){
this.errors.push('Password required')
}
e.preventDefault();
}
}, },
mounted() { mounted() {
// this.$parent.$data.isLoading = true; // this.$parent.$data.isLoading = true;

6
src/components/User.vue
View File

@@ -6,6 +6,12 @@
<div class="container has-text-centered"> <div class="container has-text-centered">
<h3 class="title">Manage users</h3> <h3 class="title">Manage users</h3>
<div>{{users}}</div> <div>{{users}}</div>
<h3>Users</h3>
<ul>
<li v-for="(user) in users">
<a href="#">({{user.id}}) {{user.first_name}}</a>
</li>
</ul>
<div id="userTable"> <div id="userTable">
<table> <table>

9
src/main.ts
View File

@@ -64,6 +64,7 @@ import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css'; import 'bootstrap-vue/dist/bootstrap-vue.css';
const isProduction = process.env.NODE_ENV === 'production'; const isProduction = process.env.NODE_ENV === 'production';
Vue.prototype.$isProduction = isProduction;
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt, library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock, faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock,
@@ -71,10 +72,10 @@ library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList,
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
const options = { const loggerOptions = {
isEnabled: true, isEnabled: true,
// logLevel : isProduction ? 'error' : 'debug', logLevel : isProduction ? 'error' : 'debug',
logLevel: 'debug', //logLevel: 'debug',
stringifyArguments: false, stringifyArguments: false,
showLogLevel: true, showLogLevel: true,
showMethodName: true, showMethodName: true,
@@ -82,7 +83,7 @@ const options = {
showConsoleColors: true, showConsoleColors: true,
}; };
Vue.use(VueLogger, options); Vue.use(VueLogger, loggerOptions);
Vue.use(VueAxios, axios); Vue.use(VueAxios, axios);
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
Vue.use(FlagIcon); Vue.use(FlagIcon);

1
src/plugins/i18n.ts
View File

@@ -24,6 +24,7 @@ const messages = {
recorder: 'Aufzeichnungsgerät', recorder: 'Aufzeichnungsgerät',
Recorders: 'Aufzeichnungsgeräte', Recorders: 'Aufzeichnungsgeräte',
recorders: 'Aufzeichnungsgeräte', recorders: 'Aufzeichnungsgeräte',
Register: 'Registrieren',
command: 'Befehl', command: 'Befehl',
commands: 'Befehle', commands: 'Befehle',
Commands: 'Befehle', Commands: 'Befehle',