adding latest completed form

src/components/Appbar.vue

@@ -18,7 +18,6 @@
     <v-app-bar
       flat
       app
-      class="hidden-sm-and-down"
       color="#EEEEEE"
       v-if="!this.$store.getters.fullScreen"
     >

src/views/forms/LoginForm.vue

@@ -42,41 +42,56 @@
           >
           <v-form
             v-model="valid"
+            ref="form"
             class="pt-4 d-flex flex-column align-center full-width"
           >
             <v-text-field
-              v-model="username"
+              v-for="field in formFields"
+              :key="field.name"
               outlined
               rounded
-              placeholder="Username"
+              required
+              :type="field.password ? 'password' : 'text'"
               background-color="rgb(100%, 100%, 100%, 10%)"
               color="rgb(100%, 100%, 100%, 20%)"
               class="white-placeholder full-width"
-              required
+              v-model="field.value"
+              :rules="field.rules"
+              :placeholder="field.placeholder"
+              :success="!!field.value"
+              @click:append="field.showIconData = !field.showIconData"
             >
               <template #prepend-inner>
                 <v-icon color="white" class="pr-3">
-                  mdi-account-circle
+                  {{ field.prependIcon }}
                 </v-icon>
               </template>
+              <template #append>
+                <div class="innerIcon">
+                  <v-btn
+                    v-if="field.appendIconShow"
+                    flat
+                    icon
+                    text
+                    x-small
+                    @click="
+                      () => {
+                        field.showIconData = !field.showIconData;
+                        field.password = !field.password;
+                      }
+                    "
+                  >
+                    <v-icon color="white">
+                      {{
+                        field.showIconData
+                          ? field.appendIconShow
+                          : field.appendIconHide
+                      }}
+                    </v-icon>
+                  </v-btn>
+                </div>
+              </template>
             </v-text-field>
-            <v-text-field
-              v-model="password"
-              outlined
-              rounded
-              type="password"
-              placeholder="Password"
-              background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 20%)"
-              class="white-placeholder full-width"
-              required
-            >
-              <template #prepend-inner>
-                <v-icon color="white" class="pr-3">
-                  mdi-lock
-                </v-icon>
-              </template></v-text-field
-            >
             <v-btn
               depressed
               large
@@ -101,9 +116,35 @@ export default {
   data() {
     return {
       valid: false,
-      username: "",
-      password: "",
-      load: false
+      load: false,
+      formFields: [
+        {
+          name: "Email",
+          rules: [
+            v => !!v || "You must enter an email address.",
+            v => /.+@.+/.test(v) || "Email is not valid."
+          ],
+          placeholder: "Email",
+          successmessage: "Email is valid.",
+          prependIcon: "mdi-at",
+          value: ""
+        },
+        {
+          name: "Password",
+          rules: [
+            v => !!v || "You must enter a password.",
+            v => (v && v.length >= 8) || "Minimum 8 characters."
+          ],
+          placeholder: "Password",
+          successmessage: "Password is valid.",
+          prependIcon: "mdi-lock",
+          appendIconShow: "mdi-eye",
+          appendIconHide: "mdi-eye-off",
+          showIconData: false,
+          value: "",
+          password: true
+        }
+      ]
     };
   },
   methods: {
@@ -112,8 +153,14 @@ export default {
       console.log("loading");
       if (this.$refs.form.validate()) {
         console.log("Success");
+      } else {
+        console.log("Not valid");
+        this.load = !this.load;
       }
     }
+  },
+  showPassword() {
+    //
   }
 };
 </script>
@@ -151,20 +198,4 @@ export default {
   color: white !important;
   opacity: 1;
 }
-
-.v-input__slot:hover {
-  border-color: #6fbd44;
-}
-
-.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)
-  > .v-input__control
-  > .v-input__slot:hover {
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-color: #6fbd44 !important;
-}
-
-.align-right {
-  text-align: right;
-}
 </style>