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() {
+ {/* REGISTER MODAL */}
setModalOpen(false)}
@@ -538,6 +601,7 @@ export default function EventRegister() {
>
Complete your registration