EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve/streamline error handling

Browse Source
This commit is contained in:
Björn Fromme
2019-07-15 19:18:12 +02:00
parent 6b2c6bed99
commit 808b3c2e3e
8 changed files with 121 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+45 -29
View File
@@ -6,11 +6,12 @@
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="gender" class="control-label">
Anrede:
Gender:
</label>
<select id="gender" v-model="address.gender" class="form-control">
<option value="W">Frau</option>
<option value="M">Herr</option>
<option value="W">W</option>
<option value="M">M</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group">
@@ -19,17 +20,19 @@
</label>
<input id="title" type="text" v-model="address.title" class="form-control">
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.name }">
<label for="name" class="control-label">
Name:
</label>
<input id="name" type="text" v-model="address.name" class="form-control">
<span class="help-block">{{ formErrors.name }}</span>
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstName" class="control-label">
Vorname:
</label>
<input id="firstName" type="text" v-model="address.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
<div class="form-group">
<label class="control-label">
@@ -39,25 +42,28 @@
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.street }">
<label for="street" class="control-label">
Straße:
</label>
<input id="street" type="text" v-model="address.street" class="form-control">
<span class="help-block">{{ formErrors.street }}</span>
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.zipCode }">
<label for="zipCode" class="control-label">
PLZ:
</label>
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
<span class="help-block">{{ formErrors.zipCode }}</span>
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.city }">
<label for="city" class="control-label">
Stadt:
</label>
<input id="city" type="text" v-model="address.city" class="form-control">
<span class="help-block">{{ formErrors.city }}</span>
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.country }">
<label for="country" class="control-label">
Land:
</label>
@@ -65,12 +71,14 @@
<option v-for="country in $store.state.countries"
:value="country['code']">{{ country['name'] }}</option>
</select>
<span class="help-block">{{ formErrors.country }}</span>
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.email }">
<label for="email" class="control-label">
E-Mail:
</label>
<input id="email" type="text" v-model="address.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
<div class="form-group">
<label for="phone" class="control-label">
@@ -109,18 +117,11 @@
return {
picker: null,
address: {},
requiredFields: [
{ field: 'name', label: 'Name' },
{ field: 'firstName', label: 'Vorname' },
{ field: 'street', label: 'Straße' },
{ field: 'zipCode', label: 'PLZ' },
{ field: 'city', label: 'Stadt' },
{ field: 'country', label: 'Land' },
{ field: 'email', label: 'E-Mail' }
]
formErrors: {}
}
},
created () {
this.initFormErrors();
this.fetchAddress();
},
mounted () {
@@ -136,28 +137,43 @@
});
},
methods: {
initFormErrors () {
this.formErrors = {
name: null,
firstName: null,
dateOfBirth: null,
email: null,
gender: null,
street: null,
zipCode: null,
city: null,
country: null
}
},
fetchAddress () {
this.$store.dispatch('address/load')
.then((data) => {
this.address = data;
this.picker.setDate(new Date(this.address.dateOfBirth), true);
})
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
saveAddress () {
for (const entry of this.requiredFields)
{
if (!this.address[entry.field]) {
this.initFormErrors();
this.$store.dispatch('address/save', this.address)
.catch(error => {
this.$store.commit('alert', {
message: 'Bitte das Feld "' + entry.label + '" ausfüllen',
message: 'Bitte überprüfe deine Eingaben.',
class: 'alert-danger'
});
EventBus.$emit('scrollTo', '#myep-main');
return false;
}
}
this.$store.dispatch('address/save', this.address)
.then(() => {
const violations = error.response.data['violations'];
for (let violation of violations) {
this.formErrors[violation.propertyPath] = violation.message;
}
})
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+2 -1
View File
@@ -62,12 +62,13 @@
this.$store.dispatch('crmdata/load')
.then((data) => {
this.crmData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
saveSelections () {
this.$store.dispatch('crmdata/save', this.crmData)
.then(() => {
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+1
View File
@@ -67,6 +67,7 @@
this.$store.dispatch('events/load')
.then((events) => {
this.events = events;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+5 -1
View File
@@ -55,6 +55,7 @@
methods: {
toggleMode () {
this.mode = this.mode === 'login' ? 'reset' : 'login';
this.password = '';
},
submit () {
this.message = '';
@@ -77,6 +78,8 @@
password: this.password
}).then(() => {
this.$router.push({ name: 'address' });
}).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
@@ -103,7 +106,8 @@
class: 'alert-danger'
});
}
}).then(() => {
}).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue
+2 -1
View File
@@ -29,6 +29,7 @@
this.$store.dispatch('address/load')
.then((data) => {
this.address = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
@@ -40,7 +41,7 @@
registration: this.address.newsletter
};
this.$store.dispatch('newsletter/registration', data)
.then(() => {
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
+63 -50
View File
@@ -4,25 +4,36 @@
<form @submit.prevent="submit()">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
</div>
<div class="form-group">
<div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstname" class="control-label">
Vorname
</label>
<input id="firstname" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
<div class="form-group">
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.name }">
<label for="name" class="control-label">
Name
</label>
<input id="name" type="text" v-model="userData.name" class="form-control">
<span class="help-block">{{ formErrors.name }}</span>
</div>
<div class="form-group">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.email }">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.gender }">
<label for="gender" class="control-label">
Gender
</label>
@@ -31,7 +42,12 @@
<option value="W">W</option>
<option value="D">D</option>
</select>
<span class="help-block">{{ formErrors.gender }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<div class="btn-group">
<button type="submit" class="button" :disabled="loading">
@@ -43,8 +59,6 @@
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
</form>
</div>
@@ -56,12 +70,8 @@
export default {
data () {
return {
userData: {
email: '',
name: '',
firstName: '',
gender: 'M'
}
userData: {},
formErrors: {}
}
},
methods: {
@@ -70,51 +80,54 @@
this.register();
},
register () {
if (!this.userData.email) {
this.$store.commit('alert', {
message: 'Bitte die E-Mail Adresse angeben',
class: 'alert-danger'
});
return;
}
if (!this.userData.name) {
this.$store.commit('alert', {
message: 'Bitte den angeben',
class: 'alert-danger'
});
return;
}
if (!this.userData.firstName) {
this.$store.commit('alert', {
message: 'Bitte den angeben',
class: 'alert-danger'
});
return;
}
this.initFormErrors();
this.$store.dispatch('register',
this.userData
).then((response) => {
const result = response.data.satz;
if (result.typ === 'HINWEIS') {
).then(() => {
this.$store.dispatch('resetPassword', this.userData.email);
this.$store.commit('alert', {
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success'
});
this.initFormData();
this.initFormErrors();
}).catch(error => {
if (error.response.data['@type'] === 'hydra:Error') {
this.$store.commit('alert', {
message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
class: 'alert-danger'
});
} else {
this.$store.dispatch('resetPassword', this.userData.email);
this.$store.commit('alert', {
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success'
});
const violations = error.response.data['violations'];
for (let violation of violations) {
this.formErrors[violation.propertyPath] = violation.message;
}
}
this.userData.email = '';
this.userData.name = '';
this.userData.firstName = '';
}).then(() => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
initFormData () {
this.userData = {
name: '',
firstName: '',
email: '',
gender: 'M'
}
},
initFormErrors () {
this.formErrors = {
name: null,
firstName: null,
email: null,
gender: null
}
}
},
created () {
this.initFormData();
this.initFormErrors();
},
computed: {
loading () {
return this.$store.state.loading;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
+3 -2
View File
@@ -114,12 +114,13 @@
this.$store.dispatch('teamer/load')
.then((data) => {
this.teamerData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
})
});
},
saveTeamerData () {
this.$store.dispatch('teamer/save', this.teamerData)
.then(() => {
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js
-2
View File
@@ -52,8 +52,6 @@ export default {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
});
}