Added Toast for Login and signup

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@chakra-ui/icons": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/icons":"^2.2.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@giphy/js-fetch-api": "^5.6.0",
@@ -24,6 +24,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-scripts": "^5.0.1",
+    "react-toastify": "^11.0.5",
     "uuid": "^10.0.0",
     "web-vitals": "^4.2.0",
     "yup": "^1.4.0"

src/pages/SignIn.js

@@ -7,16 +7,17 @@ import {
 import { auth } from "../firebase";
 
 import { useEffect } from "react";
-
 import { useNavigate } from "react-router-dom";
-import FormContainer from "../components/Form/FormContainer";
 
-import { Button, VStack, HStack, useColorMode } from "@chakra-ui/react";
+// 1. Import from react-toastify
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css'; // Import the CSS
 
+import FormContainer from "../components/Form/FormContainer";
+import { Button, VStack, HStack, useColorMode } from "@chakra-ui/react";
 import YupValidation, { initialValues } from "../components/Form/YupSignIn";
 import TextField from "../components/Form/TextField";
 import { Formik, Form } from "formik";
-
 import { IconContext } from "react-icons";
 import { FiLogIn } from "react-icons/fi";
 
@@ -27,11 +28,12 @@ export default function Signin() {
   useEffect(() => {
     onAuthStateChanged(auth, (user) => {
       if (user) {
+        // This will navigate the user to the main page after a successful login
         Navigate("/main");
       }
     });
     // eslint-disable-next-line
-  }, [auth]);
+  }, []); // Note: The dependency array should likely be empty here
 
   const NavToSignUp = () => {
     Navigate("/signup");
@@ -40,28 +42,34 @@ export default function Signin() {
   const SignInWithGoogle = () => {
     const provider = new GoogleAuthProvider();
     signInWithPopup(auth, provider)
-      .then((cred) => {
-        console.log("Log in successfully");
+      .then(() => {
+        // 3. Add success toast for Google Sign-In
+        toast.success("Successfully logged in!");
       })
       .catch((err) => {
-        console.log(err);
+        // 4. Add error toast for Google Sign-In
+        toast.error(err.message);
       });
   };
 
   const SignInWithEmailPassword = (values, actions) => {
     signInWithEmailAndPassword(auth, values.email, values.password)
       .then(() => {
+        // 3. Add success toast for Email/Password Sign-In
+        toast.success("Successfully logged in!");
         actions.setSubmitting(false);
-        console.log("Sign in Successfully");
       })
       .catch((err) => {
+        // 4. Add error toast for Email/Password Sign-In
+        toast.error(err.message);
         actions.setSubmitting(false);
-        console.error("Something went wrong", err);
       });
   };
 
   return (
-    <FormContainer Icon={LoginIcon} title="Sign in for an account!">
+    <FormContainer Icon={LoginIcon} title="Sign in to your account!">
+      {/* 2. Add the ToastContainer component */}
+      <ToastContainer position="top-right" autoClose={5000} hideProgressBar={false} />
       <Formik
         initialValues={initialValues}
         validationSchema={YupValidation}

src/pages/SignUp.js

@@ -1,10 +1,12 @@
 import { useNavigate } from "react-router-dom";
 import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
 
-import FormContainer from "../components/Form/FormContainer";
+// 1. Import from react-toastify
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css'; // Important: Import the CSS
 
+import FormContainer from "../components/Form/FormContainer";
 import { VStack, Button, HStack } from "@chakra-ui/react";
-
 import TextField from "../components/Form/TextField";
 import { Formik, Form } from "formik";
 import YupValidation, { initialValues } from "../components/Form/YupSignUp";
@@ -15,12 +17,35 @@ export default function SignUp() {
   const Navigate = useNavigate();
 
   const SignUp = (values, actions) => {
-    console.log(actions)
-    createUserWithEmailAndPassword(auth, values.email, values.confirmPassword)
+    createUserWithEmailAndPassword(auth, values.email, values.password)
       .then(() => {
+        // 3. Call the success toast
+        toast.success("Account created successfully!", {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+        });
         actions.setSubmitting(false);
+        // Navigate after a short delay to let the user see the toast
+        setTimeout(() => {
+          Navigate("/signin");
+        }, 2000); // 2-second delay
       })
-      .catch(() => {
+      .catch((error) => {
+        // 3. Call the error toast
+        toast.error(error.message, {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+        });
         actions.setSubmitting(false);
       });
   };
@@ -31,6 +56,8 @@ export default function SignUp() {
 
   return (
     <FormContainer title="Sign up for an account!">
+      {/* 2. Add the ToastContainer component here */}
+      <ToastContainer />
       <Formik
         initialValues={initialValues}
         validationSchema={YupValidation}
@@ -75,4 +102,4 @@ export default function SignUp() {
       </Button>
     </FormContainer>
   );
-}
+}