add sign up page

th0th · Nov 7, 2024 · daef60c · daef60c
1 parent 33ab783
commit daef60c
Show file tree

Hide file tree

Showing 16 changed files with 475 additions and 160 deletions.
diff --git a/frontend/src/components/ActivityOverlay/ActivityOverlay.module.css b/frontend/src/components/ActivityOverlay/ActivityOverlay.module.css
@@ -16,6 +16,7 @@
       justify-content: center;
       overflow: hidden;
       position: absolute;
+      z-index: 10;
     }
 
     .spinner {
@@ -24,6 +25,7 @@
       position: absolute;
       top: 50%;
       transform: translate(-50%, -50%);
+      z-index: 11;
     }
   }
 }
diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx
@@ -5,6 +5,7 @@ import Error from "~/components/Error";
 import Header from "~/components/Header";
 import Home from "~/components/Home";
 import SignIn from "~/components/SignIn";
+import SignUp from "~/components/SignUp";
 import Sites from "~/components/Sites";
 
 export default function App() {
@@ -13,6 +14,7 @@ export default function App() {
       <Header />
       <Switch>
         <Route component={Sites} path="/sites" />
+        <Route component={SignUp} path="/sign-up" />
         <Route component={SignIn} path="/sign-in" />
         <Route component={Bootstrap} path="/bootstrap" />
         <Route component={Home} path="/" />

diff --git a/frontend/src/components/AuthenticationHeader/AuthenticationHeader.module.css b/frontend/src/components/AuthenticationHeader/AuthenticationHeader.module.css
@@ -0,0 +1,40 @@
+@import "~/styles/media.css";
+
+.authentication-header {
+  text-align: center;
+
+  .action-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 2.5rem;
+  }
+
+  .heading {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 3.5rem;
+    margin-bottom: 0.5rem;
+    transition: font-size 0.2s ease;
+  }
+
+  .summary {
+    color: rgba(var(--color-blue-700-rgb));
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .summary {
+      color: rgba(var(--color-blue-400-rgb));
+    }
+  }
+
+  @media (--min-sm) {
+    .heading {
+      font-size: 3rem;
+    }
+  }
+}
diff --git a/frontend/src/components/AuthenticationHeader/index.tsx b/frontend/src/components/AuthenticationHeader/index.tsx
@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { PropsWithoutRef, ReactNode, JSX } from "react";
+import styles from "./AuthenticationHeader.module.css";
+
+type AuthenticationHeaderProps = Overwrite<Omit<PropsWithoutRef<JSX.IntrinsicElements["div"]>, "children">, {
+  actions?: ReactNode,
+  description: ReactNode,
+  summary: ReactNode,
+  title: ReactNode
+}>
+
+export default function AuthenticationHeader({ actions, className, description, summary, title, ...props }: AuthenticationHeaderProps) {
+  return (
+    <div {...props} className={clsx(styles.authenticationHeader, className)}>
+      <p className={styles.summary}>{summary}</p>
+
+      <h1 className={styles.heading}>
+        {title}
+      </h1>
+
+      <p>
+        {description}
+      </p>
+
+      {actions ? (
+        <div className={styles.actionGroup}>
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/src/components/Bootstrap/Bootstrap.module.css b/frontend/src/components/Bootstrap/Bootstrap.module.css
@@ -1,35 +1,15 @@
-.title {
-  margin-bottom: 2rem;
-  text-align: center;
-
-  .summary {
-    color: rgba(var(--color-blue-700-rgb));
-    font-weight: 700;
-
-    @media (prefers-color-scheme: dark) {
-      color: rgba(var(--color-blue-400-rgb));
-    }
-  }
-
-  .heading {
-    font-size: 3rem;
-    font-weight: 700;
-    line-height: 3.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .button-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-    margin-block: 2rem;
-  }
+.button-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-block: 2rem;
 }
 
 .card {
   margin-inline: auto;
+  margin-top: 2rem;
   max-width: 32rem;
 }
 
diff --git a/frontend/src/components/Bootstrap/index.tsx b/frontend/src/components/Bootstrap/index.tsx
@@ -4,6 +4,7 @@ import { useErrorBoundary } from "react-error-boundary";
 import { useForm } from "react-hook-form";
 import { Link } from "wouter";
 import ActivityOverlay from "~/components/ActivityOverlay";
+import AuthenticationHeader from "~/components/AuthenticationHeader";
 import Layout from "~/components/Layout";
 import Title from "~/components/Title";
 import { api } from "~/lib/api";
@@ -52,7 +53,7 @@ export default function Bootstrap() {
         if (accessTokenResponse.ok) {
           localStorage.setItem("accessToken", accessTokenResponseJson.accessToken);
         } else {
-          /* TODO: Handle error */
+          showBoundary(accessTokenResponseJson);
         }
       } else {
         setErrors(setError, responseJson);
@@ -99,65 +100,53 @@ export default function Bootstrap() {
       ) : isAlreadyBootstrapped ? (
         <Layout verticallyCenter>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h2 className={styles.heading}>
-                Already bootstrapped!
-              </h2>
-
-              <p>
-                It looks like PoeticMetric has already been initialized.
-              </p>
-
-              <div className={styles.buttonGroup}>
-                <Link className="button button-lg button-blue" to="/">
-                  Return home
-                </Link>
-
-                <a className="button button-lg button-blue-ghost" href="mailto:[email protected]">
-                  Contact support
-                </a>
-              </div>
-            </div>
+            <AuthenticationHeader
+              actions={(
+                <>
+                  <Link className="button button-lg button-blue" to="/">
+                    Return home
+                  </Link>
+
+                  <a className="button button-lg button-blue-ghost" href="mailto:[email protected]">
+                    Contact support
+                  </a>
+                </>
+              )}
+              description="It looks like PoeticMetric has already been initialized."
+              summary="Bootstrap"
+              title="Already bootstrapped!"
+            />
           </div>
         </Layout>
       ) : isBootstrapped ? (
         <Layout verticallyCenter>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h2 className={styles.heading}>
-                You are all set!
-              </h2>
-
-              <p>
-                PoeticMetric has been successfully initialized.
-              </p>
-
-              <div className={styles.buttonGroup}>
+            <AuthenticationHeader
+              actions={(
                 <Link className="button button-lg button-blue" to="/sign-up">
                   Sign up to create dashboard
                 </Link>
-              </div>
-            </div>
+              )}
+              description="PoeticMetric has been successfully initialized."
+              summary="Bootstrap"
+              title="You are all set!"
+            />
           </div>
         </Layout>
       ) : (
         <Layout verticallyCenter>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h1 className={styles.heading}>
-                Welcome to
-                <br />
-                PoeticMetric!
-              </h1>
-
-              <p>Complete PoeticMetric installation to continue.</p>
-            </div>
+            <AuthenticationHeader
+              description="Complete PoeticMetric installation to continue."
+              summary="Bootstrap"
+              title={(
+                <>
+                  Welcome to
+                  <br />
+                  PoeticMetric!
+                </>
+              )}
+            />
 
             <div className={clsx("card", styles.card)}>
               <ActivityOverlay isActive={state.isSubmitInProgress}>
@@ -166,7 +155,12 @@ export default function Bootstrap() {
                     <div className="form-group">
                       <label className="form-label" htmlFor="input-user-name">Full name</label>
 
-                      <input className={clsx("input", errors.userName && "input-invalid")} id="input-user-name" required {...register("userName")} />
+                      <input
+                        className={clsx("input", errors.userName && "input-invalid")}
+                        id="input-user-name"
+                        required
+                        {...register("userName")}
+                      />
 
                       {!!errors.userName ? (<div>{errors.userName.message}</div>) : null}
                     </div>
@@ -188,7 +182,12 @@ export default function Bootstrap() {
                     <div className="form-group">
                       <label className="form-label">New password</label>
 
-                      <input className={clsx("input", errors.userPassword && "input-invalid")} required type="password" {...register("userPassword")} />
+                      <input
+                        className={clsx("input", errors.userPassword && "input-invalid")}
+                        required
+                        type="password"
+                        {...register("userPassword")}
+                      />
 
                       {!!errors.userPassword ? (<div className="form-error">{errors.userPassword.message}</div>) : null}
                     </div>
@@ -209,14 +208,23 @@ export default function Bootstrap() {
                     <div className="form-group">
                       <label className="form-label">Organization</label>
 
-                      <input className={clsx("input", errors.organizationName && "input-invalid")} required {...register("organizationName")} />
+                      <input
+                        className={clsx("input", errors.organizationName && "input-invalid")}
+                        required
+                        {...register("organizationName")}
+                      />
 
                       {!!errors.organizationName ? (<div className="form-error">{errors.organizationName.message}</div>) : null}
                     </div>
 
                     <div className="form-group">
                       <div className="form-group-inline">
-                        <input className={clsx(errors.createDemoSite && "input-invalid")} id="input-create-demo-site" type="checkbox" {...register("createDemoSite")} />
+                        <input
+                          className={clsx(errors.createDemoSite && "input-invalid")}
+                          id="input-create-demo-site"
+                          type="checkbox"
+                          {...register("createDemoSite")}
+                        />
 
                         <label htmlFor="input-create-demo-site">Create demo site</label>
                       </div>

diff --git a/frontend/src/components/Header/Header.module.css b/frontend/src/components/Header/Header.module.css
@@ -55,7 +55,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 0.5rem 0.25rem;
+  gap: 0.5rem;
   justify-content: flex-start;
 }
 

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -38,11 +38,11 @@ export default function Header() {
       </ul>
 
       <div className={styles.authContainer}>
-        <Link className={clsx("button", "button-blue")} to="/sign-in">
+        <Link className={clsx("button", "button-blue-ghost", "button-sm")} to="/sign-in">
           Sign in
         </Link>
 
-        <Link className={clsx("button", "button-blue")} to="/sign-up">
+        <Link className={clsx("button", "button-blue", "button-sm")} to="/sign-up">
           Sign up
         </Link>
       </div>

diff --git a/frontend/src/components/Home/index.tsx b/frontend/src/components/Home/index.tsx
@@ -6,7 +6,7 @@ export default function Home() {
     <>
       <Title>Homepage</Title>
 
-      <Layout verticallyCenter>
+      <Layout>
         <div className="container">
           <div>
             Something beautiful is about to happen here &lt;3

diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css
@@ -1,5 +1,5 @@
 .layout {
-  margin-block: 2rem;
+  padding-block: 2rem;
 
   &.vertically-center {
     align-items: center;

diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -7,6 +7,7 @@ type LayoutProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["main"]>, {
 }>
 
 export default function Layout({ children, className, verticallyCenter = false, ...props }: LayoutProps) {
+
   return (
     <main
       className={clsx(
-Original file line number
+Diff line change
@@ Expand Up @@
     }>
     export default function Layout({ children, className, verticallyCenter = false, ...props }: LayoutProps) {
       return (
         <main
           className={clsx(
@@ Expand Down @@