Break out sign up into dedicated component

tuning-fork · Apr 21, 2023 · 77cb7a7 · 77cb7a7
1 parent 59e1c9d
commit 77cb7a7
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 260 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,6 +14,7 @@ import TeamPage from "./pages/Team/TeamPage";
 import TeamMemberPage from "./pages/TeamMember/TeamMemberPage";
 import ContactPage from "./pages/Contact/ContactPage";
 import FeaturesPage from "./pages/Features/FeaturesPage";
+import SignUpPage from "./pages/SignUp/SignUpPage";
 
 export default function App() {
   return (
@@ -29,6 +30,9 @@ export default function App() {
             <Route path="/team/:memberId" component={TeamMemberPage} />
             <Route path="/features" component={FeaturesPage} />
             <Route path="/contact" component={ContactPage} />
+            <Route path="/signup" component={SignUpPage} />
+            {/* <Route path="/login" component={ContactPage} /> */}
+            {/* <Route path="/forgot_password" component={ContactPage} /> */}
             <Route path="/reset_password" component={ResetPassword} />
             <Route path="/accept_invite" component={AcceptInvitationPage} />
             <PrivateRoute

diff --git a/src/Components/Layouts/SplashpageLayout/SplashpageLayout.jsx b/src/Components/Layouts/SplashpageLayout/SplashpageLayout.jsx
@@ -1,109 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import NavbarSplashpage from "../../design/Navbar/NavbarSplashpage/NavbarSplashpage";
-import "./SplashpageLayout.css";
 import splashpageBackgroundImage from "./splashpage_background_image7.png";
-import Modal from "../../design/Modal/Modal";
-import SignUp from "../../SignUp/SignUp";
-import Login from "../../Login/Login";
-import ForgotPassword from "../../Login/ForgotPassword/ForgotPassword";
 import Footer from "../../design/Footer/Footer";
-import clsx from "clsx";
+import "./SplashpageLayout.css";
 
 export default function SplashpageLayout() {
-  const [showSplashPageModal, setShowSplashPageModal] = useState(false);
-  const [modalLabel, setModalLabel] = useState("Loading");
-  const [modalContents, setModalContents] = useState(<></>);
-  const [panelView, setPanelView] = useState("");
-  const [scrollbarWidth, setScrollbarWidth] = useState(15);
-
-  useEffect(() => {
-    const currentWidth = calculateScrollbarWidth();
-    if (!panelView && currentWidth > 0) {
-      setScrollbarWidth(calculateScrollbarWidth());
-    }
-  }, [panelView]);
-
-  const calculateScrollbarWidth = () =>
-    window.innerWidth - document.documentElement.offsetWidth;
-
-  const handleCloseSplashPageModal = () => setShowSplashPageModal(false);
-  const handleSwitchSplashPageModal = (modalLabelInput) => {
-    setModalLabel(modalLabelInput);
-    if (modalLabelInput === "Sign Up") {
-      setModalContents(
-        <div>
-          <div>
-            <SignUp
-              onCancel={handleCloseSplashPageModal}
-              toggleModalContents={handleSwitchSplashPageModal}
-            />
-          </div>
-        </div>
-      );
-      setShowSplashPageModal(true);
-    } else if (modalLabelInput === "Log In") {
-      setModalContents(
-        <div>
-          <div>
-            <Login
-              onSubmit={handleCloseSplashPageModal}
-              onCancel={handleCloseSplashPageModal}
-              toggleModalContents={handleSwitchSplashPageModal}
-              formType="standard"
-            />
-          </div>
-        </div>
-      );
-    } else if (modalLabelInput === "Forgot Password") {
-      setModalContents(
-        <div>
-          <div>
-            <ForgotPassword
-              onSubmit={handleCloseSplashPageModal}
-              onCancel={handleCloseSplashPageModal}
-              toggleModalContents={handleSwitchSplashPageModal}
-            />
-          </div>
-        </div>
-      );
-    }
-    setShowSplashPageModal(true);
-  };
-
   return (
     <div>
-      <div
-        className={clsx(
-          "splashpage-layout__navbar-container",
-          panelView &&
-            `splashpage-layout__scrollbar_padding_${scrollbarWidth.toString()}`
-        )}
-      >
-        <NavbarSplashpage
-          toggleModalContents={handleSwitchSplashPageModal}
-          togglePanelContents={setPanelView}
-        />
+      <div className="splashpage-layout__navbar-container">
+        <NavbarSplashpage />
       </div>
-      <main
-        className={clsx(
-          "splashpage-layout",
-          panelView && "splashpage-layout__noscroll"
-        )}
-      >
+      <main className="splashpage-layout">
         <div className="splashpage-layout__content">
           <img
             src={splashpageBackgroundImage}
             alt="Splashpage graphics"
             className="splashpage-layout__background-image"
           />
-          <Modal
-            hide={handleCloseSplashPageModal}
-            show={showSplashPageModal}
-            heading={modalLabel}
-            splashpageForm={true}
-          >
-            {modalContents}
-          </Modal>
         </div>
         <Footer />
       </main>

diff --git a/src/Components/Organizations/OrganizationNew.jsx b/src/Components/Organizations/OrganizationNew.jsx
@@ -16,6 +16,7 @@ function OrganizationNew() {
   return (
     <Container as="section" className="organization-new">
       <h1>Create Organization</h1>
+      {/* TODO: Add paragraph here! */}
       <OrganizationForm onSubmit={createOrganization} onCancel={handleCancel} />
     </Container>
   );

diff --git a/src/Components/SignUp/SignUp.css b/src/Components/SignUp/SignUp.css
diff --git a/src/Components/SignUp/SignUp.jsx b/src/Components/SignUp/SignUp.jsx
diff --git a/src/Components/SignUp/SignUpForm.jsx b/src/Components/SignUp/SignUpForm.jsx
diff --git a/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx b/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx
@@ -59,29 +59,23 @@ export default function NavbarSplashpage(props) {
             alt="Custom button"
             className="navbar__image"
           />
-          <Button
-            variant="none"
-            onClick={() => props.toggleModalContents("Log In")}
-            className="navbar__tab"
-          >
-            <div className={clsx("navbar__tab-text", "tab-login")}>Log In</div>
-          </Button>
+          <Link to="/login" className="navbar__tab">
+            <span className={clsx("navbar__tab-text", "tab-login")}>
+              Log In
+            </span>
+          </Link>
         </div>
         <div className="navbar__tab-container">
           <img
             src={customSignUpButton}
             alt="Custom button"
             className="navbar__image"
           />
-          <Button
-            variant="none"
-            onClick={() => props.toggleModalContents("Sign Up")}
-            className="navbar__button"
-          >
-            <div className={clsx("navbar__tab-text", "tab-signup")}>
+          <Link to="/signup" className="navbar__tab">
+            <span className={clsx("navbar__tab-text", "tab-signup")}>
               Sign Up
-            </div>
-          </Button>
+            </span>
+          </Link>
         </div>
       </div>
     </div>

diff --git a/src/Components/SignUp/SignUpForm.css → src/pages/SignUp/SignUpForm/SignUpForm.css b/src/Components/SignUp/SignUpForm.css → src/pages/SignUp/SignUpForm/SignUpForm.css