Merge branch 'passwordreset'

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',

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>

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">
+                <div class="btn-group">
-                    Login
+                    <button type="submit" class="button" :disabled="loading">
-                </button>
+                        {{ 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';
             }
         }
     }

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,
+  &--secondary {
-  &:focus {
+    background-color: $color-brand-primary;
-    background-color: $color-brand-secondary;
     color: white;
   }