From e4c179f63d4ab3bb41fe572563fd5d8204e8e718 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 12 Jul 2024 14:00:16 -0400 Subject: [PATCH] Added toast alerts to login/register pages --- Client/src/App.jsx | 3 +++ Client/src/Pages/Account/index.jsx | 3 --- Client/src/Pages/Login/index.jsx | 27 +++++++++++++++++++-------- Client/src/Pages/Register/index.jsx | 27 +++++++++++++++++++-------- 4 files changed, 41 insertions(+), 19 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index abd2d37b7..f1c24049a 100644 --- a/Client/src/App.jsx +++ b/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={} /> + ); } diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index ec010f006..2bb4dc018 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/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" }) => { - ); }; diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx index a9fcde0d5..cd96ea9bd 100644 --- a/Client/src/Pages/Login/index.jsx +++ b/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, + }); } } }; diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx index 617e04edd..098c00bf0 100644 --- a/Client/src/Pages/Register/index.jsx +++ b/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, + }); } } };