From ebbebcca08b03b78abdba54f29ad0ba4fe2201db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Sat, 28 Sep 2019 22:40:29 +0200
Subject: [PATCH] Code cleanup

---
 .../Assets/js/components/HotelList.vue        |   6 +-
 .../Assets/js/components/Watchlist.vue        |   3 +-
 .../Assets/js/components/WatchlistToggle.vue  |   4 +-
 .../Private/Assets/js/myep/Address.vue        |  38 +++--
 .../Resources/Private/Assets/js/myep/App.vue  |  15 +-
 .../Private/Assets/js/myep/CrmData.vue        |  68 +++++---
 .../Private/Assets/js/myep/Events.vue         |  34 ++--
 .../Private/Assets/js/myep/Login.vue          |  25 +--
 .../Private/Assets/js/myep/Newsletter.vue     |  38 ++++-
 .../Private/Assets/js/myep/Registration.vue   |  55 ++++---
 .../Private/Assets/js/myep/Teamer.vue         |  65 ++++++--
 .../Private/Assets/js/router/index.js         |   4 +-
 .../Private/Assets/js/store/index.js          | 147 ++++++++++--------
 .../Assets/js/store/modules/address.js        |  59 -------
 .../Assets/js/store/modules/crmdata.js        |  57 -------
 .../Private/Assets/js/store/modules/events.js |  33 ----
 .../Assets/js/store/modules/newsletter.js     |  37 -----
 .../Private/Assets/js/store/modules/teamer.js |  73 ---------
 18 files changed, 319 insertions(+), 442 deletions(-)
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/address.js
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/crmdata.js
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/events.js
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/newsletter.js
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/teamer.js

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
index d6dad1a4..64a58fd3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
@@ -1,11 +1,13 @@
 <script>
