feat: add join team confirmation modal

src/components/teamFormation/joinTeam.jsx

@@ -1,11 +1,14 @@
 import TextInput from "~/components/forms/textInput.jsx";
 import { useState } from "react";
+import ConfirmationModal from "~/components/confirmationModal.jsx";
 
 export default function JoinTeam() {
   const [responseErrors, setResponseErrors] = useState("");
+  const [showModal, setShowModal] = useState(false);
 
   async function submit(e) {
     e.preventDefault();
+    closeModal();
     const formData = new FormData(e.target);
     const response = await fetch("/api/teams/join", {
       method: "POST",
@@ -19,6 +22,13 @@ export default function JoinTeam() {
       window.location.href = "/";
     }
   }
+  function openModal() {
+    setShowModal(true);
+  }
+
+  function closeModal() {
+    setShowModal(false);
+  }
 
   return (
     <div className="mx-auto max-w-7xl px-4 sm:px-0 pb-24">
@@ -84,9 +94,19 @@ export default function JoinTeam() {
               </div>
             </div>
           )}
-          <button className="text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">
+          <button
+            className="text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+            type="button"
+            onClick={openModal}
+          >
             Join
           </button>
+          {showModal &&
+            <ConfirmationModal
+              placeHolder="Are you sure you want to create this team?"
+              closeModal={closeModal}
+            />
+          }
         </form>
       </div>
     </div>

src/pages/api/teams/join.ts

@@ -88,7 +88,6 @@ const validateForms = async (formData: FormData, errors: String[]) => {
     valid = false;
   }
 
-  console.log(team_members)
   if (team_members && team_members.length >= 5) {
     errors.push("The team is already full. Try joining or creating another team.");
     valid = false;

src/pages/api/utils/mailer.ts

@@ -27,7 +27,6 @@ const sendEmail = async (
     ],
   };
 
-  console.log("Sending email:", message);
   return new Promise((resolve, reject) => {
     client.send(message, function(err, message) {
       if (err) {