diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index ab44b34b3..2fdbba2e6 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/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
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 2bb4dc018..ec010f006 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/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" }) => {
+
);
};
diff --git a/Client/src/Utils/toastUtils.jsx b/Client/src/Utils/toastUtils.jsx
index 01beaeaea..7fb29ff6d 100644
--- a/Client/src/Utils/toastUtils.jsx
+++ b/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,
diff --git a/Client/src/index.css b/Client/src/index.css
index 1ba3b2239..086692678 100644
--- a/Client/src/index.css
+++ b/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;