Add error notifications for failed sign up or log in

Author: ruiqi7

backend/user-service/controller/user-controller.ts

@@ -31,7 +31,7 @@ export async function createUser(
     if (existingUser) {
       return res
         .status(409)
-        .json({ message: "username or email already exists" });
+        .json({ message: "Username or email already exists" });
     }
 
     // TODO: validate first and last name
@@ -70,7 +70,7 @@ export async function createUser(
     } else {
       return res.status(400).json({
         message:
-          "at least one of first name, last name, username, email and password are missing",
+          "At least one of first name, last name, username, email and password are missing",
       });
     }
   } catch (err) {

frontend/src/contexts/AuthContext.tsx

@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { userClient } from "../utils/api";
 import { useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
+import { toast } from "react-toastify";
 
 type User = {
   id: string;
@@ -69,7 +70,10 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         password: password,
       })
       .then(() => login(email, password))
-      .catch(() => setUser(null));
+      .catch((err) => {
+        setUser(null);
+        toast.error(err.response.data.message);
+      });
   };
 
   const login = (email: string, password: string) => {
@@ -84,7 +88,10 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         setUser(user);
         navigate("/");
       })
-      .catch(() => setUser(null));
+      .catch((err) => {
+        setUser(null);
+        toast.error(err.response.data.message);
+      });
   };
 
   const logout = () => {

frontend/src/pages/LogIn/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import CustomTextField from "../../components/CustomTextField";
 import { emailValidator } from "../../utils/validators";
+import { ToastContainer } from "react-toastify";
 
 const LogIn: React.FC = () => {
   const navigate = useNavigate();
@@ -140,6 +141,7 @@ const LogIn: React.FC = () => {
       >
         <LogInSvg width="80%" height="80%" />
       </Box>
+      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/pages/SignUp/index.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import CustomTextField from "../../components/CustomTextField";
 import { emailValidator, nameValidator, passwordValidator, usernameValidator } from "../../utils/validators";
 import { useRef, useState } from "react";
+import { ToastContainer } from "react-toastify";
 
 const SignUp: React.FC = () => {
   const navigate = useNavigate();
@@ -168,6 +169,7 @@ const SignUp: React.FC = () => {
       >
         <SignUpSvg width="80%" height="80%" />
       </Box>
+      <ToastContainer position="bottom-right" />
     </Box>
   );
 };