attendance qr fix

app/api/certificate/sendCertificatesAndEvents/route.ts

@@ -1,36 +1,50 @@
-import { sendCertificatesAndEvents } from "@/lib/services/certificates";
+import { prisma } from "@/lib/db";
 import { body, expressError, handle, json } from "@/lib/api/express";
 import { getCurrentUser, isAdmin } from "@/lib/auth/access";
 
 /**
  * POST /api/certificate/sendCertificatesAndEvents
- * Port of controllers/certificate/eventCertificateController.js — admin only.
+ * Port of controllers/certificate/eventCertificateController.js.
  *
- * Recipients who already hold a certificate for the event are skipped rather
- * than issued a duplicate, so re-running after a partial failure is safe.
+ * The name is misleading and comes from the Express backend: this sends
+ * nothing. It looks up the certificates already issued to one email address and
+ * returns each one alongside the event it belongs to, which is what the "My
+ * Events" tab uses to put a View link on each past event.
+ *
+ * It was previously implemented here as the certificate *issuing* endpoint —
+ * admin-only, taking `{ eventId, recipients }` and returning `{ data }`. Nothing
+ * called it that way; the only caller is the participant profile, which sends
+ * `{ email }` and reads `certandevent`. So every participant got a 403, their
+ * certificate list stayed empty, and the View button had no link to follow.
+ *
+ * Access: you may read your own certificates; admins may read anyone's. The
+ * Express route had no auth middleware at all, which let anyone enumerate
+ * another member's certificates by guessing their address.
  */
 export async function POST(request: Request) {
   return handle(async () => {
     const user = await getCurrentUser();
     if (!user) return expressError(401, "Token is required");
-    if (!isAdmin(user)) return expressError(403, "Unauthorized");
 
-    const b = await body<{
-      eventId?: string;
-      recipients?: Array<{ email: string; fieldValues?: Record<string, string> }>;
-      emails?: string[];
-    }>(request);
+    const b = await body<{ email?: string }>(request);
+    const email = (b.email ?? "").toLowerCase().trim();
+    if (!email) return expressError(400, "Email is required");
 
-    // Accepts either a rich recipient list or a plain array of addresses.
-    const recipients =
-      b.recipients ??
-      (b.emails ?? []).map((email) => ({ email, fieldValues: {} }));
+    if (email !== user.email.toLowerCase() && !isAdmin(user)) {
+      return expressError(403, "Unauthorized");
+    }
 
-    const data = await sendCertificatesAndEvents({
-      eventId: b.eventId ?? "",
-      recipients,
+    const issued = await prisma.issuedCertificates.findMany({
+      where: { email },
+      include: { event: true },
     });
 
-    return json({ success: true, message: "Certificates processed", data });
+    // Shape kept identical to Express: [{ cert, event }], with rows whose event
+    // has since been deleted dropped rather than returned as null.
+    const certandevent = issued
+      .filter((row) => row.event)
+      .map(({ event, ...cert }) => ({ cert, event }));
+
+    return json({ certandevent });
   });
 }

src/authentication/Login/Login.jsx

@@ -143,7 +143,7 @@ const Login = () => {
   };
 
   return (
-    <div>
+    <div className={style.page}>
       <div className={style.container}>
         <Link href={"/"}>
           <div className={style.ArrowBackIcon}>

src/authentication/Login/styles/Login.module.scss

@@ -1,3 +1,16 @@
+// The page shell inside `.authpage`.
+//
+// `.authpage` is a column flex container with `align-items: center`, so its
+// child is sized shrink-to-fit on the cross axis. This wrapper had no width of
+// its own, collapsed to its content, and `.container`'s `width: 100%` then
+// resolved against that — the card rendered ~257px wide on a laptop and never
+// reached its 480px max-width.
+.page {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .container {
   position: relative;
   z-index: 10;

src/components/EventCard/EventCard.jsx

@@ -15,21 +15,21 @@ import { Blurhash } from "react-blurhash";
 import { Alert, MicroLoading } from "../../microInteraction";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { isPrerequisiteMet } from "../../utils/prerequisite";
+import { cdn } from "../../utils/cloudinary";
 
 const EventCard = (props) => {
   const {
     data,
     onOpen,
     type,
-    modalpath,
     showShareButton = true,
     showRegisterButton = true,
     additionalContent,
     onEdit,
     onDelete,
     enableEdit,
     isLoading,
-    isRegisteredInRelatedEvents,
     eventName,
     variant = "default",
   } = props;
@@ -38,7 +38,6 @@ const EventCard = (props) => {
   const authCtx = useContext(AuthContext);
   const [isOpen, setOpen] = useState(false);
   const [isQRModalOpen, setQRModalOpen] = useState(false);
-  const [isHovered, setisHovered] = useState(false);
   const [remainingTime, setRemainingTime] = useState("");
   const [btnTxt, setBtnTxt] = useState("Register Now");
   const router = useRouter();
@@ -97,6 +96,10 @@ const EventCard = (props) => {
     }
   };
 
+  // Per-event, not per-page: this card's own prerequisite against this
+  // visitor's own registrations.
+  const prerequisiteMet = isPrerequisiteMet(info, authCtx.user?.regForm);
+
   const dayWithSuffix = day + getOrdinalSuffix(day);
   const month = date.toLocaleDateString("en-GB", { month: "long" });
   const year = date.getFullYear();
@@ -162,54 +165,33 @@ const EventCard = (props) => {
   }, [info.isRegistrationClosed, remainingTime]);
 
   useEffect(() => {
-    if (authCtx.isLoggedIn && authCtx.user.regForm) {
-      if (isRegisteredInRelatedEvents) {
-        if (data?.info?.relatedEvent === "null") {
-          if (authCtx.user.regForm.includes(data.id)) {
-            setBtnTxt("Already Registered");
-          }
-        } else {
-          if (authCtx.user.regForm.includes(data.id)) {
-            setBtnTxt("Already Registered");
-          } else {
-            if (remainingTime) {
-              setBtnTxt(remainingTime);
-            } else if (data?.info?.isRegistrationClosed) {
-              setBtnTxt("Closed");
-            } else {
-              setBtnTxt("Register Now");
-            }
-          }
-        }
-      } else {
-        if (data?.info?.relatedEvent === "null") {
-          if (authCtx.user.regForm.includes(data.id)) {
-            setBtnTxt("Already Registered");
-          } else {
-            if (remainingTime) {
-              setBtnTxt(remainingTime);
-            } else if (data?.info?.isRegistrationClosed) {
-              setBtnTxt("Closed");
-            } else {
-              setBtnTxt("Register Now");
-            }
-          }
-        } else {
-          if (authCtx.user.access === "USER") {
-            if (data?.info?.isRegistrationClosed) {
-              setBtnTxt("Closed");
-            } else {
-              setBtnTxt("Locked");
-            }
-          }
-        }
-      }
+    if (!authCtx.isLoggedIn || !authCtx.user.regForm) return;
+
+    const openState = () => {
+      if (remainingTime) return remainingTime;
+      if (data?.info?.isRegistrationClosed) return "Closed";
+      return "Register Now";
+    };
+
+    if (authCtx.user.regForm.includes(data.id)) {
+      setBtnTxt("Already Registered");
+      return;
     }
+
+    // Locked until this event's own prerequisite is met. Admins are exempt so
+    // they can still open a gated form to check it.
+    if (!prerequisiteMet && authCtx.user.access === "USER") {
+      setBtnTxt(data?.info?.isRegistrationClosed ? "Closed" : "Locked");
+      return;
+    }
+
+    setBtnTxt(openState());
   }, [
     authCtx.isLoggedIn,
     authCtx.user.regForm,
+    authCtx.user.access,
     data,
-    isRegisteredInRelatedEvents,
+    prerequisiteMet,
     remainingTime,
   ]);
 
@@ -264,7 +246,7 @@ const EventCard = (props) => {
     ) {
       setAlert({
         type: "info",
-        message: `You need to register for ${eventName} first`,
+        message: `You need to register for ${eventName || "the required event"} first`,
         position: "bottom-right",
         duration: 3000,
       });
@@ -324,7 +306,16 @@ const EventCard = (props) => {
     }
   };
 
-  const detailsHref = modalpath + data.id;
+  // Every event -- upcoming, past, or viewed from the admin panel -- is served
+  // by the single /Events/[eventId] route, so the card builds its own link
+  // rather than trusting the caller.
+  //
+  // This used to be `modalpath + data.id`, from when `modalpath` named a modal
+  // and was never navigated to. Turning the title into a real <Link> made those
+  // strings live URLs, and three of the four callers were passing paths that
+  // have no route: "/pastEvents/", "/Events/pastEvents/" and "/profile/Events/".
+  // Every past-event card on the site 404'd as a result.
+  const detailsHref = `/Events/${data.id}`;
   // Built from the origin, not from the current href - appending the id to
   // whatever page you happen to be on produced links like /Events/x/y.
   const shareUrl =
@@ -423,8 +414,6 @@ const EventCard = (props) => {
   return (
     <article
       className={`${style.card} ${variant === "featured" ? style.featured : ""}`}
-      onMouseEnter={() => setisHovered(true)}
-      onMouseLeave={() => setisHovered(false)}
     >
       {variant === "featured" && (
         <div className={style.techPattern} aria-hidden="true">
@@ -536,11 +525,12 @@ const EventCard = (props) => {
         {/* Cropped from the bottom rather than the centre — see `.image` in the
             stylesheet for why. */}
         <img
-          src={info.eventImg}
+          src={cdn(info.eventImg, variant === "featured" ? 1000 : 700)}
           className={style.image}
           style={{ opacity: imageLoaded ? 1 : 0 }}
           alt=""
           loading="lazy"
+          decoding="async"
           onLoad={() => setImageLoaded(true)}
         />
         <span className={style.badge} data-tone={status.tone}>
@@ -625,7 +615,12 @@ const EventCard = (props) => {
         </div>
       </div>
 
-      {enableEdit && isHovered && authCtx.user.access === "ADMIN" && (
+      {/* Always rendered. It used to be gated on an `isHovered` state, which no
+          touch device ever sets — so admins on a phone could not reach Edit,
+          Delete or Analytics at all. The fade-in on hover now lives in CSS,
+          behind `@media (hover: hover)`, so pointer devices keep the reveal and
+          touch devices simply always see the bar. */}
+      {enableEdit && authCtx.user.access === "ADMIN" && (
         <div className={style.adminBar}>
           <button
             type="button"
@@ -683,7 +678,6 @@ EventCard.propTypes = {
   data: PropTypes.object.isRequired,
   onOpen: PropTypes.func,
   type: PropTypes.string.isRequired,
-  modalpath: PropTypes.string.isRequired,
   customStyles: PropTypes.object,
   showShareButton: PropTypes.bool,
   showRegisterButton: PropTypes.bool,

src/components/EventCard/styles/EventCard.module.scss

@@ -284,13 +284,46 @@ $poster-stretch: 1.19;
   right: 12px;
   z-index: 2;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 6px;
   padding: 6px;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   background-color: rgba(0, 0, 0, 0.82);
 }
 
+// The reveal-on-hover only applies where hovering is possible. A touch screen
+// matches `hover: none`, so the bar stays visible there instead of being
+// unreachable — which is what happened when this was a JS `isHovered` flag.
+@media (hover: hover) and (pointer: fine) {
+  .adminBar {
+    opacity: 0;
+    transition: opacity 160ms var(--ease);
+  }
+
+  .card:hover .adminBar,
+  .adminBar:focus-within {
+    opacity: 1;
+  }
+}
+
+// The bar sits over the poster; on a narrow card the three buttons need room
+// to wrap rather than run off the edge. They also become the primary way an
+// admin reaches Analytics on a phone, so they get a full touch target — they
+// measured 32px tall, under the usual 44px minimum.
+@media (max-width: 768px) {
+  .adminBar {
+    max-width: calc(100% - 24px);
+  }
+
+  .adminBtn {
+    min-height: 44px;
+    padding-inline: 14px;
+    font-size: 0.8125rem;
+  }
+}
+
 .adminBtn {
   display: inline-flex;
   align-items: center;

src/components/HeroGallery/HeroGallery.jsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import styles from "./styles/HeroGallery.module.scss";
+import { cdn } from "../../utils/cloudinary";
 
 const INTERVAL_MS = 3200;
 
@@ -69,10 +70,16 @@ function HeroGallery({ images }) {
               }
               aria-current={offset === 0 ? "true" : undefined}
             >
+              {/* Every slide is mounted at once so the carousel can animate
+                  between them, so all ten originals were downloaded and
+                  decoded up front — several of them 4000-6000px wide for a
+                  box under 400px. */}
               <img
-                src={image.image}
+                src={cdn(image.image, 700)}
                 alt={image.title || `Gallery photo ${index + 1}`}
                 draggable={false}
+                loading={Math.abs(offset) <= 1 ? "eager" : "lazy"}
+                decoding="async"
               />
             </button>
           );

src/features/Modals/Event/LiveEventPopup/LiveEventPopup.jsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import styles from "./styles/LiveEventPopup.module.scss";
 import { api } from "../../../../services";
+import { cdn } from "../../../../utils/cloudinary";
 
 const LiveEventPopup = () => {
   const [isVisible, setIsVisible] = useState(false);
@@ -76,7 +77,7 @@ const LiveEventPopup = () => {
               ×
             </button>
             <a href="/Events">
-              <img src={eventImage} alt="Event" className={styles.popupContent} />
+              <img src={cdn(eventImage, 600)} alt="Event" className={styles.popupContent} loading="lazy" decoding="async" />
             </a>
           </div>
         </div>

src/sections/Home/Events/EventsSection.jsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { api } from "../../../services";
 import styles from "./styles/EventsSection.module.scss";
+import { cdn } from "../../../utils/cloudinary";
 
 /** Shown when an event carries no image of its own. */
 const EVENT_BANNER_FALLBACK = "/fedkiit-logo.png";
@@ -135,7 +136,7 @@ export default function HomeEventsSection() {
                 <div className={styles.eventCard}>
                   {/* Top Image Banner with Tag Overlay */}
                   <div className={styles.cardImageWrapper}>
-                    <img src={ev.banner} alt={ev.title} className={styles.cardImage} />
+                    <img src={cdn(ev.banner, 700)} alt={ev.title} className={styles.cardImage} loading="lazy" decoding="async" />
                     <span className={styles.tagBadge}>{ev.tag}</span>
                   </div>