From 77cb7a7fa1c17632bf0eeef01df4f46993cdf8a2 Mon Sep 17 00:00:00 2001
From: Cain Watson <23223956+cainwatson@users.noreply.github.com>
Date: Thu, 20 Apr 2023 19:07:01 -0500
Subject: [PATCH] Break out sign up into dedicated component

---
 src/App.jsx                                   |   4 +
 .../SplashpageLayout/SplashpageLayout.jsx     |  97 +----------------
 .../Organizations/OrganizationNew.jsx         |   1 +
 src/Components/SignUp/SignUp.css              |   8 --
 src/Components/SignUp/SignUp.jsx              |  43 --------
 src/Components/SignUp/SignUpForm.jsx          | 102 ------------------
 .../NavbarSplashpage/NavbarSplashpage.jsx     |  24 ++---
 .../SignUp/SignUpForm}/SignUpForm.css         |   0
 src/pages/SignUp/SignUpForm/SignUpForm.jsx    |  89 +++++++++++++++
 src/pages/SignUp/SignUpPage.css               |  27 +++++
 src/pages/SignUp/SignUpPage.jsx               |  47 ++++++++
 11 files changed, 182 insertions(+), 260 deletions(-)
 delete mode 100644 src/Components/SignUp/SignUp.css
 delete mode 100644 src/Components/SignUp/SignUp.jsx
 delete mode 100644 src/Components/SignUp/SignUpForm.jsx
 rename src/{Components/SignUp => pages/SignUp/SignUpForm}/SignUpForm.css (100%)
 create mode 100644 src/pages/SignUp/SignUpForm/SignUpForm.jsx
 create mode 100644 src/pages/SignUp/SignUpPage.css
 create mode 100644 src/pages/SignUp/SignUpPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index abbd17fd..6de0fead 100644
