From 8ea027f782a8f4fb9658d88631ab8bde2e2310b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Tue, 16 Oct 2018 13:28:32 +0200
Subject: [PATCH] Disable navigation during api access, use local session

---
 .../Private/Assets/js/myep/_router.js         |  4 +-
 .../Private/Assets/js/myep/_store.js          | 37 +++++++++----------
 .../Assets/js/myep/components/Address.vue     | 11 +++---
 .../Private/Assets/js/myep/components/App.vue | 20 +++++++---
 .../Assets/js/myep/components/CrmData.vue     | 15 ++++----
 .../Assets/js/myep/components/Events.vue      | 11 +++---
 .../Assets/js/myep/components/Login.vue       |  8 ++--
 7 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
index 8a4e0e96..60f07770 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
@@ -5,7 +5,9 @@ import store from './_store';
 Vue.use(VueRouter);
 
 const guard = (to, from, next) => {
-    if (store.getters.isLoggedIn) {
+    if (store.getters.isLoading) {
+        next(false);
+    } else if (store.getters.isLoggedIn) {
         next();
     } else {
         next({ name: 'login' });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
index 9dfd1ffc..2f5a904a 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
@@ -7,36 +7,33 @@ Vue.use(Vuex);
 export default new Vuex.Store({
     state: {
         config: {},
-        pending: false,
-        isLoggedIn: !!localStorage.getItem('token'),
+        loading: false,
+        isLoggedIn: !!sessionStorage.getItem('token'),
         countries: []
     },
     mutations: {
-        pending (state) {
-            state.pending = true;
-        },
         loginSuccess (state) {
             state.isLoggedIn = true;
-            state.pending = false;
         },
         loginFailure (state) {
             state.isLoggedIn = false;
-            state.pending = false;
         },
         logout (state) {
             state.isLoggedIn = false;
-            state.pending = false;
+        },
+        loading (state, loading) {
+            state.loading = loading;
         },
         setCountries (state, countries) {
             state.countries = countries;
         },
-        initConfig (state, config) {
+        setConfig (state, config) {
             state.config = config;
         }
     },
     actions: {
         login({ commit }, credentials) {
-            commit('pending');
+            commit('loading', true);
             const formData = new FormData();
             formData.append('_username', credentials.email);
             formData.append('_password', credentials.password);
@@ -45,20 +42,23 @@ export default new Vuex.Store({
                 data: formData,
                 method: 'post'
             }).then((response) => {
-                localStorage.setItem('token', response.data.token);
+                sessionStorage.setItem('token', response.data.token);
                 commit('loginSuccess');
-                return response.data.address_id;
             }).catch((error) => {
                 commit('loginFailure');
                 throw error;
+            }).then(() => {
+                commit('loading', false);
             });
         },
         logout({ commit }) {
-            commit('pending');
             return axios({
-                url: '/api/logout'
+                url: '/api/logout',
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                }
             }).then(() => {
-                localStorage.removeItem('token');
+                sessionStorage.removeItem('token');
                 commit('logout');
             });
         },
@@ -67,19 +67,18 @@ export default new Vuex.Store({
                 url: '/api/countries',
             }).then((response) => {
                 commit('setCountries', response.data);
-                return response.data;
             })
         }
     },
     getters: {
-        isPending: state => {
-            return state.pending;
+        isLoading: state => {
+            return state.loading;
         },
         isLoggedIn: state => {
             return state.isLoggedIn;
         },
         authToken () {
-            return localStorage.getItem('token')
+            return sessionStorage.getItem('token')
         }
     }
 });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index 07d15431..d0d36805 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -94,7 +94,6 @@
 	export default {
 	    data () {
 	        return {
-	            loading: false,
 	            picker: null,
                 message: '',
                 messageClass: '',
@@ -115,12 +114,9 @@
                 });
             });
         },
-        watch: {
-	        '$route': 'fetchAddress'
-        },
         methods: {
             fetchAddress () {
-                this.loading = true;
+                this.$store.commit('loading', true);
                 axios({
                     url: '/api/addresses',
                     headers: {
@@ -135,7 +131,7 @@
                     this.messageClass = 'alert-danger';
                 }).then(() => {
                     EventBus.$emit('scrollTo', '#myep-main');
-                    this.loading = false;
+                    this.$store.commit('loading', false);
                 });
             },
             saveAddress () {
@@ -165,6 +161,9 @@
             },
             countries () {
                 return this.$store.state.countries;
+            },
+            loading () {
+	            return this.$store.getters.isLoading;
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
index 3244587c..95735f9b 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <ul class="nav nav-tabs">
+        <ul class="nav nav-tabs" :class="{ 'nav-disabled': loading }">
             <router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link>
             <router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Vorgänge</a></router-link>
             <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>CRM</a></router-link>
@@ -22,7 +22,7 @@
 
     import store from '../_store'
 
-    store.commit('initConfig', config);
+    store.commit('setConfig', config);
 
     import router from '../_router'
 
@@ -31,9 +31,10 @@
         router,
         methods: {
             logout () {
-                this.$store.dispatch('logout').then(() => {
-                    this.$router.push({ name: 'login' })
-                });
+                this.$store.dispatch('logout')
+                    .then(() => {
+                        this.$router.push({ name: 'login' })
+                    });
             }
         },
         computed: {
@@ -42,6 +43,9 @@
             },
             loaderUrl () {
                 return this.$store.state.config.loaderUrl;
+            },
+            loading () {
+                return this.$store.getters.isLoading;
             }
         },
         created () {
@@ -49,3 +53,9 @@
         }
     }
 </script>
+
+<style scoped>
+    .nav-disabled {
+        opacity: 0.5;
+    }
+</style>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
index 743686ac..ee79d765 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
@@ -43,7 +43,6 @@
     export default {
         data () {
             return {
-                loading: false,
                 loaded: false,
                 message: '',
                 messageClass: '',
@@ -53,12 +52,9 @@
         created () {
             this.fetchSelections();
         },
-        watch: {
-            '$route': 'fetchSelections'
-        },
         methods: {
             fetchSelections () {
-                this.loading = true;
+                this.$store.commit('loading', true);
                 axios({
                     url: '/api/crm-selections',
                     headers: {
@@ -71,12 +67,12 @@
                     this.message = 'Es ist ein Fehler aufgetreten :(';
                     this.messageClass = 'alert-danger';
                 }).then(() => {
-                    this.loading = false;
                     EventBus.$emit('scrollTo', '#myep-main');
+                    this.$store.commit('loading', false);
                 });
             },
             saveSelections () {
-                this.loading = true;
+                this.$store.commit('loading', true);
                 axios({
                     url: '/api/crm-selections/' + this.crmData.id,
                     headers: {
@@ -91,14 +87,17 @@
                     this.message = 'Es ist ein Fehler aufgetreten :(';
                     this.messageClass = 'alert-danger';
                 }).then(() => {
-                    this.loading = false;
                     EventBus.$emit('scrollTo', '#myep-main');
+                    this.$store.commit('loading', false);
                 });
             }
         },
         computed: {
             loaderUrl () {
                 return this.$store.state.config.loaderUrl;
+            },
+            loading () {
+                return this.$store.getters.isLoading;
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
index 0300c536..1b2960d0 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
@@ -54,7 +54,6 @@
                     'O': 'Option',
                     'U': 'Umbuchung',
                 },
-                loading: false,
 	            message: '',
 	            events: []
 			}
@@ -62,12 +61,9 @@
         created () {
             this.fetchEvents();
         },
-        watch: {
-            '$route': 'fetchEvents'
-        },
         methods: {
             fetchEvents () {
-                this.loading = true;
+                this.$store.commit('loading', true);
                 axios({
                     url: '/api/events',
                     headers: {
@@ -79,7 +75,7 @@
                     this.message = 'Es ist ein Fehler aufgetreten :(';
                 }).then(() => {
                     EventBus.$emit('scrollTo', '#myep-main');
-                    this.loading = false;
+                    this.$store.commit('loading', false);
                 });
             },
             formatBookingDate (date) {
@@ -92,6 +88,9 @@
         computed: {
             loaderUrl () {
                 return this.$store.state.config.loaderUrl;
+            },
+            loading () {
+                return this.$store.getters.isLoading;
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index 2bb96aa9..652b9887 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main">
-        <h1>Login MyE&amp;P<img :src="loaderUrl" alt="" v-if="isPending"></h1>
+        <h1>Login MyE&amp;P<img :src="loaderUrl" alt="" v-if="loading"></h1>
         <div v-if="message" class="alert alert-danger">
             {{ message }}
         </div>
@@ -49,7 +49,7 @@
                 }).then(() => {
                     this.$router.push({ name: 'address' });
                 }).catch(() => {
-                    this.message = 'Der Login ist fehlgeschlagen :('
+                    this.message = 'Der Login ist fehlgeschlagen :(';
                 }).then(() => {
                     EventBus.$emit('scrollTo', '#myep-main');
                 });
@@ -59,8 +59,8 @@
             loaderUrl () {
                 return this.$store.state.config.loaderUrl;
             },
-            isPending () {
-                return this.$store.getters.isPending;
+            loading () {
+                return this.$store.getters.isLoading;
             }
         }
     }