From c9a2b5ee083fb8cf6630555956f5c30aa98bdb5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 3 Nov 2021 16:41:52 +0100
Subject: [PATCH] Merge branch 'feature/myep-cookie-auth' into develop

---
 .../Private/Assets/js/myep/Address.vue        |  18 +--
 .../Resources/Private/Assets/js/myep/App.vue  |  11 +-
 .../Private/Assets/js/myep/BookingEdit.vue    | 116 +++++++++--------
 .../Private/Assets/js/myep/CrmData.vue        |  54 ++++----
 .../Private/Assets/js/myep/Events.vue         |  23 ++--
 .../Private/Assets/js/myep/Newsletter.vue     |  32 ++---
 .../Private/Assets/js/myep/Teamer.vue         |  21 +--
 .../Private/Assets/js/myep/api/index.js       |  26 ----
 .../Private/Assets/js/myep/store/index.js     | 121 +++++++++---------
 9 files changed, 202 insertions(+), 220 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
index 29df0c71..5f29adda 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
@@ -63,10 +63,10 @@
 <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'
-    import authenticatedClient from './api'
 
 	export default {
 	    components: {
@@ -102,14 +102,14 @@
 	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
             loadFormOptions () {
                 this.beginLoading();
-                return authenticatedClient({
-                        url: '/api/countries',
-                    }).then(response => {
-                        this.countries = response.data
-                    }).catch(error => {
-                    }).finally(() => {
-                        this.endLoading()
-                    });
+                return axios({
+                    url: '/api/countries'
+                }).then(response => {
+                    this.countries = response.data
+                }).catch(error => {
+                }).finally(() => {
+                    this.endLoading()
+                });
             },
             save () {
                 this.formErrors = {};
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index 1782a332..573b30f8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
@@ -59,13 +59,12 @@
             ...mapGetters(['isLoggedIn', 'isTeamer'])
         },
         mounted () {
-            if (this.isLoggedIn) {
-                this.$router.replace({ name: 'address' })
-            }
+            this.$store.dispatch('init').then(() => {
+                if (this.isLoggedIn) {
+                    this.$router.replace({ name: 'address' })
+                }
+            })
         },
-        created () {
-            this.$store.dispatch('init')
-        }
     }
 </script>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
index 0beea097..15953f68 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
@@ -171,8 +171,7 @@
     import ServiceSelect from './components/ServiceSelect'
     import ServicesOverview from './components/ServicesOverview'
     import TransportationSelect from './components/TransportationSelect'
-
-    import authenticatedClient from './api'
+    import axios from 'axios'
     import {mapGetters, mapMutations, mapState} from 'vuex'
 
     Vue.use(VueScrollTo)
@@ -225,7 +224,7 @@
             ...mapMutations(['alert', 'beginLoading', 'endLoading']),
             loadFormOptions () {
                 this.beginLoading();
-                return authenticatedClient({
+                return axios({
                     url: '/api/countries',
                 }).then(response => {
                     this.countries = response.data
@@ -236,70 +235,65 @@
             },
             loadBookingData () {
                 this.beginLoading('Lade Reise- und Buchungsdaten...')
-                return authenticatedClient.get(`/api/booking/${this.bookingId}`)
-                    .then(response => {
-                        this.bookingData = response.data.bookingData;
-                        this.participantData = response.data.participantData;
-                        this.travelData = response.data.travelData;
-                    })
-                    .catch(() => {
-                        throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.');
-                    })
-                    .finally(() => {
-                        this.endLoading()
-                    })
+                return axios({
+                    url: `/api/booking/${this.bookingId}`
+                }).then(response => {
+                    this.bookingData = response.data.bookingData;
+                    this.participantData = response.data.participantData;
+                    this.travelData = response.data.travelData;
+                }).catch(() => {
+                    throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.');
+                }).finally(() => {
+                    this.endLoading()
+                })
             },
             loadEventData () {
                 this.beginLoading('Lade Vorgangsdaten...')
-                return authenticatedClient.get(`/api/event/${this.bookingData.bookingNumber}`)
-                    .then(response => {
-                        this.eventData = response.data;
-                    })
-                    .catch(error => {
-                        throw new Error(error.response.data.message);
-                    })
-                    .finally(() => {
-                        this.endLoading()
-                    })
+                return axios({
+                    url: `/api/event/${this.bookingData.bookingNumber}`
+                }).then(response => {
+                    this.eventData = response.data;
+                }).catch(error => {
+                    throw new Error(error.response.data.message);
+                }).finally(() => {
+                    this.endLoading()
+                })
             },
             loadMutableFields () {
                 this.beginLoading('Lade mögliche Änderungen...')
-                return authenticatedClient.get(`/api/mutable-fields/${this.travelData.busproId}`)
-                    .then(response => {
-                        this.mutableFields = response.data;
-                    })
-                    .catch(() => {
-                        throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
-                    })
-                    .finally(() => {
-                        this.endLoading()
-                    })
+                return axios({
+                    url: `/api/mutable-fields/${this.travelData.busproId}`
+                }).then(response => {
+                    this.mutableFields = response.data;
+                }).catch(() => {
+                    throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
+                }).finally(() => {
+                    this.endLoading()
+                })
             },
             loadContingents () {
                 this.beginLoading('Lade Kontingente...')
-                return authenticatedClient.get(`/api/contingents/${this.travelData.busproId}/${this.bookingData.partnerId}`)
-                    .then(response => {
-                        this.contingents = response.data;
-                    })
-                    .catch(() => {
-                        throw new Error('Kontingente konnten nicht geladen werden.');
-                    })
-                    .finally(() => {
-                        this.endLoading()
-                    })
+                return axios({
+                    url: `/api/contingents/${this.travelData.busproId}`
+                }).then(response => {
+                    this.contingents = response.data;
+                }).catch(() => {
+                    throw new Error('Kontingente konnten nicht geladen werden.');
+                }).finally(() => {
+                    this.endLoading()
+                })
             },
             loadServices () {
                 this.beginLoading('Lade Leistungen...')
-                return authenticatedClient.get(`/api/services/${this.travelData.busproId}`)
-                    .then(response => {
-                        this.services = response.data;
-                    })
-                    .catch(() => {
-                        throw new Error('Leistungen konnten nicht geladen werden.');
-                    })
-                    .finally(() => {
-                        this.endLoading()
-                    })
+                return axios({
+                    url: `/api/services/${this.travelData.busproId}`
+                }).then(response => {
+                    this.services = response.data;
+                }).catch(() => {
+                    throw new Error('Leistungen konnten nicht geladen werden.');
+                }).finally(() => {
+                    this.endLoading()
+                })
             },
             getAccommodationLabel (participant) {
                 if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) {
@@ -429,10 +423,14 @@
                     return;
                 }
                 this.beginLoading()
-                authenticatedClient.put(`/api/booking/${this.bookingId}`, {
-                    participantData: this.participantData,
-                    selectedTransportations: this.selectedTransportations,
-                    remarks: this.bookingData.remarks
+                axios({
+                    url: `/api/booking/${this.bookingId}`,
+                    method: 'put',
+                    data: {
+                        participantData: this.participantData,
+                        selectedTransportations: this.selectedTransportations,
+                        remarks: this.bookingData.remarks,
+                    },
                 }).then(response => {
                     this.alert({
                       message: response.data.message,
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
index 52479d16..6537cd8e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
@@ -51,7 +51,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import authenticatedClient from './api'
+    import axios from 'axios'
 
     export default {
         data () {
@@ -64,37 +64,41 @@
         created () {
             this.beginLoading();
 
-            return authenticatedClient.get('/api/crm-selections')
-                .then(response => {
-                    this.crmData = response.data
-                }).catch(error => {
-                    this.alert({
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    })
-                }).finally(() => {
-                    this.endLoading()
-                });
+            return axios({
+                url: '/api/crm-selections'
+            }).then(response => {
+                this.crmData = response.data
+            }).catch(error => {
+                this.alert({
+                    message: 'Es ist ein Fehler aufgetreten :(',
+                    class: 'alert-danger'
+                })
+            }).finally(() => {
+                this.endLoading()
+            });
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
             save () {
                 this.beginLoading();
 
-                return authenticatedClient.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();
+                return axios({
+                    url: '/api/crm-selections',
+                    method: 'put',
+                    data: 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) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
index bf1d21e8..903b4911 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
@@ -76,7 +76,7 @@
 
 <script>
 import {mapState, mapMutations, mapGetters} from 'vuex'
-    import authenticatedClient from './api'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -96,17 +96,18 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
         created () {
             this.beginLoading();
 
-            return authenticatedClient.get('/api/events')
-                .then(response => {
-                    this.events = response.data;
-                }).catch(error => {
-                    this.alert({
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        class: 'alert-danger'
-                    });
-                }).finally(() => {
-                    this.endLoading();
+            return axios({
+                url: '/api/events'
+            }).then(response => {
+                this.events = response.data;
+            }).catch(error => {
+                this.alert({
+                    message: 'Es ist ein Fehler aufgetreten :(',
+                    class: 'alert-danger'
                 });
+            }).finally(() => {
+                this.endLoading();
+            });
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
index 0511c0c3..46f103ba 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
@@ -12,7 +12,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import authenticatedClient from './api'
+    import axios from 'axios'
 
 	export default {
         methods: {
@@ -28,21 +28,23 @@
 
                 this.beginLoading();
 
-                return authenticatedClient.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();
+                return axios({
+                    url: '/api/newsletter',
+                    method: 'put',
+                    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: {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
index 13e8182d..0d6fb950 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
@@ -84,7 +84,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import authenticatedClient from './api'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
     import FormGroup from './components/FormGroup'
@@ -140,15 +140,16 @@
         created () {
             this.beginLoading();
 
-            return authenticatedClient.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();
-                });
+            return axios({
+                url: '/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: {
             ...mapState(['userData', 'loading'])
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
index f1868261..e69de29b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
@@ -1,26 +0,0 @@
-import axios from 'axios'
-import createAuthRefreshInterceptor from 'axios-auth-refresh'
-
-const authenticatedClient = axios.create();
-
-const getAccessToken = () => {
-    return sessionStorage.getItem('myep-auth-token');
-};
-
-authenticatedClient.interceptors.request.use(request => {
-    request.headers['Authorization'] = 'Bearer ' + getAccessToken();
-    return request;
-});
-
-const refreshAuth = failedRequest => axios.post('/api/token_refresh', {
-        refresh_token: sessionStorage.getItem('myep-refresh-token')
-    }).then(response => {
-        sessionStorage.setItem('myep-auth-token', response.data.token);
-        sessionStorage.setItem('myep-refresh-token', response.data.refresh_token);
-        failedRequest.response.config.headers['Authorization'] = 'Bearer ' + response.data.token;
-        return Promise.resolve();
-    });
-
-createAuthRefreshInterceptor(authenticatedClient, refreshAuth);
-
-export default authenticatedClient
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
index c21477d5..278e80af 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
@@ -1,13 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import authenticatedClient from '../api'
 
 const configElement = document.getElementById('appconfig')
 const config = JSON.parse(configElement.innerHTML)
 
 axios.defaults.baseURL = config.myEpApiBaseUrl
-authenticatedClient.defaults.baseURL = config.myEpApiBaseUrl
+axios.defaults.withCredentials = true
 
 Vue.use(Vuex)
 
@@ -32,8 +31,7 @@ export default new Vuex.Store({
         config: {},
         loading: false,
         statusMessage: '',
-        authToken: null,
-        refreshToken: null,
+        authenticated: false,
         userData: defaultUserData,
         alert: {
             message: '',
@@ -41,12 +39,6 @@ export default new Vuex.Store({
         }
     },
     mutations: {
-        initSession(state) {
-            const authToken = sessionStorage.getItem('myep-auth-token');
-            if (authToken) {
-                state.authToken = authToken;
-            }
-        },
         initConfig(state) {
             state.config = config
         },
@@ -56,18 +48,12 @@ export default new Vuex.Store({
             }
             state.userData = data
         },
-        login(state, data) {
-            state.authToken = data.token;
-            state.refreshToken = data.refresh_token;
-            sessionStorage.setItem('myep-auth-token', data.token);
-            sessionStorage.setItem('myep-refresh-token', data.refresh_token);
+        login(state) {
+            state.authenticated = true
         },
         logout(state) {
             state.userData = defaultUserData;
-            state.authToken = null;
-            state.refreshToken = null;
-            sessionStorage.removeItem('myep-auth-token');
-            sessionStorage.removeItem('myep-refresh-token');
+            state.authenticated = false
         },
         alert(state, payload) {
             state.alert = payload;
@@ -88,18 +74,28 @@ export default new Vuex.Store({
     actions: {
         init({commit}) {
             commit('initConfig');
-            commit('initSession');
-        },
-        login({commit, dispatch}, credentials) {
             commit('beginLoading');
+
             return axios({
-                url: '/api/login_check',
+                url: '/api/ping',
+                method: 'get',
+            }).then(response => {
+                commit('login')
+            }).catch(() => {
+            }).finally(() => {
+                commit('endLoading');
+            })
+        },
+        login({commit}, credentials) {
+            commit('beginLoading');
+
+            return axios({
+                url: '/api/login',
                 method: 'post',
                 data: {
                     username: credentials.email,
                     password: credentials.password
                 },
-                withCredentials: true
             }).then(response => {
                 commit('login', response.data);
             }).catch(error => {
@@ -116,8 +112,8 @@ export default new Vuex.Store({
         logout({commit}) {
             commit('beginLoading');
 
-            return authenticatedClient({
-                url: '/api/logout'
+            return axios({
+                url: '/api/logout',
             }).catch(error => {
             }).finally(() => {
                 commit('logout');
@@ -126,6 +122,7 @@ export default new Vuex.Store({
         },
         resetPassword({commit}, email) {
             commit('beginLoading');
+
             return axios({
                 url: '/api/reset-password',
                 data: {email: email},
@@ -138,6 +135,7 @@ export default new Vuex.Store({
         },
         register({commit}, userData) {
             commit('beginLoading');
+
             return axios({
                 url: '/api/register',
                 data: userData,
@@ -148,51 +146,56 @@ export default new Vuex.Store({
                 commit('endLoading');
             });
         },
-        loadAddress({commit, state}) {
+        loadAddress({commit}) {
             commit('beginLoading');
 
-            return authenticatedClient.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');
+            return axios({
+                url: '/api/address',
+                method: 'get',
+            }).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');
 
-            return authenticatedClient.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');
+            return axios({
+                url: '/api/address',
+                method: 'put',
+                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: {
         onWatchlist: state => uid => state.userData.watchList.indexOf(uid) !== -1,
-        isLoggedIn: state => !!state.authToken,
+        isLoggedIn: state => !!state.authenticated,
         isTeamer: state => !!state.userData.isTeamer,
         isGroupManager: state => !!state.userData.isGroupManager,
     }