Implement 'MyEP' application, basic functionality

2018-10-15 15:44:49 +02:00
parent 00272a4c31
commit a440159a1d
21 changed files with 691 additions and 17 deletions
@@ -519,6 +519,15 @@
      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
      "dev": true
    },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -745,6 +754,12 @@
      "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
      "dev": true
    },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
+      "dev": true
+    },
    "babel-plugin-syntax-exponentiation-operator": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
@@ -3202,7 +3217,6 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
      "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
-      "dev": true,
      "requires": {
        "debug": "^3.1.0"
      },
@@ -3211,7 +3225,6 @@
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
          "requires": {
            "ms": "2.0.0"
          }
@@ -4613,8 +4626,7 @@
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
    },
    "is-builtin-module": {
      "version": "1.0.0",
@@ -5609,8 +5621,7 @@
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
    "multicast-dns": {
      "version": "6.2.3",
@@ -9311,6 +9322,11 @@
        }
      }
    },
+    "vue-router": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+      "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
+    },
    "vue-session": {
      "version": "0.9.10",
      "resolved": "https://registry.npmjs.org/vue-session/-/vue-session-0.9.10.tgz",
@@ -9342,6 +9358,11 @@
      "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
      "dev": true
    },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
    "watchpack": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@fancyapps/fancybox": "^3.2.5",
+    "axios": "^0.18.0",
    "bootstrap-sass": "^3.3.7",
    "bourbon": "^4.3.2",
    "cookieconsent": "^3.1.0",
@@ -27,11 +28,14 @@
    "slick-carousel": "^1.8.0",
    "sticky-js": "^1.2.0",
    "vue": "^2.5.17",
-    "vue-session": "^0.9.10"
+    "vue-router": "^3.0.1",
+    "vue-session": "^0.9.10",
+    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@symfony/webpack-encore": "^0.19.0",
    "autoprefixer": "^8.6.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "node-sass": "^4.9.3",
    "postcss-loader": "^2.1.6",
@@ -121,7 +121,7 @@ class FilterSettings implements \JsonSerializable
    /**
     * @var int
     */
