From 251725a798ad2db00aeda11153fb2e0375caff4e Mon Sep 17 00:00:00 2001 From: Saikiran-Sugurthi Date: Thu, 9 Oct 2025 18:50:05 +0530 Subject: [PATCH 1/6] Added Toast for Login and signup --- package-lock.json | 27 +++++++++++++++++++++++++-- package.json | 3 ++- src/pages/SignIn.js | 30 +++++++++++++++++++----------- src/pages/SignUp.js | 39 +++++++++++++++++++++++++++++++++------ 4 files changed, 79 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2af4262..80829b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.2.0", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "7.21.11", - "@chakra-ui/icons": "^2.2.4", + "@chakra-ui/icons": "^2.2.0", "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11", "@emotion/styled": "^11", @@ -28,7 +28,8 @@ "react-firebase-hooks": "^5.1.1", "react-icons": "^5.2.1", "react-router-dom": "^6.24.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", + "react-toastify": "^11.0.5", "uuid": "^10.0.0", "web-vitals": "^4.2.0", "yup": "^1.4.0" @@ -7719,6 +7720,15 @@ "node": ">=12" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -18135,6 +18145,19 @@ } } }, + "node_modules/react-toastify": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz", + "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1" + }, + "peerDependencies": { + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + } + }, "node_modules/react-universal-interface": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", diff --git a/package.json b/package.json index cd6d054..a7764f8 100644 --- a/package.json +++ b/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" diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js index 8d26ed5..80e1df9 100644 --- a/src/pages/SignIn.js +++ b/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 ( - + + {/* 2. Add the ToastContainer component */} + { - 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 ( + {/* 2. Add the ToastContainer component here */} + ); -} +} \ No newline at end of file From 7cfd8eb10b6237569b7ec278291bbcea290c2b7b Mon Sep 17 00:00:00 2001 From: Saikiran-Sugurthi Date: Fri, 10 Oct 2025 20:23:58 +0530 Subject: [PATCH 2/6] Fixed leaks --- src/pages/SignIn.js | 17 ++++++----------- src/pages/SignUp.js | 18 +++++++----------- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js index 80e1df9..51e2f7d 100644 --- a/src/pages/SignIn.js +++ b/src/pages/SignIn.js @@ -9,9 +9,8 @@ import { auth } from "../firebase"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; -// 1. Import from react-toastify import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; // Import the CSS +import 'react-toastify/dist/ReactToastify.css'; import FormContainer from "../components/Form/FormContainer"; import { Button, VStack, HStack, useColorMode } from "@chakra-ui/react"; @@ -25,15 +24,16 @@ export default function Signin() { const Navigate = useNavigate(); const { colorMode } = useColorMode(); + useEffect(() => { - onAuthStateChanged(auth, (user) => { + const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { - // This will navigate the user to the main page after a successful login Navigate("/main"); } }); - // eslint-disable-next-line - }, []); // Note: The dependency array should likely be empty here + + return () => unsubscribe(); + }, [Navigate]); const NavToSignUp = () => { Navigate("/signup"); @@ -43,11 +43,9 @@ export default function Signin() { const provider = new GoogleAuthProvider(); signInWithPopup(auth, provider) .then(() => { - // 3. Add success toast for Google Sign-In toast.success("Successfully logged in!"); }) .catch((err) => { - // 4. Add error toast for Google Sign-In toast.error(err.message); }); }; @@ -55,12 +53,10 @@ export default function Signin() { 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); }) .catch((err) => { - // 4. Add error toast for Email/Password Sign-In toast.error(err.message); actions.setSubmitting(false); }); @@ -68,7 +64,6 @@ export default function Signin() { return ( - {/* 2. Add the ToastContainer component */} { createUserWithEmailAndPassword(auth, values.email, values.password) .then(() => { - // 3. Call the success toast toast.success("Account created successfully!", { position: "top-right", - autoClose: 5000, + + autoClose: 2000, + + onClose: () => Navigate("/signin"), + hideProgressBar: false, closeOnClick: true, pauseOnHover: true, @@ -30,13 +31,9 @@ export default function SignUp() { 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((error) => { - // 3. Call the error toast toast.error(error.message, { position: "top-right", autoClose: 5000, @@ -56,7 +53,6 @@ export default function SignUp() { return ( - {/* 2. Add the ToastContainer component here */} Date: Fri, 10 Oct 2025 20:56:18 +0530 Subject: [PATCH 3/6] Fixed leaks 2 --- src/App.js | 9 +++++++++ src/pages/SignIn.js | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index cdb47bb..0fe7527 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,14 @@ import { Route, Routes, Navigate } from "react-router-dom"; export default function App() { return ( + <> + } /> } /> } /> + ); } diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js index 51e2f7d..e10a719 100644 --- a/src/pages/SignIn.js +++ b/src/pages/SignIn.js @@ -64,7 +64,6 @@ export default function Signin() { return ( - Date: Fri, 10 Oct 2025 21:03:33 +0530 Subject: [PATCH 4/6] Fixed leaks 3 --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 0fe7527..e0cbd19 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,7 @@ import Signin from "./pages/SignIn"; import SignUp from "./pages/SignUp"; +import { ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import Home from "./pages/Home"; From 32b6ce543ebae4e5fab9d9de864db1297aaf8551 Mon Sep 17 00:00:00 2001 From: Saikiran-Sugurthi Date: Fri, 10 Oct 2025 21:13:04 +0530 Subject: [PATCH 5/6] fixed --- src/pages/SignIn.js | 33 ++++++++++++++++++++++++++++----- src/pages/SignUp.js | 38 ++++++++++++++++++-------------------- 2 files changed, 46 insertions(+), 25 deletions(-) diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js index e10a719..a23d72b 100644 --- a/src/pages/SignIn.js +++ b/src/pages/SignIn.js @@ -20,20 +20,38 @@ import { Formik, Form } from "formik"; import { IconContext } from "react-icons"; import { FiLogIn } from "react-icons/fi"; +const getAuthErrorMessage = (error) => { + switch (error.code) { + case 'auth/user-not-found': + case 'auth/wrong-password': + case 'auth/invalid-credential': + return 'Invalid email or password. Please try again.'; + case 'auth/invalid-email': + return 'Please enter a valid email address.'; + case 'auth/too-many-requests': + return 'Too many attempts. Please try again later or reset your password.'; + case 'auth/popup-closed-by-user': + case 'auth/cancelled-popup-request': + return 'The sign-in process was cancelled.'; + case 'auth/popup-blocked': + return 'Pop-up blocked. Please allow pop-ups for this site to sign in.'; + default: + return 'An unexpected error occurred. Please try again.'; + } +}; + export default function Signin() { const Navigate = useNavigate(); const { colorMode } = useColorMode(); - useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { Navigate("/main"); } }); - return () => unsubscribe(); - }, [Navigate]); + }, [Navigate]); const NavToSignUp = () => { Navigate("/signup"); @@ -46,7 +64,9 @@ export default function Signin() { toast.success("Successfully logged in!"); }) .catch((err) => { - toast.error(err.message); + const message = getAuthErrorMessage(err); + toast.error(message); + console.error("Firebase Google Auth Error:", err); }); }; @@ -57,13 +77,16 @@ export default function Signin() { actions.setSubmitting(false); }) .catch((err) => { - toast.error(err.message); + const message = getAuthErrorMessage(err); + toast.error(message); actions.setSubmitting(false); + console.error("Firebase Email Auth Error:", err); }); }; return ( + { + switch (error.code) { + case 'auth/email-already-in-use': + return 'This email address is already taken.'; + case 'auth/weak-password': + return 'The password is too weak. Please use at least 6 characters.'; + case 'auth/invalid-email': + return 'Please enter a valid email address.'; + default: + return 'An unexpected error occurred. Please try again.'; + } +}; + + export default function SignUp() { const auth = getAuth(); const Navigate = useNavigate(); @@ -18,32 +32,17 @@ export default function SignUp() { createUserWithEmailAndPassword(auth, values.email, values.password) .then(() => { toast.success("Account created successfully!", { - position: "top-right", - autoClose: 2000, - onClose: () => Navigate("/signin"), - - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, }); actions.setSubmitting(false); - }) .catch((error) => { - toast.error(error.message, { - position: "top-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); + + const message = getSignUpErrorMessage(error); + toast.error(message); actions.setSubmitting(false); + console.error("Firebase SignUp Error:", error); }); }; @@ -79,7 +78,6 @@ export default function SignUp() { title="Confirm Password" YupValidation={YupValidation} /> -