--- 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
index 7fd05c05..df511500 100644
--- 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
index 90d4857b..b3d3324a 100644
--- 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
deleted file mode 100644
index f119ef60..00000000
--- a/src/Components/SignUp/SignUp.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.signup {
-  display: flex;
-  width: 100%;
-}
-
-.signup__header {
-  margin: 3rem 0;
-}
diff --git a/src/Components/SignUp/SignUp.jsx b/src/Components/SignUp/SignUp.jsx
deleted file mode 100644
index 0a2e76cd..00000000
--- a/src/Components/SignUp/SignUp.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import { useHistory } from "react-router-dom";
-import Container from "../design/Container/Container";
-import { createUser } from "../../Services/Auth/SignupService";
-import SignUpForm from "./SignUpForm";
-import "./SignUp.css";
-
-export default function SignUp(props) {
-  const history = useHistory();
-
-  const handleCancel = (event) => {
-    event.preventDefault();
-    props.onCancel();
-    history.push(`/splashpage`);
-  };
-
-  const handleSubmit = (newUserFields) => {
-    createUser(newUserFields)
-      .then((createdUser) => {
-        alert("user created!");
-        console.log(createdUser);
-        props.toggleModalContents("Log In");
-      })
-      .catch((error) => {
-        alert(
-          error.response.data.errors[0] ||
-            "Something went wrong while creating this user. Please try again later."
-        );
-      });
-  };
-
-  return (
-    <div className="signup">
-      <Container as="section" centered>
-        <SignUpForm
-          onSubmit={handleSubmit}
-          onCancel={handleCancel}
-          toggleModalContents={props.toggleModalContents}
-        />
-      </Container>
-    </div>
-  );
-}
diff --git a/src/Components/SignUp/SignUpForm.jsx b/src/Components/SignUp/SignUpForm.jsx
deleted file mode 100644
index 16121038..00000000
--- a/src/Components/SignUp/SignUpForm.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useState } from "react";
-import Button from "../design/Button/Button";
-import TextBox from "../design/TextBox/TextBox";
-import "./SignUpForm.css";
-
-export default function SignUpForm(props) {
-  const [newUserFields, setNewUserFields] = useState({});
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    setNewUserFields({ ...newUserFields, active: true });
-    props.onSubmit(newUserFields);
-  };
-
-  return (
-    <>
-      <form onSubmit={handleSubmit} className="signup-form">
-        <TextBox
-          type="text"
-          name="first_name"
-          labelText="First Name"
-          value={newUserFields.first_name}
-          onChange={(event) =>
-            setNewUserFields({
-              ...newUserFields,
-              first_name: event.target.value,
-            })
-          }
-          required
-        />
-        <TextBox
-          type="text"
-          name="last_name"
-          labelText="Last Name"
-          value={newUserFields.last_name}
-          onChange={(event) =>
-            setNewUserFields({
-              ...newUserFields,
-              last_name: event.target.value,
-            })
-          }
-          required
-        />
-        <TextBox
-          type="email"
-          name="email"
-          labelText="Email"
-          value={newUserFields.email}
-          onChange={(event) =>
-            setNewUserFields({
-              ...newUserFields,
-              email: event.target.value,
-            })
-          }
-          required
-        />
-        <TextBox
-          type="password"
-          name="password"
-          labelText="Password"
-          value={newUserFields.password}
-          onChange={(event) =>
-            setNewUserFields({ ...newUserFields, password: event.target.value })
-          }
-          required
-        />
-        <TextBox
-          type="password"
-          name="password"
-          labelText="Confirm Password"
-          value={newUserFields.password_confirmation}
-          onChange={(event) =>
-            setNewUserFields({
-              ...newUserFields,
-              password_confirmation: event.target.value,
-            })
-          }
-          required
-        />
-        <div className="signup-form__actions">
-          <p>
-            Already have an account?
-            <Button
-              className="signup-form__login-toggle"
-              variant="none"
-              onClick={() => props.toggleModalContents("Log In")}
-            >
-              Log In
-            </Button>
-          </p>
-          <Button
-            variant="none"
-            type="submit"
-            className="signup-form__signup-submit-button"
-          >
-            Create Account
-          </Button>
-        </div>
-      </form>
-    </>
-  );
-}
diff --git a/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx b/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx
index 56df3eeb..c2080107 100644
--- a/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx
+++ b/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx
@@ -59,13 +59,11 @@ 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
@@ -73,15 +71,11 @@ export default function NavbarSplashpage(props) {
             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 b/src/pages/SignUp/SignUpForm/SignUpForm.css
similarity index 100%
rename from src/Components/SignUp/SignUpForm.css
rename to src/pages/SignUp/SignUpForm/SignUpForm.css
diff --git a/src/pages/SignUp/SignUpForm/SignUpForm.jsx b/src/pages/SignUp/SignUpForm/SignUpForm.jsx
new file mode 100644
index 00000000..f8aa52a2
--- /dev/null
+++ b/src/pages/SignUp/SignUpForm/SignUpForm.jsx
@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import Button from "../../../Components/design/Button/Button";
+import TextBox from "../../../Components/design/TextBox/TextBox";
+import "./SignUpForm.css";
+
+export default function SignUpForm(props) {
+  const [newUserFields, setNewUserFields] = useState({});
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    props.onSubmit(newUserFields);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="signup-form">
+      <TextBox
+        type="text"
+        name="first_name"
+        labelText="First Name"
+        value={newUserFields.first_name}
+        onChange={(event) =>
+          setNewUserFields({
+            ...newUserFields,
+            first_name: event.target.value,
+          })
+        }
+        required
+      />
+      <TextBox
+        type="text"
+        name="last_name"
+        labelText="Last Name"
+        value={newUserFields.last_name}
+        onChange={(event) =>
+          setNewUserFields({
+            ...newUserFields,
+            last_name: event.target.value,
+          })
+        }
+        required
+      />
+      <TextBox
+        type="email"
+        name="email"
+        labelText="Email"
+        value={newUserFields.email}
+        onChange={(event) =>
+          setNewUserFields({
+            ...newUserFields,
+            email: event.target.value,
+          })
+        }
+        required
+      />
+      <TextBox
+        type="password"
+        name="password"
+        labelText="Password"
+        value={newUserFields.password}
+        onChange={(event) =>
+          setNewUserFields({ ...newUserFields, password: event.target.value })
+        }
+        required
+      />
+      <TextBox
+        type="password"
+        name="password"
+        labelText="Confirm Password"
+        value={newUserFields.password_confirmation}
+        onChange={(event) =>
+          setNewUserFields({
+            ...newUserFields,
+            password_confirmation: event.target.value,
+          })
+        }
+        required
+      />
+      <div className="signup-form__actions">
+        <Button
+          variant="none"
+          type="submit"
+          className="signup-form__signup-submit-button"
+        >
+          Create Account
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/pages/SignUp/SignUpPage.css b/src/pages/SignUp/SignUpPage.css
new file mode 100644
index 00000000..b9304d8d
--- /dev/null
+++ b/src/pages/SignUp/SignUpPage.css
@@ -0,0 +1,27 @@
+.sign-up-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.sign-up-page__content {
+  flex: 1;
+  padding: 4rem;
+}
+
+.sign-up-page__header {
+  margin-bottom: 2rem;
+  color: inherit;
+}
+
+.sign-up-page__text {
+  margin-bottom: 2rem;
+}
+
+.sign-up__login {
+  text-align: center;
+}
+.sign-up__login > a {
+  color: var(--body-text);
+  font-weight: var(--font-weight-bold);
+}
diff --git a/src/pages/SignUp/SignUpPage.jsx b/src/pages/SignUp/SignUpPage.jsx
new file mode 100644
index 00000000..604f61a1
--- /dev/null
+++ b/src/pages/SignUp/SignUpPage.jsx
@@ -0,0 +1,47 @@
+import React, { useContext } from "react";
+import { useHistory, Link } from "react-router-dom";
+import Footer from "../../Components/design/Footer/Footer";
+import NavbarSplashpage from "../../Components/design/Navbar/NavbarSplashpage/NavbarSplashpage";
+import SignUpForm from "./SignUpForm/SignUpForm";
+import { createUser } from "../../Services/Auth/SignupService";
+import "./SignUpPage.css";
+import { useCurrentUser } from "../../Contexts/currentUserContext";
+
+export default function SignUpPage() {
+  const history = useHistory();
+  const { login } = useCurrentUser();
+
+  // TODO: maybe use react-query here
+  const handleSubmit = (newUserFields) => {
+    createUser(newUserFields)
+      .then(() => login(newUserFields.email, newUserFields.password))
+      .then(() => history.push(`/organizations`))
+      .catch((error) => {
+        alert(
+          error.response.data.errors[0] ||
+            "Something went wrong while creating this user. Please try again later."
+        );
+      });
+  };
+
+  return (
+    <div className="sign-up-page">
+      <NavbarSplashpage />
+      <main className="sign-up-page__content">
+        <section>
+          <h1 className="sign-up-page__header">Sign Up</h1>
+          <p className="sign-up-page__text">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu
+            odio ut sem nulla pharetra diam sit amet.
+          </p>
+        </section>
+        <SignUpForm onSubmit={handleSubmit} />
+        <p className="sign-up__login">
+          Already have an account? <Link to="/login">Log In</Link>
+        </p>
+      </main>
+      <Footer />
+    </div>
+  );
+}