EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable navigation during api access, use local session

Browse Source
This commit is contained in:
Björn Fromme
2018-10-16 15:16:07 +02:00
parent f41b650854
commit 8ea027f782
7 changed files with 57 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+3 -1
View File
@@ -5,7 +5,9 @@ import store from './_store';
Vue.use(VueRouter); Vue.use(VueRouter);
const guard = (to, from, next) => { const guard = (to, from, next) => {
if (store.getters.isLoggedIn) { if (store.getters.isLoading) {
next(false);
} else if (store.getters.isLoggedIn) {
next(); next();
} else { } else {
next({ name: 'login' }); next({ name: 'login' });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+18 -19
View File
@@ -7,36 +7,33 @@ Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
config: {}, config: {},
pending: false, loading: false,
isLoggedIn: !!localStorage.getItem('token'), isLoggedIn: !!sessionStorage.getItem('token'),
countries: [] countries: []
}, },
mutations: { mutations: {
pending (state) {
state.pending = true;
},
loginSuccess (state) { loginSuccess (state) {
state.isLoggedIn = true; state.isLoggedIn = true;
state.pending = false;
}, },
loginFailure (state) { loginFailure (state) {
state.isLoggedIn = false; state.isLoggedIn = false;
state.pending = false;
}, },
logout (state) { logout (state) {
state.isLoggedIn = false; state.isLoggedIn = false;
state.pending = false; },
loading (state, loading) {
state.loading = loading;
}, },
setCountries (state, countries) { setCountries (state, countries) {
state.countries = countries; state.countries = countries;
}, },
initConfig (state, config) { setConfig (state, config) {
state.config = config; state.config = config;
} }
}, },
actions: { actions: {
login({ commit }, credentials) { login({ commit }, credentials) {
commit('pending'); commit('loading', true);
const formData = new FormData(); const formData = new FormData();
formData.append('_username', credentials.email); formData.append('_username', credentials.email);
formData.append('_password', credentials.password); formData.append('_password', credentials.password);
@@ -45,20 +42,23 @@ export default new Vuex.Store({
data: formData, data: formData,
method: 'post' method: 'post'
}).then((response) => { }).then((response) => {
localStorage.setItem('token', response.data.token); sessionStorage.setItem('token', response.data.token);
commit('loginSuccess'); commit('loginSuccess');
return response.data.address_id;
}).catch((error) => { }).catch((error) => {
commit('loginFailure'); commit('loginFailure');
throw error; throw error;
}).then(() => {
commit('loading', false);
}); });
}, },
logout({ commit }) { logout({ commit }) {
commit('pending');
return axios({ return axios({
url: '/api/logout' url: '/api/logout',
headers: {
'x-auth-token': sessionStorage.getItem('token')
}
}).then(() => { }).then(() => {
localStorage.removeItem('token'); sessionStorage.removeItem('token');
commit('logout'); commit('logout');
}); });
}, },
@@ -67,19 +67,18 @@ export default new Vuex.Store({
url: '/api/countries', url: '/api/countries',
}).then((response) => { }).then((response) => {
commit('setCountries', response.data); commit('setCountries', response.data);
return response.data;
}) })
} }
}, },
getters: { getters: {
isPending: state => { isLoading: state => {
return state.pending; return state.loading;
}, },
isLoggedIn: state => { isLoggedIn: state => {
return state.isLoggedIn; return state.isLoggedIn;
}, },
authToken () { authToken () {
return localStorage.getItem('token') return sessionStorage.getItem('token')
} }
} }
}); });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+5 -6
View File
@@ -94,7 +94,6 @@
export default { export default {
data () { data () {
return { return {
loading: false,
picker: null, picker: null,
message: '', message: '',
messageClass: '', messageClass: '',
@@ -115,12 +114,9 @@
}); });
}); });
}, },
watch: {
'$route': 'fetchAddress'
},
methods: { methods: {
fetchAddress () { fetchAddress () {
this.loading = true; this.$store.commit('loading', true);
axios({ axios({
url: '/api/addresses', url: '/api/addresses',
headers: { headers: {
@@ -135,7 +131,7 @@
this.messageClass = 'alert-danger'; this.messageClass = 'alert-danger';
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
this.loading = false; this.$store.commit('loading', false);
}); });
}, },
saveAddress () { saveAddress () {
@@ -165,6 +161,9 @@
}, },
countries () { countries () {
return this.$store.state.countries; return this.$store.state.countries;
},
loading () {
return this.$store.getters.isLoading;
} }
} }
} }
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+15 -5
View File
@@ -1,6 +1,6 @@
<template> <template>
<div id="app"> <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: '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: '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> <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>CRM</a></router-link>
@@ -22,7 +22,7 @@
import store from '../_store' import store from '../_store'
store.commit('initConfig', config); store.commit('setConfig', config);
import router from '../_router' import router from '../_router'
@@ -31,9 +31,10 @@
router, router,
methods: { methods: {
logout () { logout () {
this.$store.dispatch('logout').then(() => { this.$store.dispatch('logout')
this.$router.push({ name: 'login' }) .then(() => {
}); this.$router.push({ name: 'login' })
});
} }
}, },
computed: { computed: {
@@ -42,6 +43,9 @@
}, },
loaderUrl () { loaderUrl () {
return this.$store.state.config.loaderUrl; return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.getters.isLoading;
} }
}, },
created () { created () {
@@ -49,3 +53,9 @@
} }
} }
</script> </script>
<style scoped>
.nav-disabled {
opacity: 0.5;
}
</style>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+7 -8
View File
@@ -43,7 +43,6 @@
export default { export default {
data () { data () {
return { return {
loading: false,
loaded: false, loaded: false,
message: '', message: '',
messageClass: '', messageClass: '',
@@ -53,12 +52,9 @@
created () { created () {
this.fetchSelections(); this.fetchSelections();
}, },
watch: {
'$route': 'fetchSelections'
},
methods: { methods: {
fetchSelections () { fetchSelections () {
this.loading = true; this.$store.commit('loading', true);
axios({ axios({
url: '/api/crm-selections', url: '/api/crm-selections',
headers: { headers: {
@@ -71,12 +67,12 @@
this.message = 'Es ist ein Fehler aufgetreten :('; this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger'; this.messageClass = 'alert-danger';
}).then(() => { }).then(() => {
this.loading = false;
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
this.$store.commit('loading', false);
}); });
}, },
saveSelections () { saveSelections () {
this.loading = true; this.$store.commit('loading', true);
axios({ axios({
url: '/api/crm-selections/' + this.crmData.id, url: '/api/crm-selections/' + this.crmData.id,
headers: { headers: {
@@ -91,14 +87,17 @@
this.message = 'Es ist ein Fehler aufgetreten :('; this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger'; this.messageClass = 'alert-danger';
}).then(() => { }).then(() => {
this.loading = false;
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
this.$store.commit('loading', false);
}); });
} }
}, },
computed: { computed: {
loaderUrl () { loaderUrl () {
return this.$store.state.config.loaderUrl; return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.getters.isLoading;
} }
} }
} }
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+5 -6
View File
@@ -54,7 +54,6 @@
'O': 'Option', 'O': 'Option',
'U': 'Umbuchung', 'U': 'Umbuchung',
}, },
loading: false,
message: '', message: '',
events: [] events: []
} }
@@ -62,12 +61,9 @@
created () { created () {
this.fetchEvents(); this.fetchEvents();
}, },
watch: {
'$route': 'fetchEvents'
},
methods: { methods: {
fetchEvents () { fetchEvents () {
this.loading = true; this.$store.commit('loading', true);
axios({ axios({
url: '/api/events', url: '/api/events',
headers: { headers: {
@@ -79,7 +75,7 @@
this.message = 'Es ist ein Fehler aufgetreten :('; this.message = 'Es ist ein Fehler aufgetreten :(';
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
this.loading = false; this.$store.commit('loading', false);
}); });
}, },
formatBookingDate (date) { formatBookingDate (date) {
@@ -92,6 +88,9 @@
computed: { computed: {
loaderUrl () { loaderUrl () {
return this.$store.state.config.loaderUrl; return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.getters.isLoading;
} }
} }
} }
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main"> <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"> <div v-if="message" class="alert alert-danger">
{{ message }} {{ message }}
</div> </div>
@@ -49,7 +49,7 @@
}).then(() => { }).then(() => {
this.$router.push({ name: 'address' }); this.$router.push({ name: 'address' });
}).catch(() => { }).catch(() => {
this.message = 'Der Login ist fehlgeschlagen :(' this.message = 'Der Login ist fehlgeschlagen :(';
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
@@ -59,8 +59,8 @@
loaderUrl () { loaderUrl () {
return this.$store.state.config.loaderUrl; return this.$store.state.config.loaderUrl;
}, },
isPending () { loading () {
return this.$store.getters.isPending; return this.$store.getters.isLoading;
} }
} }
} }