Authentication page layout (#442)

* set up with basic layout
hackforla · Sep 6, 2023 · 5191091 · 5191091
1 parent f01f0c4
commit 5191091
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 145 deletions.
diff --git a/backend/frontend/urls.py b/backend/frontend/urls.py
@@ -2,6 +2,14 @@
 
 from . import views
 
-url_paths = ["", "credits", "demo", "demo-tailwind", "qualifier/<int:page_number>"]
+url_paths = [
+ "",
+ "credits",
+ "demo",
+ "demo-tailwind",
+ "qualifier/<int:page_number>",
+ "login",
+ "signup",
+]
 
 urlpatterns = [path(url_path, views.index) for url_path in url_paths]
diff --git a/frontend/src/components/Navigation/HeaderNav.tsx b/frontend/src/components/Navigation/HeaderNav.tsx
@@ -2,10 +2,10 @@
 import React, { Fragment, useState } from "react";
 
 // Internal Imports
-import * as utility from "../Utility/utils";
 import { logoHorizontal, logoStacked } from "assets/images/images";
 import { IconHamburgerMenu } from "assets/images/images";
 import { Button } from "../Buttons/Button";
+import { iconArrowLeft } from "assets/images/images";
 
 interface menuObject {
  name?: string;
@@ -21,66 +21,85 @@ const menuItems: menuObject[] = [
  { name: "Projects", link: "https://www.hackforla.org/projects/" },
 ];
 
+/** HeaderNav component
+ * @dev changes from default to auth header depending on the path
+ * @dev can't use the Link component from react router because this component
+ * is rendered outside of the router context created in Router.tsx
+ */
+
 function HeaderNav() {
+ const [path] = useState(window.location.pathname);
+
  const Logo = () => {
  return (
- <div className="flex-center-y justify-left">
- <a href="/" rel="noopener noreferrer">
- <img
- className="logo-desktop"
- src={logoHorizontal}
- alt="Civic Tech Jobs - Home"
- />
- <img
- className="logo-mobile"
- src={logoStacked}
- alt="Civic Tech Jobs - Home"
- />
- </a>
- </div>
+ <a href="/" rel="noopener noreferrer">
+ <img
+ className="max-h-[24px] md:max-h-[32px]"
+ src={logoHorizontal}
+ alt="Civic Tech Jobs - Home"
+ />
+ </a>
  );
  };
 
- return (
- <Fragment>
- <header className="header-nav flex-center-y py-1 px-3">
- <div className="row header-nav-logo">
-  <Logo />
- </div>
-  <div className="row header-nav-menu justify-right align-center">
-  <nav
-  className={utility.combineClasses("hamburger-menu")}
-  aria-label="header-navigation"
-  >
-  {menuItems.map((item, index) => {
-  return (
-  <a
-  className="header-nav-link mr-4"
-  href={item.link}
-  rel="noopener noreferrer"
-  key={index}
-  >
-  {item.name}
-  </a>
-  );
-  })}
-  </nav>
+ const DefaultHeader = (
+ <header className="h-16 py-1 px-3 w-full flex items-center justify-between shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
+ <div>
+ <Logo />
+ </div>
+
+ <div className="flex items-center">
+ <nav
+ className="max-md:hidden flex items-center justify-center"
+ aria-label="header-navigation"
+ >
+ {menuItems.map((item, index) => {
+ return (
+ <a
+ className="hover:underline font-bold mr-4"
+ href={item.link}
+ rel="noopener noreferrer"
+ key={index}
+ >
+ {item.name}
+ </a>
+ );
+ })}
+ </nav>
 
- <Button href="/" color="primary" size="sm">
- Log In
- </Button>
- <button
- className="hamburger-icon ml-3"
- aria-expanded="false"
- aria-controls="menu"
- >
- <IconHamburgerMenu />
- </button>
- </div>
- </header>
- <div aria-hidden="true"></div>
- </Fragment>
+ <Button href="/login" color="primary" size="sm">
+ Log In
+ </Button>
+ <button
+ className="md:hidden ml-3"
+ aria-expanded="false"
+ aria-controls="menu"
+ >
+ <IconHamburgerMenu />
+ </button>
+ </div>
+ </header>
  );
+
+ const AuthHeader = (
+ <header className="h-16 py-1 px-3 w-full flex items-center justify-center shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
+ <div className="grow flex justify-center">
+ <a href="/">
+ <img src={iconArrowLeft} alt="Back to home arrow" className="w-5" />
+ </a>
+ </div>
+ <div>
+ <Logo />
+ </div>
+ <div className="grow"></div>
+ </header>
+ );
+
+ if (path === "/login" || path === "/signup") {
+ return AuthHeader;
+ } else {
+ return DefaultHeader;
+ }
 }
 
 export { HeaderNav };
diff --git a/frontend/src/components/Navigation/_HeaderNav.scss b/frontend/src/components/Navigation/_HeaderNav.scss
diff --git a/frontend/src/components/Navigation/_index.scss b/frontend/src/components/Navigation/_index.scss
@@ -1,3 +1,2 @@
-@forward "HeaderNav";
 @forward "FooterNav";
 @forward "ProgressBar";
diff --git a/frontend/src/pages/Authentication/page.tsx b/frontend/src/pages/Authentication/page.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import InputGroup from "../../tw-components/InputGroup";
+
+/** AuthenticationPage
+ * @dev handles both "/login" and "/signup" paths
+ * @dev shows the <LoginForm /> or <SignupForm /> depending on the path
+ */
+
+export default function AuthenticationPage() {
+ return (
+ <div className="flex flex-row" style={{ height: "calc(100vh - 64px)" }}>
+ <div className="w-full lg:basis-1/2 bg-tan">
+ <div className="lg:hidden flex flex-col justify-center items-center h-full">
+ <div className="w-10/12">
+ <div className="bg-white p-3 rounded-2xl">
+ <AuthForm />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="max-lg:hidden basis-1/2">
+ <div className="flex flex-col justify-center items-center h-full">
+ <div className="w-[439px]">
+ <AuthForm />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+function AuthForm() {
+ const { pathname } = useLocation();
+
+ return (
+ <>
+ {pathname === "/login" && <LoginForm />}
+ {pathname === "/signup" && <SignupForm />}
+ </>
+ );
+}
+
+function SignupForm() {
+ return (
+ <div>
+ <h3 className="mb-4 text-4xl">Sign up</h3>
+ <form>
+ <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+ <InputGroup label="First name" id="firstName" type="text" />
+ <InputGroup label="Last Name" id="lastName" type="text" />
+ </div>
+
+ <InputGroup label="Email" id="email" type="email" />
+ <InputGroup label="Password" id="password" type="password" />
+ <button className="font-bold w-full text-white py-[12px] rounded-3xl bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused">
+ Sign Up
+ </button>
+ </form>
+ <div className="text-center mt-4">
+ <p>
+ Already on Civic Tech Jobs?{" "}
+ <Link to="/login" className="text-blue-dark font-bold underline">
+ Log In
+ </Link>
+ </p>
+ </div>
+ </div>
+ );
+}
+
+function LoginForm() {
+ return (
+ <div>
+ <h3 className="mb-4 text-4xl">Log in</h3>
+ <form>
+ <InputGroup label="Email" id="email" type="email" />
+ <InputGroup label="Password" id="password" type="password" />
+ <div className="flex mb-3">
+ <input type="checkbox" className="mr-1" />
+ <p className="text-grey-dark">Keep me signed in</p>
+ </div>
+ <button className="font-bold w-full text-white py-[12px] rounded-3xl bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused">
+ Login
+ </button>
+ </form>
+ <div className="text-center mt-4">
+ <p>
+ New to Civic Tech Jobs?{" "}
+ <Link to="/signup" className="text-blue-dark font-bold underline">
+ Sign up
+ </Link>
+ </p>
+ </div>
+ </div>
+ );
+}
diff --git a/frontend/src/router/Router.tsx b/frontend/src/router/Router.tsx
@@ -9,19 +9,22 @@ import {
 // Internal Imports
 import { CreditsPage } from "pages/CreditsPage/CreditsPage";
 import { Demo } from "pages/Demo/Demo";
-import DemoTailwind  from "pages/Demo/DemoTailwind";
+import DemoTailwind from "pages/Demo/DemoTailwind";
 import { NotFoundPage } from "pages/NotFoundPage/NotFoundPage";
 import { LandingPage } from "pages/LandingPage/LandingPage";
 import {
  QualifierPage,
  QualifierContent,
  loader as qualifierLoader,
 } from "pages/QualifierPage/QualifierPage";
+import AuthenticationPage from "pages/Authentication/page";
 
 const router = createBrowserRouter(
  createRoutesFromElements(
  <Fragment>
  <Route path="/" element={<LandingPage />} />
+ <Route path="/login" element={<AuthenticationPage />} />
+ <Route path="/signup" element={<AuthenticationPage />} />
  <Route path="qualifier/" element={<QualifierPage />}>
  <Route
  path=":page/"