ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Display server errors

This commit is contained in:
Christian Cueni 2019-10-10 15:35:23 +02:00
parent 436a9b891f
commit f3ae0fec7e
2 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/main.js
View File

@ -98,6 +98,15 @@ Validator.extend('strongPassword', {
return strongRegex.test(value); return strongRegex.test(value);
} }
}); });
Validator.extend('email', {
getMessage: field => 'Bitte geben Sie eine gülitge E-Mail an',
validate: value => {
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
return emailRegex.test(value);
}
});
Vue.use(VeeValidate, { Vue.use(VeeValidate, {
locale: 'de' locale: 'de'
}); });

80
client/src/pages/registration.vue
View File

@ -5,53 +5,53 @@
<div class="registration-form__field sbform-input"> <div class="registration-form__field sbform-input">
<label for="firstname" class="sbform-input__label">Vorname</label> <label for="firstname" class="sbform-input__label">Vorname</label>
<input <input
id="firstName" id="firstname"
name="firstName" name="firstname"
type="text" type="text"
v-model="firstName" v-model="firstname"
data-vv-as="Vorname" data-vv-as="Vorname"
v-validate="'required'" v-validate="'required'"
:class="{ 'sbform-input__input--error': errors.has('firstName') }" :class="{ 'sbform-input__input--error': errors.has('firstname') }"
class="change-form__firstName skillbox-input sbform-input__input" class="change-form__firstname skillbox-input sbform-input__input"
autocomplete="off" autocomplete="off"
data-cy="firstName-input" data-cy="firstname-input"
/> />
<small <small
v-if="errors.has('firstName') && submitted" v-if="errors.has('firstname') && submitted"
class="sbform-input__error" class="sbform-input__error"
data-cy="firstName-local-errors" data-cy="firstname-local-errors"
>{{ errors.first('firstName') }}</small> >{{ errors.first('firstname') }}</small>
<small <small
v-for="error in firstNameErrors" v-for="error in firstnameErrors"
:key="error" :key="error"
class="sbform-input__error" class="sbform-input__error"
data-cy="firstName-remote-errors" data-cy="firstname-remote-errors"
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="change-form__field sbform-input"> <div class="change-form__field sbform-input">
<label for="lastName" class="sbform-input__label">Nachname</label> <label for="lastname" class="sbform-input__label">Nachname</label>
<input <input
id="lastName" id="lastname"
name="lastName" name="lastname"
type="text" type="text"
v-model="lastName" v-model="lastname"
data-vv-as="Nachname" data-vv-as="Nachname"
v-validate="'required'" v-validate="'required'"
:class="{ 'sbform-input__input--error': errors.has('lastName') }" :class="{ 'sbform-input__input--error': errors.has('lastname') }"
class="change-form__new skillbox-input sbform-input__input" class="change-form__new skillbox-input sbform-input__input"
autocomplete="off" autocomplete="off"
data-cy="lastName-input" data-cy="lastname-input"
/> />
<small <small
v-if="errors.has('lastName') && submitted" v-if="errors.has('lastname') && submitted"
class="sbform-input__error" class="sbform-input__error"
data-cy="lastName-local-errors" data-cy="lastname-local-errors"
>{{ errors.first('lastName') }}</small> >{{ errors.first('lastname') }}</small>
<small <small
v-for="error in lastNameErrors" v-for="error in lastnameErrors"
:key="error" :key="error"
class="sbform-input__error" class="sbform-input__error"
data-cy="lastName-remote-errors" data-cy="lastname-remote-errors"
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="change-form__field sbform-input"> <div class="change-form__field sbform-input">
@ -59,10 +59,10 @@
<input <input
id="email" id="email"
name="email" name="email"
type="email" type="text"
v-model="email" v-model="email"
data-vv-as="E-Mail" data-vv-as="E-Mail"
v-validate="'required |email'" v-validate="'required|email'"
:class="{ 'sbform-input__input--error': errors.has('email') }" :class="{ 'sbform-input__input--error': errors.has('email') }"
class="change-form__new skillbox-input sbform-input__input" class="change-form__new skillbox-input sbform-input__input"
autocomplete="off" autocomplete="off"
@ -125,7 +125,6 @@ export default {
methods: { methods: {
validateBeforeSubmit() { validateBeforeSubmit() {
this.$validator.validate().then(result => { this.$validator.validate().then(result => {
console.log(result)
this.submitted = true; this.submitted = true;
let that = this; let that = this;
if (result) { if (result) {
@ -134,8 +133,8 @@ export default {
mutation: REGISTRATION_MUTATION, mutation: REGISTRATION_MUTATION,
variables: { variables: {
input: { input: {
firstNameInput: this.firstName, firstnameInput: this.firstname,
lastNameInput: this.lastName, lastnameInput: this.lastname,
emailInput: this.email, emailInput: this.email,
licenseKeyInput: this.licenseKey, licenseKeyInput: this.licenseKey,
} }
@ -153,8 +152,15 @@ export default {
const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/' const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
that.$router.push(redirectUrl); that.$router.push(redirectUrl);
} else { } else {
console.log(errors) errors.forEach(function(error) {
that.registrationError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.'; switch (error.field) {
case 'email':
that.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
break;
case 'license_key':
that.licenseKeyErrors = ['Die angegebenen Lizenz ist unglültig'];
}
})
} }
} catch (e) { } catch (e) {
console.warn(e); console.warn(e);
@ -167,11 +173,11 @@ export default {
}, },
resetForm() { resetForm() {
this.email = ''; this.email = '';
this.lastName = ''; this.lastname = '';
this.firstName = ''; this.firstname = '';
this.licenseKey = ''; this.licenseKey = '';
this.firstNameErrors = ''; this.firstnameErrors = '';
this.lastNameErrors = ''; this.lastnameErrors = '';
this.emailErrors = ''; this.emailErrors = '';
this.licenseKeyErrors = ''; this.licenseKeyErrors = '';
this.registrationError = ''; this.registrationError = '';
@ -183,11 +189,11 @@ export default {
data() { data() {
return { return {
email: '', email: '',
lastName: '', lastname: '',
firstName: '', firstname: '',
licenseKey: '', licenseKey: '',
firstNameErrors: '', firstnameErrors: '',
lastNameErrors: '', lastnameErrors: '',
emailErrors: '', emailErrors: '',
licenseKeyErrors: '', licenseKeyErrors: '',
registrationError: '', registrationError: '',