login validation completed

This commit is contained in:
rchrist 2019-05-15 13:45:54 +02:00
parent adad85d4d0
commit 27ab388636
2 changed files with 24 additions and 19 deletions

View File

@ -2,20 +2,21 @@
<div class="q-pa-md">
<form class="login">
<div class="q-pa-md">
<p class="text-black text-h5"> Login </p>
<div class="column q-gutter-lg" style="">
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email"
autocomplete="username"/>
<q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="Email"
autocomplete="username" :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail eingeben!']"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.password" type="password" label="Passwort"
autocomplete="current-password"/>
<q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" label="Passwort"
autocomplete="current-password" :rules="[val=>val.length>=8||'Bitte gültiges Passwort eingeben!']"/>
</div>
</div>
</div>
@ -24,7 +25,7 @@
<div class="" style="max-width: 440px">
<q-btn
:outline="userAuthenticated"
:disabled="userAuthenticated"
:disabled="!loginValidation"
:loading="loading"
label="Login"
color="primary"
@ -34,19 +35,10 @@
unelevated
>
<template v-slot:loading>
<q-spinner-oval class="on-left" />
<q-spinner-oval class="on-left"/>
wird eingeloggt...
</template>
</q-btn>
<q-btn
:outline="!userAuthenticated"
:disabled="!userAuthenticated"
label="Logout"
color="red"
class="full-width q-mt-md"
unelevated
@click="logout"
/>
<div class="q-pt-md">
<q-btn
:disabled="userAuthenticated"
@ -86,7 +78,15 @@
console.log("login: userAuthenticated()");
console.log(this.$store.state.auth.isAuthenticated);
return this.$store.state.auth.isAuthenticated;
}
},
loginValidation() {
if (this.validateEmail(this.user.email)
&& this.user.password.length>=8
&& !this.$store.state.auth.isAuthenticated) {
return true;
}
return false;
},
},
methods: {
login: function () {
@ -99,7 +99,7 @@
console.log("GET /api/login/ - json: " + JSON.stringify(data));
this.$axios.post(process.env.USER_API+'/account/login', data)
this.$axios.post(process.env.USER_API + '/account/login', data)
.then((response) => {
console.log("GET/POST /api/login/ - response: ");
console.log(response.data);
@ -127,8 +127,8 @@
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
}).finally(() => {
this.loading = false;
this.evalAuthentication();
this.loading = false;
this.evalAuthentication();
})
},
evalAuthentication: function () {
@ -141,6 +141,10 @@
localStorage.removeItem('userToken');
this.evalAuthentication();
},
validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
},
},
};
</script>

View File

@ -2,6 +2,7 @@
<div class="q-pa-md">
<form class="register" autocomplete="off">
<div class="q-pa-md">
<p class="text-h5 text-black"> Registrierung </p>
<div class="column q-gutter-lg" style="">
<div class="col">
<div class="">