From 2413b73c58ab0a4d6eb6e3cff75e05931ad55174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 18 Oct 2018 10:04:32 +0200
Subject: [PATCH] Implement password reset functionality

---
 .../Private/Assets/js/myep/_store.js          | 15 ++++++
 .../Assets/js/myep/components/Address.vue     |  2 +-
 .../Assets/js/myep/components/Login.vue       | 51 ++++++++++++++++---
 .../Private/Assets/scss/remix/_buttons.scss   |  9 ++--
 4 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
index 43ce755c..a451cb19 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
@@ -65,6 +65,21 @@ export default new Vuex.Store({
                 commit('logout');
             });
         },
+        resetPassword({ commit }, email) {
+            commit('loadingBegin');
+            const formData = new FormData();
+            formData.append('email', email);
+            return axios({
+                url: '/api/reset-password',
+                data: formData,
+                method: 'post'
+            }).then(() => {
+                commit('loadingFinish');
+            }).catch((error) => {
+                commit('loadingFinish');
+                throw error;
+            });
+        },
         loadCountries ({ commit }) {
             axios({
                 url: '/api/countries',
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index 942e6e20..4d08fb53 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -75,7 +75,7 @@
                 </div>
                 <div class="col-xs-12">
                     <div class="form-group">
-                        <button type="submit" class="button button--active">
+                        <button type="submit" class="button button--active" :disabled="loading">
                             Speichern
                         </button>
                     </div>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index 4137046b..3fbe7df9 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -1,26 +1,31 @@
 <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="loading"></h1>
-        <div v-if="message" class="alert alert-danger">
+        <div v-if="message" class="alert" :class="messageClass">
             {{ message }}
         </div>
-        <form @submit.prevent="login()">
+        <form @submit.prevent="submit()">
             <div class="form-group">
                 <label for="email" class="control-label">
                     E-Mail
                 </label>
                 <input id="email" type="text" v-model="email" class="form-control">
             </div>
-            <div class="form-group">
+            <div class="form-group" v-if="loginMode">
                 <label for="password" class="control-label">
                     Passwort
                 </label>
                 <input id="password" type="password" v-model="password" class="form-control">
             </div>
             <div class="form-group">
-                <button type="submit" class="button button--active">
-                    Login
-                </button>
+                <div class="btn-group">
+                    <button type="submit" class="button" :disabled="loading">
+                        {{ loginMode ? 'Login' : 'Zurücksetzen' }}
+                    </button>
+                    <button class="button button--secondary" @click.prevent="toggleMode()">
+                        {{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }}
+                    </button>
+                </div>
             </div>
         </form>
     </div>
@@ -32,15 +37,29 @@
 	export default {
 	    data () {
 	        return {
+	            mode: 'login',
+                messageClass: '',
 	            message: '',
 	            email: '',
                 password: ''
             }
         },
         methods: {
+	        toggleMode () {
+	            this.mode = this.mode === 'login' ? 'reset' : 'login';
+            },
+	        submit () {
+	            this.message = '';
+	            if (this.mode === 'login') {
+	                this.login();
+                } else {
+	                this.resetPassword();
+                }
+            },
             login () {
                 if (!this.email || !this.password) {
                     this.message = 'Bitte E-Mail und Passwort angeben';
+                    this.messageClass = 'alert-danger';
                     return;
                 }
                 this.$store.dispatch('login', {
@@ -50,6 +69,23 @@
                     this.$router.push({ name: 'address' });
                 }).catch(() => {
                     this.message = 'Der Login ist fehlgeschlagen :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            },
+            resetPassword () {
+	            if (!this.email) {
+	                this.message = 'Bitte E-Mail Adresse angeben';
+                    this.messageClass = 'alert-danger';
+	                return;
+                }
+                this.$store.dispatch('resetPassword',
+                    this.email
+                ).then(() => {
+                    this.email = '';
+                    this.message = 'Du erhälts in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts';
+                    this.messageClass = 'alert-success';
                 }).then(() => {
                     EventBus.$emit('scrollTo', '#myep-main');
                 });
@@ -61,6 +97,9 @@
             },
             loading () {
                 return this.$store.state.loading;
+            },
+            loginMode () {
+                return this.mode === 'login';
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_buttons.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_buttons.scss
index af1efe60..8c0572ff 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_buttons.scss
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_buttons.scss
@@ -1,4 +1,6 @@
-.button {
+.button,
+button:active,
+button:focus {
   background-color: $color-button-background;
   color: $color-button-foreground;
   text-transform: uppercase;
@@ -15,9 +17,8 @@
   }
 
   &--active,
-  &:active,
-  &:focus {
-    background-color: $color-brand-secondary;
+  &--secondary {
+    background-color: $color-brand-primary;
     color: white;
   }