Add toast message for email verification

Author: nicolelim02

frontend/src/App.tsx

@@ -17,6 +17,8 @@ import Matching from "./pages/Matching";
 import Layout from "./components/Layout";
 import AuthProvider from "./contexts/AuthContext";
 import ProfileContextProvider from "./contexts/ProfileContext";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
@@ -53,6 +55,7 @@ function App() {
         <Route path="signup" element={<SignUp />} />
         <Route path="login" element={<LogIn />} />
       </Routes>
+      <ToastContainer position="bottom-right" />
     </AuthProvider>
   );
 }

frontend/src/components/Layout/index.tsx

@@ -1,8 +1,6 @@
 import { Box } from "@mui/material";
 import { Outlet } from "react-router-dom";
 import Navbar from "../Navbar";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 
 const Layout: React.FC = () => {
   return (
@@ -17,7 +15,6 @@ const Layout: React.FC = () => {
     >
       <Navbar />
       <Outlet />
-      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/contexts/AuthContext.tsx

@@ -5,7 +5,7 @@ import { userClient } from "../utils/api";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import Loader from "../components/Loader";
-import { SUCCESS_LOG_OUT } from "../utils/constants";
+import { SUCCESS_LOG_OUT, SUCCESSFUL_SIGNUP } from "../utils/constants";
 
 type User = {
   id: string;
@@ -75,7 +75,10 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         email: email,
         password: password,
       })
-      .then(() => login(email, password))
+      .then(() => {
+        login(email, password);
+        toast.success(SUCCESSFUL_SIGNUP);
+      })
       .catch((err) => {
         setUser(null);
         toast.error(err.response?.data.message || err.message);
@@ -112,7 +115,9 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   }
 
   return (
-    <AuthContext.Provider value={{ signup, login, logout, user, setUser, loading }}>
+    <AuthContext.Provider
+      value={{ signup, login, logout, user, setUser, loading }}
+    >
       {children}
     </AuthContext.Provider>
   );

frontend/src/pages/Home/index.tsx

@@ -11,6 +11,7 @@ import {
 
 import classes from "./index.module.css";
 import AppMargin from "../../components/AppMargin";
+
 // import {
 //   complexityList,
 //   languageList,
@@ -52,7 +53,6 @@ const Home: React.FC = () => {
       >
         Start an interactive practice session today!
       </Typography>
-
       <Typography
         variant="subtitle1"
         textAlign={"center"}

frontend/src/pages/LogIn/index.tsx

@@ -11,8 +11,6 @@ import LogInSvg from "../../assets/login.svg?react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import { emailValidator } from "../../utils/validators";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import { useForm } from "react-hook-form";
 import PasswordTextField from "../../components/PasswordTextField";
 import {
@@ -154,7 +152,6 @@ const LogIn: React.FC = () => {
       >
         <LogInSvg width="80%" height="80%" />
       </Box>
-      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/pages/SignUp/index.tsx

@@ -8,8 +8,6 @@ import {
   passwordValidator,
   usernameValidator,
 } from "../../utils/validators";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import { useForm } from "react-hook-form";
 import PasswordTextField from "../../components/PasswordTextField";
 import {
@@ -191,7 +189,6 @@ const SignUp: React.FC = () => {
       >
         <SignUpSvg width="80%" height="80%" />
       </Box>
-      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/utils/constants.ts

@@ -51,6 +51,8 @@ export const PASSWORD_MISMATCH_ERROR_MESSAGE = "Password does not match";
 /* Toast Messages */
 // Authentication
 export const SUCCESS_LOG_OUT = "Logged out successfully!";
+export const SUCCESSFUL_SIGNUP =
+  "User created successfully. Please verify your email address.";
 
 // Field Validation
 export const FILL_ALL_FIELDS = "Please fill in all fields";