setup accounts

front/src/components/modals/AddAccountModal.vue

@@ -5,7 +5,7 @@ import API from "../../services/imapAPI";
 import Input from "../basic/Input.vue";
 import Button from "../basic/Button.vue";
 
-const modal = ref(true);
+const modal = ref(false);
 
 const email = ref("");
 const pwd = ref("");
@@ -128,7 +128,7 @@ function mailChange() {
 
 <template>
     <div>
-        <Button :onClick="(modal = true)" text="Add Account" />
+        <Button :onClick="() => (modal = true)" text="Add Account" />
         <Modal v-if="modal" title="Add new account" @close-modal="modal = false">
             <template v-slot:body>
                 <div class="field">

front/src/views/sidebar/accounts/Accounts.vue

@@ -1,3 +1,18 @@
+<script setup>
+import Account from "./Account";
+import AddAccountModal from "@/components/modals/AddAccountModal";
+import store from "@/store/store";
+import ConfirmationModal from "@/components/modals/ConfirmationModal.vue";
+import { onMounted } from "vue";
+import { computed } from "@vue/reactivity";
+
+onMounted(() => {
+    store.dispatch("fetchAccounts");
+});
+
+const accounts = computed(() => store.state.accounts);
+</script>
+
 <template>
     <div id="main">
         <div id="userMenu">
@@ -6,32 +21,11 @@
         <span class="divider"></span>
         <Account v-for="(account, index) in accounts" :key="index" :data="account" />
         <span class="divider"></span>
-
+        <ConfirmationModal />
         <AddAccountModal />
     </div>
 </template>
 
-<script>
-import { mapState } from "vuex";
-import Account from "./Account";
-import AddAccountModal from "@/components/modals/AddAccountModal";
-import store from "@/store/store";
-
-export default {
-    name: "Accounts",
-    components: {
-        Account,
-        AddAccountModal,
-    },
-    computed: {
-        ...mapState(["accounts"]),
-    },
-    created() {
-        store.dispatch("fetchAccounts");
-    },
-};
-</script>
-
 <style scoped>
 #main {
     display: flex;