Added toast alerts to login/register pages

Client/src/App.jsx

@@ -20,6 +20,8 @@ import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
 import ProtectedRoute from "./Components/ProtectedRoute";
 import Details from "./Pages/Details";
 import Maintenance from "./Pages/Maintenance";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
 
 function App() {
   return (
@@ -92,6 +94,7 @@ function App() {
           element={<NewPasswordConfirmed />}
         />
       </Routes>
+      <ToastContainer />
     </>
   );
 }

Client/src/Pages/Account/index.jsx

@@ -8,8 +8,6 @@ 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.
@@ -75,7 +73,6 @@ const Account = ({ open = "profile" }) => {
         <PasswordPanel />
         <TeamPanel />
       </TabContext>
-      <ToastContainer />
     </Box>
   );
 };

Client/src/Pages/Login/index.jsx

@@ -13,6 +13,7 @@ import axiosInstance from "../../Utils/axiosConfig";
 import { loginValidation } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
+import { createToast } from "../../Utils/toastUtils";
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -74,16 +75,26 @@ const Login = () => {
       }
     } catch (error) {
       if (error.name === "ValidationError") {
-        // TODO Handle validation errors
-        console.log(error.details);
-        alert(error);
+        // validation errors
+        createToast({
+          variant: "info",
+          body: error.details[0].message,
+          hasIcon: false,
+        });
       } else if (error.response) {
-        // TODO handle dispatch errors
-        alert(error.response.msg);
+        // dispatch errors
+        createToast({
+          variant: "info",
+          body: error.response.msg,
+          hasIcon: false,
+        });
       } else {
-        // TODO handle unknown errors
-        console.log(error);
-        alert("Unknown error");
+        // unknown errors
+        createToast({
+          variant: "info",
+          body: "Unknown error.",
+          hasIcon: false,
+        });
       }
     }
   };

Client/src/Pages/Register/index.jsx

@@ -14,6 +14,7 @@ import { registerValidation } from "../../Validation/validation";
 import axiosInstance from "../../Utils/axiosConfig";
 import { useDispatch } from "react-redux";
 import { register } from "../../Features/Auth/authSlice";
+import { createToast } from "../../Utils/toastUtils";
 
 const Register = () => {
   const dispatch = useDispatch();
@@ -91,16 +92,26 @@ const Register = () => {
       }
     } catch (error) {
       if (error.name === "ValidationError") {
-        // TODO Handle validation errors
-        console.log(error);
-        alert(error);
+        // validation errors
+        createToast({
+          variant: "info",
+          body: error.details[0].message,
+          hasIcon: false,
+        });
       } else if (error.response) {
-        // TODO handle dispatch errors
-        alert(error.response.msg);
+        // dispatch errors
+        createToast({
+          variant: "info",
+          body: error.response.msg,
+          hasIcon: false,
+        });
       } else {
-        // TODO handle unknown errors
-        console.log(error);
-        alert("Unknown error");
+        // unknown errors
+        createToast({
+          variant: "info",
+          body: "Unknown error.",
+          hasIcon: false,
+        });
       }
     }
   };