tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

login validation completed

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/pages/Login.vue
View File

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

1
frontend/src/pages/Register.vue
View File

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