add signout modal, update signout button logic, update delete button logic

frontend/src/components/MainPage.vue

@@ -38,6 +38,11 @@ export default {
     }
   },
   methods: {
+    setToDoIdForDeleteModal(todoId){
+      console.log(todoId)
+      this.todoIdForDeleteModal = todoId
+      console.log(this.todoIdForDeleteModal)
+    },
     async validateSession(){
       if(this.$route.name === 'main') {
         let url = "http://localhost:9876/user/validateSession"
@@ -105,7 +110,7 @@ export default {
         headers: {
           "Content-Type": "application/json"
         },
-        credentials: 'include',  // Ensure credentials are included
+        credentials: 'include',
       })
 
       if(response.status === 204) {
@@ -164,7 +169,7 @@ export default {
                 </b-button>
               </b-col>
               <b-col>
-                <b-button class="mb-4" variant="danger" @click="signout">
+                <b-button v-b-modal.signout-modal class="mb-4" variant="danger">
                   Log out
                 </b-button>
               </b-col>
@@ -180,7 +185,7 @@ export default {
                       <div class="badge-container">
                         <b-button variant="link" @click="setTodoComplete(item.todoId)" class="custom-badge-not-completed">mark as completed</b-button>
                       </div>
-                      <b-button variant="danger" @click.stop="deleteTodo(item.todoId)">Delete</b-button>
+                      <b-button v-b-modal.delete-modal variant="danger" @click.stop="setToDoIdForDeleteModal(item.todoId)">Delete</b-button>
                     </div>
                   </li>
                 </ul>
@@ -196,7 +201,7 @@ export default {
                       <div class="badge-container">
                         <div class="custom-badge-completed">completed</div>
                       </div>
-                      <b-button v-b-modal.delete-modal variant="danger" @click="sendInfoToModal(item.todoId)">Delete</b-button>
+                      <b-button v-b-modal.delete-modal variant="danger" @click="setToDoIdForDeleteModal(item.todoId)">Delete</b-button>
                     </div>
                   </li>
                 </ul>
@@ -205,7 +210,7 @@ export default {
             </b-tabs>
 
             <!-- details modal -->
-            <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
+            <b-modal v-model="showDetailsModal" title="Details" hide-header-close id="showDetailsModal">
               <h3>Title: {{ selectedItem.title }}</h3>
               <p style="overflow-wrap: break-word"> Description: <br> {{ selectedItem.description }}</p>
               <div>Status: <br>
@@ -213,11 +218,14 @@ export default {
               </div>
             </b-modal>
 
-            <b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
-              <p>{{this.todoIdForDeleteModal}}</p>
+            <!-- delete modal -->
+            <b-modal title="Delete ToDo" @ok="deleteTodo(todoIdForDeleteModal)" hide-header-close id="delete-modal">
+              <p>Are you sure you want to delete this ToDo?</p>
             </b-modal>
 
             <b-modal v-model="showAddModal" title="add title" @ok="addTodo" hide-header id="showAddModal">
+            <!-- add modal -->
+            <b-modal v-model="showAddModal" title="add title" @ok="addTodo" hide-header-close id="showAddModal">
               <b-form-group label="Title">
                 <b-form-input required v-model="todo.title" placeholder="todo title"></b-form-input>
               </b-form-group>
@@ -225,6 +233,16 @@ export default {
                 <b-form-input v-model="todo.description" placeholder="todo description"></b-form-input>
               </b-form-group>
             </b-modal>
+
+            <!-- signout modal -->
+            <b-modal
+            title="Log out"
+            @ok="signout"
+            hide-header-close
+            id="signout-modal"
+            >
+              <p>Are you sure you want to log out?</p>
+            </b-modal>
           </b-card-body>
         </b-card>
       </b-col>