Display server errors
This commit is contained in:
Christian Cueni
parent
436a9b891f
commit
f3ae0fec7e
|
|
@ -98,6 +98,15 @@ Validator.extend('strongPassword', {
|
|||
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, {
|
||||
locale: 'de'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,53 +5,53 @@
|
|||
<div class="registration-form__field sbform-input">
|
||||
<label for="firstname" class="sbform-input__label">Vorname</label>
|
||||
<input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
id="firstname"
|
||||
name="firstname"
|
||||
type="text"
|
||||
v-model="firstName"
|
||||
v-model="firstname"
|
||||
data-vv-as="Vorname"
|
||||
v-validate="'required'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('firstName') }"
|
||||
class="change-form__firstName skillbox-input sbform-input__input"
|
||||
:class="{ 'sbform-input__input--error': errors.has('firstname') }"
|
||||
class="change-form__firstname skillbox-input sbform-input__input"
|
||||
autocomplete="off"
|
||||
data-cy="firstName-input"
|
||||
data-cy="firstname-input"
|
||||
/>
|
||||
<small
|
||||
v-if="errors.has('firstName') && submitted"
|
||||
v-if="errors.has('firstname') && submitted"
|
||||
class="sbform-input__error"
|
||||
data-cy="firstName-local-errors"
|
||||
>{{ errors.first('firstName') }}</small>
|
||||
data-cy="firstname-local-errors"
|
||||
>{{ errors.first('firstname') }}</small>
|
||||
<small
|
||||
v-for="error in firstNameErrors"
|
||||
v-for="error in firstnameErrors"
|
||||
:key="error"
|
||||
class="sbform-input__error"
|
||||
data-cy="firstName-remote-errors"
|
||||
data-cy="firstname-remote-errors"
|
||||
>{{ error }}</small>
|
||||
</div>
|
||||
<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
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
id="lastname"
|
||||
name="lastname"
|
||||
type="text"
|
||||
v-model="lastName"
|
||||
v-model="lastname"
|
||||
data-vv-as="Nachname"
|
||||
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"
|
||||
autocomplete="off"
|
||||
data-cy="lastName-input"
|
||||
data-cy="lastname-input"
|
||||
/>
|
||||
<small
|
||||
v-if="errors.has('lastName') && submitted"
|
||||
v-if="errors.has('lastname') && submitted"
|
||||
class="sbform-input__error"
|
||||
data-cy="lastName-local-errors"
|
||||
>{{ errors.first('lastName') }}</small>
|
||||
data-cy="lastname-local-errors"
|
||||
>{{ errors.first('lastname') }}</small>
|
||||
<small
|
||||
v-for="error in lastNameErrors"
|
||||
v-for="error in lastnameErrors"
|
||||
:key="error"
|
||||
class="sbform-input__error"
|
||||
data-cy="lastName-remote-errors"
|
||||
data-cy="lastname-remote-errors"
|
||||
>{{ error }}</small>
|
||||
</div>
|
||||
<div class="change-form__field sbform-input">
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
type="text"
|
||||
v-model="email"
|
||||
data-vv-as="E-Mail"
|
||||
v-validate="'required |email'"
|
||||
v-validate="'required|email'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('email') }"
|
||||
class="change-form__new skillbox-input sbform-input__input"
|
||||
autocomplete="off"
|
||||
|
|
@ -125,7 +125,6 @@ export default {
|
|||
methods: {
|
||||
validateBeforeSubmit() {
|
||||
this.$validator.validate().then(result => {
|
||||
console.log(result)
|
||||
this.submitted = true;
|
||||
let that = this;
|
||||
if (result) {
|
||||
|
|
@ -134,8 +133,8 @@ export default {
|
|||
mutation: REGISTRATION_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
firstNameInput: this.firstName,
|
||||
lastNameInput: this.lastName,
|
||||
firstnameInput: this.firstname,
|
||||
lastnameInput: this.lastname,
|
||||
emailInput: this.email,
|
||||
licenseKeyInput: this.licenseKey,
|
||||
}
|
||||
|
|
@ -153,8 +152,15 @@ export default {
|
|||
const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
|
||||
that.$router.push(redirectUrl);
|
||||
} else {
|
||||
console.log(errors)
|
||||
that.registrationError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
|
||||
errors.forEach(function(error) {
|
||||
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) {
|
||||
console.warn(e);
|
||||
|
|
@ -167,11 +173,11 @@ export default {
|
|||
},
|
||||
resetForm() {
|
||||
this.email = '';
|
||||
this.lastName = '';
|
||||
this.firstName = '';
|
||||
this.lastname = '';
|
||||
this.firstname = '';
|
||||
this.licenseKey = '';
|
||||
this.firstNameErrors = '';
|
||||
this.lastNameErrors = '';
|
||||
this.firstnameErrors = '';
|
||||
this.lastnameErrors = '';
|
||||
this.emailErrors = '';
|
||||
this.licenseKeyErrors = '';
|
||||
this.registrationError = '';
|
||||
|
|
@ -183,11 +189,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
email: '',
|
||||
lastName: '',
|
||||
firstName: '',
|
||||
lastname: '',
|
||||
firstname: '',
|
||||
licenseKey: '',
|
||||
firstNameErrors: '',
|
||||
lastNameErrors: '',
|
||||
firstnameErrors: '',
|
||||
lastnameErrors: '',
|
||||
emailErrors: '',
|
||||
licenseKeyErrors: '',
|
||||
registrationError: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue