form validationMessage

src/app.vue

@@ -16,6 +16,16 @@
 
 <style lang="less">
     @import "app";
+
+    .component-fade-enter-active,
+    .component-fade-leave-active {
+      transition: opacity .3s ease;
+    }
+
+    .component-fade-enter,
+    .component-fade-leave-to {
+      opacity: 0;
+    }
 </style>
 
 <script>

src/components/my-form.vue

@@ -10,6 +10,7 @@
                 v-model="formData[key]"
                 @validate="validateData(key)"
                 :invalid="formErrors[key]"
+                :validatorMessage="formErrors[key] ? formErrors[key].message : ''"
             >
             </my-input>
         </div>
@@ -58,7 +59,7 @@ export default {
             if (this.elements[name].required) {
                 if (!this.formData[name]) {
                     this.$set(this.formErrors, name, {
-                        error: 'required field'
+                        message: this.elements[name].requiredMessage
                     });
 
                     return false;

src/components/my-input.vue

@@ -4,7 +4,7 @@
             <label :for="name" v-if="label">{{ label }}</label>
             <div class="input_description" v-if="description">{{ description }}</div>
         </div>
-        
+
         <input type="text" v-if="type == 'text'"
             v-model="currentValue"
             :name="name"
@@ -21,6 +21,8 @@
             @change="() => $emit('change', currentValue)"
             :class="{invalid}"
         >
+
+        <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
     </div>
 </template>
 
@@ -42,7 +44,8 @@ export default {
         'placeholder',
         'type',
         'value',
-        'invalid'
+        'invalid',
+        'validatorMessage'
     ],
     data() {
         return {

src/components/topbar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="topbar">
         <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
-        <div class="name">{{ appName }}</div>
+        <div class="name">{{ title }}</div>
 
         <!-- User Profile -->
         <div class="user_profile" ref="user_profile">
@@ -57,8 +57,8 @@ export default {
         loginID() {
             return this.$store.state.persist.login.ID;
         },
-        appName() {
-            return "Meine App";
+        title() {
+            return this.$store.state.ui.title;
         }
     },
     methods: {

src/views/dashboard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Dashboard">
-        Dashboard
+        <h2>Dashboard</h2>
     </div>
 </template>
 

src/views/forms/login.vue

@@ -10,6 +10,10 @@
 
                 <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
 
+                <transition name="component-fade">
+                    <div class="loginerror" v-show="loginError">{{ loginError }}</div>
+                </transition>
+
                 <div style="clear:both;"></div>
             </div>
         </div>
@@ -33,19 +37,22 @@ export default {
                     placeholder: "Benutzername",
                     icon: "icon-user",
                     type: "text",
-                    required: true
+                    required: true,
+                    requiredMessage: "Der Benutzername wird benötigt!"
                 },
                 password: {
                     placeholder: "Passwort",
                     icon: "icon-key",
                     type: "password",
-                    required: true
+                    required: true,
+                    requiredMessage: "Das Passwort wird benötigt!"
                 }
             },
             buttons: [{
                 label: "login",
                 type: "submit"
-            }]
+            }],
+            loginError: ""
         }
     },
     methods: {
@@ -59,12 +66,25 @@ export default {
                 .catch(error => {
                     console.log("---- login error -------");
                     console.log(error);
+                    this.loginError = "Loginfehler: " + error;
                 });
         }
     }
 }
 </script>
 
+<style scoped>
+    .loginerror {
+        color: black;
+        font-size: 1em;
+        text-align: center;
+        background-color: #faa;
+        padding: 10px;
+        margin-top: 10px;
+        border-radius: 30px;
+    }
+</style>
+
 <style lang="less">
 @import "~mixins";
 
@@ -127,4 +147,5 @@ export default {
         }
     }
 }
-</style>
+</style>
+

src/views/forms/logout.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <h3>Logout</h3>
         Sie werden ausgeloggt....
     </div>
 </template>
@@ -11,7 +12,7 @@ export default {
         this.$store.commit('clearLogin');
         setTimeout(() => {
             this.$router.replace('/login');
-        }, 2000);
+        }, 1000);
     }
 }
 </script>

src/views/lists/domainlist.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Domainlist">
-        <h1>Domainlist</h1>
+        <h2>Domainlist</h2>
         <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="Name" :orderDesc="false" :limit="50"></scroll-table>
     </div>
 </template>

src/views/lists/userlist.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Userlist">
-        <h1>Userlist</h1>
+        <h2>Userlist</h2>
         <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
     </div>
 </template>