From efd69e2544b30c640000d0e9c79bc50743958712 Mon Sep 17 00:00:00 2001 From: yashi-15 Date: Thu, 30 May 2024 00:33:15 +0530 Subject: [PATCH 1/2] added alerts on UI when user log-in/log-out, wrong password, unregistered email login, wrong captcha --- package-lock.json | 59 +++++++++++++++++++++++--- package.json | 1 + src/components/Dashboard/Dashboard.css | 7 +++ src/components/Dashboard/Dashboard.jsx | 25 +++++++++-- src/components/Login/Login.css | 8 ++++ src/components/Login/Login.jsx | 48 +++++++++++++++++---- 6 files changed, 129 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index bf99f59c..c5a9cf53 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", @@ -3387,7 +3410,8 @@ "@firebase/auth-types": { "version": "0.12.2", "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.2.tgz", - "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==" + "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==", + "requires": {} }, "@firebase/component": { "version": "0.6.7", @@ -3464,7 +3488,8 @@ "@firebase/firestore-types": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.2.tgz", - "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==" + "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==", + "requires": {} }, "@firebase/functions": { "version": "0.11.5", @@ -3523,7 +3548,8 @@ "@firebase/installations-types": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.2.tgz", - "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==" + "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==", + "requires": {} }, "@firebase/logger": { "version": "0.4.2", @@ -3648,7 +3674,8 @@ "@firebase/storage-types": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.2.tgz", - "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==" + "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==", + "requires": {} }, "@firebase/util": { "version": "1.9.6", @@ -4055,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", @@ -4429,7 +4462,8 @@ "react-icons": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", - "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==" + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "requires": {} }, "react-is": { "version": "18.2.0", @@ -4471,12 +4505,23 @@ "react-scroll-to-top": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz", - "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==" + "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==", + "requires": {} }, "react-spinners": { "version": "0.13.8", "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", - "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==" + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "requires": {} + }, + "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" + } }, "require-directory": { "version": "2.1.1", diff --git a/package.json b/package.json index 1ff7dd98..2c1eb853 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..38df3837 100644 --- a/src/components/Dashboard/Dashboard.css +++ b/src/components/Dashboard/Dashboard.css @@ -471,6 +471,13 @@ color: #050a3079; } +.toast-message { + background: #12229d; + color: #fff; + font-size: 12px; + width: 18vw; + padding: 10px; +} @media (max-width: 960px) { .menu { diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 7b63f4ae..765213a6 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,17 @@ const Dashboard = () => { const handleSignOut = () => { signOut(auth) .then(() => { - navigate("/"); + toast.success("Logged out!",{ + className: "toast-message", + }) + setTimeout(() => { + navigate("/"); + }, 1000); }) .catch((err) => { - alert(err.message); + toast.error(err.message,{ + className: "toast-message", + }); }); }; @@ -125,6 +141,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
From 57649c19a9088e9eadb4bb0f92addbe92f4f5bf6 Mon Sep 17 00:00:00 2001 From: yashi-15 Date: Thu, 30 May 2024 23:05:26 +0530 Subject: [PATCH 2/2] messages are now below navbar --- src/components/Dashboard/Dashboard.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/Dashboard.css b/src/components/Dashboard/Dashboard.css index a659bc8c..10b53fdd 100644 --- a/src/components/Dashboard/Dashboard.css +++ b/src/components/Dashboard/Dashboard.css @@ -478,7 +478,10 @@ width: 18vw; padding: 10px; z-index: 100; - margin-top: 10px; +} + +.toast-message:first-child{ + margin-top: 90px; } @media (max-width: 960px) {