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);
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' });
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({
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')
}
}
});
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+5 -6
View File
@@ -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;
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+15 -5
View File
@@ -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>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+7 -8
View File
@@ -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;
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+5 -6
View File
@@ -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;
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+4 -4
View File
@@ -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;
}
}
}