fix ui bug

Author: justin-phxm

src/app/register/team/(pending)/existing/page.tsx

@@ -3,7 +3,7 @@ import { Underline } from "@/utils/text-utils";
 
 export default function page() {
   const instructions = [
-    "Obtain the unique 6-digit Team ID from your team member who registered your group.",
+    "Obtain the unique 4-digit Team ID from your team member who registered your group.",
     "Enter the Team ID below.",
     "Click on “Join.”",
     "Its official! You joined the team!",

src/app/register/team/page.tsx

@@ -1,33 +1,36 @@
 import Link from "next/link";
 
 import PurpleButton from "@/components/PurpleButton";
+import RegistrationLayout from "@/components/layouts/RegistrationLayout";
 import JoinTeamInstructions from "@/components/teamRegistration/JoinTeamInstructions";
 import { Underline } from "@/utils/text-utils";
 
 export default function page() {
   return (
-    <div className="flex w-full flex-col justify-center gap-6 rounded-3xl bg-white p-4 text-3xl md:p-8">
-      <div className="flex flex-col items-center justify-center font-semibold md:items-start">
-        <h1>Next steps...</h1>
-        <Underline noTick>Create your team!</Underline>
+    <RegistrationLayout>
+      <div className="flex w-full flex-col justify-center gap-6 rounded-3xl bg-white p-4 text-3xl md:p-8">
+        <div className="flex flex-col items-center justify-center font-semibold md:items-start">
+          <h1>Next steps...</h1>
+          <Underline noTick>Create your team!</Underline>
+        </div>
+        <div className="flex flex-col gap-4 px-4">
+          <h1 className="text-2xl font-semibold">Looking for a team?</h1>
+          <JoinTeamInstructions />
+        </div>
+        <div className=" flex items-center justify-center">
+          <h2 className="max-w-lg text-center font-bold">
+            Ready to Register a new team or Join an existing team?
+          </h2>
+        </div>
+        <div className="flex flex-col items-center justify-between text-white lg:flex-row">
+          <Link href={"/register/team/remind"}>
+            <PurpleButton>Remind me later</PurpleButton>
+          </Link>
+          <Link href={"/register/team/ready"}>
+            <PurpleButton>Yes!</PurpleButton>
+          </Link>
+        </div>
       </div>
-      <div className="flex flex-col gap-4 px-4">
-        <h1 className="text-2xl font-semibold">Looking for a team?</h1>
-        <JoinTeamInstructions />
-      </div>
-      <div className=" flex items-center justify-center">
-        <h2 className="max-w-lg text-center font-bold">
-          Ready to Register a new team or Join an existing team?
-        </h2>
-      </div>
-      <div className="flex flex-col items-center justify-between text-white lg:flex-row">
-        <Link href={"/register/team/remind"}>
-          <PurpleButton>Remind me later</PurpleButton>
-        </Link>
-        <Link href={"/register/team/ready"}>
-          <PurpleButton>Yes!</PurpleButton>
-        </Link>
-      </div>
-    </div>
+    </RegistrationLayout>
   );
 }

src/components/teamRegistration/JoinTeamCode.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { type ChangeEvent, useRef, useState } from "react";
+import { type ChangeEvent, useEffect, useRef, useState } from "react";
 import type { Id } from "react-toastify";
 import { toast } from "react-toastify";
 
@@ -13,6 +13,22 @@ import PurpleButton from "../PurpleButton";
 import { useUser } from "../contexts/UserContext";
 
 export default function JoinTeamCode() {
+  useEffect(() => {
+    const handlePasteEvent = (e: ClipboardEvent) => {
+      const clipboardContentsText = e.clipboardData?.getData("text");
+      if (clipboardContentsText?.length === 4) {
+        e.preventDefault();
+        setTeamIDInput(clipboardContentsText.split(""));
+        const teamID = teamIDInput.join("");
+        toastRef.current = toast.loading("Joining team...");
+        joinTeamMutation.mutate(teamID);
+      }
+    };
+    window.addEventListener("paste", handlePasteEvent);
+    return () => {
+      window.removeEventListener("paste", handlePasteEvent);
+    };
+  }, []);
   const [teamIDInput, setTeamIDInput] = useState(Array(4).fill(""));
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
   const toastRef = useRef<Id>("");