From 2ef22fd197cc30f65eda5b08f8f93949089639e5 Mon Sep 17 00:00:00 2001
From: Sebastian Frank <frank@basiskonfiguration.de>
Date: Thu, 24 Aug 2017 22:12:56 +0200
Subject: [PATCH] validate input fields

---
 src/components/forms/login.vue | 35 ++++++++++----
 src/components/my-form.vue     | 86 ++++++++++++++++++++++++++++++++++
 src/components/my-input.vue    | 34 ++++++++++++++
 3 files changed, 146 insertions(+), 9 deletions(-)
 create mode 100644 src/components/my-form.vue
 create mode 100644 src/components/my-input.vue

diff --git a/src/components/forms/login.vue b/src/components/forms/login.vue
index df3803a..c615835 100644
--- a/src/components/forms/login.vue
+++ b/src/components/forms/login.vue
@@ -1,28 +1,45 @@
 <template>
     <div class="LoginForm">
         <h2>Login</h2>
-        <form @submit.prevent="login">
-            <label>Username:</label><input type="text" v-model="username"><br>
-            <label>Password:</label><input type="password" v-model="password"><br>
-            <input type="submit" value="login">
-        </form>
+        <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
     </div>
 </template>
 
 <script>
-import Axios from 'axios';
+import MyForm from '../my-form.vue';
 
 export default {
   name: 'LoginForm',
+  components: {
+      MyForm
+  },
   data() {
       return {
           username: '',
-          password: ''
+          password: '',
+          elements: {
+              username: {
+                  label: 'Benutzername',
+                  type: 'text',
+                  required: true
+              },
+              password: {
+                  label: 'Passwort',
+                  type: 'password',
+                  required: true
+              }
+          },
+          buttons: [
+              {
+                  label: 'login',
+                  type: 'submit'
+              }
+          ]
       }
   },
   methods: {
-      login() {
-          this.$store.dispatch("login", this.$data)
+      login(formData) {
+          this.$store.dispatch("login", formData)
             .then(user => {
                 console.log("---- user login --------");
                 console.log(user);
diff --git a/src/components/my-form.vue b/src/components/my-form.vue
new file mode 100644
index 0000000..3c5855b
--- /dev/null
+++ b/src/components/my-form.vue
@@ -0,0 +1,86 @@
+<template>
+    <form @submit.prevent="submit()">
+        <div v-for="(e, i) in elements" :key="i">
+            <my-input :label="e.label" :type="e.type" v-model="formData[i]" @validate="validateData(i)"></my-input>
+            <span class="error" v-if="formErrors[i]">required</span>
+        </div>
+        <div>
+            <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
+        </div>
+    </form>
+</template>
+
+<script>
+import MyInput from './my-input.vue';
+
+export default {
+    name: "MyForm",
+    components: {
+        MyInput
+    },
+    props: {
+        elements: {
+            type: Object,
+            default: () => {
+                return [];
+            }
+        },
+        buttons: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        },
+        submitHandler: {
+            type: Function,
+            default: () => {
+
+            }
+        }
+    },
+    data() {
+        return {
+            formData: {},
+            formErrors: {}
+        }
+    },
+    methods: {
+        validateData(name) {
+            if (this.elements[name].required) {
+                if (!this.formData[name]) {
+                    this.$set(this.formErrors, name, {
+                        error: 'required field'
+                    });
+
+                    return false;
+                } else {
+                    this.$delete(this.formErrors, name);
+                }
+            }
+            return true;
+        },
+        buttonClick(type) {
+            switch(type) {
+                case 'submit':
+                    this.submit();
+                    break;
+            }
+        },
+        submit() {
+            let valid = true;
+            Object.keys(this.elements).forEach(key => {
+                valid = (this.validateData(key) && valid);
+            });
+            if (valid) {
+                this.submitHandler(this.formData);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .error {
+        color: red;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/my-input.vue b/src/components/my-input.vue
new file mode 100644
index 0000000..8710ae4
--- /dev/null
+++ b/src/components/my-input.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="My-Input">
+        <label>{{ label }}</label>
+        <input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()">
+        <input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()">
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MyInput",
+    props: [
+        'label',
+        'type',
+        'name',
+        'value'
+    ],
+    data() {
+        return {
+            currentValue: this.value
+        }
+    },
+    methods: {
+        validate() {
+            this.$emit('validate', this.currentValue);
+        }
+    },
+    watch: {
+        currentValue(val) {
+            this.$emit('input', val);
+        }
+    }
+}
+</script>