Added Separate modals for alerts and confirmations

frontend/package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-email-validator": "^1.0.2",
     "react-icons": "^4.10.1",
+    "react-modal": "^3.16.1",
     "react-motion-animate": "^1.0.6",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",

frontend/src/components/SettingsComponents/Profile.js

@@ -3,10 +3,15 @@ import { Avatar } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { setUser } from "../../services/Actions/User/actions";
 import toast from "react-toastify";
+import Alert from "../../helper/Alert.js";
 
 export default function Profile() {
   const dispatch = useDispatch();
   const dataredux = useSelector((state) => state.user.userInfo);
+  const [modalIsOpen, setIsOpen] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isConfirm, setIsConfirm] = useState(false);
 
   const data = JSON.parse(localStorage.getItem("info"));
   const [Pic, setPic] = useState(data.pic);
@@ -25,15 +30,12 @@ export default function Profile() {
   const handleUpload = () => {
     if (selectedFile) {
       // Ask for confirmation before uploading
-      const isConfirmed = window.confirm(
-        "Are you sure you want to upload this image?"
-      );
-
-      if (!isConfirmed) return;
+      setShowConfirm(true);
+      if (!isConfirm) return;
 
       const formData = new FormData();
       formData.append("photo", selectedFile);
-
+      setIsConfirm(false);
       const cookie = localStorage.getItem("jwt");
       fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/uploadPhoto`, {
         method: "POST",
@@ -45,15 +47,16 @@ export default function Profile() {
         .then((response) => response.json())
         .then((data) => {
           // Alert if image uploaded successfully
-          alert("Image uploaded successfully!");
+          setShowConfirm(false);
+          setIsOpen(true);
           dispatch(setUser(data.data.user));
         })
         .catch((error) => {
           // Handle any errors that occur during the upload.
           console.error("Error uploading image:", error);
         });
     } else {
-      alert("Please select an image to upload.");
+      setShowModal(true);
     }
   };
 
@@ -89,6 +92,25 @@ export default function Profile() {
           Upload Picture
         </div>
       </div>
+      <Alert
+        text={"Image uploaded successfully!"}
+        status={"success"}
+        onClose={() => setIsOpen(false)}
+        isVisible={modalIsOpen}
+      />
+      <Alert
+        text={"Please select an image to upload."}
+        status="failure"
+        onClose={() => setShowModal(false)}
+        isVisible={showModal}
+      />
+      <Alert
+        text={"Are you sure you want to upload this image?"}
+        status="confirm"
+        onClose={() => {setShowConfirm(false); setIsConfirm(false)}}
+        isVisible={showConfirm}
+        onConfirm={()=> {setIsConfirm(true); setShowConfirm(false); handleUpload()}}
+      />
     </div>
   );
 }

frontend/src/helper/Alert.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Modal from "react-modal";
+import { FaCheckCircle,FaExclamationCircle } from "react-icons/fa";
+import { IoIosCloseCircle } from "react-icons/io";
+
+const customStyles = {
+  content: {
+    top: "50%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+    width: "30vw",
+    justifyContent: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+    backgroundColor: "#0147FF",
+  },
+};
+
+const Alert = ({ text, status, onClose, isVisible,onConfirm }) => {
+  return (
+    <div>
+      <Modal isOpen={isVisible} onRequestClose={onClose} style={customStyles}>
+        {status === "success" &&
+          <FaCheckCircle className="text-white lg:text-6xl mx-auto md:text-4xl sm:text-2xl" />}
+        {status==="failure" &&  <IoIosCloseCircle className="text-white lg:text-6xl mx-auto md:text-4xl sm:text-2xl" />
+        }
+        {status==="confirm" &&  <FaExclamationCircle className="text-white lg:text-6xl mx-auto md:text-4xl sm:text-2xl" />
+        }
+        <div className="mx-auto font-semibold text-lg text-white">{text}</div>
+        {(status === "success" || status ==="failure") && <button
+          onClick={() => onClose()}
+          className="bg-white p-2 font-bold hover:bg-[#bccefd] "
+        >
+          Close
+        </button>}
+        {(status === "confirm" && 
+        <div className="flex gap-2 sm:flex-col lg:flex-row">
+        <button
+          onClick={() => onConfirm()}
+          className="bg-white p-2 font-bold hover:bg-[#bccefd] lg:w-24 sm:w-full"
+        >Ok</button>
+        <button
+          onClick={() => onClose()}
+          className="bg-white p-2 font-bold hover:bg-[#bccefd] lg:w-24 sm:w-full"
+        >Cancel</button>
+        </div>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default Alert;