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

Merge branch 'feature/myep-cookie-auth' into develop

Browse Source
This commit is contained in:
Björn Fromme
2021-11-03 17:03:12 +01:00
parent c1da7dde8b
commit c9a2b5ee08
9 changed files with 202 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+9 -9
View File
@@ -63,10 +63,10 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import axios from 'axios'
import flatpickr from 'flatpickr' import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de' import { German } from 'flatpickr/dist/l10n/de'
import FormGroup from './components/FormGroup' import FormGroup from './components/FormGroup'
import authenticatedClient from './api'
export default { export default {
components: { components: {
@@ -102,14 +102,14 @@
...mapMutations(['alert', 'beginLoading', 'endLoading']), ...mapMutations(['alert', 'beginLoading', 'endLoading']),
loadFormOptions () { loadFormOptions () {
this.beginLoading(); this.beginLoading();
return authenticatedClient({ return axios({
url: '/api/countries', url: '/api/countries'
}).then(response => { }).then(response => {
this.countries = response.data this.countries = response.data
}).catch(error => { }).catch(error => {
}).finally(() => { }).finally(() => {
this.endLoading() this.endLoading()
}); });
}, },
save () { save () {
this.formErrors = {}; this.formErrors = {};
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+5 -6
View File
@@ -59,13 +59,12 @@
...mapGetters(['isLoggedIn', 'isTeamer']) ...mapGetters(['isLoggedIn', 'isTeamer'])
}, },
mounted () { mounted () {
if (this.isLoggedIn) { this.$store.dispatch('init').then(() => {
this.$router.replace({ name: 'address' }) if (this.isLoggedIn) {
} this.$router.replace({ name: 'address' })
}
})
}, },
created () {
this.$store.dispatch('init')
}
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+57 -59
View File
@@ -171,8 +171,7 @@
import ServiceSelect from './components/ServiceSelect' import ServiceSelect from './components/ServiceSelect'
import ServicesOverview from './components/ServicesOverview' import ServicesOverview from './components/ServicesOverview'
import TransportationSelect from './components/TransportationSelect' import TransportationSelect from './components/TransportationSelect'
import axios from 'axios'
import authenticatedClient from './api'
import {mapGetters, mapMutations, mapState} from 'vuex' import {mapGetters, mapMutations, mapState} from 'vuex'
Vue.use(VueScrollTo) Vue.use(VueScrollTo)
@@ -225,7 +224,7 @@
...mapMutations(['alert', 'beginLoading', 'endLoading']), ...mapMutations(['alert', 'beginLoading', 'endLoading']),
loadFormOptions () { loadFormOptions () {
this.beginLoading(); this.beginLoading();
return authenticatedClient({ return axios({
url: '/api/countries', url: '/api/countries',
}).then(response => { }).then(response => {
this.countries = response.data this.countries = response.data
@@ -236,70 +235,65 @@
}, },
loadBookingData () { loadBookingData () {
this.beginLoading('Lade Reise- und Buchungsdaten...') this.beginLoading('Lade Reise- und Buchungsdaten...')
return authenticatedClient.get(`/api/booking/${this.bookingId}`) return axios({
.then(response => { url: `/api/booking/${this.bookingId}`
this.bookingData = response.data.bookingData; }).then(response => {
this.participantData = response.data.participantData; this.bookingData = response.data.bookingData;
this.travelData = response.data.travelData; this.participantData = response.data.participantData;
}) this.travelData = response.data.travelData;
.catch(() => { }).catch(() => {
throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.'); throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.');
}) }).finally(() => {
.finally(() => { this.endLoading()
this.endLoading() })
})
}, },
loadEventData () { loadEventData () {
this.beginLoading('Lade Vorgangsdaten...') this.beginLoading('Lade Vorgangsdaten...')
return authenticatedClient.get(`/api/event/${this.bookingData.bookingNumber}`) return axios({
.then(response => { url: `/api/event/${this.bookingData.bookingNumber}`
this.eventData = response.data; }).then(response => {
}) this.eventData = response.data;
.catch(error => { }).catch(error => {
throw new Error(error.response.data.message); throw new Error(error.response.data.message);
}) }).finally(() => {
.finally(() => { this.endLoading()
this.endLoading() })
})
}, },
loadMutableFields () { loadMutableFields () {
this.beginLoading('Lade mögliche Änderungen...') this.beginLoading('Lade mögliche Änderungen...')
return authenticatedClient.get(`/api/mutable-fields/${this.travelData.busproId}`) return axios({
.then(response => { url: `/api/mutable-fields/${this.travelData.busproId}`
this.mutableFields = response.data; }).then(response => {
}) this.mutableFields = response.data;
.catch(() => { }).catch(() => {
throw new Error('Mögliche Änderungen konnten nicht geladen werden.'); throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
}) }).finally(() => {
.finally(() => { this.endLoading()
this.endLoading() })
})
}, },
loadContingents () { loadContingents () {
this.beginLoading('Lade Kontingente...') this.beginLoading('Lade Kontingente...')
return authenticatedClient.get(`/api/contingents/${this.travelData.busproId}/${this.bookingData.partnerId}`) return axios({
.then(response => { url: `/api/contingents/${this.travelData.busproId}`
this.contingents = response.data; }).then(response => {
}) this.contingents = response.data;
.catch(() => { }).catch(() => {
throw new Error('Kontingente konnten nicht geladen werden.'); throw new Error('Kontingente konnten nicht geladen werden.');
}) }).finally(() => {
.finally(() => { this.endLoading()
this.endLoading() })
})
}, },
loadServices () { loadServices () {
this.beginLoading('Lade Leistungen...') this.beginLoading('Lade Leistungen...')
return authenticatedClient.get(`/api/services/${this.travelData.busproId}`) return axios({
.then(response => { url: `/api/services/${this.travelData.busproId}`
this.services = response.data; }).then(response => {
}) this.services = response.data;
.catch(() => { }).catch(() => {
throw new Error('Leistungen konnten nicht geladen werden.'); throw new Error('Leistungen konnten nicht geladen werden.');
}) }).finally(() => {
.finally(() => { this.endLoading()
this.endLoading() })
})
}, },
getAccommodationLabel (participant) { getAccommodationLabel (participant) {
if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) { if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) {
@@ -429,10 +423,14 @@
return; return;
} }
this.beginLoading() this.beginLoading()
authenticatedClient.put(`/api/booking/${this.bookingId}`, { axios({
participantData: this.participantData, url: `/api/booking/${this.bookingId}`,
selectedTransportations: this.selectedTransportations, method: 'put',
remarks: this.bookingData.remarks data: {
participantData: this.participantData,
selectedTransportations: this.selectedTransportations,
remarks: this.bookingData.remarks,
},
}).then(response => { }).then(response => {
this.alert({ this.alert({
message: response.data.message, message: response.data.message,
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+29 -25
View File
@@ -51,7 +51,7 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import authenticatedClient from './api' import axios from 'axios'
export default { export default {
data () { data () {
@@ -64,37 +64,41 @@
created () { created () {
this.beginLoading(); this.beginLoading();
return authenticatedClient.get('/api/crm-selections') return axios({
.then(response => { url: '/api/crm-selections'
this.crmData = response.data }).then(response => {
}).catch(error => { this.crmData = response.data
this.alert({ }).catch(error => {
message: 'Es ist ein Fehler aufgetreten :(', this.alert({
class: 'alert-danger' message: 'Es ist ein Fehler aufgetreten :(',
}) class: 'alert-danger'
}).finally(() => { })
this.endLoading() }).finally(() => {
}); this.endLoading()
});
}, },
methods: { methods: {
...mapMutations(['beginLoading', 'endLoading', 'alert']), ...mapMutations(['beginLoading', 'endLoading', 'alert']),
save () { save () {
this.beginLoading(); this.beginLoading();
return authenticatedClient.put('/api/crm-selections', this.crmData) return axios({
.then(() => { url: '/api/crm-selections',
this.alert({ method: 'put',
message: 'Die Änderungen wurden gespeichert', data: this.crmData
class: 'alert-success' }).then(() => {
}); this.alert({
}).catch(error => { message: 'Die Änderungen wurden gespeichert',
this.alert({ class: 'alert-success'
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).finally(() => {
this.endLoading();
}); });
}).catch(error => {
this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).finally(() => {
this.endLoading();
});
}, },
hasVisibleSelections (group) { hasVisibleSelections (group) {
if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) { if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+12 -11
View File
@@ -76,7 +76,7 @@
<script> <script>
import {mapState, mapMutations, mapGetters} from 'vuex' import {mapState, mapMutations, mapGetters} from 'vuex'
import authenticatedClient from './api' import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
@@ -96,17 +96,18 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
created () { created () {
this.beginLoading(); this.beginLoading();
return authenticatedClient.get('/api/events') return axios({
.then(response => { url: '/api/events'
this.events = response.data; }).then(response => {
}).catch(error => { this.events = response.data;
this.alert({ }).catch(error => {
message: 'Es ist ein Fehler aufgetreten :(', this.alert({
class: 'alert-danger' message: 'Es ist ein Fehler aufgetreten :(',
}); class: 'alert-danger'
}).finally(() => {
this.endLoading();
}); });
}).finally(() => {
this.endLoading();
});
}, },
methods: { methods: {
...mapMutations(['beginLoading', 'endLoading', 'alert']), ...mapMutations(['beginLoading', 'endLoading', 'alert']),
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+17 -15
View File
@@ -12,7 +12,7 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import authenticatedClient from './api' import axios from 'axios'
export default { export default {
methods: { methods: {
@@ -28,21 +28,23 @@
this.beginLoading(); this.beginLoading();
return authenticatedClient.put('/api/newsletter', data) return axios({
.then(() => { url: '/api/newsletter',
this.alert({ method: 'put',
message: 'Die Änderungen wurden gespeichert', data
class: 'alert-success' }).then(() => {
}); this.alert({
}) message: 'Die Änderungen wurden gespeichert',
.catch(error => { class: 'alert-success'
this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).finally(() => {
this.endLoading();
}); });
}).catch(error => {
this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).finally(() => {
this.endLoading();
});
} }
}, },
computed: { computed: {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+11 -10
View File
@@ -84,7 +84,7 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import authenticatedClient from './api' import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import FormGroup from './components/FormGroup' import FormGroup from './components/FormGroup'
@@ -140,15 +140,16 @@
created () { created () {
this.beginLoading(); this.beginLoading();
return authenticatedClient.get('/api/teamer-data') return axios({
.then(response => { url: '/api/teamer-data'
this.abilities = response.data.abilities; }).then(response => {
this.timeFrames = response.data.timeFrames; this.abilities = response.data.abilities;
this.jobProfiles = response.data.jobProfiles; this.timeFrames = response.data.timeFrames;
}).catch(error => { this.jobProfiles = response.data.jobProfiles;
}).finally(() => { }).catch(error => {
this.endLoading(); }).finally(() => {
}); this.endLoading();
});
}, },
computed: { computed: {
...mapState(['userData', 'loading']) ...mapState(['userData', 'loading'])
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
-26
View File
@@ -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
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
+62 -59
View File
@@ -1,13 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import axios from 'axios' import axios from 'axios'
import authenticatedClient from '../api'
const configElement = document.getElementById('appconfig') const configElement = document.getElementById('appconfig')
const config = JSON.parse(configElement.innerHTML) const config = JSON.parse(configElement.innerHTML)
axios.defaults.baseURL = config.myEpApiBaseUrl axios.defaults.baseURL = config.myEpApiBaseUrl
authenticatedClient.defaults.baseURL = config.myEpApiBaseUrl axios.defaults.withCredentials = true
Vue.use(Vuex) Vue.use(Vuex)
@@ -32,8 +31,7 @@ export default new Vuex.Store({
config: {}, config: {},
loading: false, loading: false,
statusMessage: '', statusMessage: '',
authToken: null, authenticated: false,
refreshToken: null,
userData: defaultUserData, userData: defaultUserData,
alert: { alert: {
message: '', message: '',
@@ -41,12 +39,6 @@ export default new Vuex.Store({
} }
}, },
mutations: { mutations: {
initSession(state) {
const authToken = sessionStorage.getItem('myep-auth-token');
if (authToken) {
state.authToken = authToken;
}
},
initConfig(state) { initConfig(state) {
state.config = config state.config = config
}, },
@@ -56,18 +48,12 @@ export default new Vuex.Store({
} }
state.userData = data state.userData = data
}, },
login(state, data) { login(state) {
state.authToken = data.token; state.authenticated = true
state.refreshToken = data.refresh_token;
sessionStorage.setItem('myep-auth-token', data.token);
sessionStorage.setItem('myep-refresh-token', data.refresh_token);
}, },
logout(state) { logout(state) {
state.userData = defaultUserData; state.userData = defaultUserData;
state.authToken = null; state.authenticated = false
state.refreshToken = null;
sessionStorage.removeItem('myep-auth-token');
sessionStorage.removeItem('myep-refresh-token');
}, },
alert(state, payload) { alert(state, payload) {
state.alert = payload; state.alert = payload;
@@ -88,18 +74,28 @@ export default new Vuex.Store({
actions: { actions: {
init({commit}) { init({commit}) {
commit('initConfig'); commit('initConfig');
commit('initSession');
},
login({commit, dispatch}, credentials) {
commit('beginLoading'); commit('beginLoading');
return axios({ 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', method: 'post',
data: { data: {
username: credentials.email, username: credentials.email,
password: credentials.password password: credentials.password
}, },
withCredentials: true
}).then(response => { }).then(response => {
commit('login', response.data); commit('login', response.data);
}).catch(error => { }).catch(error => {
@@ -116,8 +112,8 @@ export default new Vuex.Store({
logout({commit}) { logout({commit}) {
commit('beginLoading'); commit('beginLoading');
return authenticatedClient({ return axios({
url: '/api/logout' url: '/api/logout',
}).catch(error => { }).catch(error => {
}).finally(() => { }).finally(() => {
commit('logout'); commit('logout');
@@ -126,6 +122,7 @@ export default new Vuex.Store({
}, },
resetPassword({commit}, email) { resetPassword({commit}, email) {
commit('beginLoading'); commit('beginLoading');
return axios({ return axios({
url: '/api/reset-password', url: '/api/reset-password',
data: {email: email}, data: {email: email},
@@ -138,6 +135,7 @@ export default new Vuex.Store({
}, },
register({commit}, userData) { register({commit}, userData) {
commit('beginLoading'); commit('beginLoading');
return axios({ return axios({
url: '/api/register', url: '/api/register',
data: userData, data: userData,
@@ -148,51 +146,56 @@ export default new Vuex.Store({
commit('endLoading'); commit('endLoading');
}); });
}, },
loadAddress({commit, state}) { loadAddress({commit}) {
commit('beginLoading'); commit('beginLoading');
return authenticatedClient.get('/api/address') return axios({
.then(response => { url: '/api/address',
commit('setUserData', response.data); method: 'get',
if (response.data.watchlist) { }).then(response => {
commit('setWatchlist', response.data.watchlist); commit('setUserData', response.data);
} if (response.data.watchlist) {
}).catch(() => { commit('setWatchlist', response.data.watchlist);
commit('alert', { }
message: 'Es ist ein Fehler aufgetreten :(', }).catch(() => {
class: 'alert-danger' commit('alert', {
}); message: 'Es ist ein Fehler aufgetreten :(',
}).finally(() => { class: 'alert-danger'
commit('endLoading');
}); });
}).finally(() => {
commit('endLoading');
});
}, },
saveAddress({commit, state}, data) { saveAddress({commit, state}, data) {
commit('beginLoading'); commit('beginLoading');
return authenticatedClient.put('/api/address', data) return axios({
.then(() => { url: '/api/address',
commit('alert', { method: 'put',
message: 'Die Änderungen wurden gespeichert', data
class: 'alert-success' }).then(() => {
}); commit('alert', {
}) message: 'Die Änderungen wurden gespeichert',
.catch(error => { class: 'alert-success'
if (error.config.status >= 500) {
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
} else {
throw error;
}
}).finally(() => {
commit('endLoading');
}); });
})
.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: { getters: {
onWatchlist: state => uid => state.userData.watchList.indexOf(uid) !== -1, onWatchlist: state => uid => state.userData.watchList.indexOf(uid) !== -1,
isLoggedIn: state => !!state.authToken, isLoggedIn: state => !!state.authenticated,
isTeamer: state => !!state.userData.isTeamer, isTeamer: state => !!state.userData.isTeamer,
isGroupManager: state => !!state.userData.isGroupManager, isGroupManager: state => !!state.userData.isGroupManager,
} }