fetching mailboxes from api

front/src/views/modals/AddMailboxModal.vue

@@ -3,7 +3,7 @@ import { ref, computed, watchEffect } from 'vue'
 import Modal from './Modal'
 import API from '../../services/imapAPI';
 
-const modal = ref(true);
+const modal = ref(false);
 
 const email = ref("");
 const pwd = ref("");
@@ -64,10 +64,20 @@ function checkError() {
   }
 }
 
-function addMailboxRequest(event) {
-  console.log(event.target.disabled = true)
+function addMailboxRequest() {
   checkError();
-  API.getQuote().then((res) => {
+
+  const data = {
+    email: email.value,
+    pwd: pwd.value,
+    xoauth: xoauth.value,
+    xoauth2: xoauth2.value,
+    host: host.value,
+    port: port.value,
+    tls: true
+  };
+
+  API.registerMailbox(data).then((res) => {
     console.log(res.status);
   }).catch((err) => {
     console.log(err.request.status)

front/src/views/sidebar/mailboxes/Mailbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container" @click="setActiveMailbox(data.id)" :class="activeMailbox == data.id && 'active'">
-        {{ data.mail }}
+        {{ data.email }}
     </div>
 </template>
 

front/src/views/sidebar/mailboxes/Mailboxes.vue

@@ -4,7 +4,7 @@
         <!-- deconnect -->
       </div>
       <span class="divider"></span>
-      <Mailbox :data="{'id': -1, 'mail': 'all'}"/>
+      <Mailbox :data="{'id': 0, 'email': 'all'}"/>
       <Mailbox v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
       <span class="divider"></span>
 
@@ -17,6 +17,7 @@
 import { mapState } from 'vuex'
 import Mailbox from './Mailbox'
 import AddMailboxModal from '../../modals/AddMailboxModal'
+import roomsStore from '@/store/rooms'
 
 export default {
   name: 'Mailboxes',
@@ -28,6 +29,12 @@ export default {
     ...mapState(['mailboxes'])
   },
 }
+
+if (roomsStore.state.mailboxes.length == 0) {
+  console.log("call api get mailboxes");
+  roomsStore.dispatch('addMailboxes');
+}
+
 </script>
 
 <style scoped>

front/src/views/sidebar/users/Users.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
+      <User v-for="(room, index) in rooms()" :key="index" :sender="room.users" :object="room.object" />
     </div>
 </template>
 
@@ -17,7 +17,7 @@ export default {
     User
   },
   computed: {
-    ...mapGetters(['folderRooms'])
+    ...mapGetters(['rooms'])
   }
 }
 </script>