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

Implement user self registration for myep

Browse Source
This commit is contained in:
Björn Fromme
2019-07-12 16:59:48 +02:00
parent 863ae03310
commit 6b2c6bed99
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
+14
View File
@@ -192,6 +192,20 @@ export default new Vuex.Store({
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',
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+13
View File
@@ -24,6 +24,7 @@ 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'
export default new VueRouter({
routes: [
@@ -39,6 +40,18 @@ export default new VueRouter({
}
}
},
{
name: 'register',
path: '/register',
component: Registration,
beforeEnter (from, to, next) {
if (!store.state.loggedIn) {
next();
} else {
next({ name: 'address' });
}
}
},
{
name: 'address',
path: '/adressdaten',
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+1
View File
@@ -24,6 +24,7 @@
<button class="button button--secondary" @click.prevent="toggleMode()">
{{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }}
</button>
<router-link to="register" class="button button--secondary">Registrieren</router-link>
</div>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<div class="form-wrapper form--border" id="myep-main">
<h1>Registrierung MyE&amp;P</h1>
<form @submit.prevent="submit()">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
</div>
<div class="form-group">
<label for="firstname" class="control-label">
Vorname
</label>
<input id="firstname" type="text" v-model="userData.firstName" class="form-control">
</div>
<div class="form-group">
<label for="name" class="control-label">
Name
</label>
<input id="name" type="text" v-model="userData.name" class="form-control">
</div>
<div class="form-group">
<label for="gender" class="control-label">
Gender
</label>
<select id="gender" v-model="userData.gender" class="form-control">
<option value="M">M</option>
<option value="W">W</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group">
<div class="btn-group">
<button type="submit" class="button" :disabled="loading">
Registrieren
</button>
<router-link to="login" class="button button--secondary">
Zum Login
</router-link>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
</form>
</div>
</template>
<script>
import EventBus from '../../_bus'
export default {
data () {
return {
userData: {
email: '',
name: '',
firstName: '',
gender: 'M'
}
}
},
methods: {
submit () {
this.message = '';
this.register();
},
register () {
if (!this.userData.email) {
this.$store.commit('alert', {
message: 'Bitte die E-Mail Adresse angeben',
class: 'alert-danger'
});
return;
}
if (!this.userData.name) {
this.$store.commit('alert', {
message: 'Bitte den angeben',
class: 'alert-danger'
});
return;
}
if (!this.userData.firstName) {
this.$store.commit('alert', {
message: 'Bitte den angeben',
class: 'alert-danger'
});
return;
}
this.$store.dispatch('register',
this.userData
).then((response) => {
const result = response.data.satz;
if (result.typ === 'HINWEIS') {
this.$store.commit('alert', {
message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
class: 'alert-danger'
});
} else {
this.$store.dispatch('resetPassword', this.userData.email);
this.$store.commit('alert', {
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success'
});
}
this.userData.email = '';
this.userData.name = '';
this.userData.firstName = '';
}).then(() => {
EventBus.$emit('scrollTo', '#myep-main');
});
}
},
computed: {
loading () {
return this.$store.state.loading;
}
}
}
</script>