Use form row component

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue

@@ -4,18 +4,12 @@
         <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="email" class="form-control">
-                    </div>
-                    <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>
+                    <form-group label="E-Mail" :error="formErrors.email">
+                        <input type="text" v-model="email" class="form-control">
+                    </form-group>
+                    <form-group label="Passwort" v-if="loginMode">
+                        <input type="password" v-model="password" class="form-control">
+                    </form-group>
                     <div class="form-group">
                         <div class="btn-group">
                             <button type="submit" class="button" :disabled="loading">
@@ -43,13 +37,16 @@
 
 <script>
     import { mapState, mapGetters, mapMutations } from 'vuex'
+    import FormGroup from "./components/FormGroup";
 
 	export default {
-	    data () {
+        components: {FormGroup},
+        data () {
 	        return {
 	            mode: 'login',
 	            email: '',
-                password: ''
+                password: '',
+                formErrors: {}
             }
         },
         methods: {
@@ -67,6 +64,7 @@
                 }
             },
             login () {
+	            this.formErrors = {};
                 if (!this.email || !this.password) {
                     this.alert({
                         message: 'Bitte E-Mail und Passwort eingeben',
@@ -83,6 +81,7 @@
                 });
             },
             resetPassword () {
+                this.formErrors = {};
 	            if (!this.email) {
                     this.alert({
                         message: 'Bitte die E-Mail Adresse angeben',
@@ -106,6 +105,16 @@
                         })
                     }
                 }).catch(error => {
+                    this.alert({
+                        message: 'Bitte überprüfe deine Eingaben.',
+                        class: 'alert-danger'
+                    });
+                    const violations = error.response.data.violations;
+                    if (typeof violations !== 'undefined') {
+                        for (let violation of violations) {
+                            this.$set(this.formErrors, violation.property_path, violation.message);
+                        }
+                    }
                 });
             }
         },