adding latest

src/views/forms/LoginForm.vue

@@ -1,56 +1,65 @@
 <template>
   <v-container fill-height fluid>
-    <!-- <v-form v-model="valid"> -->
     <v-row>
       <v-spacer></v-spacer>
-      <v-col cols="5" align-self="stretch" class="">
-        <v-card
-          color="rgb(0, 0, 0, 0)"
-          flat
-          class="d-flex align-end flex-column"
-          height="150px"
-        >
-          <h1 class="whiteText display-2 font-weight-bold">
-            Savvy Firebase Tutorial
-          </h1>
-          <p class="whiteText mb-0">Log in or create an account.</p>
-        </v-card>
+      <v-col
+        cols="4"
+        align-self="stretch"
+        class="d-flex flex-column justify-space-around align-end"
+      >
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
           class="d-flex align-end flex-column"
         >
-          <h1 class="whiteText title">
-            Getting acquainted with Firebase
-          </h1>
-          <p class="whiteText font-regular text-right mb-0">
-            Additional information can go here, buttons can be added if needed.
-            Additional information can go here, buttons can be added if needed.
-          </p>
+          <div class="text-align-right">
+            <h1 class="whiteText title ">
+              Savvy Firebase Tutorial
+            </h1>
+            <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
+          </div>
+        </v-card>
+        <v-card color="rgb(0, 0, 0, 0" flat>
+          <div class="text-align-right">
+            <p class="whiteText mb-0">Don't have an account? Create one.</p>
+          </div>
         </v-card>
-        <!-- </div> -->
-        <!-- </v-card> -->
       </v-col>
-      <v-spacer></v-spacer>
-      <v-col cols="5" align-self="center" class="d-flex justify-start">
+      <v-col cols="1"></v-col>
+      <v-col
+        xs="5"
+        md="3"
+        align-self="center"
+        class="d-flex justify-start flex-column align-start"
+      >
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
-          class="d-flex align-center flex-column"
+          class="d-flex align-center flex-column full-width"
         >
           <v-icon color="white" size="3em" class="pb-4"
             >mdi-account-circle</v-icon
           >
-          <v-form v-model="valid" class="pt-4 d-flex flex-column align-center">
+          <v-form
+            v-model="valid"
+            class="pt-4 d-flex flex-column align-center full-width"
+          >
             <v-text-field
               v-model="username"
               outlined
               rounded
               placeholder="Username"
               background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 10%)"
-              class="white-placeholder"
-            ></v-text-field>
+              color="rgb(100%, 100%, 100%, 20%)"
+              class="white-placeholder full-width"
+              required
+            >
+              <template #prepend-inner>
+                <v-icon color="white" class="pr-3">
+                  mdi-account-circle
+                </v-icon>
+              </template>
+            </v-text-field>
             <v-text-field
               v-model="password"
               outlined
@@ -58,18 +67,31 @@
               type="password"
               placeholder="Password"
               background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 10%)"
-              class="white-placeholder"
-            ></v-text-field>
-            <v-btn depressed color="primary" class="lighten-2">Submit</v-btn>
+              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
+              color="primary"
+              class="lighten-3"
+              :loading="load"
+              @click="submit"
+              >Submit</v-btn
+            >
           </v-form>
           <p class="whiteText mb-0 pt-5">Forgot password?</p>
-          <p class="whiteText display-1">{{ username }}</p>
         </v-card>
       </v-col>
-      <v-spacer></v-spacer>
+      <v-col cols="0" md="3"></v-col>
     </v-row>
-    <!-- </v-form> -->
   </v-container>
 </template>
 
@@ -80,8 +102,18 @@ export default {
     return {
       valid: false,
       username: "",
-      password: ""
+      password: "",
+      load: false
     };
+  },
+  methods: {
+    async submit() {
+      this.load = !this.load;
+      console.log("loading");
+      if (this.$refs.form.validate()) {
+        console.log("Success");
+      }
+    }
   }
 };
 </script>
@@ -93,6 +125,14 @@ export default {
   color: white;
 }
 
+.full-width {
+  width: 100%;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
 .title {
   font-size: 2rem !important;
 }
@@ -115,4 +155,16 @@ export default {
 .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>