From 808b3c2e3e0aa69689ee6c8929f7087fefbcc013 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 11 Jul 2019 18:18:34 +0200
Subject: [PATCH] Improve/streamline error handling

---
 .../Assets/js/myep/components/Address.vue     |  74 +++++++-----
 .../Assets/js/myep/components/CrmData.vue     |   3 +-
 .../Assets/js/myep/components/Events.vue      |   1 +
 .../Assets/js/myep/components/Login.vue       |   6 +-
 .../Assets/js/myep/components/Newsletter.vue  |   3 +-
 .../js/myep/components/Registration.vue       | 113 ++++++++++--------
 .../Assets/js/myep/components/Teamer.vue      |   5 +-
 .../Private/Assets/js/myep/stores/address.js  |   2 -
 8 files changed, 121 insertions(+), 86 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index 02bc10ab..1d3faefb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -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');
                     });
             }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
index 012d1ccf..ddaa56ba 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
@@ -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');
                     });
             },
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
index d332992d..86994402 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
@@ -67,6 +67,7 @@
                 this.$store.dispatch('events/load')
                     .then((events) => {
                         this.events = events;
+                    }).finally(() => {
                         EventBus.$emit('scrollTo', '#myep-main');
                     });
             },
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index 9c847514..5f98f635 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -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');
                 });
             }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue
index 14441939..3487e12c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue
@@ -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');
                     });
             }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
index 0dd96594..45936343 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
@@ -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;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
index 93c97b0c..f70e7f36 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
@@ -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');
                     });
             }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js
index ec25bd3e..3ca0b8f7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js
@@ -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;
                 });
         }