-    import WatchlistToggle from './WatchlistToggle.vue'
+    import WatchlistToggle from './WatchlistToggle'
+    import BackLink from './BackLink'
 
     import defaultFilterSettings from '../_filtersettings'
 
     export default {
         components: {
-            WatchlistToggle
+            WatchlistToggle,
+            BackLink
         },
         props: {
             referringPageUrl: {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
index ccf905de..4f41a027 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
@@ -47,7 +47,6 @@
         },
         data () {
             return {
-                watchlist: [],
                 teasers: {},
                 total: 0,
                 loading: false,
@@ -65,7 +64,7 @@
                     return;
                 }
                 let query = {};
-                query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchlist;
+                query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchList;
                 this.loading = true;
                 axios({
                     url: this.watchlistUri,
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
index 9e5b08f0..8255d3a8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
@@ -30,7 +30,9 @@
             }
         },
         computed: {
-            ...mapGetters(['onWatchlist'])
+            onWatchlist () {
+                return this.$store.getters.onWatchlist(this.uid)
+            }
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
index 3eab91b2..efd98f1d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
 	    <h1>Adressdaten</h1>
-        <form @submit.prevent="saveAddress()">
+        <form @submit.prevent="save()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
                     <div class="form-group">
@@ -68,7 +68,7 @@
                             Land:
                         </label>
                         <select id="country" v-model="userData.country" class="form-control">
-                            <option v-for="country in $store.state.countries"
+                            <option v-for="country in countries"
                                     :value="country['code']">{{ country['name'] }}</option>
                         </select>
                         <span class="help-block">{{ formErrors.country }}</span>
@@ -107,8 +107,8 @@
 
 <script>
     import Vue from 'vue'
-    import { mapState } from 'vuex'
-    import $ from 'jquery'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
 
@@ -116,29 +116,32 @@
 	    data () {
 	        return {
 	            picker: null,
-                formErrors: {}
+                formErrors: {},
+                countries: []
 			}
         },
 		created () {
             this.initFormErrors();
-            this.$store.dispatch('address/load')
+            this.loadFormOptions();
+            this.$store.dispatch('loadAddress')
                 .then(() => {
                     this.picker.setDate(new Date(this.userData.dateOfBirth), true);
                 });
         },
         mounted () {
             Vue.nextTick(() => {
-                this.picker = $(this.$refs.picker).flatpickr({
+                this.picker = flatpickr(this.$refs.picker, {
                     dateFormat: 'd.m.Y',
                     locale: German,
                     inline: true,
-                    onChange: (selectedDates) => {
+                    onChange: selectedDates => {
                         this.userData.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
                     }
                 });
             })
         },
         methods: {
+	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
             initFormErrors () {
                 this.formErrors = {
                     lastName: null,
@@ -152,15 +155,26 @@
                     country: null
                 }
             },
-            saveAddress () {
+            loadFormOptions () {
+                this.beginLoading();
+                return axios({
+                        url: '/api/countries',
+                    }).then(response => {
+                        this.countries = response.data
+                    }).catch(error => {
+                    }).finally(() => {
+                        this.endLoading()
+                    });
+            },
+            save () {
                 this.initFormErrors();
-                this.$store.dispatch('address/save', this.userData)
+                this.$store.dispatch('saveAddress', this.userData)
                     .catch(error => {
-                        this.$store.commit('alert', {
+                        this.alert({
                             message: 'Bitte überprüfe deine Eingaben.',
                             class: 'alert-danger'
                         });
-                        const violations = error.response.data['violations'];
+                        const violations = error.response.data.violations;
                         for (let violation of violations) {
                             this.formErrors[violation.property_path] = violation.message;
                         }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index 629f45b4..15611b0b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
@@ -62,20 +62,15 @@
             ...mapGetters(['isLoggedIn', 'isTeamer'])
         },
         mounted () {
-            this.$store.dispatch('initSession')
-                .then(()=> {
-                    if (this.isLoggedIn) {
-                        this.$router.push({ name: 'address' })
-                    }
-                })
+            this.$store.commit('initSession');
+            if (this.isLoggedIn) {
+                this.$router.push({ name: 'address' })
+            }
         }
     }
 </script>
 
 <style scoped lang="scss">
-    .nav-disabled {
-        opacity: 0.5;
-    }
     #app {
         position: relative;
     }
@@ -86,7 +81,7 @@
         z-index: 10;
         width: 100%;
         height: 100%;
-        background-color: rgba(255, 255, 255, 0.85);
+        background-color: rgba(255, 255, 255, 0.75);
 
         img {
             position: absolute;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
index f7d39233..fecc218e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
@@ -1,10 +1,10 @@
 <template>
     <div id="myep-main" v-show="!loading">
         <h1>Mein Profil</h1>
-        <form @submit.prevent="saveSelections()">
+        <form @submit.prevent="save()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
-                    <template v-for="selectionGroup in this.crmData.selectionGroups"
+                    <template v-for="selectionGroup in crmData.selectionGroups"
                               v-if="hasVisibleSelections(selectionGroup)">
                         <h3>{{ selectionGroup.name}}</h3>
                         <div class="checkbox" v-for="selection in selectionGroup.selections"
@@ -19,7 +19,7 @@
                     </template>
                 </div>
                 <div class="col-xs-12 col-md-6">
-                    <div class="checkbox" v-for="action in this.crmData.actions"
+                    <div class="checkbox" v-for="action in crmData.actions"
                          v-if="action.changeable === true">
                         <label :class="{ disabled: !action.changeable}">
                             <input type="checkbox" class="form-control"
@@ -44,7 +44,8 @@
 </template>
 
 <script>
-    import { mapState } from 'vuex'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
 
     export default {
         data () {
@@ -55,36 +56,67 @@
             }
         },
         created () {
-            this.fetchSelections();
+            this.load()
         },
         methods: {
-            fetchSelections () {
-                this.$store.dispatch('crmdata/load')
-                    .then((data) => {
-                        this.crmData = data;
-                    }).catch(error => {});
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
+            getClient () {
+                return axios.create({
+                    headers: {
+                        'Authorization': 'Bearer ' + this.authToken
+                    }
+                });
             },
-            saveSelections () {
-                this.$store.dispatch('crmdata/save', this.crmData)
-                    .catch(error => {});
+            load () {
+                this.beginLoading();
+
+                return this.getClient().get('/api/crm-selections')
+                    .then(response => {
+                        this.crmData = response.data
+                    }).catch(error => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        })
+                    }).finally(() => {
+                        this.endLoading()
+                    });
+            },
+            save () {
+                this.beginLoading();
+
+                return this.getClient().put('/api/crm-selections', this.crmData)
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            class: 'alert-success'
+                        });
+                    }).catch(error => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        });
+                    }).finally(() => {
+                        this.endLoading();
+                    });
             },
             hasVisibleSelections (group) {
                 if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) {
-                    return false;
+                    return false
                 }
                 for (let selection of group.selections) {
                     if (this.hiddenSelections.indexOf(selection.id) === -1 && selection.changeable === true) {
-                        return true;
+                        return true
                     }
                 }
-                return false;
+                return false
             },
             isSelectionVisible (selection) {
-                return this.hiddenSelections.indexOf(selection.id) === -1;
+                return this.hiddenSelections.indexOf(selection.id) === -1
             }
         },
         computed: {
-            ...mapState(['loading'])
+            ...mapState(['loading', 'authToken'])
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
index 47cfd443..7de2993c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
@@ -42,7 +42,8 @@
 </template>
 
 <script>
-    import { mapState } from 'vuex'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -56,25 +57,40 @@
                     'O': 'Option',
                     'U': 'Umbuchung',
                 },
-	            events: []
+                events: []
 			}
         },
         created () {
-            this.fetchEvents();
+            this.load()
         },
         methods: {
-            fetchEvents () {
-                this.$store.dispatch('events/load')
-                    .then((events) => {
-                        this.events = events;
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
+            load () {
+                this.beginLoading();
+
+                const client = axios.create({
+                    headers: {
+                        'Authorization': 'Bearer ' + this.authToken
+                    }
+                });
+
+                return client.get('/api/events')
+                    .then(response => {
+                        this.events = response.data;
                     }).catch(error => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        });
+                    }).finally(() => {
+                        this.endLoading();
                     });
             },
             formatBookingDate (date) {
                 if (!date) {
-                    return '-';
+                    return '-'
                 }
-                return dayjs(date).format('DD.MM.YYYY');
+                return dayjs(date).format('DD.MM.YYYY')
             },
             getDownloadUrl (event, type) {
                 return this.config.myEpApiBaseUrl
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
index a0df5c7f..77a0fc47 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-    import { mapState, mapGetters } from 'vuex'
+    import { mapState, mapGetters, mapMutations } from 'vuex'
 
 	export default {
 	    data () {
@@ -53,25 +53,26 @@
             }
         },
         methods: {
+	        ...mapMutations(['alert']),
 	        toggleMode () {
 	            this.mode = this.mode === 'login' ? 'reset' : 'login';
-	            this.password = '';
+	            this.password = ''
             },
 	        submit () {
 	            this.message = '';
 	            if (this.mode === 'login') {
-	                this.login();
+	                this.login()
                 } else {
-	                this.resetPassword();
+	                this.resetPassword()
                 }
             },
             login () {
                 if (!this.email || !this.password) {
-                    this.$store.commit('alert', {
+                    this.alert({
                         message: 'Bitte E-Mail und Passwort eingeben',
                         class: 'alert-danger'
                     });
-                    return;
+                    return
                 }
                 this.$store.dispatch('login', {
                     email: this.email,
@@ -83,7 +84,7 @@
             },
             resetPassword () {
 	            if (!this.email) {
-                    this.$store.commit('alert', {
+                    this.alert({
                         message: 'Bitte die E-Mail Adresse angeben',
                         class: 'alert-danger'
                     });
@@ -91,18 +92,18 @@
                 }
                 this.$store.dispatch('resetPassword',
                     this.email
-                ).then((response) => {
+                ).then(response => {
                     this.email = '';
                     if (response.data.success) {
-                        this.$store.commit('alert', {
+                        this.alert({
                             message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
                             class: 'alert-success'
-                        });
+                        })
                     } else {
-                        this.$store.commit('alert', {
+                        this.alert({
                             message: 'Diese E-Mail Adresse konnte nicht gefunden werden.',
                             class: 'alert-danger'
-                        });
+                        })
                     }
                 }).catch(error => {
                 });
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
index b51a6664..791975f2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
@@ -4,33 +4,59 @@
         <div class="row">
             <div class="col-xs-12">
                 <p v-html="statusMessage"></p>
-                <button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
-                    {{ userData.newsletter ? 'Abmelden' : 'Anmelden' }}
-                </button>
+                <div class="form-group">
+                    <button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
+                        {{ userData.newsletter ? 'Abmelden' : 'Anmelden' }}
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import { mapState } from 'vuex'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
 
 	export default {
         methods: {
+            ...mapMutations(['beginLoding', 'endLoading', 'alert']),
             toggleReqistration () {
                 this.userData.newsletter = !this.userData.newsletter;
+
                 const data = {
                     id: this.userData.id,
                     email: this.userData.email,
                     registration: this.userData.newsletter
                 };
-                this.$store.dispatch('newsletter/registration', data)
+
+                this.beginLoding();
+
+                const client = axios.create({
+                    headers: {
+                        'Authorization': 'Bearer ' + this.authToken
+                    }
+                });
+
+                return client.put('/api/newsletter', data)
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            class: 'alert-success'
+                        });
+                    })
                     .catch(error => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        });
+                    }).finally(() => {
+                        this.endLoading();
                     });
             }
         },
         computed: {
-	        ...mapState(['loading', 'userData']),
+	        ...mapState(['loading', 'userData', 'authToken']),
             statusMessage () {
                 let message = 'Du bist aktuell';
                 message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
index efba99d0..7d1bbe4f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
@@ -13,12 +13,12 @@
                     </div>
                 </div>
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.name }">
+                    <div class="form-group" :class="{'has-error': formErrors.lastName }">
                         <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>
+                        <input id="name" type="text" v-model="userData.lastName" class="form-control">
+                        <span class="help-block">{{ formErrors.lastName }}</span>
                     </div>
                 </div>
             </div>
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-    import { mapState} from 'vuex'
+    import { mapState, mapMutations } from 'vuex'
 
 	export default {
 	    data () {
@@ -75,39 +75,38 @@
             }
         },
         methods: {
+            ...mapMutations(['alert']),
 	        submit () {
 	            this.message = '';
                 this.register();
             },
             register () {
                 this.initFormErrors();
-                this.$store.dispatch('register',
-                    this.userData
-                ).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 {
-                        const violations = error.response.data['violations'];
-                        for (let violation of violations) {
-                            this.formErrors[violation.propertyPath] = violation.message;
+                this.$store.dispatch('register', this.userData)
+                    .then(response => {
+                        if (response.data.success) {
+                            this.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();
+                        } else {
+                            this.alert({
+                                message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
+                                class: 'alert-danger'
+                            });
                         }
-                    }
-                });
+                    }).catch(error => {
+                        const violations = error.response.data.violations;
+                        for (let violation of violations) {
+                            this.formErrors[violation.property_path] = violation.message;
+                        }
+                    });
             },
             initFormData () {
 	            this.userData = {
-                    name: '',
+                    lastName: '',
                     firstName: '',
                     email: '',
                     gender: 'M'
@@ -115,7 +114,7 @@
             },
             initFormErrors () {
 	            this.formErrors = {
-                    name: null,
+                    lastName: null,
                     firstName: null,
                     email: null,
                     gender: null
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
index cb659995..4f584c14 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
         <h1>Teamer</h1>
-        <form @submit.prevent="saveTeamerData()">
+        <form @submit.prevent="save()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
                     <h4>Fährst du Ski oder Board?</h4>
@@ -63,7 +63,7 @@
                     <h4>Verfügbarkeiten</h4>
                     <div class="checkbox" v-for="timeFrame in timeFrames">
                         <label>
-                            <input type="checkbox" class="form-control" v-model="userData.availableTimeframes"
+                            <input type="checkbox" class="form-control" v-model="userData.availableTimeFrames"
                                    :value="timeFrame.id"/>
                             <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                             {{ timeFrame | period }}
@@ -92,7 +92,8 @@
 </template>
 
 <script>
-    import { mapState } from 'vuex'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -103,14 +104,35 @@
                 status: [
                     { value: 'jr', label: 'Neuteamer' },
                     { value: 'sr', label: 'Bestandsteamer' }
-                ]
+                ],
+                abilities: [],
+                timeFrames: [],
+                jobProfiles: []
             }
         },
         methods: {
-            fetchTeamerData () {
-                this.$store.dispatch('teamer/loadSelectableValues');
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
+            getClient () {
+                return axios.create({
+                    headers: {
+                        'Authorization': 'Bearer ' + this.authToken
+                    }
+                });
             },
-            saveTeamerData () {
+            load () {
+                this.beginLoading();
+
+                return this.getClient().get('/api/teamer-data')
+                    .then(response => {
+                        this.abilities = response.data.abilities;
+                        this.timeFrames = response.data.timeFrames;
+                        this.jobProfiles = response.data.jobProfiles;
+                    }).catch(error => {
+                    }).finally(() => {
+                        this.endLoading();
+                    });
+            },
+            save () {
                 const data = {
                     abilities: this.userData.abilities,
                     jobProfiles: this.userData.jobProfiles,
@@ -121,19 +143,30 @@
                     monthLong: this.userData.monthLong,
                     notes: this.userData.notes,
                 };
-                this.$store.dispatch('teamer/save', data)
-                    .catch(error => {
+
+                this.beginLoading();
+
+                return this.getClient().put('/api/teamer-data', data)
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            class: 'alert-success'
+                        });
+                    }).catch(error => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        });
+                    }).finally(() => {
+                        this.endLoading();
                     });
             }
         },
         created () {
-            this.fetchTeamerData();
+            this.load()
         },
         computed: {
-            ...mapState(['userData', 'loading']),
-            ...mapState('teamer', [
-                'abilities', 'jobProfiles', 'timeFrames'
-            ])
+            ...mapState(['userData', 'loading', 'authToken'])
         },
         filters: {
             period (timeFrame) {
@@ -141,9 +174,9 @@
                 const end = dayjs(timeFrame.dateEnd);
                 let label = begin.format('DD.MM.YYYY') + ' - ' + end.format('DD.MM.YYYY');
                 if (timeFrame.label) {
-                    label += ' (' + timeFrame.label + ')';
+                    label += ' (' + timeFrame.label + ')'
                 }
-                return label;
+                return label
             }
         }
     }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js
index b8384dda..8271c146 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js
@@ -20,10 +20,12 @@ import Address from '../myep/Address'
 import Events from '../myep/Events'
 import Login from '../myep/Login'
 import CrmData from '../myep/CrmData'
-import Teamer from '../myep/Teamer'
 import Newsletter from '../myep/Newsletter'
 import Registration from '../myep/Registration'
 
+// Lazy load teamer component when required
+const Teamer = () => import('../myep/Teamer');
+
 export default new VueRouter({
     routes: [
         {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
index 052bc390..1116efcb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
@@ -2,12 +2,6 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
 
-import AddressStore from './modules/address'
-import CrmDataStore from './modules/crmdata'
-import TeamerStore from './modules/teamer'
-import EventsStore from './modules/events'
-import NewsletterStore from './modules/newsletter'
-
 Vue.use(Vuex);
 
 const defaultUserData = {
@@ -27,85 +21,73 @@ const defaultUserData = {
 };
 
 export default new Vuex.Store({
-    modules: {
-        address: AddressStore,
-        crmdata: CrmDataStore,
-        teamer: TeamerStore,
-        events: EventsStore,
-        newsletter: NewsletterStore
-    },
     state: {
         config: {},
         loading: false,
         authToken: null,
         userData: defaultUserData,
-        countries: [],
         alert: {
             message: '',
             class: ''
         }
     },
     mutations: {
-        initSession (state) {
+        initSession(state) {
             const authToken = sessionStorage.getItem('token');
             if (authToken) {
                 state.authToken = authToken;
             }
         },
-        initConfig (state) {
+        initConfig(state) {
             const configElement = document.getElementById('appconfig');
             state.config = JSON.parse(configElement.innerHTML);
             axios.defaults.baseURL = state.config.myEpApiBaseUrl;
         },
-        initWatchlist (state) {
+        initWatchlist(state) {
             if (!sessionStorage.getItem('watchList')) {
                 sessionStorage.setItem('watchList', JSON.stringify([]));
             }
             state.userData.watchList = JSON.parse(sessionStorage.getItem('watchList'));
         },
-        setWatchlist (state, list) {
+        setWatchlist(state, list) {
             state.userData.watchList = list;
             sessionStorage.setItem('watchList', JSON.stringify(list));
         },
-        setUserData (state, data) {
+        setUserData(state, data) {
             data.watchList = [...state.userData.watchList, ...data.watchList];
             state.userData = data;
         },
-        login (state, token) {
+        login(state, token) {
             state.authToken = token;
             sessionStorage.setItem('token', token);
         },
-        logout (state) {
+        logout(state) {
             state.authToken = null;
             state.userData = defaultUserData;
             sessionStorage.removeItem('token');
             sessionStorage.removeItem('watchlist');
         },
-        alert (state, payload) {
+        alert(state, payload) {
             state.alert = payload;
         },
-        loadingBegin (state) {
+        beginLoading(state) {
             state.loading = true;
-            state.alert = { message: '', class: ''};
+            state.alert = {message: '', class: ''};
         },
-        loadingFinish (state) {
+        endLoading(state) {
             state.loading = false;
         },
-        setCountries (state, countries) {
+        setCountries(state, countries) {
             state.countries = countries;
         }
     },
     actions: {
-        init({ commit }) {
+        init({commit}) {
             commit('initConfig');
             commit('initWatchlist');
         },
-        initSession({ commit, dispatch }) {
-            commit('initSession');
-            return dispatch('loadSelectableValues')
-        },
-        login({ commit, dispatch }, credentials) {
-            commit('loadingBegin');
+        login({commit, dispatch}, credentials) {
+            commit('beginLoading');
             return axios({
                 url: '/api/login_check',
                 method: 'post',
@@ -124,11 +106,11 @@ export default new Vuex.Store({
                 });
                 throw error;
             }).finally(() => {
-                commit('loadingFinish');
+                commit('endLoading');
             });
         },
-        logout({ commit, state }) {
-            commit('loadingBegin');
+        logout({commit, state}) {
+            commit('beginLoading');
             const client = axios.create({
                 headers: {
                     'Authorization': 'Bearer ' + state.authToken,
@@ -136,57 +118,37 @@ export default new Vuex.Store({
             });
             return client({
                 url: '/api/logout'
-            }).then(() => {
-                commit('logout');
             }).catch(error => {
-                commit('alert', {
-                    message: 'Der Logout ist fehlgeschlagen :(',
-                    class: 'alert-danger'
-                });
-                throw error;
             }).finally(() => {
-                commit('loadingFinish');
+                commit('logout');
+                commit('endLoading');
             });
         },
-        resetPassword({ commit }, email) {
-            commit('loadingBegin');
+        resetPassword({commit}, email) {
+            commit('beginLoading');
             return axios({
                 url: '/api/reset-password',
-                data: { email: email },
+                data: {email: email},
                 method: 'post'
             }).then(response => {
                 return response;
-            }).catch(error => {
-                throw error;
             }).finally(() => {
-                commit('loadingFinish');
+                commit('endLoading');
             });
         },
-        register({ commit }, userData) {
-            commit('loadingBegin');
+        register({commit}, userData) {
+            commit('beginLoading');
             return axios({
                 url: '/api/register',
                 data: userData,
                 method: 'post'
             }).then(response => {
                 return response;
-            }).catch(error => {
-                throw error;
             }).finally(() => {
-                commit('loadingFinish');
+                commit('endLoading');
             });
         },
-        loadSelectableValues ({ commit }) {
-            commit('loadingBegin');
-            return axios({
-                url: '/api/countries',
-            }).then(response => {
-                commit('setCountries', response.data);
-            }).finally(() => {
-                commit('loadingFinish');
-            });
-        },
-        watchlistToggle ({ commit, state }, uid) {
+        watchlistToggle({commit, state}, uid) {
             let list = state.userData.watchList;
             let watchlistIndex = list.indexOf(uid);
             if (watchlistIndex === -1) {
@@ -199,6 +161,59 @@ export default new Vuex.Store({
                 axios.put('/api/watchlist', list)
             }
         },
+        loadAddress({commit, state}) {
+            commit('beginLoading');
+
+            const client = axios.create({
+                headers: {
+                    'Authorization': 'Bearer ' + state.authToken,
+                }
+            });
+
+            return client.get('/api/address')
+                .then(response => {
+                    commit('setUserData', response.data);
+                    if (response.data.watchlist) {
+                        commit('setWatchlist', response.data.watchlist);
+                    }
+                }).catch(() => {
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten :(',
+                        class: 'alert-danger'
+                    });
+                }).finally(() => {
+                    commit('endLoading');
+                });
+        },
+        saveAddress({commit, state}, data) {
+            commit('beginLoading');
+
+            const client = axios.create({
+                headers: {
+                    'Authorization': 'Bearer ' + state.authToken,
+                }
+            });
+
+            return client.put('/api/address', data)
+                .then(() => {
+                    commit('alert', {
+                        message: 'Die Änderungen wurden gespeichert',
+                        class: 'alert-success'
+                    });
+                })
+                .catch(error => {
+                    if (error.config.status >= 500) {
+                        commit('alert', {
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            class: 'alert-danger'
+                        });
+                    } else {
+                        throw error;
+                    }
+                }).finally(() => {
+                    commit('endLoading');
+                });
+        }
     },
     getters: {
         watchlistCount: state => state.userData.watchList.length,
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/address.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/address.js
deleted file mode 100644
index 6aaba9f2..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/address.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import axios from 'axios';
-
-export default {
-    namespaced: true,
-    state: {},
-    actions: {
-        load ({ commit, rootState }) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken,
-                }
-            });
-
-            return client.get('/api/address')
-                .then(response => {
-                    commit('setUserData', response.data, { root: true });
-                    if (response.data.watchlist) {
-                        commit('setWatchlist', response.data.watchlist, { root: true });
-                    }
-                }).catch(() => {
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                }).finally(() => {
-                    commit('loadingFinish', null, { root: true });
-                });
-        },
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken,
-                }
-            });
-
-            return client.put('/api/address', data)
-                .then(() => {
-                    commit('alert', {
-                        message: 'Die Änderungen wurden gespeichert',
-                        class: 'alert-success'
-                    }, { root: true });
-                })
-                .catch(error => {
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    throw error;
-                }).finally(() => {
-                    commit('loadingFinish', null, { root: true });
-                });
-        }
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/crmdata.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/crmdata.js
deleted file mode 100644
index 9f842a5d..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/crmdata.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import axios from 'axios';
-
-export default {
-    namespaced: true,
-    state: {},
-    actions: {
-        load ({ commit, rootState }) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.get('/api/crm-selections')
-                .then((response) => {
-                    commit('loadingFinish', null, { root: true });
-                    return response.data;
-                }).catch((error) => {
-                    commit('loadingFinish', null, { root: true });
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                    throw error;
-                });
-        },
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.put('/api/crm-selections', data)
-                .then(() => {
-                    commit('loadingFinish', null, { root: true });
-                    commit('alert', {
-                        message: 'Die Änderungen wurden gespeichert',
-                        class: 'alert-success'
-                    }, { root: true });
-                }).catch((error) => {
-                    commit('loadingFinish', null, { root: true });
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                    throw error;
-                });
-        }
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/events.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/events.js
deleted file mode 100644
index 5232859f..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/events.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import EventBus from '../../_bus';
-import axios from 'axios';
-
-export default {
-    namespaced: true,
-    state: {},
-    actions: {
-        load ({ commit, rootState }) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.get('/api/events')
-                .then((response) => {
-                    commit('loadingFinish', null, { root: true });
-                    return response.data;
-                }).catch((error) => {
-                    commit('loadingFinish', null, { root: true });
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                    EventBus.$emit('forcedLogout');
-                    throw error;
-                });
-        }
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/newsletter.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/newsletter.js
deleted file mode 100644
index 5cf3c614..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/newsletter.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import EventBus from '../../_bus';
-import axios from 'axios';
-
-export default {
-    namespaced: true,
-    state: {},
-    actions: {
-        registration ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.put('/api/newsletter', data)
-                .then(() => {
-                    commit('alert', {
-                        message: 'Die Änderungen wurden gespeichert',
-                        class: 'alert-success'
-                    }, { root: true });
-                })
-                .catch((error) => {
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                    EventBus.$emit('forcedLogout');
-                    throw error;
-                }).finally(() => {
-                    commit('loadingFinish', null, { root: true });
-                });
-        }
-    }
-}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/teamer.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/teamer.js
deleted file mode 100644
index c24a81d4..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/teamer.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import axios from 'axios';
-
-export default {
-    namespaced: true,
-    state: {
-        abilities: [],
-        timeFrames: [],
-        jobProfiles: []
-    },
-    mutations: {
-        setAbilities (state, abilities) {
-            state.abilities = abilities;
-        },
-        setTimeFrames (state, timeFrames) {
-            state.timeFrames = timeFrames;
-        },
-        setJobProfiles (state, jobProfiles) {
-            state.jobProfiles = jobProfiles;
-        }
-    },
-    actions: {
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.put('/api/teamer-data', data)
-                .then(() => {
-                    commit('alert', {
-                        message: 'Die Änderungen wurden gespeichert',
-                        class: 'alert-success'
-                    }, { root: true });
-                }).catch(error => {
-                    commit('alert', {
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    }, { root: true });
-                    commit('logout', null, { root: true });
-                    throw error;
-                }).finally(() => {
-                    commit('loadingFinish', null, { root: true });
-                });
-        },
-        loadSelectableValues ({ commit, rootState }) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.authToken
-                }
-            });
-
-            return client.get('/api/teamer-data')
-                .then(response => {
-                    commit('setAbilities', response.data.abilities);
-                    commit('setTimeFrames', response.data.timeFrames);
-                    commit('setJobProfiles', response.data.jobProfiles);
-                }).catch(error => {
-                }).finally(() => {
-                    commit('loadingFinish', null, { root: true });
-                });
-        }
-    },
-    getters: {
-        abilities: state => state.abilities,
-        jobProfiles: state => state.jobProfiles,
-        timeFrames: state => state.timeFrames
-    }
-}