Signup Popup and Bugs Removal (#182)

* added signup popup * added signup popup
Yash-Ainapure · Nov 10, 2024 · 90dcdd7 · 90dcdd7
1 parent f91a75a
commit 90dcdd7
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 185 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -83,7 +83,7 @@ function App() {
           path="/clubAdmin/*"
           element={<ClubAdmin setShowNavbar={setShowNavbar} />}
         />
-        <Route path="/registerClub" element={<ClubRegistration />} />
+        {/* <Route path="/registerClub" element={<ClubRegistration />} /> */}
         <Route path="/clubboard" element={<ClubsPage />} />
         <Route path="/about" element={<About />} />
         <Route path="/quiz" element={<QuizPage />} />

diff --git a/frontend/src/appComponents/ClubLogin.tsx b/frontend/src/appComponents/ClubLogin.tsx
@@ -5,6 +5,7 @@ import password_icon from "../assets/password_icon.png";
 import { useAuth } from "../context/AuthContext";
 import { Eye, EyeOff } from "lucide-react"
 import ClipLoader from "react-spinners/ClipLoader";
+import ClubRegistration from "./ClubRegistration";
 
 const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
   const [email, setEmail] = useState("");
@@ -15,6 +16,8 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
   const [hidden, setHidden] = useState(true);
   const navigate = useNavigate();
   const { login } = useAuth();
+  const [showRegistrationPage, setShowRegistrationPage] = useState(false);
+
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -48,16 +51,32 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
     }
   };
 
+  const handleOpenRegistration = () => {
+    setShowRegistrationPage(true);
+  };
+
+  const handleCloseRegistration = () => {
+    setShowRegistrationPage(false);
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 rounded-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-100 rounded-lg">
       <div className="bg-white rounded-lg px-4 relative border-2 py-8 md:w-1/2 flex flex-col justify-center gap-4 items-center ">
         <p
           className="cursor-pointer absolute p-2 rounded-md top-0 right-2 text-red-600 font-semibold"
           onClick={() => {
             onClose(false);
           }}
         >
-          X
+          <img
+            width="30"
+            height="30"
+            className="m-2 self-end cursor-pointer"
+            onClick={() => navigate("/")}
+            src="https://img.icons8.com/pastel-glyph/128/cancel--v1.png"
+            alt="cancel--v1"
+          />
+
         </p>
         <p className="text-2xl font-bold flex justify-center">
           {" "}
@@ -107,13 +126,13 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
           </button>
           <button
             className="text-black border border-black rounded text-lg font-semibold p-2 w-1/2"
-            onClick={() => {
-              onClose(false);
-              navigate("/registerClub");
-            }}
+            onClick={handleOpenRegistration}
           >
             Register
           </button>
+          {showRegistrationPage && (
+            <ClubRegistration onClose={handleCloseRegistration} />
+          )}
         </div>
       </div>
     </div>