diff --git a/src/App.jsx b/src/App.jsx index 15716e1..8b27536 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,8 +11,8 @@ import TeamMember from "./views/TeamMember"; import ChapterMember from "./views/ChapterMember"; import AllMembers from "./views/AllMembers"; import New from "./views/New"; -// import EventRegister from "./views/EventRegister"; -import NewEventRegister from "./views/NewEventRegister"; +import EventRegister from "./views/EventRegister"; +// import NewEventRegister from "./views/NewEventRegister"; import DynamicEventPage from "./views/DynamicEventPage"; import Round5Register from "./views/HardcodedEventPages/RoadToMernRegister"; import Codeathon from "./views/Codeathon"; @@ -74,6 +74,7 @@ export default function App() { {/* }> */} }> }> + }> { @@ -104,10 +105,10 @@ export default function App() { }> }> + {/* PAST EVENTS */} {/* }> */} - {/* }> */} {/* }> */} {/* }> */} {/* }> */} diff --git a/src/styles/EventRegister.scss b/src/styles/EventRegister.scss index 7bc153a..d3fd33f 100644 --- a/src/styles/EventRegister.scss +++ b/src/styles/EventRegister.scss @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap'); // @import "~react-component-countdown-timer/lib/styles.css"; @property --rotate { @@ -41,6 +42,10 @@ strong { flex-direction: column; gap: 4rem; + .Toastify, .Toastify__toast-container { + z-index: 99999 !important; + } + .coverImage { min-width: 100vw; height: 150px; @@ -261,8 +266,9 @@ strong { max-width: max-content; min-width: 100px; min-height: 30px; + padding: .75rem 1.5rem; border: 2px solid rgb(5, 135, 5); - border-radius: 8px; + border-radius: 2rem; transition: color 0.25s ease, background-color 0.25s ease; animation: none; display: flex; @@ -333,7 +339,7 @@ strong { } } - .databaseContent { + // .databaseContent { max-height: max-content; .headings { @@ -503,7 +509,7 @@ strong { } } - } + // } .reminder { display: flex; @@ -604,7 +610,6 @@ strong { left: 0; width: 100vw; height: 100vh; - // transform: translateY(-60px); background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(7px); display: flex; @@ -612,16 +617,31 @@ strong { // align-items: center; padding-top: 5rem; + + :-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + ::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,.4) !important; + background: rgba(120, 120, 120, .25); + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(128, 128, 128, .8); } .box { - width: min(90%, 500px); - height: min(80%, 400px); + width: min(90%, 600px); + height: min(80%, 500px); background-color: rgb(240, 240, 240); - border: 3px solid rgb(255, 255, 255); - border-radius: 8px; + border: 1px solid rgb(35, 82, 11); + border-radius: 1rem; + padding: 1rem .4rem; box-shadow: 0px 0px 30px 8px rgba(64, 64, 64, 0.5); overflow: auto; @@ -658,11 +678,18 @@ strong { select { color: black; background-color: transparent; - border: 2px solid rgb(130, 130, 130); + border: 1px solid rgb(77, 77, 77); padding: 0.75rem 1.25rem; border-radius: 8px; } + input:disabled { + color: rgba(120, 120, 120); + background-color: rgb(230, 230, 230); + border: 1px solid rgba(10, 10, 10, .3); + cursor: not-allowed; + } + button { max-width: 80%; margin: 1rem auto 2rem auto; @@ -677,6 +704,7 @@ strong { } .emailIndication { + background: linear-gradient(45deg, rgba(100, 100, 100, .05), rgba(100, 100, 100, .15)); border: 1px solid rgb(77, 77, 77); border-radius: 8px; padding: 0.8rem; @@ -707,6 +735,29 @@ strong { } } } + + .kluMailReminder { + display: inline-flex; + flex-wrap: nowrap !important; + align-items: center; + gap: 8px; + line-height: 1.5; + flex-wrap: wrap; + font-size: .8rem; + color: rgba(170, 22, 22, .9); + margin-bottom: .75rem; + + svg { + flex-shrink: 0; + display: inline-block; + vertical-align: middle; + } + + .text { + display: inline; + word-break: break-word; + } + } } } } @@ -719,6 +770,66 @@ strong { transition: all 0.15s ease; } + +.changeMailModal { + + .box { + border: 3px solid rgb(224, 96, 96); + box-shadow: 0 0 20px 4px rgba(255, 0, 0, .3); + width: min(90%, 600px); + height: min(45%, 300px) !important; + margin-top: 3rem; + } + + span.info { + width: 90%; + margin-bottom: 1rem; + font-size: .9rem; + + strong { + font-weight: 700; + } + } + + .emailIndication { + max-width: 85%; + border: 1px solid rgb(77, 77, 77); + border-radius: 8px; + padding: 1rem 0.8rem; + display: flex; + gap: 1rem; + justify-content: flex-start; + align-items: center; + cursor: pointer; + transition: background-color 0.4s ease; + font-size: 12px; + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + + img { + height: 35px; + width: 35px; + border-radius: 50%; + } + + div { + display: flex; + flex-direction: column; + + span { + font-weight: 600; + } + + span.email { + font-weight: normal; + } + } + } + +} + @media screen and (max-width: 700px) { .subHeadings { diff --git a/src/styles/Main.scss b/src/styles/Main.scss index 3b96dbc..2496b20 100644 --- a/src/styles/Main.scss +++ b/src/styles/Main.scss @@ -6,7 +6,7 @@ div.navBar { font-family: "Syne"; position: absolute; - z-index: 999; + z-index: 99; left: 50%; transform: translateX(-50%); top: 0; diff --git a/src/views/Obsolete/EventRegister.jsx b/src/views/EventRegister.jsx similarity index 74% rename from src/views/Obsolete/EventRegister.jsx rename to src/views/EventRegister.jsx index 2e66695..8d87bd6 100644 --- a/src/views/Obsolete/EventRegister.jsx +++ b/src/views/EventRegister.jsx @@ -12,15 +12,11 @@ import coding from "../assets/coding.png"; import { FaCalendarAlt } from "react-icons/fa"; import { HiUserGroup } from "react-icons/hi"; import { BsFillPersonFill } from "react-icons/bs"; -import { - AiOutlineLoading, - AiOutlineCheck, - AiFillLinkedin, - AiFillGithub, - AiFillInstagram, - AiOutlineWhatsApp -} from "react-icons/ai"; +import { AiOutlineLoading, AiOutlineCheck } from "react-icons/ai"; import { BiSolidPhoneCall, BiLinkExternal } from "react-icons/bi"; +import { CiCircleInfo, CiWarning } from "react-icons/ci"; +import { PiSparkleThin } from "react-icons/pi"; + import { TfiMoney } from "react-icons/tfi"; // ----------------------------------- @@ -45,6 +41,8 @@ export default function EventRegister() { const { USER_PRESENT, currentUser, signinwithpopup } = useAuth(); const { readableError, setNavTitle } = useMisc(); + const [usingKluMail, setUsingKluMail] = useState(false); + const [eventID, setEventID] = useState(); const [eventRegisterStatus, setEventRegisterStatus] = useState("not_registered"); @@ -60,6 +58,7 @@ export default function EventRegister() { const [userDept, setUserDept] = useState(""); const [fadeStatus, setFadeStatus] = useState(""); + const registrationForm = useRef(); const fullName = useRef(); const regNo = useRef(); const email = useRef(); @@ -109,15 +108,67 @@ export default function EventRegister() { }); }; + const getFieldValues = (field, email) => { + console.log(`%c Prefilling details: ${email}`, "color: green"); + console.log(`Finding out user's ${field}`); + + + if (field == "year") { + let year = email.split("@")[0].slice(2,4) + let years = { "21": "IV", "22": "III", "23": "II" } + console.log(`User is from ${years[year]} year.`); + return years[year]; + } + + if (field == "department") { + let departments = { + "8": "IT", + "4": "CSE", + "1": "BioTechnology", + "6": "EEE", + "5": "ECE", + } + let dept = email.split("@")[0][6] + if (Object.keys(departments).includes(dept)) { + console.log(`User is from ${departments[dept]} department.`); + return departments[dept]; + } + else { + return "OTHER" // unknown reg no. + } + } + } + + const prefillRegistrationFields = () => { + regNo.current.value = currentUser.email.split("@")[0] + year.current.value = getFieldValues("year", currentUser.email); + let department = getFieldValues("department", currentUser.email); + + if (department == "CSE" || department == "IT") { // cse or it, set in dropdown alone, no need to show input field. + setUserDept(department); + } + else if (department == "OTHER") { + console.log("User is from OTHER department."); // unknown department, set to other... and show empty input field. + setUserDept("OTHER"); + } + else { // some known deparment other than cse, it. show input field and fill it. + setUserDept("OTHER") + console.log(otherDept.current) + otherDept.current.value = department; + } + + } + useEffect(() => { window.scrollTo(0, 0); - setEventID(window.location.pathname.split("/")[2]); + setEventID(window.location.pathname.split("/")[1]); console.log(`Width: ${window.innerWidth}px`); + console.log(`Event ID: ${window.location.pathname.split("/")[1]}`) axios .post("/get_event_reg", { - eventID: window.location.pathname.split("/")[2], + eventID: window.location.pathname.split("/")[1], }) .then((res) => { console.log("------- Event REgistration staus"); @@ -127,21 +178,14 @@ export default function EventRegister() { axios .post("/get_event_start_time", { - eventID: window.location.pathname.split("/")[2], + eventID: window.location.pathname.split("/")[1], }) .then((res) => { console.log("setting start time"); console.log(utcToLocalTimeStamp(res.data.time)); setEventStart(utcToLocalTimeStamp(res.data.time)); }); - // axios - // .post("/get_event_max_count", { - // eventID: window.location.pathname.split("/")[2], - // }) - // .then((res) => { - // setMaxCount(res.data.count); - // }); - + setTimeout(() => { setFadeStatus("visible"); }, 500); @@ -151,12 +195,12 @@ export default function EventRegister() { }, []); useEffect(() => { - if (modalOpen) { + if (modalOpen || !usingKluMail) { window.scrollTo(0, 0); document.body.style.overflowY = "hidden"; } else document.body.style.overflowY = "auto"; console.log(currentUser); - }, [modalOpen]); + }, [modalOpen, usingKluMail]); useEffect(() => { if (eventStart) { @@ -174,20 +218,32 @@ export default function EventRegister() { useEffect(() => { setEventRegisteringInProgress(true); if (currentUser && currentUser !== "none") { - currentUser.getIdToken().then((token) => { - axios - .post( - "/get_event_reg_status", - { userID: currentUser.uid, eventID: eventID }, - { headers: { Authorization: token } } - ) - .then((res) => { - if (res.data.status == "Registered") - setEventRegisterStatus("registered"); - else setEventRegisterStatus("not_registered"); - }) - .finally(() => setEventRegisteringInProgress(false)); - }); + console.log("User is logged in") + if (currentUser.email.split("@")[1] == "klu.ac.in") { + console.log("with KLU Mail. Getting event registration status.") + setUsingKluMail(true); + currentUser.getIdToken().then((token) => { + axios + .post( + "/get_event_reg_status", + { userID: currentUser.uid, eventID: eventID, email: currentUser.email }, + { headers: { Authorization: token } } + ) + .then((res) => { + if (res.data.status == "Registered") + setEventRegisterStatus("registered"); + else setEventRegisterStatus("not_registered"); + }) + .finally(() => setEventRegisteringInProgress(false)); + }); + } + else { + console.log("using personal account. Showing warning modal.") + setUsingKluMail(false); + } + } + else { + // not logged in } }, [currentUser]); @@ -202,11 +258,11 @@ export default function EventRegister() {
- Algorithmist 2024 + Algorithmist 2025
- Algorithmist 24" is a series of coding + Algorithmist '25 is a series of coding events organized by the GFG KARE Student Chapter in sponsorship with GeeksforGeeks at Kalasalingam Academy of Research and @@ -252,7 +308,10 @@ export default function EventRegister() { disabled={ (eventRegisterStatus === "registered" || eventRegisteringInProgress === true || eventRegistrationStatus !== "accepting") } - onClick={() => setModalOpen(true)} + onClick={() => { + setModalOpen(true); + prefillRegistrationFields(); + }} > { (eventRegistrationStatus !== "accepting") ? "Registration Closed" : (eventRegisteringInProgress) ? ( @@ -281,6 +340,9 @@ export default function EventRegister() { console.log("registering..."); signinwithpopup("google"); }} + onMouseEnter={() => { + toast.info("Kindly login with your KLU Mail", { toastId: "login_with_klu_reminder" }) + }} > Sign in to Register ) @@ -328,7 +390,7 @@ export default function EventRegister() { Registration Deadline
- 22nd Dec 2023, 6PM + 25th Dec 2024, 6PM
@@ -525,6 +587,7 @@ export default function EventRegister() {