From 713edeeffa2656b07926792d7c0c24980c86b6df Mon Sep 17 00:00:00 2001
From: Marco Endrizzi <me00531@surrey.ac.uk>
Date: Thu, 1 Apr 2021 10:15:35 -0700
Subject: [PATCH] Added firebase vuex methods to components

---
 src/App.vue                      | 12 +++++++++++-
 src/components/LoginRegister.vue | 23 ++++++++++++++---------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3eac306..6491e00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,20 @@
 <template>
   <router-view />
 </template>
+
 <script>
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 
 export default defineComponent({
-  name: 'App'
+  name: 'App',
+
+  methods: {
+    ...mapActions('firebase', ['handleAuthStateChanged'])
+  },
+
+  mounted() {
+    this.handleAuthStateChanged()
+  }
 })
 </script>
diff --git a/src/components/LoginRegister.vue b/src/components/LoginRegister.vue
index 74cd287..a5301eb 100644
--- a/src/components/LoginRegister.vue
+++ b/src/components/LoginRegister.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
 q-form.q-pa-lg(@submit='submitForm')
-  q-input.q-mb-md(v-model='email', type='email', label='Email')
+  q-input.q-mb-md(v-model='formData.email', type='email', label='Email')
     template(v-slot:prepend)
       q-icon(name='email')
-  q-input.q-mb-md(v-model='username', v-if='tab == "register"', type='username', label='Username')
+  q-input.q-mb-md(v-model='formData.username', v-if='tab == "register"', type='username', label='Username')
     template(v-slot:prepend)
       q-icon(name='person')
-  q-input.q-mb-md(type='password', v-model='password', label='Password')
+  q-input.q-mb-md(type='password', v-model='formData.password', label='Password')
     template(v-slot:prepend)
       q-icon(name='lock')
   //- Register only
@@ -37,23 +37,28 @@ q-form.q-pa-lg(@submit='submitForm')
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+
 export default {
   props: ['tab'],
   data() {
     return {
-      email: '',
-      username: '',
-      password: ''
+      formData: {
+        email: '',
+        username: '',
+        password: ''
+      }
     }
   },
   methods: {
     submitForm() {
       if (this.tab == 'login') {
-        console.log('login the user')
+        this.loginUser(this.formData)
       } else {
-        console.log('register the user')
+        this.registerUser(this.formData)
       }
-    }
+    },
+    ...mapActions('firebase', ['loginUser', 'registerUser'])
   }
 }
 </script>
-- 
GitLab