-    protected $pax = 1;
+    protected $pax = 0;

    /**
     * @var array
@@ -21,8 +21,6 @@ require('leaflet');
 import EventBus from './_bus'
 import SearchBar from './components/SearchBar.vue'
 import SearchBox from './components/SearchBox.vue'
-import SearchResult from './components/SearchResult.vue'
-import ProductDetail from './components/ProductDetail.vue'
 import AjaxContent from './components/AjaxContent.vue'
 import OsmMap from './components/OsmMap.vue'
 import Calendar from './components/Calendar.vue'
@@ -53,8 +51,8 @@ new Vue({
    components: {
        SearchBar,
        SearchBox,
-        SearchResult,
-        ProductDetail,
+        SearchResult: () => import('./components/SearchResult.vue'),
+        ProductDetail: () => import('./components/ProductDetail.vue'),
        AjaxContent,
        OsmMap,
        Calendar,
@@ -63,7 +61,8 @@ new Vue({
        WatchlistToggle,
        Watchlist,
        HotelList,
-        ReferrerLink
+        ReferrerLink,
+        MyEp: () => import('./myep/components/App.vue')
    },
    data () {
        return {
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from './_store';
+
+Vue.use(VueRouter);
+
+const guard = (to, from, next) => {
+    if (store.getters.isLoggedIn) {
+        next();
+    } else {
+        next({ name: 'login' });
+    }
+};
+
+import Address from './components/Address.vue'
+import Events from './components/Events.vue'
+import Login from './components/Login.vue'
+import CrmData from './components/CrmData.vue'
+
+export default new VueRouter({
+    routes: [
+        {
+            name: 'login',
+            path: '/',
+            component: Login,
+            beforeEnter (from, to, next) {
+                if (!store.getters.isLoggedIn) {
+                    next();
+                } else {
+                    next({ name: 'address' });
+                }
+            }
+        },
+        {
+            name: 'address',
+            path: '/adressdaten',
+            component: Address,
+            beforeEnter: guard
+        },
+        {
+            name: 'events',
+            path: '/vorgaenge',
+            component: Events,
+            beforeEnter: guard
+        },
+        {
+            name: 'crm',
+            path: '/crm',
+            component: CrmData,
+            beforeEnter: guard
+        },
+        {
+            path: '*',
+            redirect: { name: 'login' }
+        }
+    ]
+});
@@ -0,0 +1,86 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        config: {},
+        pending: false,
+        isLoggedIn: !!localStorage.getItem('token'),
+        countries: []
+    },
+    mutations: {
+        pending (state) {
+            state.pending = true;
+        },
+        loginSuccess (state) {
+            state.isLoggedIn = true;
+            state.pending = false;
+        },
+        loginFailure (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        logout (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        setCountries (state, countries) {
+            state.countries = countries;
+        },
+        initConfig (state, config) {
+            state.config = config;
+        }
+    },
+    actions: {
+        login({ commit }, credentials) {
+            commit('pending');
+            const formData = new FormData();
+            formData.append('_username', credentials.email);
+            formData.append('_password', credentials.password);
+            return axios({
+                url: '/api/login',
+                data: formData,
+                method: 'post'
+            }).then((response) => {
+                localStorage.setItem('token', response.data.token);
+                commit('loginSuccess');
+                return response.data.address_id;
+            }).catch((error) => {
+                commit('loginFailure');
+                throw error;
+            });
+        },
+        logout({ commit }) {
+            commit('pending');
+            return axios({
+                url: '/api/logout'
+            }).then(() => {
+                localStorage.removeItem('token');
+                commit('logout');
+            });
+        },
+        loadCountries ({ commit }) {
+            axios({
+                url: '/api/countries',
+            }).then((response) => {
+                commit('setCountries', response.data);
+                return response.data;
+            })
+        }
+    },
+    getters: {
+        isPending: state => {
+            return state.pending;
+        },
+        isLoggedIn: state => {
+            return state.isLoggedIn;
+        },
+        authToken () {
+            return localStorage.getItem('token')
+        }
+    }
+});
+
@@ -0,0 +1,171 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+	    <h1>Adressdaten</h1>
+        <div v-if="message" class="alert" :class="messageClass">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-show="loading">
+        <form @submit.prevent="saveAddress()" v-show="!loading">
+            <div class="form-group">
+                <label for="salutation" class="control-label">
+                    Anrede:
+                </label>
+                <select id="salutation" v-model="address.salutation" class="form-control">
+                    <option value="">Bitte wählen...</option>
+                    <option value="Frau">Frau</option>
+                    <option value="Herr">Herr</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="title" class="control-label">
+                    Titel:
+                </label>
+                <input id="title" type="text" v-model="address.title" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="name" class="control-label">
+                    Name:
+                </label>
+                <input id="name" type="text" v-model="address.name" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="firstName" class="control-label">
+                    Vorname:
+                </label>
+                <input id="firstName" type="text" v-model="address.firstName" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="dateOfBirth" class="control-label">
+                    Geburtsdatum:
+                </label>
+                <input id="dateOfBirth" type="text" ref="picker" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="gender" class="control-label">
+                    Geschlecht:
+                </label>
+                <select id="gender" v-model="address.gender" class="form-control">
+                    <option value="W">weiblich</option>
+                    <option value="M">männlich</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="street" class="control-label">
+                    Straße:
+                </label>
+                <input id="street" type="text" v-model="address.street" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="zipCode" class="control-label">
+                    PLZ:
+                </label>
+                <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="city" class="control-label">
+                    Stadt:
+                </label>
+                <input id="city" type="text" v-model="address.city" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="country" class="control-label">
+                    Land:
+                </label>
+                <select id="country" v-model="address.country" class="form-control">
+                    <option v-for="country in countries" :value="country.code">{{ country.name }}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Speichern
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+	import $ from 'jquery'
+    import axios from 'axios'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            picker: null,
+                message: '',
+                messageClass: '',
+	            address: {}
+			}
+        },
+		created () {
+	        this.fetchAddress();
+        },
+        mounted () {
+            Vue.nextTick(() => {
+                this.picker = $(this.$refs.picker).flatpickr({
+                    dateFormat: 'd.m.Y',
+                    locale: German,
+                    onChange: (selectedDates) => {
+                        this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
+                    }
+                });
+            });
+        },
+        watch: {
+	        '$route': 'fetchAddress'
+        },
+        methods: {
+            fetchAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.address = response.data[0];
+                    this.picker.setDate(new Date(this.address.dateOfBirth), true);
+                    this.message = '';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            saveAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses/' + this.address.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.address
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                    this.messageClass = 'alert-success';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            }
+        },
+        computed: {
+	        loaderUrl () {
+	            return this.$store.state.config.loaderUrl;
+            },
+            countries () {
+                return this.$store.state.countries;
+            }
+        }
+    }
+</script>
@@ -0,0 +1,51 @@
+<template>
+    <div id="app">
+        <ul class="nav nav-tabs">
+            <router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link>
+            <router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Vorgänge</a></router-link>
+            <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>CRM</a></router-link>
+            <li role="presentation"><a href="#" @click.prevent="logout()" v-if="isLoggedIn">Logout</a></li>
+        </ul>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+    const configElement = document.getElementById('appconfig');
+    const config = JSON.parse(configElement.innerHTML);
+
+    import axios from 'axios';
+
+    axios.defaults.headers.common['Accept'] = 'application/json';
+    axios.defaults.headers.put['Content-Type'] = 'application/json';
+    axios.defaults.baseURL = config.myEpApiBaseUrl;
+
+    import store from '../_store'
+
+    store.commit('initConfig', config);
+
+    import router from '../_router'
+
+    export default {
+        store,
+        router,
+        methods: {
+            logout () {
+                this.$store.dispatch('logout').then(() => {
+                    this.$router.push({ name: 'login' })
+                });
+            }
+        },
+        computed: {
+            isLoggedIn () {
+                return this.$store.getters.isLoggedIn;
+            },
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        },
+        created () {
+            this.$store.dispatch('loadCountries');
+        }
+    }
+</script>
@@ -0,0 +1,98 @@
+<template>
+    <div id="myep-main">
+        <h1>CRM Merkmale</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <template v-if="!loading">
+            <h2>Selektionsmerkmale</h2>
+            <template v-for="selectionGroup in this.crmData.selectionGroups">
+                <h3>{{ selectionGroup.name}}</h3>
+                <div class="checkbox" v-for="selection in selectionGroup.selections">
+                    <label :class="{ 'disabled': selection.changeable }">
+                        <input type="checkbox" class="form-control" value="True" :checked="selection.value === 'True'" :disabled="selection.changeable === 'False'"/>
+                        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                        {{ selection.name }}
+                    </label>
+                </div>
+            </template>
+            <h2>CRM Aktionen</h2>
+            <div class="checkbox" v-for="action in this.crmData.actions">
+                <label>
+                    <input type="checkbox" class="form-control" value="True" :checked="action.value === 'True'"/>
+                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                    {{ action.name }}
+                </label>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import EventBus from '../../_bus'
+
+    export default {
+        data () {
+            return {
+                loading: false,
+                message: '',
+                crmData: []
+            }
+        },
+        created () {
+            this.fetchSelections();
+        },
+        watch: {
+            '$route': 'fetchSelections'
+        },
+        methods: {
+            fetchSelections () {
+                this.loading = true;
+                axios({
+                    url: '/api/crm-selections',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.crmData = response.data[0];
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            },
+            saveSelections () {
+                this.loading = false;
+                axios({
+                    url: '/api/crm-selections/' + this.crmData.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.crmData
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    label.disabled {
+        opacity: 0.5;
+    }
+</style>
@@ -0,0 +1,105 @@
+<template>
+    <div id="myep-main">
+        <h1>Vorgänge</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <div class="table-responsive" v-if="!loading">
+            <table class="table table-striped table-condensed">
+                <thead>
+                    <tr>
+                        <th>Buchungsdatum</th>
+                        <th>Reisedatum</th>
+                        <th>Reise</th>
+                        <th>Teilnehmer</th>
+                        <th>Preis</th>
+                        <th>Status</th>
+                        <th>Best./Rg.</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="event of events">
+                        <td>{{ formatBookingDate(event.buchungsdatum) }}</td>
+                        <td>{{ event.reisedatum | date }}</td>
+                        <td>{{ event.reise }}</td>
+                        <td>
+                            <ul>
+                                <li v-for="customer in event.customers">{{ customer.name }}, {{ customer.vorname }}</li>
+                            </ul>
+                        </td>
+                        <td>{{ event.preis }} EUR</td>
+                        <td>{{ status[event.status] }}</td>
+                        <td><a :href="$store.state.config.myEpApiBaseUrl + '/api/events/' + event.id + '/confirmation?token=' + $store.getters.authToken" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import dayjs from 'dayjs'
+    import 'dayjs/locale/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            status: {
+	                'F': 'Festbuchung',
+                    'S': 'Stornierung',
+                    'F/S': 'Festbuchung',
+                    'O': 'Option',
+                    'U': 'Umbuchung',
+                },
+                loading: false,
+	            message: '',
+	            events: []
+			}
+        },
+        created () {
+            this.fetchEvents();
+        },
+        watch: {
+            '$route': 'fetchEvents'
+        },
+        methods: {
+            fetchEvents () {
+                this.loading = true;
+                axios({
+                    url: '/api/events',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.events = response.data;
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            formatBookingDate (date) {
+                if (!date) {
+                    return '-';
+                }
+                return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr';
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    td, th {
+        text-align: left;
+        vertical-align: top;
+    }
+</style>
@@ -0,0 +1,67 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+        <h1>Login <img :src="loaderUrl" alt="" v-if="isPending"></h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <form @submit.prevent="login()">
+            <div class="form-group">
+                <label for="email" class="control-label">
+                    E-Mail
+                </label>
+                <input id="email" type="text" v-model="email" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="password" class="control-label">
+                    Passwort
+                </label>
+                <input id="password" type="password" v-model="password" class="form-control">
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Login
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            message: '',
+	            email: '',
+                password: ''
+            }
+        },
+        methods: {
+            login () {
+                if (!this.email || !this.password) {
+                    this.message = 'Bitte E-Mail und Passwort angeben';
+                    return;
+                }
+                this.$store.dispatch('login', {
+                    email: this.email,
+                    password: this.password
+                }).then(() => {
+                    this.$router.push({ name: 'address' });
+                }).catch(() => {
+                    this.message = 'Der Login ist fehlgeschlagen :('
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            },
+            isPending () {
+                return this.$store.getters.isPending;
+            }
+        }
+    }
+</script>
@@ -19,4 +19,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -15,4 +15,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -13,4 +13,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -21,4 +21,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -34,4 +34,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -26,4 +26,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -36,4 +36,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -26,4 +26,5 @@
        <f:render partial="ContactBar" arguments="{_all}"/>
    </div>
    <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
@@ -0,0 +1,6 @@
+<script type="application/json" id="appconfig">
+    {
+        "loaderUrl": <f:format.raw>"{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif', absolute: 1)}"</f:format.raw>,
+        "myEpApiBaseUrl": "https://myep.burn.dpn"
+    }
+</script>
@@ -1,5 +1,4 @@
 const Encore = require('@symfony/webpack-encore');
-const webpack = require('webpack');

 // Create webpack config for ext:ep_theme
 Encore
@@ -11,7 +10,7 @@ Encore
    .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
    .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
    .createSharedEntry('vendor', [
-        'jquery', 'vue', 'vue-session', 'flatpickr', 'jquery-lazy',
+        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'jquery-lazy',
        'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
        'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
    ])
@@ -27,12 +26,14 @@ Encore
        images: 'images/[name].[ext]'
    })
    .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+        babelConfig.plugins = [ 'transform-object-rest-spread', 'syntax-dynamic-import' ]
    })
 ;

 const EpThemeConfig = Encore.getWebpackConfig();
+
 EpThemeConfig.name = 'EpThemeConfig';
+EpThemeConfig.output.chunkFilename = 'js/[name].[chunkhash:8].js';

 Encore.reset();

@@ -54,7 +55,7 @@ Encore
        images: 'images/[name].[ext]'
    })
    .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+        babelConfig.plugins = [ 'transform-object-rest-spread', 'syntax-dynamic-import' ]
    })
 ;