16.05 Register - Add EmailPassword Fields & Button

src/components/Auth/Register.vue

@@ -1,15 +1,52 @@
 <template>
-    <q-banner class="bg-grey-3">
+  <q-form>
+    <div class="row q-mb-md">
+      <q-banner class="bg-grey-3 col">
       <template v-slot:avatar>
         <q-icon name="account_circle" color="primary" />
       </template>
       Register to access your Todos anywhere
       </q-banner>
+    </div>
+    <div class="row q-mb-md">
+      <q-input
+        v-model="formData.email"
+        outlined
+        class="col"
+        label="Email"
+        stack-label
+      />
+    </div>
+    <div class="row q-mb-md">
+      <q-input
+        v-model="formData.password"
+        type="password"
+        outlined
+        class="col"
+        label="Password"
+        stack-label
+      />
+    </div>
+    <div class="row q-mb-md">
+      <q-space />
+      <q-btn
+        color="primary"
+        label="Register"
+      />
+    </div>
+  </q-form>
 </template>
 
 <script>
 export default {
-
+  data () {
+    return {
+      formData: {
+        email: '',
+        password: ''
+      }
+    }
+  }
 }
 </script>