16.08 Login - Reuse the Register Component

src/components/Auth/LoginRegister.vue

@@ -5,7 +5,7 @@
       <template v-slot:avatar>
         <q-icon name="account_circle" color="primary" />
       </template>
-      Register to access your Todos anywhere
+      {{ title }}
       </q-banner>
     </div>
     <div class="row q-mb-md">
@@ -46,6 +46,10 @@
 
 <script>
 export default {
+  props: [
+    'tab',
+    'title'
+  ],
   data () {
     return {
       formData: {
@@ -65,7 +69,11 @@ export default {
       this.$refs.email.validate()
       this.$refs.password.validate()
       if (!this.$refs.email.hasError && !this.$refs.password.hasError) {
-        console.log('Bang Bang')
+        if (this.tab === 'login') {
+          console.log('login')
+        } else {
+          console.log('register')
+        }
       }
     }
   }

src/pages/PageAuth.vue

@@ -19,11 +19,17 @@
       <q-tab-panels v-model="tab" animated>
         <q-tab-panel name="login">
           <div class="text-h6">Login</div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            <login-register
+              :tab="tab"
+              title="Please enter your email and passoword"
+          />
         </q-tab-panel>
 
         <q-tab-panel name="register">
-          <register />
+          <login-register
+          :tab="tab"
+          title="Register to access your Todos anywhere"
+          />
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
@@ -31,7 +37,7 @@
 </template>
 
 <script>
-import register from 'components/Auth/Register.vue'
+import loginRegister from 'components/Auth/LoginRegister.vue'
 
 export default {
   name: 'Auth',
@@ -41,7 +47,7 @@ export default {
     }
   },
   components: {
-    register
+    loginRegister
   }
 }
 </script>