This commit is contained in:
Timo Volkmann 2019-05-07 13:19:11 +02:00
parent c0845f835f
commit 3c884dcd90
2 changed files with 56 additions and 66 deletions

View File

@ -73,17 +73,9 @@
user: { user: {
email: "", email: "",
password: "", password: "",
//token: "",
// evalAuthentication: false
}, },
}; };
}, },
// beforeMount: {
// init: function () {
// this.evalAuthentication();
// console.log("initiated");
// }
// },
created() { created() {
this.evalAuthentication(); this.evalAuthentication();
console.log("created: initiated"); console.log("created: initiated");

View File

@ -6,58 +6,54 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.name" type="text" <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail"
label="Nutzername" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/> :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/>
</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 lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail" :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/> <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
</div> label="E-Mail erneut eingeben" placeholer="Email"
:rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text" <div class="" style="max-width: 440px">
label="E-Mail erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/> <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
</div> label="Passwort"
:rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" <div class="" style="max-width: 440px">
label="Passwort" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/> <q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password"
</div> label="Passwort erneut eingeben"
:rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password" <div class="" style="max-width: 440px">
label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/> <q-btn
</div> :disabled="!validationSuccesful"
</div> label="Registrieren"
</div> color="primary"
<div class="col"> class="full-width"
<div class=""> @click="register()"
<div class="" style="max-width: 440px"> unelevated
<q-btn />
:disabled="!validationSuccesful"
label="Registrieren"
color="primary"
class="full-width"
@click="register()"
unelevated
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
</template> </template>
@ -65,23 +61,21 @@
<script> <script>
export default { export default {
data() { data() {
return{ return {
user: { user: {
name:"", email: "",
email:"", checkemail: "",
checkemail:"",
password: "", password: "",
checkpassword: "", checkpassword: "",
}, },
} }
}, },
computed: { computed: {
validationSuccesful(){ validationSuccesful() {
if(this.user.name.length>=2 if (this.validateEmail(this.user.email)
&&this.validateEmail(this.user.email) && this.user.email === this.user.checkemail
&&this.user.email===this.user.checkemail && this.user.password.length >= 8
&&this.user.password.length>=8 && this.user.password === this.user.checkpassword) {
&&this.user.password===this.user.checkpassword){
return true; return true;
} }
return false; return false;
@ -97,9 +91,9 @@
}, },
register: function () { register: function () {
if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){ if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
const data = { const data = {
name: this.user.name, name: this.user.email,
password: this.user.password, password: this.user.password,
email: this.user.email, email: this.user.email,
roles: [ roles: [
@ -112,15 +106,19 @@
console.log("POST /api/register/ - json: " + JSON.stringify(data)); console.log("POST /api/register/ - json: " + JSON.stringify(data));
const token = JSON.parse(localStorage.getItem('registerToken')).token; const token = JSON.parse(localStorage.getItem('registerToken')).token;
this.$axios.post(process.env.USER_API+'/account/register', data,{ this.$axios.post(process.env.USER_API + '/account/register', data, {
headers: { headers: {
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
} }
}) })
.then((response) => { .then((response) => {
console.log(response.data); console.log(response.data);
if(response.status === 201){ if (response.status === 201) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.", title: "Registrierungsprozess", color: "blue"}); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.",
title: "Registrierungsprozess",
color: "blue"
});
this.$router.push("/login") this.$router.push("/login")
} }
}) })
@ -148,12 +146,12 @@
}) })
} else { } else {
if(this.user.email!=this.user.checkemail) { if (this.user.email != this.user.checkemail) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Email stimmt nicht überein", message: "Email stimmt nicht überein",
title: "Fehler", title: "Fehler",
}); });
} else if (this.user.password!=this.user.checkpassword){ } else if (this.user.password != this.user.checkpassword) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Passwort stimmt nicht überein", message: "Passwort stimmt nicht überein",
title: "Fehler", title: "Fehler",
@ -170,7 +168,7 @@
console.log("GET /api/login/ - json: " + JSON.stringify(logindata)); console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
this.$axios.post(process.env.USER_API+'/account/login', logindata) this.$axios.post(process.env.USER_API + '/account/login', logindata)
.then((response) => { .then((response) => {
localStorage.setItem('registerToken', JSON.stringify(response.data)); localStorage.setItem('registerToken', JSON.stringify(response.data));
}) })
@ -194,7 +192,7 @@
message = error.message; message = error.message;
} }
console.log(error.config); console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
}) })
}, },
}, },