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

WIP Refactor general api login

Browse Source
This commit is contained in:
Björn Fromme
2019-09-27 11:46:55 +02:00
parent 6079340162
commit ef14ae5863
20 changed files with 475 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+3 -4
View File
@@ -45,7 +45,7 @@ Vue.filter('date', (value) => {
});
// Store
import store from './_store';
import store from './store';
// Initialize vue app
new Vue({
@@ -65,7 +65,7 @@ new Vue({
Watchlist,
HotelList,
BackLink,
MyEp: () => import('./myep/components/App.vue'),
MyEp: () => import('./myep/App.vue'),
FacebookPixel
},
data () {
@@ -355,8 +355,7 @@ new Vue({
}
},
created () {
this.$store.commit('initConfig');
this.$store.commit('initWatchlist');
this.$store.dispatch('init');
EventBus.$on('ajaxContentLoaded', () => {
Vue.nextTick(() => {
this.initContentsliders();
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
-249
View File
@@ -1,249 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import AddressStore from './myep/stores/address'
import CrmDataStore from './myep/stores/crmdata'
import TeamerStore from './myep/stores/teamer'
import EventsStore from './myep/stores/events'
import NewsletterStore from './myep/stores/newsletter'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
address: AddressStore,
crmdata: CrmDataStore,
teamer: TeamerStore,
events: EventsStore,
newsletter: NewsletterStore
},
state: {
config: {},
watchlist: [],
loading: false,
authToken: sessionStorage.getItem('token'),
loggedIn: !!sessionStorage.getItem('token'),
isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
memberId: JSON.parse(sessionStorage.getItem('memberId')),
memberName: sessionStorage.getItem('memberName'),
countries: [],
abilities: [],
timeFrames: [],
jobProfiles: [],
message: {
text: '',
class: ''
}
},
mutations: {
initConfig (state) {
const configElement = document.getElementById('appconfig');
state.config = JSON.parse(configElement.innerHTML);
axios.defaults.baseURL = state.config.myEpApiBaseUrl;
},
initWatchlist (state, list = null) {
if (list) {
sessionStorage.setItem('watchlist', JSON.stringify(list));
} else if (!sessionStorage.getItem('watchlist')) {
sessionStorage.setItem('watchlist', JSON.stringify({ id: null, items: [] }));
}
state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
},
watchlistToggle (state, uid) {
let list = state.watchlist.items;
let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) {
list.push(uid)
} else {
list.splice(watchlistIndex, 1)
}
state.watchlist.items = list;
sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
if (state.loggedIn) {
const client = axios.create({
headers: {
'X-Auth-Token': state.authToken
}
});
client.put('/api/watchlists/' + state.watchlist.id, state.watchlist);
}
},
loginSuccess (state, token) {
state.loggedIn = true;
state.authToken = token;
sessionStorage.setItem('token', token);
},
loginFailure (state) {
state.loggedIn = false;
},
logout (state) {
state.loggedIn = false;
state.isTeamer = false;
state.teamerId = null;
state.authToken = null;
state.watchlist = { id: null, items: [] };
sessionStorage.removeItem('token');
sessionStorage.removeItem('isTeamer');
sessionStorage.removeItem('memberId');
sessionStorage.removeItem('memberName');
sessionStorage.removeItem('watchlist');
},
alert (state, payload) {
state.message.text = payload.message;
state.message.class = payload.class;
},
isTeamer (state) {
state.isTeamer = true;
sessionStorage.setItem('isTeamer', JSON.stringify(true));
},
setMember (state, member) {
state.memberId = member.id;
state.memberName = member.name;
sessionStorage.setItem('memberId', member.id);
sessionStorage.setItem('memberName', member.name);
},
loadingBegin (state) {
state.loading = true;
state.message.text = '';
state.message.class = '';
},
loadingFinish (state) {
state.loading = false;
},
setCountries (state, countries) {
state.countries = countries;
},
setAbilities (state, abilities) {
state.abilities = abilities;
},
setTimeFrames (state, timeFrames) {
state.timeFrames = timeFrames;
},
setJobProfiles (state, jobProfiles) {
state.jobProfiles = jobProfiles;
}
},
actions: {
login({ commit }, credentials) {
commit('loadingBegin');
const formData = new FormData();
formData.append('_username', credentials.email);
formData.append('_password', credentials.password);
return axios({
url: '/api/login',
data: formData,
method: 'post',
withCredentials: true
}).then((response) => {
let memberId = parseInt(response.data.member_id);
commit('setMember', { id: memberId, name: response.data.member_name });
if (response.data.watchlist) {
commit('initWatchlist', response.data.watchlist);
}
if (response.data.is_teamer) {
commit('isTeamer');
}
commit('loginSuccess', response.data.token);
commit('loadingFinish');
}).catch((error) => {
commit('loginFailure');
commit('alert', {
message: 'Der Login ist fehlgeschlagen :(',
class: 'alert-danger'
});
commit('loadingFinish');
throw error;
});
},
logout({ commit, state }) {
commit('loadingBegin');
return axios({
url: '/api/logout',
headers: {
'x-auth-token': state.authToken
}
}).then(() => {
commit('logout');
commit('loadingFinish');
}).catch((error) => {
commit('alert', {
message: 'Der Logout ist fehlgeschlagen :(',
class: 'alert-danger'
});
commit('loadingFinish');
throw error;
});
},
resetPassword({ commit }, email) {
commit('loadingBegin');
const formData = new FormData();
formData.append('email', email);
return axios({
url: '/api/reset-password',
data: formData,
method: 'post'
}).then((response) => {
commit('loadingFinish');
return response;
}).catch((error) => {
commit('loadingFinish');
throw error;
});
},
register({ commit }, userData) {
commit('loadingBegin');
return axios({
url: '/api/addresses',
data: userData,
method: 'post'
}).then((response) => {
commit('loadingFinish');
return response;
}).catch((error) => {
commit('loadingFinish');
throw error;
});
},
loadSelectableValues ({ commit }) {
axios({
url: '/api/countries',
}).then((response) => {
commit('setCountries', response.data['hydra:member']);
});
axios({
url: '/api/teamer-abilities',
}).then((response) => {
commit('setAbilities', response.data['hydra:member']);
});
axios({
url: '/api/timeframes',
}).then((response) => {
commit('setTimeFrames', response.data['hydra:member']);
});
axios({
url: '/api/teamer-job-profiles',
}).then((response) => {
commit('setJobProfiles', response.data['hydra:member']);
});
}
},
getters: {
watchlistCount: state => {
return state.watchlist.items.length;
},
onWatchlist: (state) => (uid) => {
return state.watchlist.items.indexOf(uid) !== -1;
},
authToken: state => {
return state.authToken;
},
isTeamer: state => {
return state.isTeamer;
},
teamerId: state => {
return state.teamerId;
}
}
});
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+1 -1
View File
@@ -24,7 +24,7 @@
},
methods: {
toggleWatchlist () {
this.$store.commit('watchlistToggle', this.uid);
this.$store.dispatch('watchlistToggle', this.uid);
EventBus.$emit('watchlistToggle');
}
},
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+28 -41
View File
@@ -8,30 +8,30 @@
<label for="gender" class="control-label">
Gender:
</label>
<select id="gender" v-model="address.gender" class="form-control">
<option value="W">W</option>
<option value="M">M</option>
<option value="D">D</option>
<select id="gender" v-model="userData.gender" class="form-control">
<option value="w">W</option>
<option value="m">M</option>
<option value="d">D</option>
</select>
</div>
<div class="form-group">
<label for="title" class="control-label">
Titel:
</label>
<input id="title" type="text" v-model="address.title" class="form-control">
<input id="title" type="text" v-model="userData.title" class="form-control">
</div>
<div class="form-group" :class="{'has-error': formErrors.name }">
<div class="form-group" :class="{'has-error': formErrors.lastName }">
<label for="name" class="control-label">
Name:
</label>
<input id="name" type="text" v-model="address.name" class="form-control">
<span class="help-block">{{ formErrors.name }}</span>
<input id="name" type="text" v-model="userData.lastName" class="form-control">
<span class="help-block">{{ formErrors.lastName }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstName" class="control-label">
Vorname:
</label>
<input id="firstName" type="text" v-model="address.firstName" class="form-control">
<input id="firstName" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
<div class="form-group">
@@ -46,28 +46,28 @@
<label for="street" class="control-label">
Straße:
</label>
<input id="street" type="text" v-model="address.street" class="form-control">
<input id="street" type="text" v-model="userData.street" class="form-control">
<span class="help-block">{{ formErrors.street }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.zipCode }">
<label for="zipCode" class="control-label">
PLZ:
</label>
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
<input id="zipCode" type="text" v-model="userData.zipCode" class="form-control">
<span class="help-block">{{ formErrors.zipCode }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.city }">
<label for="city" class="control-label">
Stadt:
</label>
<input id="city" type="text" v-model="address.city" class="form-control">
<input id="city" type="text" v-model="userData.city" class="form-control">
<span class="help-block">{{ formErrors.city }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.country }">
<label for="country" class="control-label">
Land:
</label>
<select id="country" v-model="address.country" class="form-control">
<select id="country" v-model="userData.country" class="form-control">
<option v-for="country in $store.state.countries"
:value="country['code']">{{ country['name'] }}</option>
</select>
@@ -77,20 +77,20 @@
<label for="email" class="control-label">
E-Mail:
</label>
<input id="email" type="text" v-model="address.email" class="form-control">
<input id="email" type="text" v-model="userData.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
<div class="form-group">
<label for="phone" class="control-label">
Telefon:
</label>
<input id="phone" type="text" v-model="address.phonePrivate" class="form-control">
<input id="phone" type="text" v-model="userData.phonePrivate" class="form-control">
</div>
<div class="form-group">
<label for="mobile" class="control-label">
Mobil:
</label>
<input id="mobile" type="text" v-model="address.phoneMobile" class="form-control">
<input id="mobile" type="text" v-model="userData.phoneMobile" class="form-control">
</div>
</div>
<div class="col-xs-12">
@@ -107,22 +107,24 @@
<script>
import Vue from 'vue'
import $ from 'jquery'
import { mapState } from 'vuex'
import $ from 'jquery'
import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de'
import EventBus from '../../_bus'
export default {
data () {
return {
picker: null,
address: {},
formErrors: {}
}
},
created () {
this.initFormErrors();
this.fetchAddress();
this.$store.dispatch('address/load')
.then(() => {
this.picker.setDate(new Date(this.userData.dateOfBirth), true);
});
},
mounted () {
Vue.nextTick(() => {
@@ -131,15 +133,15 @@
locale: German,
inline: true,
onChange: (selectedDates) => {
this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
this.userData.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
}
});
});
})
},
methods: {
initFormErrors () {
this.formErrors = {
name: null,
lastName: null,
firstName: null,
dateOfBirth: null,
email: null,
@@ -150,19 +152,9 @@
country: null
}
},
fetchAddress () {
this.$store.dispatch('address/load')
.then((data) => {
this.address = data;
this.picker.setDate(new Date(this.address.dateOfBirth), true);
})
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
saveAddress () {
this.initFormErrors();
this.$store.dispatch('address/save', this.address)
this.$store.dispatch('address/save', this.userData)
.catch(error => {
this.$store.commit('alert', {
message: 'Bitte überprüfe deine Eingaben.',
@@ -170,18 +162,13 @@
});
const violations = error.response.data['violations'];
for (let violation of violations) {
this.formErrors[violation.propertyPath] = violation.message;
this.formErrors[violation.property_path] = violation.message;
}
})
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
},
computed: {
loading () {
return this.$store.state.loading;
}
...mapState(['loading', 'userData'])
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+39 -26
View File
@@ -16,36 +16,34 @@
<router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Newsletter</a></router-link>
<router-link :to="{ name: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Mein Profil</a></router-link>
<router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Reise-Historie</a></router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="$store.getters.isTeamer"><a>Teamer</a></router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer"><a>Teamer</a></router-link>
</ul>
<ul class="nav navbar-nav navbar-right">
<li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
</ul>
</div>
</nav>
<div class="row" v-if="$store.state.message.text">
<div class="row" v-if="alert.message">
<div class="col-xs-12">
<div class="alert alert-dismissable" :class="$store.state.message.class">
<div class="alert alert-dismissable" :class="alert.class">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ $store.state.message.text }}
{{ alert.message }}
</div>
</div>
</div>
<div class="row" v-show="loading">
<div class="col-xs-12">
<img :src="$store.state.config.loaderUrl" alt="">
</div>
<div class="loader" v-show="loading">
<img :src="config.loaderUrl" alt="">
</div>
<router-view></router-view>
</div>
</template>
<script>
import store from '../../_store'
import router from '../_router'
import EventBus from '../../_bus'
import { mapGetters, mapState } from 'vuex'
import store from '../store'
import router from '../router'
export default {
store,
@@ -55,31 +53,46 @@
this.$store.dispatch('logout')
.then(() => {
this.$router.push({ name: 'login' })
}).catch(error => {
});
}
},
computed: {
isLoggedIn () {
return this.$store.state.loggedIn;
},
loaderUrl () {
return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.state.loading;
}
...mapState(['config', 'loading', 'alert']),
...mapGetters(['isLoggedIn', 'isTeamer'])
},
created () {
this.$store.dispatch('loadSelectableValues');
EventBus.$on('forcedLogout', () => {
this.$router.push({ name: 'login' })
});
mounted () {
this.$store.dispatch('initSession')
.then(()=> {
if (this.isLoggedIn) {
this.$router.push({ name: 'address' })
}
})
}
}
</script>
<style scoped>
<style scoped lang="scss">
.nav-disabled {
opacity: 0.5;
}
#app {
position: relative;
}
.loader {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.85);
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+4 -8
View File
@@ -44,7 +44,7 @@
</template>
<script>
import EventBus from '../../_bus'
import { mapState } from 'vuex'
export default {
data () {
@@ -62,14 +62,12 @@
this.$store.dispatch('crmdata/load')
.then((data) => {
this.crmData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
}).catch(error => {
});
},
saveSelections () {
this.$store.dispatch('crmdata/save', this.crmData)
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
.catch(error => {
});
},
hasVisibleSelections (group) {
@@ -88,9 +86,7 @@
}
},
computed: {
loading () {
return this.$store.state.loading;
}
...mapState(['loading'])
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+5 -8
View File
@@ -42,9 +42,9 @@
</template>
<script>
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import EventBus from '../../_bus'
export default {
data () {
@@ -67,8 +67,7 @@
this.$store.dispatch('events/load')
.then((events) => {
this.events = events;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
}).catch(error => {
});
},
formatBookingDate (date) {
@@ -78,11 +77,11 @@
return dayjs(date).format('DD.MM.YYYY');
},
getDownloadUrl (event, type) {
return this.$store.state.config.myEpApiBaseUrl
return this.config.myEpApiBaseUrl
+ '/api/events/'
+ event.id
+ '/' + type + '?token='
+ this.$store.getters.authToken;
+ this.authToken;
},
calculateBalance (event) {
if (!event.preis || !event.zahlung) {
@@ -99,9 +98,7 @@
}
},
computed: {
loading () {
return this.$store.state.loading;
}
...mapState(['config', 'loading', 'authToken'])
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
+3 -8
View File
@@ -42,7 +42,7 @@
</template>
<script>
import EventBus from '../../_bus'
import { mapState, mapGetters } from 'vuex'
export default {
data () {
@@ -79,8 +79,6 @@
}).then(() => {
this.$router.push({ name: 'address' });
}).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
resetPassword () {
@@ -107,15 +105,12 @@
});
}
}).catch(error => {
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
},
computed: {
loading () {
return this.$store.state.loading;
},
...mapState(['loading']),
...mapGetters(['isLoggedIn']),
loginMode () {
return this.mode === 'login';
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<div class="form-wrapper form--border" id="myep-main" v-show="!loading">
<h1>Newsletter</h1>
<div class="row">
<div class="col-xs-12">
<p v-html="statusMessage"></p>
<button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
{{ userData.newsletter ? 'Abmelden' : 'Anmelden' }}
</button>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
methods: {
toggleReqistration () {
this.userData.newsletter = !this.userData.newsletter;
const data = {
id: this.userData.id,
email: this.userData.email,
registration: this.userData.newsletter
};
this.$store.dispatch('newsletter/registration', data)
.catch(error => {
});
}
},
computed: {
...mapState(['loading', 'userData']),
statusMessage () {
let message = 'Du bist aktuell';
message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
message += 'zum Newsletter angemeldet.';
return message;
}
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
+2 -6
View File
@@ -65,7 +65,7 @@
</template>
<script>
import EventBus from '../../_bus'
import { mapState} from 'vuex'
export default {
data () {
@@ -103,8 +103,6 @@
this.formErrors[violation.propertyPath] = violation.message;
}
}
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
initFormData () {
@@ -129,9 +127,7 @@
this.initFormErrors();
},
computed: {
loading () {
return this.$store.state.loading;
}
...mapState(['loading'])
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+22 -30
View File
@@ -6,10 +6,10 @@
<div class="col-xs-12 col-md-6">
<h4>Fährst du Ski oder Board?</h4>
<div class="form-group">
<div class="checkbox" v-for="ability of $store.state.abilities">
<div class="checkbox" v-for="ability of abilities">
<label>
<input type="checkbox" class="form-control" v-model="teamerData.abilities"
:value="ability['@id']" />
<input type="checkbox" class="form-control" v-model="userData.abilities"
:value="ability.id" />
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
{{ ability['title'] }}
</label>
@@ -17,10 +17,10 @@
</div>
<h4>Mögliche Jobprofile</h4>
<div class="form-group">
<div class="checkbox" v-for="jobProfile of $store.state.jobProfiles">
<div class="checkbox" v-for="jobProfile of jobProfiles">
<label>
<input type="checkbox" class="form-control" v-model="teamerData.jobProfiles"
:value="jobProfile['@id']" />
<input type="checkbox" class="form-control" v-model="userData.jobProfiles"
:value="jobProfile.id" />
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
{{ jobProfile['title'] }}
</label>
@@ -30,7 +30,7 @@
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="form-control" v-model="teamerData.wantsToLead"/>
<input type="checkbox" class="form-control" v-model="userData.wantsToLead"/>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Ich möchte eine Fahrtenleitung übernehmen.
</label>
@@ -40,7 +40,7 @@
<label for="status" class="control-label">
Status:
</label>
<select id="status" v-model="teamerData.seniority" class="form-control">
<select id="status" v-model="userData.seniority" class="form-control">
<option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
</select>
</div>
@@ -48,7 +48,7 @@
<label for="jacketsize" class="control-label">
Jackengröße:
</label>
<select id="jacketsize" v-model="teamerData.jacketSize" class="form-control">
<select id="jacketsize" v-model="userData.jacketSize" class="form-control">
<option v-for="size of this.sizes" :value="size">{{ size }}</option>
</select>
</div>
@@ -56,22 +56,22 @@
<label for="jacketsize" class="control-label">
Wünsche:
</label>
<textarea class="xxlarge form-control" cols="30" rows="3" v-model="teamerData.notes"></textarea>
<textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
</div>
</div>
<div class="col-xs-12 col-md-6">
<h4>Verfügbarkeiten</h4>
<div class="checkbox" v-for="timeFrame in $store.state.timeFrames">
<div class="checkbox" v-for="timeFrame in timeFrames">
<label>
<input type="checkbox" class="form-control" v-model="teamerData.availableTimeframes"
:value="timeFrame['@id']"/>
<input type="checkbox" class="form-control" v-model="userData.availableTimeframes"
:value="timeFrame.id"/>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
{{ timeFrame | period }}
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="form-control" v-model="teamerData.monthLong"/>
<input type="checkbox" class="form-control" v-model="userData.monthLong"/>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
</label>
@@ -92,7 +92,7 @@
</template>
<script>
import EventBus from '../../_bus'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
@@ -103,25 +103,16 @@
status: [
{ value: 'jr', label: 'Neuteamer' },
{ value: 'sr', label: 'Bestandsteamer' }
],
teamerData () {
return {}
}
]
}
},
methods: {
fetchTeamerData () {
this.$store.dispatch('teamer/load')
.then((data) => {
this.teamerData = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
this.$store.dispatch('teamer/loadSelectableValues');
},
saveTeamerData () {
this.$store.dispatch('teamer/save', this.teamerData)
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
.catch(error => {
});
}
},
@@ -129,9 +120,10 @@
this.fetchTeamerData();
},
computed: {
loading () {
return this.$store.state.loading;
}
...mapState(['userData', 'loading']),
...mapState('teamer', [
'abilities', 'jobProfiles', 'timeFrames'
])
},
filters: {
period (timeFrame) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Newsletter.vue
-61
View File
@@ -1,61 +0,0 @@
<template>
<div class="form-wrapper form--border" id="myep-main" v-show="!loading">
<h1>Newsletter</h1>
<div class="row">
<div class="col-xs-12">
<p v-html="statusMessage"></p>
<button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
{{ address.newsletter ? 'Abmelden' : 'Anmelden' }}
</button>
</div>
</div>
</div>
</template>
<script>
import EventBus from '../../_bus'
export default {
data () {
return {
address: {}
}
},
created () {
this.fetchAddress();
},
methods: {
fetchAddress () {
this.$store.dispatch('address/load')
.then((data) => {
this.address = data;
}).finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
},
toggleReqistration () {
this.address.newsletter = !this.address.newsletter;
const data = {
id: this.address.id,
email: this.address.email,
registration: this.address.newsletter
};
this.$store.dispatch('newsletter/registration', data)
.finally(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
},
computed: {
loading () {
return this.$store.state.loading;
},
statusMessage () {
let message = 'Du bist aktuell';
message += this.address.newsletter ? ' ' : ' <strong>nicht</strong> ';
message += 'zum Newsletter angemeldet.';
return message;
}
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js
-60
View File
@@ -1,60 +0,0 @@
import EventBus from '../../_bus';
import axios from 'axios';
export default {
namespaced: true,
state: {},
actions: {
load ({ commit, rootState }) {
commit('loadingBegin', null, { root: true });
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
}
});
return client.get('/api/teamers/' + rootState.memberId)
.then((response) => {
commit('loadingFinish', null, { root: true });
return response.data;
}).catch((error) => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
});
},
save ({ commit, rootState }, data) {
commit('loadingBegin', null, { root: true });
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
}
});
return client.put('/api/teamers/' + rootState.memberId, data)
.then(() => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
}, { root: true });
}).catch((error) => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
});
}
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/router/index.js
+19 -18
View File
@@ -1,30 +1,28 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './../_store';
import store from '../store';
Vue.use(VueRouter);
const guard = (to, from, next) => {
if (store.state.loading) {
next(false);
} else if (store.state.loggedIn) {
if (to.meta.requiresTeamer && !store.getters.isTeamer) {
next(false);
} else {
next();
}
} else {
} else if (store.getters.isLoggedIn === false) {
next({ name: 'login' });
} else if (to.meta.requiresTeamer && store.getters.isTeamer === false) {
next(false);
} else {
next();
}
};
import Address from './components/Address.vue'
import Events from './components/Events.vue'
import Login from './components/Login.vue'
import CrmData from './components/CrmData.vue'
import Teamer from './components/Teamer.vue'
import Newsletter from './components/Newsletter.vue'
import Registration from './components/Registration'
import Address from '../myep/Address'
import Events from '../myep/Events'
import Login from '../myep/Login'
import CrmData from '../myep/CrmData'
import Teamer from '../myep/Teamer'
import Newsletter from '../myep/Newsletter'
import Registration from '../myep/Registration'
export default new VueRouter({
routes: [
@@ -33,7 +31,7 @@ export default new VueRouter({
path: '/',
component: Login,
beforeEnter (from, to, next) {
if (!store.state.loggedIn) {
if (store.getters.isLoggedIn === false) {
next();
} else {
next({ name: 'address' });
@@ -45,7 +43,7 @@ export default new VueRouter({
path: '/register',
component: Registration,
beforeEnter (from, to, next) {
if (!store.state.loggedIn) {
if (store.getters.isLoggedIn === false) {
next();
} else {
next({ name: 'address' });
@@ -87,5 +85,8 @@ export default new VueRouter({
path: '*',
redirect: { name: 'login' }
}
]
],
scrollBehavior (to, from, savedPosition) {
return { selector: '#myep-main', offset: { x: 0, y: 160 } }
}
});
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+208
View File
@@ -0,0 +1,208 @@
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import AddressStore from './modules/address'
import CrmDataStore from './modules/crmdata'
import TeamerStore from './modules/teamer'
import EventsStore from './modules/events'
import NewsletterStore from './modules/newsletter'
Vue.use(Vuex);
const defaultUserData = {
isTeamer: false,
email: '',
firstName: '',
lastName: '',
gender: '',
dateOfBirth: null,
street: '',
zipCode: '',
city: '',
phoneMobile: '',
phonePrivate: '',
newsletter: false
};
export default new Vuex.Store({
modules: {
address: AddressStore,
crmdata: CrmDataStore,
teamer: TeamerStore,
events: EventsStore,
newsletter: NewsletterStore
},
state: {
config: {},
watchlist: [],
loading: false,
authToken: null,
userData: defaultUserData,
countries: [],
alert: {
message: '',
class: ''
}
},
mutations: {
initSession (state) {
const authToken = sessionStorage.getItem('token');
if (authToken) {
state.authToken = authToken;
}
},
initConfig (state) {
const configElement = document.getElementById('appconfig');
state.config = JSON.parse(configElement.innerHTML);
axios.defaults.baseURL = state.config.myEpApiBaseUrl;
},
initWatchlist (state) {
if (!sessionStorage.getItem('watchlist')) {
sessionStorage.setItem('watchlist', JSON.stringify([]));
}
state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
},
setWatchlist (state, list) {
state.watchlist = list;
sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
},
setUserData (state, data) {
state.userData = data;
},
login (state, token) {
state.authToken = token;
sessionStorage.setItem('token', token);
},
logout (state) {
state.authToken = null;
state.watchlist = [];
state.userData = defaultUserData;
sessionStorage.removeItem('token');
sessionStorage.removeItem('watchlist');
},
alert (state, payload) {
state.alert = payload;
},
loadingBegin (state) {
state.loading = true;
state.alert = { message: '', class: ''};
},
loadingFinish (state) {
state.loading = false;
},
setCountries (state, countries) {
state.countries = countries;
}
},
actions: {
init({ commit }) {
commit('initConfig');
commit('initWatchlist');
},
initSession({ commit, dispatch }) {
commit('initSession');
return dispatch('loadSelectableValues')
},
login({ commit, dispatch }, credentials) {
commit('loadingBegin');
return axios({
url: '/api/login_check',
method: 'post',
data: {
username: credentials.email,
password: credentials.password
}
}).then(response => {
commit('login', response.data.token);
}).catch(error => {
commit('logout');
commit('alert', {
message: 'Der Login ist fehlgeschlagen :(',
class: 'alert-danger'
});
throw error;
}).finally(() => {
commit('loadingFinish');
});
},
logout({ commit, state }) {
commit('loadingBegin');
const client = axios.create({
headers: {
'Authorization': 'Bearer ' + state.authToken,
}
});
return client({
url: '/api/logout'
}).then(() => {
commit('logout');
}).catch(error => {
commit('alert', {
message: 'Der Logout ist fehlgeschlagen :(',
class: 'alert-danger'
});
throw error;
}).finally(() => {
commit('loadingFinish');
});
},
resetPassword({ commit }, email) {
commit('loadingBegin');
return axios({
url: '/api/reset-password',
data: { email: email },
method: 'post'
}).then(response => {
return response;
}).catch(error => {
throw error;
}).finally(() => {
commit('loadingFinish');
});
},
register({ commit }, userData) {
commit('loadingBegin');
return axios({
url: '/api/register',
data: userData,
method: 'post'
}).then(response => {
return response;
}).catch(error => {
throw error;
}).finally(() => {
commit('loadingFinish');
});
},
loadSelectableValues ({ commit }) {
commit('loadingBegin');
return axios({
url: '/api/countries',
}).then(response => {
commit('setCountries', response.data);
}).finally(() => {
commit('loadingFinish');
});
},
watchlistToggle ({ commit, state }, uid) {
let list = state.watchlist;
let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) {
list.push(uid)
} else {
list.splice(watchlistIndex, 1)
}
commit('setWatchlist', list);
if (!!state.authToken) {
axios.put('/api/watchlist', list)
}
},
},
getters: {
watchlistCount: state => state.watchlist.length,
onWatchlist: (state) => (uid) => state.watchlist.indexOf(uid) !== -1,
isLoggedIn: state => !!state.authToken,
isTeamer: state => state.userData.isTeamer,
}
});
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/address.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/address.js
+15 -15
View File
@@ -1,4 +1,3 @@
import EventBus from '../../_bus';
import axios from 'axios';
export default {
@@ -10,23 +9,24 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken,
}
});
return client.get('/api/addresses')
.then((response) => {
commit('loadingFinish', null, { root: true });
return response.data['hydra:member'][0];
}).catch((error) => {
commit('loadingFinish', null, { root: true });
return client.get('/api/address')
.then(response => {
commit('setUserData', response.data, { root: true });
if (response.data.watchlist) {
commit('setWatchlist', response.data.watchlist, { root: true });
}
}).catch(() => {
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
}).finally(() => {
commit('loadingFinish', null, { root: true });
});
},
save ({ commit, rootState }, data) {
@@ -34,25 +34,25 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken,
}
});
return client.put('/api/addresses/' + data.id, data)
return client.put('/api/address', data)
.then(() => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
}, { root: true });
})
.catch((error) => {
commit('loadingFinish', null, { root: true });
.catch(error => {
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
throw error;
}).finally(() => {
commit('loadingFinish', null, { root: true });
});
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/crmdata.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/crmdata.js
+3 -6
View File
@@ -1,4 +1,3 @@
import EventBus from '../../_bus';
import axios from 'axios';
export default {
@@ -10,14 +9,14 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken
}
});
return client.get('/api/crm-selections')
.then((response) => {
commit('loadingFinish', null, { root: true });
return response.data['hydra:member'][0];
return response.data;
}).catch((error) => {
commit('loadingFinish', null, { root: true });
commit('alert', {
@@ -25,7 +24,6 @@ export default {
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
});
},
@@ -34,7 +32,7 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken
}
});
@@ -52,7 +50,6 @@ export default {
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
});
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/events.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/events.js
+2 -2
View File
@@ -10,14 +10,14 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken
}
});
return client.get('/api/events')
.then((response) => {
commit('loadingFinish', null, { root: true });
return response.data['hydra:member'];
return response.data;
}).catch((error) => {
commit('loadingFinish', null, { root: true });
commit('alert', {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/newsletter.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/newsletter.js
+4 -4
View File
@@ -10,20 +10,18 @@ export default {
const client = axios.create({
headers: {
'X-Auth-Token': rootState.authToken
'Authorization': 'Bearer ' + rootState.authToken
}
});
return client.put('/api/newsletters/' + data.id, data)
return client.put('/api/newsletter', data)
.then(() => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
}, { root: true });
})
.catch((error) => {
commit('loadingFinish', null, { root: true });
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
@@ -31,6 +29,8 @@ export default {
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
}).finally(() => {
commit('loadingFinish', null, { root: true });
});
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/modules/teamer.js
+75
View File
@@ -0,0 +1,75 @@
import EventBus from '../../_bus';
import axios from 'axios';
export default {
namespaced: true,
state: {
abilities: [],
timeFrames: [],
jobProfiles: []
},
mutations: {
setAbilities (state, abilities) {
state.abilities = abilities;
},
setTimeFrames (state, timeFrames) {
state.timeFrames = timeFrames;
},
setJobProfiles (state, jobProfiles) {
state.jobProfiles = jobProfiles;
}
},
actions: {
save ({ commit, rootState }, data) {
commit('loadingBegin', null, { root: true });
const client = axios.create({
headers: {
'Authorization': 'Bearer ' + rootState.authToken
}
});
return client.put('/api/teamer/', data)
.then(() => {
commit('alert', {
message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
}, { root: true });
}).catch(error => {
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
}, { root: true });
commit('logout', null, { root: true });
EventBus.$emit('forcedLogout');
throw error;
}).finally(() => {
commit('loadingFinish', null, { root: true });
});
},
loadSelectableValues ({ commit, rootState }) {
commit('loadingBegin', null, { root: true });
const client = axios.create({
headers: {
'Authorization': 'Bearer ' + rootState.authToken
}
});
return client.get('/api/teamer-data')
.then(response => {
commit('setAbilities', response.data.abilities);
commit('setTimeFrames', response.data.timeFrames);
commit('setJobProfiles', response.data.jobProfiles);
}).catch(error => {
}).finally(() => {
commit('loadingFinish', null, { root: true });
});
}
},
getters: {
abilities: state => state.abilities,
jobProfiles: state => state.jobProfiles,
timeFrames: state => state.timeFrames
}
}