adding latest

src/views/forms/LoginForm.vue

@@ -1,41 +1,47 @@
 <template>
-  <v-container fill-height fluid>
+  <v-container fluid class="d-flex align-center" style="height: 100vh;">
     <v-row>
-      <v-spacer></v-spacer>
       <v-col
-        cols="4"
+        sm="6"
+        cols="12"
         align-self="stretch"
-        class="d-flex flex-column justify-space-around align-end"
+        class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
       >
-        <v-card
-          color="rgb(0, 0, 0, 0)"
-          flat
-          class="d-flex align-end flex-column"
-        >
-          <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 class="d-flex flex-column align-end justify-space-around">
+          <v-card
+            color="rgb(0, 0, 0, 0)"
+            flat
+            class="d-flex align-center justify-center flex-column"
+            width="100%"
+          >
+            <div
+              class="d-flex flex-column align-sm-end align-center justify-center"
+              :class="alignOnViewport"
+            >
+              <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 width="100%">
+            <div
+              class="text-align-right d-flex flex-column align-sm-end align-center justify-center"
+            >
+              <p class="whiteText mb-0">Don't have an account? Create one.</p>
+            </div>
+          </v-card>
+        </div>
       </v-col>
-      <v-col cols="1"></v-col>
       <v-col
-        xs="5"
-        md="3"
-        align-self="center"
-        class="d-flex justify-start flex-column align-start"
+        cols="12"
+        sm="6"
+        class="d-flex justify-sm-start justify-center pl-sm-10"
       >
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
-          class="d-flex align-center flex-column full-width"
+          class="d-flex align-center flex-column"
         >
           <v-icon color="white" size="3em" class="pb-4"
             >mdi-account-circle</v-icon
@@ -43,7 +49,7 @@
           <v-form
             v-model="valid"
             ref="form"
-            class="pt-4 d-flex flex-column align-center full-width"
+            class="pt-4 d-flex flex-column align-center justify-start"
           >
             <v-text-field
               v-for="field in formFields"
@@ -57,7 +63,7 @@
               class="white-placeholder full-width"
               v-model="field.value"
               :rules="field.rules"
-              :placeholder="field.placeholder"
+              :label="field.placeholder"
               :success="!!field.value"
               @click:append="field.showIconData = !field.showIconData"
             >
@@ -104,7 +110,6 @@
           <p class="whiteText mb-0 pt-5">Forgot password?</p>
         </v-card>
       </v-col>
-      <v-col cols="0" md="3"></v-col>
     </v-row>
   </v-container>
 </template>
@@ -151,15 +156,20 @@ export default {
       this.load = !this.load;
       console.log("loading");
       if (this.$refs.form.validate()) {
-        console.log("Success");
+        console.log(`Email: ${this.formFields[0].value}`);
+        console.log(`Password: ${this.formFields[1].value}`);
       } else {
         console.log("Not valid");
         this.load = !this.load;
       }
     }
   },
-  showPassword() {
-    //
+  computed: {
+    alignOnViewport() {
+      return this.$vuetify.breakpoint.xsOnly
+        ? "text-align-center"
+        : "text-align-right";
+    }
   }
 };
 </script>
@@ -171,6 +181,10 @@ export default {
   color: white;
 }
 
+.red-text {
+  color: red;
+}
+
 .full-width {
   width: 100%;
 }
@@ -179,6 +193,10 @@ export default {
   text-align: right;
 }
 
+.text-align-center {
+  text-align: center;
+}
+
 .title {
   font-size: 2rem !important;
 }