Update strings to objids again

components/Avatar.tsx

@@ -8,6 +8,7 @@ export default function Avatar(props: {
 	imgHeightOverride?: string | undefined;
 	showLevel?: boolean | undefined;
 	borderThickness?: number | undefined;
+	animation?: string | undefined;
 	onClick?: () => void | undefined;
 	className?: string | undefined;
 	online?: boolean;
@@ -21,7 +22,7 @@ export default function Avatar(props: {
 
 	return (
 		<div
-			className={`avatar ${props.online && "online"} ${props.scale} ${props.className}`}
+			className={`avatar ${props.online && "online"} ${props.scale} ${props.className} ${props.animation}`}
 		>
 			{(props.showLevel ?? true) && (
 				<div className="absolute z-10 bg-base-100 rounded-tl-xl rounded-br-xl h-6 w-14 text-center text-sm font-semibold">

components/Container.tsx

@@ -22,6 +22,7 @@ import Banner, { DiscordBanner } from "./Banner";
 import { stat } from "fs";
 import { forceOfflineMode } from "@/lib/client/ClientUtils";
 import Head from "next/head";
+import SignInMenu from "./SignInMenu";
 
 const api = new ClientApi();
 
@@ -253,23 +254,7 @@ export default function Container(props: ContainerProps) {
 					</div>
 
 					{showAuthBlock ? (
-						<div className="w-full h-full flex flex-col items-center justify-center">
-							<div className="card w-3/4 lg:w-1/4 bg-base-200 text-primary-content">
-								<div className="card-body flex items-center text-white">
-									<BsGearFill
-										size={70}
-										className="animate-spin-slow"
-									></BsGearFill>
-									<h2 className="card-title">Wait a minute...</h2>
-									<p>You need to sign in first!</p>
-									<div className="card-actions justify-end">
-										<Link href={"/signin"}>
-											<button className="btn btn-primary">Sign In</button>
-										</Link>
-									</div>
-								</div>
-							</div>
-						</div>
+						<SignInMenu />
 					) : (
 						<>
 							{props.notForMobile && !accepted && onMobile ? (

components/SignInMenu.tsx

@@ -0,0 +1,112 @@
+import Container from "@/components/Container";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+	GoogleReCaptchaProvider,
+	useGoogleReCaptcha,
+} from "react-google-recaptcha-v3";
+import { FaGoogle, FaSlack } from "react-icons/fa";
+
+const errorMessages: { [error: string]: string } = {
+	oauthcallback: "Failed to sign in with OAuth provider.",
+	callback: "A server-side error occurred during sign in.",
+};
+
+function SignInCard() {
+	const router = useRouter();
+	const emailRef = useRef<HTMLInputElement>(null);
+	const { executeRecaptcha } = useGoogleReCaptcha();
+
+	const [error, setError] = useState<string>(router.query.error as string);
+
+	useEffect(() => {
+		if (router.query.error) {
+			const error = (router.query.error as string).toLowerCase();
+			const message =
+				(error in errorMessages ? errorMessages[error] : error) +
+				" Try clearing your cookies and then signing in again.";
+
+			setError(message);
+		}
+	}, [router.query.error]);
+
+	function signInWithCallbackUrl(provider: string, options?: object) {
+		const callbackUrl = router.query.callbackUrl as string;
+
+		signIn(provider, { callbackUrl, ...options });
+	}
+	async function logInWithEmail() {
+		const email = emailRef.current?.value;
+
+		if (!email) {
+			setError("Email is required");
+			return;
+		}
+
+		if (!executeRecaptcha) {
+			setError("Recaptcha not available");
+			return;
+		}
+
+		const captchaToken = await executeRecaptcha();
+
+		signInWithCallbackUrl("email", { email, captchaToken });
+	}
+
+	return (
+		<div className="card bg-base-300 w-5/6 md:w-1/2">
+			<div className="card-body">
+				<h1 className="card-title">Sign In</h1>
+				{error && <p className="text-error">{error}</p>}
+				<p>Choose a login provider</p>
+				<div className="divider" />
+
+				<button
+					onClick={() => signInWithCallbackUrl("google")}
+					className="btn btn-primary w-full font-bold text-md"
+				>
+					<FaGoogle />
+					Login with Google
+				</button>
+
+				<button
+					onClick={() => signInWithCallbackUrl("slack")}
+					className="btn btn-secondary w-full font-bold text-md"
+				>
+					<FaSlack />
+					Login with Slack
+				</button>
+
+				<div className="divider" />
+				<div className="flex flex-col gap-2">
+					<p>Email Sign In</p>
+					<input
+						ref={emailRef}
+						className="input input-bordered w-full"
+						type="email"
+						placeholder="Email"
+					/>
+					<button
+						onClick={logInWithEmail}
+						className="btn btn-accent w-full font-bold text-md"
+					>
+						Login with Email
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default function SignInMenu() {
+	return (
+		<GoogleReCaptchaProvider
+			reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_KEY}
+		>
+			<div className="p-12 flex flex-col items-center justify-center">
+				<SignInCard />
+			</div>
+		</GoogleReCaptchaProvider>
+	);
+}

components/competition/InsightsAndSettingsCard.tsx

@@ -6,9 +6,16 @@ import { Competition, MatchType, Pitreport, Report, Team } from "@/lib/Types";
 import Link from "next/link";
 import { ChangeEvent, useState } from "react";
 import { BsGearFill, BsClipboard2Check } from "react-icons/bs";
-import { FaSync, FaBinoculars, FaUserCheck, FaDatabase } from "react-icons/fa";
+import {
+	FaSync,
+	FaBinoculars,
+	FaUserCheck,
+	FaDatabase,
+	FaTrash,
+} from "react-icons/fa";
 import { FaUserGroup } from "react-icons/fa6";
 import ClientApi from "@/lib/api/ClientApi";
+import toast from "react-hot-toast";
 
 const api = new ClientApi();
 
@@ -49,10 +56,10 @@ export default function InsightsAndSettingsCard(props: {
 	const [newCompName, setNewCompName] = useState(comp?.name);
 	const [newCompTbaId, setNewCompTbaId] = useState(comp?.tbaId);
 	const [exportPending, setExportPending] = useState(false);
-	const [teamToAdd, setTeamToAdd] = useState<number>(0);
+	const [teamToAdd, setTeamToAdd] = useState<number>();
 	const [blueAlliance, setBlueAlliance] = useState<number[]>([]);
 	const [redAlliance, setRedAlliance] = useState<number[]>([]);
-	const [matchNumber, setMatchNumber] = useState<number | undefined>(undefined);
+	const [matchNumber, setMatchNumber] = useState<number>();
 
 	const exportAsCsv = async () => {
 		setExportPending(true);
@@ -132,6 +139,28 @@ export default function InsightsAndSettingsCard(props: {
 			.finally(() => location.reload());
 	}
 
+	function deleteComp() {
+		if (!comp?._id) return;
+
+		const confirmKey = `delete-comp-${comp.slug}`;
+		if (
+			prompt(
+				`If you are sure you want to IRREVOCABLY delete this competition and all data associated with it, type "${confirmKey}"`,
+			) === confirmKey
+		) {
+			toast.promise(
+				api.deleteComp(comp._id).finally(() => {
+					window.location.href = `/${team?.slug}/${seasonSlug}`;
+				}),
+				{
+					loading: "Deleting competition...",
+					success: "Competition deleted successfully!",
+					error: "Error deleting competition.",
+				},
+			);
+		} else toast.error("Competition not deleted.");
+	}
+
 	return (
 		<div className="w-full card bg-base-200 shadow-xl">
 			<div className="card-body w-full">
@@ -391,12 +420,19 @@ export default function InsightsAndSettingsCard(props: {
 							</>
 						)}
 
-						<div className="divider"></div>
+						<div className="divider" />
 						<Link href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/scouters`}>
 							<button className="btn btn-lg btn-primary w-full">
 								<FaBinoculars /> Manage Scouters
 							</button>
 						</Link>
+						<div className="divider" />
+						<button
+							className="btn btn-lg btn-error w-full"
+							onClick={deleteComp}
+						>
+							<FaTrash /> Delete Competition
+						</button>
 					</div>
 				) : (
 					<div className="w-full">

components/competition/MatchScheduleCard.tsx

@@ -188,7 +188,7 @@ export default function MatchScheduleCard(props: {
 															<a
 																href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/${reportId}`}
 																key={reportId}
-																className={`${color} ${mine && !submitted ? "border-6  border-purple-500" : "border-2 border-white"} 
+																className={`${color} ${mine && !submitted ? "border-4  border-green-400 animate-bounce" : "border-2 border-white"} 
                                   ${timeSinceCheckIn && timeSinceCheckIn < 10 && "avatar online"} 
                                   rounded-lg w-12 h-12 flex items-center justify-center text-white`}
 															>
@@ -227,7 +227,7 @@ export default function MatchScheduleCard(props: {
 													})}
 												</div>
 											</div>
-											<div>
+											<div className="flex items-center gap-1">
 												{match.subjectiveScouter &&
 												usersById[match.subjectiveScouter] ? (
 													<div className="flex flex-row items-center space-x-1">
@@ -267,30 +267,32 @@ export default function MatchScheduleCard(props: {
 														) : (
 															<div>
 																Subjective Scouter:{" "}
-																{usersById[match.subjectiveScouter ?? ""].name}{" "}
-																<div
-																	className="tooltip before:w-[10rem] "
-																	data-tip="Subjective Scouters watch the entire match and comment on what's going on"
-																>
-																	<FaInfoCircle></FaInfoCircle>
-																</div>
+																{
+																	usersById[match.subjectiveScouter ?? ""].name
+																}{" "}
 															</div>
 														)}
 													</div>
 												) : (
-													<div>
-														No subjective scouter assigned{" "}
-														<div
-															className="tooltip before:w-[10rem] "
-															data-tip="Subjective Scouters watch the entire match and comment on what's going on"
-														>
-															<FaInfoCircle></FaInfoCircle>
-														</div>
-													</div>
+													<div>No subjective scouter assigned </div>
 												)}
+												<div
+													className="tooltip before:w-[10rem] "
+													data-tip="Subjective Scouters watch the entire match and comment on what's going on"
+												>
+													<FaInfoCircle />
+												</div>
 											</div>
 											<a
-												className={`btn btn-primary btn-sm ${match.subjectiveScouter && usersById[match.subjectiveScouter]?.slackId && "-translate-y-1"}`}
+												className={`btn btn-primary btn-sm 
+													${match.subjectiveScouter && usersById[match.subjectiveScouter]?.slackId && "-translate-y-1"} 
+													${
+														session &&
+														!match.assignedSubjectiveScouterHasSubmitted &&
+														match.subjectiveScouter === session.user?._id &&
+														"animate-borderFlash border-4"
+													}
+												`}
 												href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/${match._id}/subjective`}
 											>
 												Add Subjective Report (

components/competition/PitScoutingCard.tsx

@@ -2,7 +2,7 @@ import { NotLinkedToTba } from "@/lib/client/ClientUtils";
 import { Competition, Pitreport } from "@/lib/Types";
 import Link from "next/link";
 import { BsGearFill } from "react-icons/bs";
-import { FaRobot } from "react-icons/fa";
+import { FaCheck, FaRobot } from "react-icons/fa";
 
 export default function PitScoutingCard(props: {
 	pitreports: Pitreport[];
@@ -49,13 +49,14 @@ export default function PitScoutingCard(props: {
 										</div>
 										<div className="absolute rounded z-10 translate-y-4 flex justify-center items-center">
 											{report.submitted ? (
-												<img
-													alt={`Team ${report.teamNumber}'s robot`}
-													src={report.data?.image}
-													loading="lazy"
-													style={{ imageResolution: "72dpi" }}
-													className="w-2/3 h-auto rounded-lg"
-												></img>
+												// <img
+												// 	alt={`Team ${report.teamNumber}'s robot`}
+												// 	src={report.data?.image}
+												// 	loading="lazy"
+												// 	style={{ imageResolution: "72dpi" }}
+												// 	className="w-2/3 h-auto rounded-lg"
+												// ></img>
+												<FaCheck size={64} />
 											) : (
 												<FaRobot size={64} />
 											)}