Merge branch 'myep'

package-lock.json

@@ -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==",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-      "dev": true
     },
     "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",

package.json

@@ -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",

web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php

@@ -121,7 +121,7 @@ class FilterSettings implements \JsonSerializable
     /**
      * @var int
      */
-    protected $pax = 1;
+    protected $pax = 0;
 
     /**
      * @var array

web/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.txt

@@ -6,6 +6,7 @@
 # customsubcategory=600=XML Sitemap
 # customsubcategory=700=Event dates
 # customsubcategory=800=Badges
+# customsubcategory=900=MyE&P config
 
 plugin.tx_eptheme {
 	settings {
@@ -146,6 +147,9 @@ plugin.tx_eptheme {
 		forcePartnerIdSelect =
 		# cat=eptheme.events; type=string; label=Partner ID selection label
 		partnerIdSelectLabel =
+
+		# cat=eptheme/900/100; type=string; label=MyE&P API base url
+		myEpApiBaseUrl = https://myep.burn.dpn
 	}
 }
 

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -87,6 +87,7 @@ plugin.tx_eptheme {
         englishPageUid = {$plugin.tx_eptheme.settings.englishPageUid}
         germanPageUid = {$plugin.tx_eptheme.settings.germanPageUid}
         conceptsPageUid = {$plugin.tx_eptheme.settings.conceptsPageUid}
+        myEpApiBaseUrl = {$plugin.tx_eptheme.settings.myEpApiBaseUrl}
     }
     view {
         templateRootPaths.0 = EXT:ep_theme/Resources/Private/Templates

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -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,
+        SearchResult: () => import('./components/SearchResult.vue'),
-        ProductDetail,
+        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 {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_images.js

@@ -14,6 +14,7 @@ require('../images/badge_skipass.png');
 require('../images/polygon.jpg');
 
 require('../images/icons/icon_ce.svg');
+require('../images/icons/icon_select.png');
 require('../images/icons/tx_eptheme_domain_model_lineup.gif');
 require('../images/icons/tx_eptheme_domain_model_slide.gif');
 require('../images/icons/tx_eptheme_gridelements_half_and_two_quarters.png');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js

@@ -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' }
+        }
+    ]
+});

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js

@@ -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')
+        }
+    }
+});
+

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+	    <h1>Adressdaten</h1>
+        <div v-if="message" class="alert alert-dismissable" :class="messageClass">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-show="loading">
+        <div class="row" v-show="!loading">
+            <form @submit.prevent="saveAddress()">
+                <div class="col-xs-12 col-md-6">
+                    <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 datepicker--visible">
+                    </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>
+                <div class="col-xs-12 col-md-6">
+                    <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>
+                <div class="col-xs-12">
+                    <div class="form-group">
+                        <button type="submit" class="button button--active">
+                            Speichern
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </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 {
+	            loading: false,
+	            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>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue

@@ -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>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue

@@ -0,0 +1,111 @@
+<template>
+    <div id="myep-main">
+        <h1>CRM Merkmale</h1>
+        <div v-if="message" class="alert alert-dismissible" :class="messageClass">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <div class="row" v-if="loaded">
+            <div class="col-xs-12 col-md-6">
+                <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" v-model="selection.value"
+                                   :disabled="!selection.changeable" @change="saveSelections()"/>
+                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                            {{ selection.name }}
+                        </label>
+                    </div>
+                </template>
+            </div>
+            <div class="col-xs-12 col-md-6">
+                <h2>CRM Aktionen</h2>
+                <div class="checkbox" v-for="action in this.crmData.actions">
+                    <label :class="{ disabled: !action.changeable}">
+                        <input type="checkbox" class="form-control" v-model="action.value" :disabled="!action.changeable"
+                               @change="saveSelections()"/>
+                        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                        {{ action.name }}
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import EventBus from '../../_bus'
+
+    export default {
+        data () {
+            return {
+                loading: false,
+                loaded: false,
+                message: '',
+                messageClass: '',
+                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];
+                    this.loaded = true;
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            },
+            saveSelections () {
+                this.loading = true;
+                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';
+                    this.messageClass = 'alert-success';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).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>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue

@@ -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>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main">
+        <h1>Login MyE&amp;P<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>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_input.scss

@@ -29,6 +29,15 @@
   }
 }
 
+select.form-control {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url(../images/icons/icon_select.png);
+  background-position: calc(100% - 24px) center;
+  background-repeat: no-repeat;
+}
+
 textarea {
   resize: vertical;
 }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss

@@ -33,7 +33,7 @@
   width: percentage(1/2);
 }
 
-.flatpickr-input {
+.flatpickr-input:not(.datepicker--visible) {
   display: none;
 }
 

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html

@@ -19,4 +19,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html

@@ -15,4 +15,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html

@@ -13,4 +13,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html

@@ -21,4 +21,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html

@@ -34,4 +34,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html

@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html

@@ -36,4 +36,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html

@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/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": "<f:format.raw>{settings.myEpApiBaseUrl}</f:format.raw>"
+    }
+</script>

webpack.config.js

@@ -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' ]
     })
 ;