Merge branch 'feature/bpn-api' into develop

composer.json

@@ -21,6 +21,7 @@
     "helhum/typo3-console": "^5.6",
     "league/csv": "^9.2",
     "pixelant/pxa-social-feed": "^1.10",
+    "symfony/http-client": "^4.3",
     "symfony/options-resolver": "^4.2",
     "symfony/property-access": "^4.3",
     "symfony/serializer": "^4.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d4ae2398be4121ef52aadf3eb1277575",
+    "content-hash": "65c7db27e084cf03eddd1ddb83812563",
     "packages": [
         {
             "name": "algo26-matthias/idna-convert",
@@ -2122,6 +2122,125 @@
             "homepage": "https://symfony.com",
             "time": "2019-08-14T12:26:46+00:00"
         },
+        {
+            "name": "symfony/http-client",
+            "version": "v4.3.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client.git",
+                "reference": "9a4fa769269ed730196a5c52c742b30600cf1e87"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client/zipball/9a4fa769269ed730196a5c52c742b30600cf1e87",
+                "reference": "9a4fa769269ed730196a5c52c742b30600cf1e87",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1.3",
+                "psr/log": "^1.0",
+                "symfony/http-client-contracts": "^1.1.6",
+                "symfony/polyfill-php73": "^1.11"
+            },
+            "provide": {
+                "psr/http-client-implementation": "1.0",
+                "symfony/http-client-implementation": "1.1"
+            },
+            "require-dev": {
+                "nyholm/psr7": "^1.0",
+                "psr/http-client": "^1.0",
+                "symfony/http-kernel": "^4.3",
+                "symfony/process": "^4.2"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.3-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "[email protected]"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony HttpClient component",
+            "homepage": "https://symfony.com",
+            "time": "2019-08-20T14:27:59+00:00"
+        },
+        {
+            "name": "symfony/http-client-contracts",
+            "version": "v1.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client-contracts.git",
+                "reference": "6005fe61a33724405d56eb5b055d5d370192a1bd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/6005fe61a33724405d56eb5b055d5d370192a1bd",
+                "reference": "6005fe61a33724405d56eb5b055d5d370192a1bd",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1.3"
+            },
+            "suggest": {
+                "symfony/http-client-implementation": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\HttpClient\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "[email protected]"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to HTTP clients",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "time": "2019-08-08T10:05:21+00:00"
+        },
         {
             "name": "symfony/inflector",
             "version": "v4.3.4",

public/typo3conf/ext/ep_theme/Classes/Controller/AjaxFormController.php

@@ -26,6 +26,7 @@ namespace EP\EpTheme\Controller;
  *  This copyright notice MUST APPEAR in all copies of the script!
  ***************************************************************/
 
+use EP\EpTheme\Service\BookingApiService;
 use EP\EpTheme\Service\EmailService;
 use EP\EpTheme\Domain\Model\Dto\ContactForm;
 use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
@@ -40,12 +41,20 @@ class AjaxFormController extends ActionController
     protected $emailService;
 
     /**
-     * @param EmailService $emailService
+     * @var BookingApiService
      */
-    public function __construct(EmailService $emailService)
+    protected $bookingApiService;
+
+    /**
+     * @param EmailService $emailService
+     * @param BookingApiService $bookingApiService
+     */
+    public function __construct(EmailService $emailService, BookingApiService $bookingApiService)
     {
         parent::__construct();
+
         $this->emailService = $emailService;
+        $this->bookingApiService = $bookingApiService;
     }
 
     /**
@@ -63,6 +72,15 @@ class AjaxFormController extends ActionController
             [ 'contactForm' => $contactForm ]
         );
 
+        $addressData = [
+            'lastName' => $contactForm->getName(),
+            'firstName' => $contactForm->getFirstName(),
+            'email' => $contactForm->getEmail(),
+            'gender' => $contactForm->getGender(),
+        ];
+
+        $this->bookingApiService->registerAddress($addressData);
+
         return json_encode($response);
     }
 

public/typo3conf/ext/ep_theme/Classes/Domain/Model/Dto/ContactForm.php

@@ -42,6 +42,18 @@ class ContactForm
      */
     protected $name;
 
+    /**
+     * @var string
+     * @TYPO3\CMS\Extbase\Annotation\Validate("NotEmpty")
+     */
+    protected $firstName;
+
+    /**
+     * @var string
+     * @TYPO3\CMS\Extbase\Annotation\Validate("NotEmpty")
+     */
+    protected $gender;
+
     /**
      * @var string
      */
@@ -121,6 +133,38 @@ class ContactForm
         $this->name = $name;
     }
 
+    /**
+     * @return string
+     */
+    public function getFirstName()
+    {
+        return $this->firstName;
+    }
+
+    /**
+     * @param string $firstName
+     */
+    public function setFirstName($firstName)
+    {
+        $this->firstName = $firstName;
+    }
+
+    /**
+     * @return string
+     */
+    public function getGender()
+    {
+        return $this->gender;
+    }
+
+    /**
+     * @param string $gender
+     */
+    public function setGender($gender)
+    {
+        $this->gender = $gender;
+    }
+
     /**
      * @return string
      */

public/typo3conf/ext/ep_theme/Classes/Form/BpnApiFinisher.php

@@ -0,0 +1,52 @@
+<?php
+namespace EP\EpTheme\Form;
+
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2019 Björn Fromme <[email protected]>, dreipunktnull
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+use EP\EpTheme\Service\BookingApiService;
+use TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher;
+
+class BpnApiFinisher extends AbstractFinisher
+{
+    /**
+     * @var BookingApiService
+     */
+    protected $bookingApiService;
+
+    /**
+     * @param BookingApiService $bookingApiService
+     */
+    public function injectBookingApiService(BookingApiService $bookingApiService)
+    {
+        $this->bookingApiService = $bookingApiService;
+    }
+
+    protected function executeInternal()
+    {
+        $formValues = $this->finisherContext->getFormValues();
+        $this->bookingApiService->registerAddress($formValues);
+    }
+}

public/typo3conf/ext/ep_theme/Classes/Service/BookingApiService.php

@@ -0,0 +1,91 @@
+<?php
+namespace EP\EpTheme\Service;
+
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2019 Björn Fromme <[email protected]>, dreipunktnull
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+use Psr\Log\LoggerAwareInterface;
+use Psr\Log\LoggerAwareTrait;
+use Symfony\Component\HttpClient\HttpClient;
+use Symfony\Contracts\HttpClient\Exception\TransportExceptionInterface;
+use TYPO3\CMS\Core\SingletonInterface;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface;
+
+class BookingApiService implements SingletonInterface, LoggerAwareInterface
+{
+    use LoggerAwareTrait;
+
+    /**
+     * @var string
+     */
+    protected $apiToken;
+
+    /**
+     * @var string
+     */
+    protected $apiEndpointUrl;
+
+    /**
+     * @var int
+     */
+    protected $apiTimeout;
+
+    /**
+     * @param ConfigurationManagerInterface $manager
+     */
+    public function __construct(ConfigurationManagerInterface $manager)
+    {
+        $settings = GeneralUtility::removeDotsFromTS(
+            $manager->getConfiguration(ConfigurationManagerInterface::CONFIGURATION_TYPE_FULL_TYPOSCRIPT)
+        );
+
+        $this->apiToken = $settings['plugin']['tx_eptheme']['settings']['myEpApiToken'];
+        $this->apiEndpointUrl = $settings['plugin']['tx_eptheme']['settings']['myEpApiEndpointUrl'];
+        $this->apiTimeout = $settings['plugin']['tx_eptheme']['settings']['myEpApiTimeout'];
+    }
+
+    /**
+     * @param array $addressData
+     */
+    public function registerAddress(array $addressData)
+    {
+        $client = HttpClient::create();
+
+        try {
+            $client->request('POST', $this->apiEndpointUrl . '/api/contactform', [
+                'headers' => [
+                    'X-AUTH-TOKEN' => $this->apiToken,
+                    'Content-type' => 'application/json',
+                ],
+                'timeout' => $this->apiTimeout,
+                'body' => json_encode($addressData),
+            ]);
+        }
+        catch (TransportExceptionInterface $e) {
+            $this->logger->error($e->getMessage());
+        }
+    }
+}

public/typo3conf/ext/ep_theme/Configuration/Forms/FormSetup.yaml

@@ -11,6 +11,9 @@ TYPO3:
 
       prototypes:
         standard:
+          finishersDefinition:
+            BpnApiFinisher:
+              implementationClassName: 'EP\EpTheme\Form\BpnApiFinisher'
           formElementsDefinition:
             Form:
               renderingOptions:

public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript

@@ -156,8 +156,12 @@ plugin.tx_eptheme {
 		# cat=eptheme.events; type=string; label=Partner ID selection label
 		partnerIdSelectLabel =
 
-		# cat=eptheme/900/100; type=string; label=MyE&P API base url
+		# cat=eptheme/900/100; type=string; label=MyE&P API endpoint url for contactforms
-		myEpApiBaseUrl = https://myep.burn.dpn
+		myEpApiEndpointUrl = https://myep.burn.dpn/api/contactform
+		# cat=eptheme/900/110; type=string; label=MyE&P API timeout in seconds
+		myEpApiTimeout = 10
+		# cat=eptheme/900/120; type=string; label=MyE&P API auth token
+		myEpApiToken = thisisnotsecretsochangeit
 	}
 }
 

