From 89b5489e56e0cec799638df8d843e58355a86eff Mon Sep 17 00:00:00 2001
From: "Fredrick W. Warren" <fred.warren@gmail.com>
Date: Fri, 12 Feb 2021 15:45:56 -0800
Subject: [PATCH] 16.09 Login  Register - Customise the Banner

---
 src/components/Auth/LoginRegister.vue | 12 ++++++++----
 src/pages/PageAuth.vue                |  2 --
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Auth/LoginRegister.vue b/src/components/Auth/LoginRegister.vue
index 03b04a4..b716b33 100644
--- a/src/components/Auth/LoginRegister.vue
+++ b/src/components/Auth/LoginRegister.vue
@@ -5,7 +5,7 @@
       <template v-slot:avatar>
         <q-icon name="account_circle" color="primary" />
       </template>
-      {{ title }}
+      {{ tab | titleCase }} to access your Todos anywhere!
       </q-banner>
     </div>
     <div class="row q-mb-md">
@@ -38,7 +38,7 @@
       <q-btn
         type="submit"
         color="primary"
-        label="Register"
+        :label="tab | titleCase"
       />
     </div>
   </q-form>
@@ -47,8 +47,7 @@
 <script>
 export default {
   props: [
-    'tab',
-    'title'
+    'tab'
   ],
   data () {
     return {
@@ -58,6 +57,11 @@ export default {
       }
     }
   },
+  filters: {
+    titleCase (value) {
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
+  },
   methods: {
     isValidEmailAddress (email) {
       const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
diff --git a/src/pages/PageAuth.vue b/src/pages/PageAuth.vue
index 8358cb7..57dbfdf 100644
--- a/src/pages/PageAuth.vue
+++ b/src/pages/PageAuth.vue
@@ -21,14 +21,12 @@
           <div class="text-h6">Login</div>
             <login-register
               :tab="tab"
-              title="Please enter your email and passoword"
           />
         </q-tab-panel>
 
         <q-tab-panel name="register">
           <login-register
           :tab="tab"
-          title="Register to access your Todos anywhere"
           />
         </q-tab-panel>
       </q-tab-panels>