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
+44 -28
View File
@@ -6,11 +6,12 @@
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="gender" class="control-label"> <label for="gender" class="control-label">
Anrede: Gender:
</label> </label>
<select id="gender" v-model="address.gender" class="form-control"> <select id="gender" v-model="address.gender" class="form-control">
<option value="W">Frau</option> <option value="W">W</option>
<option value="M">Herr</option> <option value="M">M</option>
<option value="D">D</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -19,17 +20,19 @@
</label> </label>
<input id="title" type="text" v-model="address.title" class="form-control"> <input id="title" type="text" v-model="address.title" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.name }">
<label for="name" class="control-label"> <label for="name" class="control-label">
Name: Name:
</label> </label>
<input id="name" type="text" v-model="address.name" class="form-control"> <input id="name" type="text" v-model="address.name" class="form-control">
<span class="help-block">{{ formErrors.name }}</span>
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstName" class="control-label"> <label for="firstName" class="control-label">
Vorname: Vorname:
</label> </label>
<input id="firstName" type="text" v-model="address.firstName" class="form-control"> <input id="firstName" type="text" v-model="address.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label"> <label class="control-label">
@@ -39,25 +42,28 @@
</div> </div>
</div> </div>
<div class="col-xs-12 col-md-6"> <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"> <label for="street" class="control-label">
Straße: Straße:
</label> </label>
<input id="street" type="text" v-model="address.street" class="form-control"> <input id="street" type="text" v-model="address.street" class="form-control">
<span class="help-block">{{ formErrors.street }}</span>
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.zipCode }">
<label for="zipCode" class="control-label"> <label for="zipCode" class="control-label">
PLZ: PLZ:
</label> </label>
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control"> <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
<span class="help-block">{{ formErrors.zipCode }}</span>
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.city }">
<label for="city" class="control-label"> <label for="city" class="control-label">
Stadt: Stadt:
</label> </label>
<input id="city" type="text" v-model="address.city" class="form-control"> <input id="city" type="text" v-model="address.city" class="form-control">
<span class="help-block">{{ formErrors.city }}</span>
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.country }">
<label for="country" class="control-label"> <label for="country" class="control-label">
Land: Land:
</label> </label>
@@ -65,12 +71,14 @@
<option v-for="country in $store.state.countries" <option v-for="country in $store.state.countries"
:value="country['code']">{{ country['name'] }}</option> :value="country['code']">{{ country['name'] }}</option>
</select> </select>
<span class="help-block">{{ formErrors.country }}</span>
</div> </div>
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.email }">
<label for="email" class="control-label"> <label for="email" class="control-label">
E-Mail: E-Mail:
</label> </label>
<input id="email" type="text" v-model="address.email" class="form-control"> <input id="email" type="text" v-model="address.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone" class="control-label"> <label for="phone" class="control-label">
@@ -109,18 +117,11 @@
return { return {
picker: null, picker: null,
address: {}, address: {},
requiredFields: [ formErrors: {}
{ 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' }
]
} }
}, },
created () { created () {
this.initFormErrors();
this.fetchAddress(); this.fetchAddress();
}, },
mounted () { mounted () {
@@ -136,28 +137,43 @@
}); });
}, },
methods: { methods: {
initFormErrors () {
this.formErrors = {
name: null,
firstName: null,
dateOfBirth: null,
email: null,
gender: null,
street: null,
zipCode: null,
city: null,
country: null
}
},
fetchAddress () { fetchAddress () {
this.$store.dispatch('address/load') this.$store.dispatch('address/load')
.then((data) => { .then((data) => {
this.address = data; this.address = data;
this.picker.setDate(new Date(this.address.dateOfBirth), true); this.picker.setDate(new Date(this.address.dateOfBirth), true);
})
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
saveAddress () { saveAddress () {
for (const entry of this.requiredFields) this.initFormErrors();
{ this.$store.dispatch('address/save', this.address)
if (!this.address[entry.field]) { .catch(error => {
this.$store.commit('alert', { this.$store.commit('alert', {
message: 'Bitte das Feld "' + entry.label + '" ausfüllen', message: 'Bitte überprüfe deine Eingaben.',
class: 'alert-danger' class: 'alert-danger'
}); });
EventBus.$emit('scrollTo', '#myep-main'); const violations = error.response.data['violations'];
return false; for (let violation of violations) {
this.formErrors[violation.propertyPath] = violation.message;
} }
} })
this.$store.dispatch('address/save', this.address) .finally(() => {
.then(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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') this.$store.dispatch('crmdata/load')
.then((data) => { .then((data) => {
this.crmData = data; this.crmData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
saveSelections () { saveSelections () {
this.$store.dispatch('crmdata/save', this.crmData) this.$store.dispatch('crmdata/save', this.crmData)
.then(() => { .finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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') this.$store.dispatch('events/load')
.then((events) => { .then((events) => {
this.events = events; this.events = events;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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: { methods: {
toggleMode () { toggleMode () {
this.mode = this.mode === 'login' ? 'reset' : 'login'; this.mode = this.mode === 'login' ? 'reset' : 'login';
this.password = '';
}, },
submit () { submit () {
this.message = ''; this.message = '';
@@ -77,6 +78,8 @@
password: this.password password: this.password
}).then(() => { }).then(() => {
this.$router.push({ name: 'address' }); this.$router.push({ name: 'address' });
}).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
@@ -103,7 +106,8 @@
class: 'alert-danger' class: 'alert-danger'
}); });
} }
}).then(() => { }).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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') this.$store.dispatch('address/load')
.then((data) => { .then((data) => {
this.address = data; this.address = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
@@ -40,7 +41,7 @@
registration: this.address.newsletter registration: this.address.newsletter
}; };
this.$store.dispatch('newsletter/registration', data) this.$store.dispatch('newsletter/registration', data)
.then(() => { .finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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()"> <form @submit.prevent="submit()">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group" :class="{'has-error': formErrors.firstName }">
<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">
<label for="firstname" class="control-label"> <label for="firstname" class="control-label">
Vorname Vorname
</label> </label>
<input id="firstname" type="text" v-model="userData.firstName" class="form-control"> <input id="firstname" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div> </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"> <label for="name" class="control-label">
Name Name
</label> </label>
<input id="name" type="text" v-model="userData.name" class="form-control"> <input id="name" type="text" v-model="userData.name" class="form-control">
<span class="help-block">{{ formErrors.name }}</span>
</div> </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"> <label for="gender" class="control-label">
Gender Gender
</label> </label>
@@ -31,7 +42,12 @@
<option value="W">W</option> <option value="W">W</option>
<option value="D">D</option> <option value="D">D</option>
</select> </select>
<span class="help-block">{{ formErrors.gender }}</span>
</div> </div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
<div class="btn-group"> <div class="btn-group">
<button type="submit" class="button" :disabled="loading"> <button type="submit" class="button" :disabled="loading">
@@ -43,8 +59,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-md-6">
</div>
</div> </div>
</form> </form>
</div> </div>
@@ -56,12 +70,8 @@
export default { export default {
data () { data () {
return { return {
userData: { userData: {},
email: '', formErrors: {}
name: '',
firstName: '',
gender: 'M'
}
} }
}, },
methods: { methods: {
@@ -70,51 +80,54 @@
this.register(); this.register();
}, },
register () { register () {
if (!this.userData.email) { this.initFormErrors();
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.$store.dispatch('register', this.$store.dispatch('register',
this.userData this.userData
).then((response) => { ).then(() => {
const result = response.data.satz;
if (result.typ === 'HINWEIS') {
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.dispatch('resetPassword', this.userData.email);
this.$store.commit('alert', { this.$store.commit('alert', {
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.', message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success' 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 {
const violations = error.response.data['violations'];
for (let violation of violations) {
this.formErrors[violation.propertyPath] = violation.message;
} }
this.userData.email = ''; }
this.userData.name = ''; }).finally(() => {
this.userData.firstName = '';
}).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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: { computed: {
loading () { loading () {
return this.$store.state.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') this.$store.dispatch('teamer/load')
.then((data) => { .then((data) => {
this.teamerData = data; this.teamerData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}) });
}, },
saveTeamerData () { saveTeamerData () {
this.$store.dispatch('teamer/save', this.teamerData) this.$store.dispatch('teamer/save', this.teamerData)
.then(() => { .finally(() => {
EventBus.$emit('scrollTo', '#myep-main'); 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 :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' class: 'alert-danger'
}, { root: true }); }, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error; throw error;
}); });
} }