From 6b2c6bed99ceb590ef83b592e43f34e13689d438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 11 Jul 2019 15:36:21 +0200
Subject: [PATCH] Implement user self registration for myep

---
 .../Resources/Private/Assets/js/_store.js     |  14 ++
 .../Private/Assets/js/myep/_router.js         |  13 ++
 .../Assets/js/myep/components/Login.vue       |   1 +
 .../js/myep/components/Registration.vue       | 124 ++++++++++++++++++
 4 files changed, 152 insertions(+)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
index 81783a82..e04e000a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
@@ -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',
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
index e59aa952..5db0b8ff 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
@@ -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',
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index d53bf168..9c847514 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
new file mode 100644
index 00000000..0dd96594
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Registration.vue
@@ -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>