public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript

@@ -87,7 +87,9 @@ plugin.tx_eptheme {
         germanPageUid = {$plugin.tx_eptheme.settings.germanPageUid}
         conceptsPageUid = {$plugin.tx_eptheme.settings.conceptsPageUid}
         myEpPageUid = {$plugin.tx_eptheme.settings.myEpPageUid}
-        myEpApiBaseUrl = {$plugin.tx_eptheme.settings.myEpApiBaseUrl}
+        myEpApiEndpointUrl = {$plugin.tx_eptheme.settings.myEpApiEndpointUrl}
+        myEpApiToken = {$plugin.tx_eptheme.settings.myEpApiToken}
+        myEpApiTimeout = {$plugin.tx_eptheme.settings.myEpApiTimeout}
         facebookViewContentValues {
             productUid = {$plugin.tx_eptheme.settings.facebookViewContentProductUid}
             nameInternal = {$plugin.tx_eptheme.settings.facebookViewContentNameInternal}

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

@@ -45,7 +45,7 @@ Vue.filter('date', (value) => {
 });
 
 // Store
-import store from './_store';
+import store from './store';
 
 // Initialize vue app
 new Vue({
@@ -65,7 +65,7 @@ new Vue({
         Watchlist,
         HotelList,
         BackLink,
-        MyEp: () => import('./myep/components/App.vue'),
+        MyEp: () => import('./myep/App.vue'),
         FacebookPixel
     },
     data () {
@@ -355,8 +355,7 @@ new Vue({
         }
     },
     created () {
-        this.$store.commit('initConfig');
+        this.$store.dispatch('init');
-        this.$store.commit('initWatchlist');
         EventBus.$on('ajaxContentLoaded', () => {
             Vue.nextTick(() => {
                 this.initContentsliders();

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js

@@ -1,249 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import axios from 'axios'
-
-import AddressStore from './myep/stores/address'
-import CrmDataStore from './myep/stores/crmdata'
-import TeamerStore from './myep/stores/teamer'
-import EventsStore from './myep/stores/events'
-import NewsletterStore from './myep/stores/newsletter'
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    modules: {
-        address: AddressStore,
-        crmdata: CrmDataStore,
-        teamer: TeamerStore,
-        events: EventsStore,
-        newsletter: NewsletterStore
-    },
-    state: {
-        config: {},
-        watchlist: [],
-        loading: false,
-        authToken: sessionStorage.getItem('token'),
-        loggedIn: !!sessionStorage.getItem('token'),
-        isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
-        memberId: JSON.parse(sessionStorage.getItem('memberId')),
-        memberName: sessionStorage.getItem('memberName'),
-        countries: [],
-        abilities: [],
-        timeFrames: [],
-        jobProfiles: [],
-        message: {
-            text: '',
-            class: ''
-        }
-    },
-    mutations: {
-        initConfig (state) {
-            const configElement = document.getElementById('appconfig');
-            state.config = JSON.parse(configElement.innerHTML);
-            axios.defaults.baseURL = state.config.myEpApiBaseUrl;
-        },
-        initWatchlist (state, list = null) {
-            if (list) {
-                sessionStorage.setItem('watchlist', JSON.stringify(list));
-            } else if (!sessionStorage.getItem('watchlist')) {
-                sessionStorage.setItem('watchlist', JSON.stringify({ id: null, items: [] }));
-            }
-            state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
-        },
-        watchlistToggle (state, uid) {
-            let list = state.watchlist.items;
-            let watchlistIndex = list.indexOf(uid);
-            if (watchlistIndex === -1) {
-                list.push(uid)
-            } else {
-                list.splice(watchlistIndex, 1)
-            }
-            state.watchlist.items = list;
-            sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
-
-            if (state.loggedIn) {
-                const client = axios.create({
-                    headers: {
-                        'X-Auth-Token': state.authToken
-                    }
-                });
-                client.put('/api/watchlists/' + state.watchlist.id, state.watchlist);
-            }
-        },
-        loginSuccess (state, token) {
-            state.loggedIn = true;
-            state.authToken = token;
-            sessionStorage.setItem('token', token);
-        },
-        loginFailure (state) {
-            state.loggedIn = false;
-        },
-        logout (state) {
-            state.loggedIn = false;
-            state.isTeamer = false;
-            state.teamerId = null;
-            state.authToken = null;
-            state.watchlist = { id: null, items: [] };
-            sessionStorage.removeItem('token');
-            sessionStorage.removeItem('isTeamer');
-            sessionStorage.removeItem('memberId');
-            sessionStorage.removeItem('memberName');
-            sessionStorage.removeItem('watchlist');
-        },
-        alert (state, payload) {
-            state.message.text = payload.message;
-            state.message.class = payload.class;
-        },
-        isTeamer (state) {
-            state.isTeamer = true;
-            sessionStorage.setItem('isTeamer', JSON.stringify(true));
-        },
-        setMember (state, member) {
-            state.memberId = member.id;
-            state.memberName = member.name;
-            sessionStorage.setItem('memberId', member.id);
-            sessionStorage.setItem('memberName', member.name);
-        },
-        loadingBegin (state) {
-            state.loading = true;
-            state.message.text = '';
-            state.message.class = '';
-        },
-        loadingFinish (state) {
-            state.loading = false;
-        },
-        setCountries (state, countries) {
-            state.countries = countries;
-        },
-        setAbilities (state, abilities) {
-            state.abilities = abilities;
-        },
-        setTimeFrames (state, timeFrames) {
-            state.timeFrames = timeFrames;
-        },
-        setJobProfiles (state, jobProfiles) {
-            state.jobProfiles = jobProfiles;
-        }
-    },
-    actions: {
-        login({ commit }, credentials) {
-            commit('loadingBegin');
-            const formData = new FormData();
-            formData.append('_username', credentials.email);
-            formData.append('_password', credentials.password);
-            return axios({
-                url: '/api/login',
-                data: formData,
-                method: 'post',
-                withCredentials: true
-            }).then((response) => {
-                let memberId = parseInt(response.data.member_id);
-                commit('setMember', { id: memberId, name: response.data.member_name });
-                if (response.data.watchlist) {
-                    commit('initWatchlist', response.data.watchlist);
-                }
-                if (response.data.is_teamer) {
-                    commit('isTeamer');
-                }
-                commit('loginSuccess', response.data.token);
-                commit('loadingFinish');
-            }).catch((error) => {
-                commit('loginFailure');
-                commit('alert', {
-                    message: 'Der Login ist fehlgeschlagen :(',
-                    class: 'alert-danger'
-                });
-                commit('loadingFinish');
-                throw error;
-            });
-        },
-        logout({ commit, state }) {
-            commit('loadingBegin');
-            return axios({
-                url: '/api/logout',
-                headers: {
-                    'x-auth-token': state.authToken
-                }
-            }).then(() => {
-                commit('logout');
-                commit('loadingFinish');
-            }).catch((error) => {
-                commit('alert', {
-                    message: 'Der Logout ist fehlgeschlagen :(',
-                    class: 'alert-danger'
-                });
-                commit('loadingFinish');
-                throw error;
-            });
-        },
-        resetPassword({ commit }, email) {
-            commit('loadingBegin');
-            const formData = new FormData();
-            formData.append('email', email);
-            return axios({
-                url: '/api/reset-password',
-                data: formData,
-                method: 'post'
-            }).then((response) => {
-                commit('loadingFinish');
-                return response;
-            }).catch((error) => {
-                commit('loadingFinish');
-                throw error;
-            });
-        },
-        register({ commit }, userData) {
-            commit('loadingBegin');
-            return axios({
-                url: '/api/addresses',
-                data: userData,
-                method: 'post'
-            }).then((response) => {
-                commit('loadingFinish');
-                return response;
-            }).catch((error) => {
-                commit('loadingFinish');
-                throw error;
-            });
-        },
-        loadSelectableValues ({ commit }) {
-            axios({
-                url: '/api/countries',
-            }).then((response) => {
-                commit('setCountries', response.data['hydra:member']);
-            });
-            axios({
-                url: '/api/teamer-abilities',
-            }).then((response) => {
-                commit('setAbilities', response.data['hydra:member']);
-            });
-            axios({
-                url: '/api/timeframes',
-            }).then((response) => {
-                commit('setTimeFrames', response.data['hydra:member']);
-            });
-            axios({
-                url: '/api/teamer-job-profiles',
-            }).then((response) => {
-                commit('setJobProfiles', response.data['hydra:member']);
-            });
-        }
-    },
-    getters: {
-        watchlistCount: state => {
-            return state.watchlist.items.length;
-        },
-        onWatchlist: (state) => (uid) => {
-            return state.watchlist.items.indexOf(uid) !== -1;
-        },
-        authToken: state => {
-            return state.authToken;
-        },
-        isTeamer: state => {
-            return state.isTeamer;
-        },
-        teamerId: state => {
-            return state.teamerId;
-        }
-    }
-});

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js

@@ -0,0 +1,77 @@
+// See https://www.techynovice.com/setting-up-JWT-token-refresh-mechanism-with-axios/
+
+import axios from 'axios';
+
+const authenticatedClient = axios.create({
+    headers: {
+        'Authentication': 'Bearer ' + sessionStorage.getItem('token')
+    }
+});
+
+authenticatedClient.interceptors.response.use(
+    response => response,
+    error => {
+        const errorResponse = error.response;
+        if (isTokenExpiredError(errorResponse)) {
+            return resetTokenAndReattemptRequest(error)
+        }
+        return Promise.reject(error)
+    }
+);
+
+function isTokenExpiredError (errorResponse) {
+    if (errorResponse.config.code !== 401) {
+        return false
+    }
+
+    return errorResponse.message.match(/expired/);
+}
+
+let isAlreadyFetchingAccessToken = false;
+let subscribers = [];
+
+async function resetTokenAndReattemptRequest (error) {
+    try {
+        const { response: errorResponse } = error;
+        const refreshToken = await getRefreshToken();
+        if (!refreshToken) {
+            return Promise.reject(error);
+        }
+        const retryOriginalRequest = new Promise(resolve => {
+            addSubscriber(authToken => {
+                errorResponse.config.headers.Authorization = 'Bearer ' + authToken;
+                resolve(axios(errorResponse.config));
+            });
+        });
+        if (!isAlreadyFetchingAccessToken) {
+            isAlreadyFetchingAccessToken = true;
+            axios({
+                method: 'post',
+                url: `<YOUR TOKEN REFREH ENDPOINT>`,
+                data: {
+                    refresh_token: refreshToken
+                }
+            }).then(response => {
+                if (!response.data) {
+                    return Promise.reject(error);
+                }
+                const newToken = response.data.refresh_token;
+                saveRefreshToken(newToken);
+                isAlreadyFetchingAccessToken = false;
+                onAccessTokenFetched(newToken);
+            });
+        }
+        return retryOriginalRequest;
+    } catch (err) {
+        return Promise.reject(err);
+    }
+}
+
+function onAccessTokenFetched(access_token) {
+    subscribers.forEach(callback => callback(access_token));
+    subscribers = [];
+}
+
+function addSubscriber(callback) {
+    subscribers.push(callback);
+}

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: {

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue

@@ -22,6 +22,7 @@
 
 <script>
     import Vue from 'vue'
+    import { mapState, mapGetters } from 'vuex'
     import axios from 'axios'
     import EventBus from '../_bus'
     import SearchResultItem from './SearchResultItem.vue'
@@ -46,7 +47,6 @@
         },
         data () {
             return {
-                watchlist: [],
                 teasers: {},
                 total: 0,
                 loading: false,
@@ -58,13 +58,13 @@
         },
         methods: {
             loadList () {
-                if (this.watchlist.length === 0) {
+                if (this.watchlistCount === 0) {
                     this.teasers = {};
                     this.total = 0;
                     return;
                 }
                 let query = {};
-                query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
+                query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchList;
                 this.loading = true;
                 axios({
                     url: this.watchlistUri,
@@ -83,13 +83,16 @@
                 });
             }
         },
+        computed: {
+            ...mapState(['userData']),
+            ...mapGetters(['watchlistCount', 'onWatchlist'])
+        },
         created () {
             EventBus.$on('watchlistToggle', () => {
                 this.loadList();
             });
         },
         mounted () {
-            this.watchlist = this.$store.state.watchlist.items;
             Vue.nextTick(() => {
                 this.loadList();
             })

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
     import EventBus from '../_bus'
 
     export default {
@@ -24,13 +25,13 @@
         },
         methods: {
             toggleWatchlist () {
-                this.$store.commit('watchlistToggle', this.uid);
+                this.$store.dispatch('watchlistToggle', this.uid);
                 EventBus.$emit('watchlistToggle');
             }
         },
         computed: {
             onWatchlist () {
-                return this.$store.getters.onWatchlist(this.uid);
+                return this.$store.getters.onWatchlist(this.uid)
             }
         }
     }

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

@@ -0,0 +1,137 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
+	    <h1>Adressdaten</h1>
+        <form @submit.prevent="save()">
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="Gender">
+                        <select v-model="userData.gender" class="form-control">
+                            <option value="w">W</option>
+                            <option value="m">M</option>
+                            <option value="d">D</option>
+                        </select>
+                    </form-group>
+                    <form-group label="Title">
+                        <input type="text" v-model="userData.title" class="form-control">
+                    </form-group>
+                    <form-group label="Name" :error="formErrors.lastName">
+                        <input type="text" v-model="userData.lastName" class="form-control">
+                    </form-group>
+                    <form-group label="Vorname" :error="formErrors.firstName">
+                        <input type="text" v-model="userData.firstName" class="form-control">
+                    </form-group>
+                    <form-group label="Geburtsdatum">
+                        <span ref="picker"></span>
+                    </form-group>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="Straße" :error="formErrors.street">
+                        <input type="text" v-model="userData.street" class="form-control">
+                    </form-group>
+                    <form-group label="PLZ" :error="formErrors.zipCode">
+                        <input type="text" v-model="userData.zipCode" class="form-control">
+                    </form-group>
+                    <form-group label="Stadt" :error="formErrors.city">
+                        <input type="text" v-model="userData.city" class="form-control">
+                    </form-group>
+                    <form-group label="Land" :error="formErrors.country">
+                        <select v-model="userData.country" class="form-control">
+                            <option v-for="country in countries"
+                                    :value="country['code']">{{ country['name'] }}</option>
+                        </select>
+                    </form-group>
+                    <form-group label="E-Mail" :error="formErrors.email">
+                        <input type="text" v-model="userData.email" class="form-control">
+                    </form-group>
+                    <form-group label="Telefon" :error="formErrors.phonePrivate">
+                        <input type="text" v-model="userData.phonePrivate" class="form-control">
+                    </form-group>
+                    <form-group label="Mobil" :error="formErrors.phoneMobile">
+                        <input type="text" v-model="userData.phoneMobile" class="form-control">
+                    </form-group>
+                </div>
+                <div class="col-xs-12">
+                    <div class="form-group">
+                        <button type="submit" class="button" :disabled="loading">
+                            Speichern
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
+    import FormGroup from './components/FormGroup';
+
+	export default {
+	    components: {
+	        FormGroup
+        },
+	    data () {
+	        return {
+	            picker: null,
+                formErrors: {},
+                countries: []
+			}
+        },
+		created () {
+            this.loadFormOptions();
+            this.$store.dispatch('loadAddress')
+                .then(() => {
+                    this.picker.setDate(new Date(this.userData.dateOfBirth), true);
+                });
+        },
+        mounted () {
+            Vue.nextTick(() => {
+                this.picker = flatpickr(this.$refs.picker, {
+                    dateFormat: 'd.m.Y',
+                    locale: German,
+                    inline: true,
+                    onChange: selectedDates => {
+                        this.userData.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
+                    }
+                });
+            })
+        },
+        methods: {
+	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
+            loadFormOptions () {
+                this.beginLoading();
+                return axios({
+                        url: '/api/countries',
+                    }).then(response => {
+                        this.countries = response.data
+                    }).catch(error => {
+                    }).finally(() => {
+                        this.endLoading()
+                    });
+            },
+            save () {
+                this.formErrors = {};
+                this.$store.dispatch('saveAddress', this.userData)
+                    .catch(error => {
+                        this.alert({
+                            message: 'Bitte überprüfe deine Eingaben.',
+                            class: 'alert-danger'
+                        });
+                        const violations = error.response.data.violations;
+                        if (typeof violations !== 'undefined') {
+                            for (let violation of violations) {
+                                this.$set(this.formErrors, violation.property_path, violation.message);
+                            }
+                        }
+                    });
+            }
+        },
+        computed: {
+            ...mapState(['loading', 'userData'])
+        }
+    }
+</script>

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

@@ -2,7 +2,8 @@
     <div id="app">
         <nav class="navbar navbar-default" v-if="isLoggedIn">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
+                <button type="button" class="navbar-toggle collapsed"
+                        data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
@@ -16,36 +17,34 @@
                     <router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Newsletter</a></router-link>
                     <router-link :to="{ name: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Mein Profil</a></router-link>
                     <router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Reise-Historie</a></router-link>
-                    <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="$store.getters.isTeamer"><a>Teamer</a></router-link>
+                    <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer"><a>Teamer</a></router-link>
                 </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
                 </ul>
             </div>
         </nav>
-        <div class="row" v-if="$store.state.message.text">
+        <div class="row" v-if="alert.message">
             <div class="col-xs-12">
-                <div class="alert alert-dismissable" :class="$store.state.message.class">
+                <div class="alert alert-dismissable" :class="alert.class">
                     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
-                    {{ $store.state.message.text }}
+                    {{ alert.message }}
                 </div>
             </div>
         </div>
-        <div class="row" v-show="loading">
+        <div class="loader" v-show="loading">
-            <div class="col-xs-12">
+            <img :src="config.loaderUrl" alt="">
-                <img :src="$store.state.config.loaderUrl" alt="">
-            </div>
         </div>
         <router-view></router-view>
     </div>
 </template>
 
 <script>
-    import store from '../../_store'
+    import { mapGetters, mapState } from 'vuex'
-    import router from '../_router'
+    import store from '../store'
-    import EventBus from '../../_bus'
+    import router from '../router'
 
     export default {
         store,
@@ -55,31 +54,40 @@
                 this.$store.dispatch('logout')
                     .then(() => {
                         this.$router.push({ name: 'login' })
-                    });
+                    }).catch(error => {});
             }
         },
         computed: {
-            isLoggedIn () {
+            ...mapState(['config', 'loading', 'alert']),
-                return this.$store.state.loggedIn;
+            ...mapGetters(['isLoggedIn', 'isTeamer'])
         },
-            loaderUrl () {
+        mounted () {
-                return this.$store.state.config.loaderUrl;
+            this.$store.commit('initSession');
-            },
+            if (this.isLoggedIn) {
-            loading () {
+                this.$router.push({ name: 'address' })
-                return this.$store.state.loading;
             }
-        },
-        created () {
-            this.$store.dispatch('loadSelectableValues');
-            EventBus.$on('forcedLogout', () => {
-                this.$router.push({ name: 'login' })
-            });
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-    .nav-disabled {
+    #app {
-        opacity: 0.5;
+        position: relative;
+    }
+    .loader {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.75);
+
+        img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     }
 </style>

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,8 +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">
-                         v-if="action.changeable === true">
                         <label :class="{ disabled: !action.changeable}">
                             <input type="checkbox" class="form-control"
                                    v-model="action.value" :disabled="!action.changeable"/>
@@ -44,7 +43,8 @@
 </template>
 
 <script>
-    import EventBus from '../../_bus'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
 
     export default {
         data () {
@@ -55,42 +55,64 @@
             }
         },
         created () {
-            this.fetchSelections();
+            this.beginLoading();
-        },
+
-        methods: {
+            return this.getClient().get('/api/crm-selections')
-            fetchSelections () {
+                .then(response => {
-                this.$store.dispatch('crmdata/load')
+                    this.crmData = response.data
-                    .then((data) => {
+                }).catch(error => {
-                        this.crmData = data;
+                    this.alert({
+                        message: 'Es ist ein Fehler aufgetreten :(',
+                        class: 'alert-danger'
+                    })
                 }).finally(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
+                    this.endLoading()
                 });
         },
-            saveSelections () {
+        methods: {
-                this.$store.dispatch('crmdata/save', this.crmData)
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
-                    .finally(() => {
+            getClient () {
-                        EventBus.$emit('scrollTo', '#myep-main');
+                return axios.create({
+                    headers: {
+                        'Authorization': 'Bearer ' + this.authToken
+                    }
+                });
+            },
+            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: {
-            loading () {
+            ...mapState(['loading', 'authToken'])
-                return this.$store.state.loading;
-            }
         }
     }
 </script>

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

@@ -42,9 +42,10 @@
 </template>
 
 <script>
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
-    import EventBus from '../../_bus'
 
 	export default {
 	    data () {
@@ -60,29 +61,40 @@
 			}
         },
         created () {
-            this.fetchEvents();
+            this.beginLoading();
-        },
+
-        methods: {
+            const client = axios.create({
-            fetchEvents () {
+                headers: {
-                this.$store.dispatch('events/load')
+                    'Authorization': 'Bearer ' + this.authToken
-                    .then((events) => {
+                }
-                        this.events = events;
+            });
+
+            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(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
+                    this.endLoading();
                 });
         },
+        methods: {
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
             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.$store.state.config.myEpApiBaseUrl
+                return this.config.myEpApiBaseUrl
                     + '/api/events/'
                     + event.id
                     + '/' + type + '?token='
-                    + this.$store.getters.authToken;
+                    + this.authToken;
             },
             calculateBalance (event) {
                 if (!event.preis || !event.zahlung) {
@@ -99,9 +111,7 @@
             }
         },
         computed: {
-            loading () {
+	        ...mapState(['config', 'loading', 'authToken'])
-                return this.$store.state.loading;
-            }
         }
     }
 </script>

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

@@ -4,18 +4,12 @@
         <form @submit.prevent="submit()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group">
+                    <form-group label="E-Mail" :error="formErrors.email">
-                        <label for="email" class="control-label">
+                        <input type="text" v-model="email" class="form-control">
-                            E-Mail
+                    </form-group>
-                        </label>
+                    <form-group label="Passwort" v-if="loginMode">
-                        <input id="email" type="text" v-model="email" class="form-control">
+                        <input type="password" v-model="password" class="form-control">
-                    </div>
+                    </form-group>
-                    <div class="form-group" v-if="loginMode">
-                        <label for="password" class="control-label">
-                            Passwort
-                        </label>
-                        <input id="password" type="password" v-model="password" class="form-control">
-                    </div>
                     <div class="form-group">
                         <div class="btn-group">
                             <button type="submit" class="button" :disabled="loading">
@@ -42,36 +36,41 @@
 </template>
 
 <script>
-    import EventBus from '../../_bus'
+    import { mapState, mapGetters, mapMutations } from 'vuex'
+    import FormGroup from "./components/FormGroup";
 
 	export default {
+        components: {FormGroup},
         data () {
 	        return {
 	            mode: 'login',
 	            email: '',
-                password: ''
+                password: '',
+                formErrors: {}
             }
         },
         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 () {
+	            this.formErrors = {};
                 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,
@@ -79,13 +78,12 @@
                 }).then(() => {
                     this.$router.push({ name: 'address' });
                 }).catch(error => {
-                }).finally(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
                 });
             },
             resetPassword () {
+                this.formErrors = {};
 	            if (!this.email) {
-                    this.$store.commit('alert', {
+                    this.alert({
                         message: 'Bitte die E-Mail Adresse angeben',
                         class: 'alert-danger'
                     });
@@ -93,29 +91,36 @@
                 }
                 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 => {
-                }).finally(() => {
+                    this.alert({
-                    EventBus.$emit('scrollTo', '#myep-main');
+                        message: 'Bitte überprüfe deine Eingaben.',
+                        class: 'alert-danger'
+                    });
+                    const violations = error.response.data.violations;
+                    if (typeof violations !== 'undefined') {
+                        for (let violation of violations) {
+                            this.$set(this.formErrors, violation.property_path, violation.message);
+                        }
+                    }
                 });
             }
         },
         computed: {
-            loading () {
+	        ...mapState(['loading']),
-                return this.$store.state.loading;
+            ...mapGetters(['isLoggedIn']),
-            },
             loginMode () {
                 return this.mode === 'login';
             }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
+	    <h1>Newsletter</h1>
+        <div class="row">
+            <div class="col-xs-12">
+                <p v-html="statusMessage"></p>
+                <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, mapMutations } from 'vuex'
+    import axios from 'axios'
+
+	export default {
+        methods: {
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
+            toggleReqistration () {
+                this.userData.newsletter = !this.userData.newsletter;
+
+                const data = {
+                    id: this.userData.id,
+                    email: this.userData.email,
+                    registration: this.userData.newsletter
+                };
+
+                this.beginLoading();
+
+                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', 'authToken']),
+            statusMessage () {
+                let message = 'Du bist aktuell';
+                message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
+                message += 'zum Newsletter angemeldet.';
+                return message;
+            }
+        }
+    }
+</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+        <h1>Registrierung MyE&amp;P</h1>
+        <form @submit.prevent="register()">
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="Vorname" :error="formErrors.firstName">
+                        <input type="text" v-model="userData.firstName" class="form-control">
+                    </form-group>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="Name" :error="formErrors.lastName">
+                        <input type="text" v-model="userData.lastName" class="form-control">
+                    </form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="E-Mail" :error="formErrors.email">
+                        <input type="text" v-model="userData.email" class="form-control">
+                    </form-group>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <form-group label="Gender" :error="formErrors.gender">
+                        <select v-model="userData.gender" class="form-control">
+                            <option value="M">M</option>
+                            <option value="W">W</option>
+                            <option value="D">D</option>
+                        </select>
+                    </form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <div class="form-group">
+                        <div class="btn-group">
+                            <button type="submit" class="button" :disabled="loading">
+                                Registrieren
+                            </button>
+                            <router-link to="login" class="button button--secondary">
+                                Zum Login
+                            </router-link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    import FormGroup from './components/FormGroup';
+
+	export default {
+	    components: {
+	        FormGroup
+        },
+	    data () {
+	        return {
+	            userData: {
+                    lastName: '',
+                    firstName: '',
+                    email: '',
+                    gender: 'M'
+                },
+                formErrors: {}
+            }
+        },
+        methods: {
+            ...mapMutations(['alert']),
+            register () {
+                this.message = '';
+                this.formErrors = {};
+                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.userData = {
+                                lastName: '',
+                                firstName: '',
+                                email: '',
+                                gender: 'M'
+                            };
+                            this.formErrors = {};
+                        } 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.$set(this.formErrors, violation.property_path, violation.message);
+                        }
+                    });
+            }
+        },
+        computed: {
+	        ...mapState(['loading'])
+        }
+    }
+</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue

@@ -1,15 +1,15 @@
 <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>
                     <div class="form-group">
-                        <div class="checkbox" v-for="ability of $store.state.abilities">
+                        <div class="checkbox" v-for="ability of abilities">
                             <label>
-                                <input type="checkbox" class="form-control" v-model="teamerData.abilities"
+                                <input type="checkbox" class="form-control" v-model="userData.abilities"
-                                       :value="ability['@id']" />
+                                       :value="ability.id" />
                                 <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                 {{ ability['title'] }}
                             </label>
@@ -17,10 +17,10 @@
                     </div>
                     <h4>Mögliche Jobprofile</h4>
                     <div class="form-group">
-                        <div class="checkbox" v-for="jobProfile of $store.state.jobProfiles">
+                        <div class="checkbox" v-for="jobProfile of jobProfiles">
                             <label>
-                                <input type="checkbox" class="form-control" v-model="teamerData.jobProfiles"
+                                <input type="checkbox" class="form-control" v-model="userData.jobProfiles"
-                                       :value="jobProfile['@id']" />
+                                       :value="jobProfile.id" />
                                 <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                 {{ jobProfile['title'] }}
                             </label>
@@ -30,48 +30,39 @@
                     <div class="form-group">
                         <div class="checkbox">
                             <label>
-                                <input type="checkbox" class="form-control" v-model="teamerData.wantsToLead"/>
+                                <input type="checkbox" class="form-control" v-model="userData.wantsToLead"/>
                                 <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                 Ich möchte eine Fahrtenleitung übernehmen.
                             </label>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <form-group label="Status">
-                        <label for="status" class="control-label">
+                        <select id="status" v-model="userData.seniority" class="form-control">
-                            Status:
-                        </label>
-                        <select id="status" v-model="teamerData.seniority" class="form-control">
                             <option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
                         </select>
-                    </div>
+                    </form-group>
-                    <div class="form-group">
+                    <form-group label="Jackengröße">
-                        <label for="jacketsize" class="control-label">
+                        <select v-model="userData.jacketSize" class="form-control">
-                            Jackengröße:
-                        </label>
-                        <select id="jacketsize" v-model="teamerData.jacketSize" class="form-control">
                             <option v-for="size of this.sizes" :value="size">{{ size }}</option>
                         </select>
-                    </div>
+                    </form-group>
-                    <div class="form-group">
+                    <form-group label="Wünsche">
-                        <label for="jacketsize" class="control-label">
+                        <textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
-                            Wünsche:
+                    </form-group>
-                        </label>
-                        <textarea class="xxlarge form-control" cols="30" rows="3" v-model="teamerData.notes"></textarea>
-                    </div>
                 </div>
                 <div class="col-xs-12 col-md-6">
                     <h4>Verfügbarkeiten</h4>
-                    <div class="checkbox" v-for="timeFrame in $store.state.timeFrames">
+                    <div class="checkbox" v-for="timeFrame in timeFrames">
                         <label>
-                            <input type="checkbox" class="form-control" v-model="teamerData.availableTimeframes"
+                            <input type="checkbox" class="form-control" v-model="userData.availableTimeFrames"
-                                   :value="timeFrame['@id']"/>
+                                   :value="timeFrame.id"/>
                             <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                             {{ timeFrame | period }}
                         </label>
                     </div>
                     <div class="checkbox">
                         <label>
-                            <input type="checkbox" class="form-control" v-model="teamerData.monthLong"/>
+                            <input type="checkbox" class="form-control" v-model="userData.monthLong"/>
                             <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                             Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
                         </label>
@@ -92,11 +83,16 @@
 </template>
 
 <script>
-    import EventBus from '../../_bus'
+    import { mapState, mapMutations } from 'vuex'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    import FormGroup from './components/FormGroup';
 
     export default {
+        components: {
+            FormGroup
+        },
         data () {
             return {
                 sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ],
@@ -104,34 +100,65 @@
                     { value: 'jr', label: 'Neuteamer' },
                     { value: 'sr', label: 'Bestandsteamer' }
                 ],
-                teamerData () {
+                abilities: [],
-                    return {}
+                timeFrames: [],
-                }
+                jobProfiles: []
             }
         },
         methods: {
-            fetchTeamerData () {
+            ...mapMutations(['beginLoading', 'endLoading', 'alert']),
-                this.$store.dispatch('teamer/load')
+            getClient () {
-                    .then((data) => {
+                return axios.create({
-                        this.teamerData = data;
+                    headers: {
-                    }).finally(() => {
+                        'Authorization': 'Bearer ' + this.authToken
-                        EventBus.$emit('scrollTo', '#myep-main');
+                    }
                 });
             },
-            saveTeamerData () {
+            save () {
-                this.$store.dispatch('teamer/save', this.teamerData)
+                const data = {
-                    .finally(() => {
+                    abilities: this.userData.abilities,
-                        EventBus.$emit('scrollTo', '#myep-main');
+                    jobProfiles: this.userData.jobProfiles,
+                    availableTimeFrames: this.userData.availableTimeFrames,
+                    jacketSize: this.userData.jacketSize,
+                    seniority: this.userData.seniority,
+                    wantsToLead: this.userData.wantsToLead,
+                    monthLong: this.userData.monthLong,
+                    notes: this.userData.notes,
+                };
+
+                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.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();
+                });
         },
         computed: {
-            loading () {
+            ...mapState(['userData', 'loading', 'authToken'])
-                return this.$store.state.loading;
-            }
         },
         filters: {
             period (timeFrame) {
@@ -139,9 +166,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
             }
         }
     }

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

@@ -1,187 +0,0 @@
-<template>
-    <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
-	    <h1>Adressdaten</h1>
-        <form @submit.prevent="saveAddress()">
-            <div class="row">
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group">
-                        <label for="gender" class="control-label">
-                            Gender:
-                        </label>
-                        <select id="gender" v-model="address.gender" class="form-control">
-                            <option value="W">W</option>
-                            <option value="M">M</option>
-                            <option value="D">D</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" :class="{'has-error': formErrors.name }">
-                        <label for="name" class="control-label">
-                            Name:
-                        </label>
-                        <input id="name" type="text" v-model="address.name" class="form-control">
-                        <span class="help-block">{{ formErrors.name }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.firstName }">
-                        <label for="firstName" class="control-label">
-                            Vorname:
-                        </label>
-                        <input id="firstName" type="text" v-model="address.firstName" class="form-control">
-                        <span class="help-block">{{ formErrors.firstName }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label class="control-label">
-                            Geburtsdatum:
-                        </label>
-                        <span ref="picker"></span>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.street }">
-                        <label for="street" class="control-label">
-                            Straße:
-                        </label>
-                        <input id="street" type="text" v-model="address.street" class="form-control">
-                        <span class="help-block">{{ formErrors.street }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.zipCode }">
-                        <label for="zipCode" class="control-label">
-                            PLZ:
-                        </label>
-                        <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
-                        <span class="help-block">{{ formErrors.zipCode }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.city }">
-                        <label for="city" class="control-label">
-                            Stadt:
-                        </label>
-                        <input id="city" type="text" v-model="address.city" class="form-control">
-                        <span class="help-block">{{ formErrors.city }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.country }">
-                        <label for="country" class="control-label">
-                            Land:
-                        </label>
-                        <select id="country" v-model="address.country" class="form-control">
-                            <option v-for="country in $store.state.countries"
-                                    :value="country['code']">{{ country['name'] }}</option>
-                        </select>
-                        <span class="help-block">{{ formErrors.country }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.email }">
-                        <label for="email" class="control-label">
-                            E-Mail:
-                        </label>
-                        <input id="email" type="text" v-model="address.email" class="form-control">
-                        <span class="help-block">{{ formErrors.email }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label for="phone" class="control-label">
-                            Telefon:
-                        </label>
-                        <input id="phone" type="text" v-model="address.phonePrivate" class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <label for="mobile" class="control-label">
-                            Mobil:
-                        </label>
-                        <input id="mobile" type="text" v-model="address.phoneMobile" class="form-control">
-                    </div>
-                </div>
-                <div class="col-xs-12">
-                    <div class="form-group">
-                        <button type="submit" class="button" :disabled="loading">
-                            Speichern
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-</template>
-
-<script>
-    import Vue from 'vue'
-	import $ from 'jquery'
-    import flatpickr from 'flatpickr'
-    import { German } from 'flatpickr/dist/l10n/de'
-    import EventBus from '../../_bus'
-
-	export default {
-	    data () {
-	        return {
-	            picker: null,
-	            address: {},
-                formErrors: {}
-			}
-        },
-		created () {
-            this.initFormErrors();
-	        this.fetchAddress();
-        },
-        mounted () {
-            Vue.nextTick(() => {
-                this.picker = $(this.$refs.picker).flatpickr({
-                    dateFormat: 'd.m.Y',
-                    locale: German,
-                    inline: true,
-                    onChange: (selectedDates) => {
-                        this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
-                    }
-                });
-            });
-        },
-        methods: {
-            initFormErrors () {
-                this.formErrors = {
-                    name: null,
-                    firstName: null,
-                    dateOfBirth: null,
-                    email: null,
-                    gender: null,
-                    street: null,
-                    zipCode: null,
-                    city: null,
-                    country: null
-                }
-            },
-            fetchAddress () {
-                this.$store.dispatch('address/load')
-                    .then((data) => {
-                        this.address = data;
-                        this.picker.setDate(new Date(this.address.dateOfBirth), true);
-                    })
-                    .finally(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
-                    });
-            },
-            saveAddress () {
-                this.initFormErrors();
-                this.$store.dispatch('address/save', this.address)
-                    .catch(error => {
-                        this.$store.commit('alert', {
-                            message: 'Bitte überprüfe deine Eingaben.',
-                            class: 'alert-danger'
-                        });
-                        const violations = error.response.data['violations'];
-                        for (let violation of violations) {
-                            this.formErrors[violation.propertyPath] = violation.message;
-                        }
-                    })
-                    .finally(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
-                    });
-            }
-        },
-        computed: {
-            loading () {
-	            return this.$store.state.loading;
-            }
-        }
-    }
-</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="form-group" :class="{'has-error': error }">
+        <label class="control-label">{{ label }}:</label>
+        <slot></slot>
+        <span class="help-block">{{ error }}</span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormGroup',
+        props: {
+            label: {
+                type: String,
+                required: true
+            },
+            error: {
+                type: String,
+                default: null
+            }
+        }
+    }
+</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue

@@ -1,61 +0,0 @@
-<template>
-    <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
-	    <h1>Newsletter</h1>
-        <div class="row">
-            <div class="col-xs-12">
-                <p v-html="statusMessage"></p>
-                <button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
-                    {{ address.newsletter ? 'Abmelden' : 'Anmelden' }}
-                </button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import EventBus from '../../_bus'
-
-	export default {
-	    data () {
-	        return {
-	            address: {}
-			}
-        },
-		created () {
-	        this.fetchAddress();
-        },
-        methods: {
-            fetchAddress () {
-                this.$store.dispatch('address/load')
-                    .then((data) => {
-                        this.address = data;
-                    }).finally(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
-                    });
-            },
-            toggleReqistration () {
-                this.address.newsletter = !this.address.newsletter;
-                const data = {
-                    id: this.address.id,
-                    email: this.address.email,
-                    registration: this.address.newsletter
-                };
-                this.$store.dispatch('newsletter/registration', data)
-                    .finally(() => {
-                        EventBus.$emit('scrollTo', '#myep-main');
-                    });
-            }
-        },
-        computed: {
-            loading () {
-	            return this.$store.state.loading;
-            },
-            statusMessage () {
-                let message = 'Du bist aktuell';
-                message += this.address.newsletter ? ' ' : ' <strong>nicht</strong> ';
-                message += 'zum Newsletter angemeldet.';
-                return message;
-            }
-        }
-    }
-</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue

@@ -1,137 +0,0 @@
-<template>
-    <div class="form-wrapper form--border" id="myep-main">
-        <h1>Registrierung MyE&amp;P</h1>
-        <form @submit.prevent="submit()">
-            <div class="row">
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.firstName }">
-                        <label for="firstname" class="control-label">
-                            Vorname
-                        </label>
-                        <input id="firstname" type="text" v-model="userData.firstName" class="form-control">
-                        <span class="help-block">{{ formErrors.firstName }}</span>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.name }">
-                        <label for="name" class="control-label">
-                            Name
-                        </label>
-                        <input id="name" type="text" v-model="userData.name" class="form-control">
-                        <span class="help-block">{{ formErrors.name }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.email }">
-                        <label for="email" class="control-label">
-                            E-Mail
-                        </label>
-                        <input id="email" type="text" v-model="userData.email" class="form-control">
-                        <span class="help-block">{{ formErrors.email }}</span>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.gender }">
-                        <label for="gender" class="control-label">
-                            Gender
-                        </label>
-                        <select id="gender" v-model="userData.gender" class="form-control">
-                            <option value="M">M</option>
-                            <option value="W">W</option>
-                            <option value="D">D</option>
-                        </select>
-                        <span class="help-block">{{ formErrors.gender }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-xs-12 col-md-6">
-                    <div class="form-group">
-                        <div class="btn-group">
-                            <button type="submit" class="button" :disabled="loading">
-                                Registrieren
-                            </button>
-                            <router-link to="login" class="button button--secondary">
-                                Zum Login
-                            </router-link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-</template>
-
-<script>
-    import EventBus from '../../_bus'
-
-	export default {
-	    data () {
-	        return {
-	            userData: {},
-                formErrors: {}
-            }
-        },
-        methods: {
-	        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;
-                        }
-                    }
-                }).finally(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                });
-            },
-            initFormData () {
-	            this.userData = {
-                    name: '',
-                    firstName: '',
-                    email: '',
-                    gender: 'M'
-                }
-            },
-            initFormErrors () {
-	            this.formErrors = {
-                    name: null,
-                    firstName: null,
-                    email: null,
-                    gender: null
-                }
-            }
-        },
-        created () {
-	        this.initFormData();
-	        this.initFormErrors();
-        },
-        computed: {
-            loading () {
-                return this.$store.state.loading;
-            }
-        }
-    }
-</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js

@@ -1,59 +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: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.get('/api/addresses')
-                .then((response) => {
-                    commit('loadingFinish', null, { root: true });
-                    return response.data['hydra:member'][0];
-                }).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;
-                });
-        },
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.put('/api/addresses/' + data.id, 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 });
-                    throw error;
-                });
-        }
-    }
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/crmdata.js

