diff --git a/package-lock.json b/package-lock.json index 7ff1cb29..dc46ca48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,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" } }, @@ -1811,6 +1812,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==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2387,6 +2397,19 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dev": true, + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -4059,6 +4082,12 @@ "wrap-ansi": "^7.0.0" } }, + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -4484,6 +4513,18 @@ "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", "requires": {} +<<<<<<< HEAD + }, + "react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dev": true, + "requires": { + "clsx": "^2.1.0" + } +======= +>>>>>>> be9db53b45ec1d45ff6af208cda13aa45c8e503b }, "require-directory": { "version": "2.1.1", diff --git a/package.json b/package.json index 63de92ea..e41be2cb 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/Dashboard/Dashboard.css b/src/components/Dashboard/Dashboard.css index ba73d00c..10b53fdd 100644 --- a/src/components/Dashboard/Dashboard.css +++ b/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 { diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 7b63f4ae..c0b767d5 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/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)
+

Find your Dream
diff --git a/src/components/Login/Login.css b/src/components/Login/Login.css index d719cfb1..4376a474 100644 --- a/src/components/Login/Login.css +++ b/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; +} \ No newline at end of file diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index e3dd6802..8fea36ab 100644 --- a/src/components/Login/Login.jsx +++ b/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() {
{/* Home icon */} {/* This is the right side of the login page */} +

Counsellor

Log in to your account