Merge pull request #649 from yashi-15/alert-login

added alerts on UI when user log-in/log-out, enters wrong password/captcha or unregistered email.

package.json

@@ -28,6 +28,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "react-toastify": "^10.0.5",
     "vite": "^5.2.12"
   }
 }

src/components/Dashboard/Dashboard.css

@@ -14,7 +14,7 @@
   margin: 0px;
   background-color: white;
   font-weight: 500;
-  z-index: 10000;
+  z-index: 10;
   max-height: 60px;
   /* border-radius: 5px; */
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -471,6 +471,18 @@
   color: #050a3079;
 }
 
+.toast-message {
+  background: #12229d;
+  color: #fff;
+  font-size: 12px;
+  width: 18vw;
+  padding: 10px;
+  z-index: 100;
+}
+
+.toast-message:first-child{
+  margin-top: 90px;
+}
 
 @media (max-width: 960px) {
   .menu {

src/components/Dashboard/Dashboard.jsx

@@ -7,7 +7,8 @@ import { auth } from "../../firebase/auth";
 import Footer from "../Footer/Footer";
 import collegesData from "./colleges.json";
 import ScrollToTop from "react-scroll-to-top";
-
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import CollegeCard from "./CollegeCard";
 import FAQS from "../FAQs/FAQS";
 
@@ -19,9 +20,17 @@ const Dashboard = () => {
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
       if (user) {
+        toast.success("Logged in! 🚀",{
+          className: "toast-message",
+        })
         console.log("");
       } else if (!user) {
-        navigate("/");
+        toast.success("Logged out!",{
+          className: "toast-message",
+        })
+        setTimeout(() => {
+          navigate("/");
+        }, 1000);
       }
     });
   }, []);
@@ -37,10 +46,14 @@ const Dashboard = () => {
   const handleSignOut = () => {
     signOut(auth)
       .then(() => {
-        navigate("/");
+        setTimeout(() => {
+          navigate("/");
+        }, 1000);
       })
       .catch((err) => {
-        alert(err.message);
+        toast.error(err.message,{
+          className: "toast-message",
+        });
       });
   };
 
@@ -125,6 +138,7 @@ window.addEventListener("scroll", setFixed)
           </div>
         </nav>
         <div className="maintxt">
+          <ToastContainer/>
           <h1>
             <span className="blue">Find your </span>Dream
             <br />

src/components/Login/Login.css

@@ -289,3 +289,11 @@ form div {
 .errorMsg {
   color: red;
 }
+
+.toast-message {
+  background: #12229d;
+  color: #fff;
+  font-size: 12px;
+  width: 18vw;
+  padding: 10px;
+}

src/components/Login/Login.jsx

@@ -16,6 +16,8 @@ import "./Login.css";
 import { FaSyncAlt, FaEnvelope, FaKey, FaShieldVirus } from "react-icons/fa";
 import validate from "../../common/validation";
 import Footer from "../Footer/Footer";
+import { ToastContainer, toast } from 'react-toastify';
+// import 'react-toastify/dist/ReactToastify.css';
 
 export default function Login() {
   const [error, setError] = useState({});
@@ -52,7 +54,12 @@ export default function Login() {
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
       if (user) {
-        navigate("/dashboard");
+        toast.success("Authenticating your credentials… 🚀",{
+          className: "toast-message",
+        });
+        setTimeout(() => {
+          navigate("/dashboard");
+        }, 2000);
       }
     });
   }, []);
@@ -78,7 +85,9 @@ export default function Login() {
      e.preventDefault();
      let submitable = true;
      if(captchaVal !== captchaText){
-      alert("Wrong Captcha")
+      toast.error("Wrong Captcha",{
+        className: "toast-message",
+      })
       setCaptchaVal("");
       genrateCaptcha();
       return;
@@ -93,24 +102,46 @@ export default function Login() {
     if(submitable){
       signInWithEmailAndPassword(auth, loginInfo.email, loginInfo.password)
         .then(() => {
-          navigate("/dashboard");
+          setTimeout(() => {
+            navigate("/dashboard");
+          }, 2000);
         })
         .catch((err) => {
-          if (err == "FirebaseError: Firebase: Error (auth/wrong-password).") {
-            alert("Incorrect Password!");
+          if (err.code === "auth/wrong-password") {
+            toast.error("Incorrect Password!",{
+              className: "toast-message",
+            });
+          } else if (err.code === "auth/user-not-found") {
+            toast.error("This email is not registered",{
+              className: "toast-message",
+            });
+          } else {
+            console.error("Sign-in error", err);
+            toast.error("An error occurred. Please try again!",{
+              className: "toast-message",
+            });
           }
         });
       }else{
-        alert("Please fill all Fields with Valid Data.")
+        toast.error("Please fill all Fields with Valid Data.",{
+          className: "toast-message",
+        })
       }
   };
   // Popup Google signin
   const SignInGoogle = () => {
     signInWithPopup(auth, googleAuthProvider)
       .then(() => {
-        navigate("/dashboard");
+        toast.success("Login successful !",{
+          className: "toast-message",
+        })
+        setTimeout(() => {
+          navigate("/dashboard");
+        }, 2000);
       })
-      .catch((err) => alert(err.message));
+      .catch((err) => toast.error(err.message,{
+        className: "toast-message",
+      }));
   };
 
   return (
@@ -119,6 +150,7 @@ export default function Login() {
       <div className="parent">
         {/* Home icon */}
         {/* This is the right side of the login page   */}
+        <ToastContainer/>
         <div className="right">
           <h1 className="counsellor">Counsellor</h1>
           <div className="sign-in">Log in to your account</div>