@@ -1,60 +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: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.get('/api/crm-selections')
-                .then((response) => {
-                    commit('loadingFinish', null, { root: true });
-                    return response.data['hydra:member'][0];
-                }).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;
-                });
-        },
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.put('/api/crm-selections/' + data.id, 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 });
-                    EventBus.$emit('forcedLogout');
-                    throw error;
-                });
-        }
-    }
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/events.js

@@ -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: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.get('/api/events')
-                .then((response) => {
-                    commit('loadingFinish', null, { root: true });
-                    return response.data['hydra:member'];
-                }).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;
-                });
-        }
-    }
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/newsletter.js

@@ -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: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.put('/api/newsletters/' + data.id, 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 });
-                    EventBus.$emit('forcedLogout');
-                    throw error;
-                });
-        }
-    }
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js

@@ -1,60 +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: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.get('/api/teamers/' + rootState.memberId)
-                .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;
-                });
-        },
-        save ({ commit, rootState }, data) {
-            commit('loadingBegin', null, { root: true });
-
-            const client = axios.create({
-                headers: {
-                    'X-Auth-Token': rootState.authToken
-                }
-            });
-
-            return client.put('/api/teamers/' + rootState.memberId, 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 });
-                    EventBus.$emit('forcedLogout');
-                    throw error;
-                });
-        }
-    }
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js

