added confirm modals for delete freind and undo request

package.json

@@ -15,6 +15,7 @@
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "express-session": "^1.17.2",
+    "helmet": "^4.6.0",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^6.0.9",
     "mongoose-findorcreate": "^3.0.0",

server.config.js

@@ -6,6 +6,7 @@ const session = require("express-session");
 const cookieParser  = require('cookie-parser');
 const morgan = require("morgan");
 const http = require("http");
+const helmet = require("helmet");
 
 app.set("view engine", "ejs");
 app.use(express.json());
@@ -23,6 +24,7 @@ app.use(
     },
   })
 );
+// app.use(helmet());
 
 const { passport } = require("./passport.config");
 

views/components/profileCard.ejs

@@ -27,10 +27,11 @@
       Edit profile
     </button>
     <% } else if(requestFriendship?.status === "pending"){ %>
-    <button onclick="undoFriendRequest('<%= requestedFriendship?._id || requestFriendship?._id %>')"
+    <button 
       id="<%= requestedFriendship?._id || requestFriendship?._id %>"
       type="button"
       class="btn btn-primary undo-friend-btn"
+      data-bs-toggle="modal" data-bs-target="#deleteRequestModal"
     ><i class="fas fa-user-clock"></i>
       Pending
     </button>
@@ -51,17 +52,54 @@
       Add friend
     </button>
     <% } else if (user.friends.includes(profileUser._id)) {%>
-      <button onclick="deleteFriend('<%=  requestedFriendship?._id || requestFriendship?._id %>')"
+      <button
       id="<%=  requestedFriendship?._id || requestFriendship?._id %>"
       type="button"
-      class="btn btn-primary remove-friendship"
+      class="btn btn-primary"
+      data-bs-toggle="modal" data-bs-target="#deleteFriendModal"
     ><i class="fas fa-user-check"></i>
       friends
     </button>
     <% } %>
   </div>
 </div>
 
+<div class="modal" tabindex="-1" id="deleteFriendModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Delete Friend</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to delete this user from your friend list? </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button onclick="deleteFriend('<%=  requestedFriendship?._id || requestFriendship?._id %>')"  type="button" class="btn btn-danger" >Delete</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal" tabindex="-1" id="deleteRequestModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"> Withdraw friend request</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to withdraw your friend request? </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button onclick="undoFriendRequest('<%= requestedFriendship?._id || requestFriendship?._id %>')"   type="button" class="btn btn-danger" >Withdraw</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
   // const addFriendButton = document.querySelector(".add-friend-btn");
   // addFriendButton && addFriendButton.addEventListener("click", async (e) => {