Added toast alerts to profile panel

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -22,7 +22,7 @@ import ImageIcon from "@mui/icons-material/Image";
 import ProgressUpload from "../../ProgressBars";
 import { formatBytes } from "../../../Utils/fileUtils";
 import { clearMonitorState } from "../../../Features/Monitors/monitorsSlice";
-
+import { createToast } from "../../../Utils/toastUtils";
 /**
  * ProfilePanel component displays a form for editing user profile information
  * and allows for actions like updating profile picture, credentials,
@@ -153,12 +153,8 @@ const ProfilePanel = () => {
     setIsOpen("");
   };
 
-  console.log(
-    localData.deleteProfileImage === false && localData.file === undefined
-  );
-
   // Handles form submission to update user profile
-  const handleSaveProfile = (event) => {
+  const handleSaveProfile = async (event) => {
     event.preventDefault();
     if (
       localData.firstname === user.firstname &&
@@ -166,12 +162,28 @@ const ProfilePanel = () => {
       localData.deleteProfileImage === undefined &&
       localData.file === undefined
     ) {
-      // TODO: Add toast/notification for unchanged profile data
+      createToast({
+        variant: "error",
+        body: "Unable to update profile: No changes detected.",
+        hasIcon: false,
+      });
       return;
     }
 
-    dispatch(update({ authToken, localData }));
-    // TODO: Add toast/notification for profile update success
+    const action = await dispatch(update({ authToken, localData }));
+    if (action.payload.success) {
+      createToast({
+        variant: "info",
+        body: "Your profile data was changed successfully.",
+        hasIcon: false,
+      });
+    } else {
+      createToast({
+        variant: "error",
+        body: "There was an error updating your profile data.",
+        hasIcon: false,
+      });
+    }
   };
 
   // Removes current profile image from UI

Client/src/Pages/Account/index.jsx

@@ -8,6 +8,8 @@ import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
 import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
 import { useNavigate } from "react-router";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
 
 /**
  * Account component renders a settings page with tabs for Profile, Password, and Team settings.
@@ -73,6 +75,7 @@ const Account = ({ open = "profile" }) => {
         <PasswordPanel />
         <TeamPanel />
       </TabContext>
+      <ToastContainer />
     </Box>
   );
 };

Client/src/Utils/toastUtils.jsx

@@ -3,7 +3,7 @@ import Alert from "../Components/Alert";
 
 export const createToast = ({ variant, title, body, hasIcon, config = {} }) => {
   const toastConfig = {
-    position: "top-right",
+    position: "bottom-right",
     autoClose: 3000,
     hideProgressBar: true,
     closeButton: false,

Client/src/index.css

@@ -124,6 +124,9 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.Toastify__toast-container {
+  width: auto;
+}
 .Toastify [class^="Toastify__toast"] {
   padding: 0;
   margin: 0;