@@ -1,30 +1,30 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import store from './../_store';
+import store from '../store';
 
 Vue.use(VueRouter);
 
 const guard = (to, from, next) => {
     if (store.state.loading) {
         next(false);
-    } else if (store.state.loggedIn) {
+    } else if (store.getters.isLoggedIn === false) {
-        if (to.meta.requiresTeamer && !store.getters.isTeamer) {
+        next({ name: 'login' });
+    } else if (to.meta.requiresTeamer && store.getters.isTeamer === false) {
         next(false);
     } else {
         next();
     }
-    } else {
-        next({ name: 'login' });
-    }
 };
 
-import Address from './components/Address.vue'
+import Address from '../myep/Address'
-import Events from './components/Events.vue'
+import Events from '../myep/Events'
-import Login from './components/Login.vue'
+import Login from '../myep/Login'
-import CrmData from './components/CrmData.vue'
+import CrmData from '../myep/CrmData'
-import Teamer from './components/Teamer.vue'
+import Newsletter from '../myep/Newsletter'
-import Newsletter from './components/Newsletter.vue'
+import Registration from '../myep/Registration'
-import Registration from './components/Registration'
+
+// Lazy load teamer component when required
+const Teamer = () => import('../myep/Teamer');
 
 export default new VueRouter({
     routes: [
@@ -33,7 +33,7 @@ export default new VueRouter({
             path: '/',
             component: Login,
             beforeEnter (from, to, next) {
-                if (!store.state.loggedIn) {
+                if (store.getters.isLoggedIn === false) {
                     next();
                 } else {
                     next({ name: 'address' });
@@ -45,7 +45,7 @@ export default new VueRouter({
             path: '/register',
             component: Registration,
             beforeEnter (from, to, next) {
-                if (!store.state.loggedIn) {
+                if (store.getters.isLoggedIn === false) {
                     next();
                 } else {
                     next({ name: 'address' });

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js

@@ -0,0 +1,224 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+Vue.use(Vuex);
+
+const defaultUserData = {
+    isTeamer: false,
+    email: '',
+    firstName: '',
+    lastName: '',
+    gender: '',
+    dateOfBirth: null,
+    street: '',
+    zipCode: '',
+    city: '',
+    phoneMobile: '',
+    phonePrivate: '',
+    newsletter: false,
+    watchList: []
+};
+
+export default new Vuex.Store({
+    state: {
+        config: {},
+        loading: false,
+        authToken: null,
+        userData: defaultUserData,
+        alert: {
+            message: '',
+            class: ''
+        }
+    },
+    mutations: {
+        initSession(state) {
+            const authToken = sessionStorage.getItem('token');
+            if (authToken) {
+                state.authToken = authToken;
+            }
+        },
+        initConfig(state) {
+            const configElement = document.getElementById('appconfig');
+            state.config = JSON.parse(configElement.innerHTML);
+            axios.defaults.baseURL = state.config.myEpApiBaseUrl;
+        },
+        initWatchlist(state) {
+            if (!sessionStorage.getItem('watchList')) {
+                sessionStorage.setItem('watchList', JSON.stringify([]));
+            }
+            state.userData.watchList = JSON.parse(sessionStorage.getItem('watchList'));
+        },
+        setWatchlist(state, list) {
+            state.userData.watchList = list;
+            sessionStorage.setItem('watchList', JSON.stringify(list));
+        },
+        setUserData(state, data) {
+            data.watchList = [...state.userData.watchList, ...data.watchList];
+            state.userData = data;
+        },
+        login(state, token) {
+            state.authToken = token;
+            sessionStorage.setItem('token', token);
+        },
+        logout(state) {
+            state.authToken = null;
+            state.userData = defaultUserData;
+            sessionStorage.removeItem('token');
+            sessionStorage.removeItem('watchlist');
+        },
+        alert(state, payload) {
+            state.alert = payload;
+        },
+        beginLoading(state) {
+            state.loading = true;
+            state.alert = {message: '', class: ''};
+        },
+        endLoading(state) {
+            state.loading = false;
+        },
+        setCountries(state, countries) {
+            state.countries = countries;
+        }
+    },
+    actions: {
+        init({commit}) {
+            commit('initConfig');
+            commit('initWatchlist');
+        },
+        login({commit, dispatch}, credentials) {
+            commit('beginLoading');
+            return axios({
+                url: '/api/login_check',
+                method: 'post',
+                data: {
+                    username: credentials.email,
+                    password: credentials.password
+                },
+                withCredentials: true
+            }).then(response => {
+                commit('login', response.data.token);
+            }).catch(error => {
+                commit('logout');
+                commit('alert', {
+                    message: 'Der Login ist fehlgeschlagen :(',
+                    class: 'alert-danger'
+                });
+                throw error;
+            }).finally(() => {
+                commit('endLoading');
+            });
+        },
+        logout({commit, state}) {
+            commit('beginLoading');
+            const client = axios.create({
+                headers: {
+                    'Authorization': 'Bearer ' + state.authToken,
+                }
+            });
+            return client({
+                url: '/api/logout'
+            }).catch(error => {
+            }).finally(() => {
+                commit('logout');
+                commit('endLoading');
+            });
+        },
+        resetPassword({commit}, email) {
+            commit('beginLoading');
+            return axios({
+                url: '/api/reset-password',
+                data: {email: email},
+                method: 'post'
+            }).then(response => {
+                return response;
+            }).finally(() => {
+                commit('endLoading');
+            });
+        },
+        register({commit}, userData) {
+            commit('beginLoading');
+            return axios({
+                url: '/api/register',
+                data: userData,
+                method: 'post'
+            }).then(response => {
+                return response;
+            }).finally(() => {
+                commit('endLoading');
+            });
+        },
+        watchlistToggle({commit, state}, uid) {
+            let list = state.userData.watchList;
+            let watchlistIndex = list.indexOf(uid);
+            if (watchlistIndex === -1) {
+                list.push(uid)
+            } else {
+                list.splice(watchlistIndex, 1)
+            }
+            commit('setWatchlist', list);
+            if (!!state.authToken) {
+                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,
+        onWatchlist: (state) => (uid) => state.userData.watchList.indexOf(uid) !== -1,
+        isLoggedIn: state => !!state.authToken,
+        isTeamer: state => !!state.userData.isTeamer
+    }
+});

public/typo3conf/ext/ep_theme/Resources/Private/Forms/ContactForm.form.yaml

@@ -6,13 +6,15 @@ identifier: contactform
 label: Kontaktformular
 prototypeName: contactform
 finishers:
+  -
+    identifier: BpnApiFinisher
   -
     options:
-      subject: 'Kontaktanfrage  von {text-1}'
+      subject: 'Kontaktanfrage  von {firstName} {lastName}'
       recipientAddress: [email protected]
       recipientName: 'E&P Reisen'
-      senderAddress: '{text-4}'
+      senderAddress: '{email}'
-      senderName: '{text-1}'
+      senderName: '{firstName} {lastName}'
       replyToAddress: [email protected]
       carbonCopyAddress: ''
       blindCarbonCopyAddress: ''
@@ -38,11 +40,11 @@ renderables:
       -
         defaultValue: ''
         type: Text
-        identifier: text-1
+        identifier: firstName
-        label: Name
+        label: Vorname
         properties:
           fluidAdditionalAttributes:
-            placeholder: 'Vor- & Nachname'
+            placeholder: 'Vorname'
             required: required
           elementDescription: ''
         validators:
@@ -51,22 +53,35 @@ renderables:
       -
         defaultValue: ''
         type: Text
-        identifier: text-2
+        identifier: lastName
-        label: Anschrift
+        label: 'Nachname'
         properties:
           fluidAdditionalAttributes:
-            placeholder: 'Straße & Nr.'
+            placeholder: 'Nachname'
+            required: required
           elementDescription: ''
+        validators:
+          -
+            identifier: NotEmpty
+      -
+        properties:
+          options:
+            m: m
+            w: w
+            d: d
+          fluidAdditionalAttributes:
+            required: required
+        type: SingleSelect
+        identifier: gender
+        label: 'Gender'
+        validators:
+          -
+            identifier: NotEmpty
       -
         defaultValue: ''
         type: Text
-        identifier: text-3
+        identifier: email
-        label: 'PLZ, Ort'
+        label: 'E-Mail'
-      -
-        defaultValue: ''
-        type: Text
-        identifier: text-4
-        label: E-Mail
         properties:
           fluidAdditionalAttributes:
             required: required
@@ -78,16 +93,35 @@ renderables:
       -
         defaultValue: ''
         type: Text
-        identifier: text-5
+        identifier: street
-        label: Telefon
+        label: 'Straße'
+        properties:
+          fluidAdditionalAttributes:
+            placeholder: 'Straße & Nr.'
+          elementDescription: ''
+      -
+        defaultValue: ''
+        type: Text
+        identifier: zipCode
+        label: 'PLZ'
+      -
+        defaultValue: ''
+        type: Text
+        identifier: city
+        label: 'Ort'
+      -
+        defaultValue: ''
+        type: Text
+        identifier: phone
+        label: 'Telefon'
       -
         defaultValue: ''
         type: Textarea
-        identifier: textarea-1
+        identifier: message
         label: 'Deine Kontaktanfrage'
       -
         type: Checkbox
-        identifier: checkbox-1
+        identifier: privacypolicyaccepted
         label: 'Ich habe die Datenschutzbestimmungen gelesen und akzeptiere sie'
         properties:
           elementDescription: ''

public/typo3conf/ext/ep_theme/Resources/Private/Language/de.locallang.xlf

@@ -76,6 +76,9 @@
             <trans-unit id="tx_eptheme.message.contactForm.name.1221560718">
                 <target>Bitte angeben</target>
             </trans-unit>
+            <trans-unit id="tx_eptheme.message.contactForm.firstName.1221560718">
+                <target>Bitte angeben</target>
+            </trans-unit>
             <trans-unit id="tx_eptheme.message.contactForm.email.1221560718">
                 <target>Bitte angeben</target>
             </trans-unit>

public/typo3conf/ext/ep_theme/Resources/Private/Language/locallang.xlf

@@ -75,6 +75,9 @@
             <trans-unit id="tx_eptheme.message.contactForm.name.1221560718">
                 <source>Bitte angeben</source>
             </trans-unit>
+            <trans-unit id="tx_eptheme.message.contactForm.firstName.1221560718">
+                <source>Bitte angeben</source>
+            </trans-unit>
             <trans-unit id="tx_eptheme.message.contactForm.email.1221560718">
                 <source>Bitte angeben</source>
             </trans-unit>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Config.html

@@ -1,7 +1,7 @@
 <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>",
+        "myEpApiBaseUrl": "<f:format.raw>{settings.myEpApiEndpointUrl}</f:format.raw>",
         "paCode": <f:if condition='{context.paCode}'><f:then>"{context.paCode}"</f:then><f:else>null</f:else></f:if>,
         "externalDomains": {settings.domainsToTrack -> v:iterator.explode() -> f:format.json() -> f:format.raw()}
     }

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html

@@ -18,6 +18,18 @@
                             <div class="help-block"
                                  v-show="formErrors.name" v-html="formErrors.name"></div>
                         </div>
+                        <div class="form-group" :class="{ 'has-error': formErrors.firstName }">
+                            <label for="firstName" class="control-label">Vorname*</label>
+                            <f:form.textfield class="form-control" property="firstName"/>
+                            <div class="help-block"
+                                 v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
+                        </div>
+                        <div class="form-group" :class="{ 'has-error': formErrors.gender }">
+                            <label for="gender" class="control-label">Gender*</label>
+                            <f:form.select class="form-control" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
+                            <div class="help-block"
+                                 v-show="formErrors.gender" v-html="formErrors.gender"></div>
+                        </div>
                         <div class="form-group" :class="{ 'has-error': formErrors.company }">
                             <label for="company" class="control-label">Firma/Verein</label>
                             <f:form.textfield class="form-control" property="company"/>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html

@@ -12,12 +12,24 @@
                             pageUid="{settings.defaultAjaxUid}" class="border"
                             additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
                         <f:form.hidden property="pageUrl"/>
+                        <div class="form-group" :class="{ 'has-error': formErrors.gender }">
+                            <label for="gender" class="control-label">Geschlecht</label>
+                            <f:form.select options="{m: 'm', w: 'w', d: 'd'}" property="gender" />
+                            <div class="help-block"
+                                 v-show="formErrors.gender" v-html="formErrors.gender"></div>
+                        </div>
                         <div class="form-group" :class="{ 'has-error': formErrors.name }">
                             <label for="name" class="control-label">Name</label>
                             <f:form.textfield class="form-control" property="name"/>
                             <div class="help-block"
                                  v-show="formErrors.name" v-html="formErrors.name"></div>
                         </div>
+                        <div class="form-group" :class="{ 'has-error': formErrors.firstName }">
+                            <label for="firstName" class="control-label">Vorname</label>
+                            <f:form.textfield class="form-control" property="firstName"/>
+                            <div class="help-block"
+                                 v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
+                        </div>
                         <div class="form-group" :class="{ 'has-error': formErrors.email }">
                             <label for="email" class="control-label">E-Mail</label>
                             <f:form.textfield class="form-control" property="email"/>