16.09 Login Register - Customise the Banner

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,}))$/

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>