From 5b116442b4f141256866407993432e75246a0a8f Mon Sep 17 00:00:00 2001
From: Stefan Kairinos <stefan.kairinos@ocado.com>
Date: Fri, 19 Jul 2024 10:54:42 +0100
Subject: [PATCH] register page (#18)

* register page

* fix default date

* max is today

* new js package
---
 package.json                                  |   2 +-
 src/api/user.ts                               |   2 +-
 src/components/form/LastNameField.tsx         |  27 ++++
 .../{ => form}/NewPasswordField.tsx           |  19 ++-
 src/components/form/index.tsx                 |  11 ++
 src/components/index.tsx                      |  10 +-
 src/pages/register/BaseForm.tsx               |  33 ++++
 src/pages/register/IndyForm.tsx               | 146 ++++++++++++++++++
 src/pages/register/Register.tsx               |  53 +++++++
 src/pages/register/TeacherForm.tsx            |  89 +++++++++++
 src/pages/resetPassword/PasswordForm.tsx      |   4 +-
 src/router/routes/authentication.tsx          |   4 +-
 yarn.lock                                     |   6 +-
 13 files changed, 384 insertions(+), 22 deletions(-)
 create mode 100644 src/components/form/LastNameField.tsx
 rename src/components/{ => form}/NewPasswordField.tsx (81%)
 create mode 100644 src/components/form/index.tsx
 create mode 100644 src/pages/register/BaseForm.tsx
 create mode 100644 src/pages/register/IndyForm.tsx
 create mode 100644 src/pages/register/Register.tsx
 create mode 100644 src/pages/register/TeacherForm.tsx

diff --git a/package.json b/package.json
index ca7346d..715b6ce 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.1.2",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.1.3",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {
diff --git a/src/api/user.ts b/src/api/user.ts
index 9a946b5..a392a51 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -88,7 +88,7 @@ const userApi = api.injectEndpoints({
     createIndependentUser: build.mutation<
       CreateResult<User>,
       CreateArg<User, "first_name" | "last_name" | "email" | "password"> & {
-        date_of_birth: Date
+        date_of_birth: string
         add_to_newsletter: boolean
       }
     >({
diff --git a/src/components/form/LastNameField.tsx b/src/components/form/LastNameField.tsx
new file mode 100644
index 0000000..d93d313
--- /dev/null
+++ b/src/components/form/LastNameField.tsx
@@ -0,0 +1,27 @@
+import { type FC } from "react"
+import { string as YupString } from "yup"
+
+import { TextField, type TextFieldProps } from "codeforlife/components/form"
+
+export type LastNameFieldProps = Omit<
+  TextFieldProps,
+  "type" | "name" | "schema"
+> &
+  Partial<Pick<TextFieldProps, "name">>
+
+const LastNameField: FC<LastNameFieldProps> = ({
+  name = "last_name",
+  label = "Last name",
+  placeholder = "Enter your last name",
+  ...otherTextFieldProps
+}) => (
+  <TextField
+    schema={YupString().max(150)}
+    name={name}
+    label={label}
+    placeholder={placeholder}
+    {...otherTextFieldProps}
+  />
+)
+
+export default LastNameField
diff --git a/src/components/NewPasswordField.tsx b/src/components/form/NewPasswordField.tsx
similarity index 81%
rename from src/components/NewPasswordField.tsx
rename to src/components/form/NewPasswordField.tsx
index bc665d7..8ae46ce 100644
--- a/src/components/NewPasswordField.tsx
+++ b/src/components/form/NewPasswordField.tsx
@@ -1,20 +1,30 @@
 import { Button, Dialog, Typography } from "@mui/material"
 import { type FC, useState } from "react"
 
-import { PasswordField } from "codeforlife/components/form"
+import {
+  PasswordField,
+  type PasswordFieldProps,
+} from "codeforlife/components/form"
 
 import {
   indyPasswordSchema,
   pwnedPasswordSchema,
   studentPasswordSchema,
   teacherPasswordSchema,
-} from "../app/schemas"
+} from "../../app/schemas"
 
-export interface NewPasswordFieldProps {
+export interface NewPasswordFieldProps
+  extends Omit<
+    PasswordFieldProps,
+    "required" | "withRepeatField" | "schema" | "validateOptions"
+  > {
   userType: "teacher" | "independent" | "student"
 }
 
-const NewPasswordField: FC<NewPasswordFieldProps> = ({ userType }) => {
+const NewPasswordField: FC<NewPasswordFieldProps> = ({
+  userType,
+  ...passwordFieldProps
+}) => {
   const [pwnedPasswords, setPwnedPasswords] = useState<{
     online: boolean
     dialogOpen: boolean
@@ -46,6 +56,7 @@ const NewPasswordField: FC<NewPasswordFieldProps> = ({ userType }) => {
         withRepeatField
         schema={schema}
         validateOptions={{ abortEarly: false }}
+        {...passwordFieldProps}
       />
       <Dialog open={!pwnedPasswords.online && pwnedPasswords.dialogOpen}>
         <Typography variant="h5" className="no-override">
diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx
new file mode 100644
index 0000000..8f674ee
--- /dev/null
+++ b/src/components/form/index.tsx
@@ -0,0 +1,11 @@
+import LastNameField, { type LastNameFieldProps } from "./LastNameField"
+import NewPasswordField, {
+  type NewPasswordFieldProps,
+} from "./NewPasswordField"
+
+export {
+  LastNameField,
+  NewPasswordField,
+  type LastNameFieldProps,
+  type NewPasswordFieldProps,
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index ca19af8..8ca8746 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,13 +1,5 @@
-import NewPasswordField, {
-  type NewPasswordFieldProps,
-} from "./NewPasswordField"
 import OpenInEmailButtons, {
   type OpenInEmailButtonsProps,
 } from "./OpenInEmailButtons"
 
-export {
-  NewPasswordField,
-  OpenInEmailButtons,
-  type NewPasswordFieldProps,
-  type OpenInEmailButtonsProps,
-}
+export { OpenInEmailButtons, type OpenInEmailButtonsProps }
diff --git a/src/pages/register/BaseForm.tsx b/src/pages/register/BaseForm.tsx
new file mode 100644
index 0000000..205ee75
--- /dev/null
+++ b/src/pages/register/BaseForm.tsx
@@ -0,0 +1,33 @@
+import { FormHelperText, Typography } from "@mui/material"
+import { type FC } from "react"
+
+import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
+
+import { themeOptions } from "../../app/theme"
+
+export interface BaseFormProps extends ThemedBoxProps {
+  header: string
+  subheader: string
+  description: string
+}
+
+const BaseForm: FC<BaseFormProps> = ({
+  header,
+  subheader,
+  description,
+  userType,
+  children,
+}) => (
+  <ThemedBox options={themeOptions} userType={userType} height="100%" p={5}>
+    <Typography variant="h4" textAlign="center">
+      {header}
+    </Typography>
+    <Typography>{subheader}</Typography>
+    <FormHelperText sx={({ spacing }) => ({ marginBottom: spacing(3.5) })}>
+      {description}
+    </FormHelperText>
+    {children}
+  </ThemedBox>
+)
+
+export default BaseForm
diff --git a/src/pages/register/IndyForm.tsx b/src/pages/register/IndyForm.tsx
new file mode 100644
index 0000000..0aec760
--- /dev/null
+++ b/src/pages/register/IndyForm.tsx
@@ -0,0 +1,146 @@
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
+import { FormHelperText, Stack } from "@mui/material"
+import dayjs from "dayjs"
+import { type FC } from "react"
+import { useNavigate } from "react-router-dom"
+
+import * as forms from "codeforlife/components/form"
+import { Link } from "codeforlife/components/router"
+import { submitForm } from "codeforlife/utils/form"
+
+import { useCreateIndependentUserMutation } from "../../api/user"
+import { LastNameField, NewPasswordField } from "../../components/form"
+import { paths } from "../../router"
+import BaseForm from "./BaseForm"
+
+export interface IndyFormProps {}
+
+const IndyForm: FC<IndyFormProps> = () => {
+  const navigate = useNavigate()
+  const [createIndependentUser] = useCreateIndependentUserMutation()
+
+  const EmailApplicableAge = 13
+  const ReceiveUpdateAge = 18
+
+  return (
+    <BaseForm
+      header="Independent learner"
+      subheader="Register below if you are not part of a school or club and wish to set up a home learning account."
+      description="You will have access to learning resources for Rapid Router."
+      userType="independent"
+    >
+      <forms.Form
+        initialValues={{
+          date_of_birth: "",
+          first_name: "",
+          last_name: "",
+          email: "",
+          meets_criteria: false,
+          add_to_newsletter: false,
+          password: "",
+          password_repeat: "",
+        }}
+        onSubmit={submitForm(createIndependentUser, {
+          then: () => {
+            navigate(paths.register.emailVerification.userType.indy._)
+          },
+        })}
+      >
+        {form => {
+          const yearsOfAge = form.values.date_of_birth
+            ? Math.floor(
+                (new Date().getTime() -
+                  new Date(form.values.date_of_birth).getTime()) /
+                  (1000 * 60 * 60 * 24 * 365.25),
+              )
+            : undefined
+
+          return (
+            <>
+              <FormHelperText sx={{ fontWeight: "bold" }}>
+                Please enter your date of birth (we do not store this
+                information).
+              </FormHelperText>
+              <forms.DatePickerField
+                name="date_of_birth"
+                maxDate={dayjs()}
+                required
+              />
+              {yearsOfAge !== undefined && (
+                <>
+                  <forms.FirstNameField required />
+                  <LastNameField />
+                  <forms.EmailField
+                    required
+                    label={
+                      yearsOfAge >= EmailApplicableAge
+                        ? "Email address"
+                        : "Parent's email address"
+                    }
+                    placeholder={
+                      yearsOfAge >= EmailApplicableAge
+                        ? "Enter your email address"
+                        : "Enter your parent's email address"
+                    }
+                  />
+                  {yearsOfAge < EmailApplicableAge && (
+                    <FormHelperText style={{ fontWeight: "bold" }}>
+                      We will send your parent/guardian an email to ask them to
+                      activate the account for you. Once they&apos;ve done this
+                      you&apos;ll be able to log in using your name and
+                      password.
+                    </FormHelperText>
+                  )}
+                  {yearsOfAge >= EmailApplicableAge && (
+                    <forms.CheckboxField
+                      required
+                      name="meets_criteria"
+                      formControlLabelProps={{
+                        label: (
+                          <>
+                            I have read and understood the &nbsp;
+                            <Link
+                              to={paths.termsOfUse.tab.termsOfUse._}
+                              target="_blank"
+                            >
+                              Terms of use
+                            </Link>
+                            &nbsp;and the&nbsp;
+                            <Link
+                              to={paths.privacyNotice.tab.privacyNotice._}
+                              target="_blank"
+                            >
+                              Privacy notice
+                            </Link>
+                            .
+                          </>
+                        ),
+                      }}
+                    />
+                  )}
+                  {yearsOfAge >= ReceiveUpdateAge && (
+                    <forms.CheckboxField
+                      name="add_to_newsletter"
+                      formControlLabelProps={{
+                        label:
+                          "Sign up to receive updates about Code for Life games and teaching resources.",
+                      }}
+                    />
+                  )}
+                  <NewPasswordField userType="independent" />
+                  <Stack alignItems="end">
+                    <forms.SubmitButton endIcon={<ChevronRightIcon />}>
+                      Register
+                    </forms.SubmitButton>
+                  </Stack>
+                </>
+              )}
+            </>
+          )
+        }}
+      </forms.Form>
+    </BaseForm>
+  )
+}
+
+export default IndyForm
diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
new file mode 100644
index 0000000..60a6cec
--- /dev/null
+++ b/src/pages/register/Register.tsx
@@ -0,0 +1,53 @@
+import { Unstable_Grid2 as Grid } from "@mui/material"
+import { type FC, useEffect } from "react"
+
+import * as page from "codeforlife/components/page"
+import { useNavigate, useSessionMetadata } from "codeforlife/hooks"
+
+import { paths } from "../../router"
+import IndyForm from "./IndyForm"
+import TeacherForm from "./TeacherForm"
+
+export interface RegisterProps {}
+
+const Register: FC<RegisterProps> = () => {
+  const navigate = useNavigate()
+  const sessionMetadata = useSessionMetadata()
+
+  useEffect(() => {
+    if (sessionMetadata) {
+      navigate(
+        sessionMetadata.auth_factors.length
+          ? // Send user to login page if they need to finish authenticating.
+            {
+              teacher: paths.login.teacher._,
+              student: paths.login.student._,
+              indy: paths.login.indy._,
+            }[sessionMetadata.user_type]
+          : // Send user to dashboard page if they finished authenticating.
+            {
+              teacher: paths.teacher.dashboard.tab.school._,
+              student: paths.student.dashboard._,
+              indy: paths.indy.dashboard._,
+            }[sessionMetadata.user_type],
+      )
+    }
+  }, [sessionMetadata, navigate])
+
+  return (
+    <page.Page>
+      <page.Section>
+        <Grid container spacing={2}>
+          <Grid xs={12} md={6}>
+            <TeacherForm />
+          </Grid>
+          <Grid xs={12} md={6}>
+            <IndyForm />
+          </Grid>
+        </Grid>
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default Register
diff --git a/src/pages/register/TeacherForm.tsx b/src/pages/register/TeacherForm.tsx
new file mode 100644
index 0000000..60bfa80
--- /dev/null
+++ b/src/pages/register/TeacherForm.tsx
@@ -0,0 +1,89 @@
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
+import { Stack } from "@mui/material"
+import { type FC } from "react"
+
+import * as form from "codeforlife/components/form"
+import { Link } from "codeforlife/components/router"
+import { useNavigate } from "codeforlife/hooks"
+import { submitForm } from "codeforlife/utils/form"
+
+import { useCreateTeacherMutation } from "../../api/teacher"
+import { LastNameField, NewPasswordField } from "../../components/form"
+import { paths } from "../../router"
+import BaseForm from "./BaseForm"
+
+export interface TeacherFormProps {}
+
+const TeacherForm: FC<TeacherFormProps> = () => {
+  const navigate = useNavigate()
+  const [createTeacher] = useCreateTeacherMutation()
+
+  return (
+    <BaseForm
+      header="Teacher/Tutor"
+      subheader="Register below to create your school or club."
+      description="You will have access to teaching resources, progress tracking and lesson plans for both Rapid Router and Kurono."
+      userType="teacher"
+    >
+      <form.Form
+        initialValues={{
+          user: {
+            first_name: "",
+            last_name: "",
+            password: "",
+            password_repeat: "",
+            email: "",
+            add_to_newsletter: false,
+            meets_criteria: false,
+          },
+        }}
+        onSubmit={submitForm(createTeacher, {
+          then: () => {
+            navigate(paths.register.emailVerification.userType.teacher._)
+          },
+        })}
+      >
+        <form.FirstNameField name="user.first_name" required />
+        <LastNameField name="user.last_name" />
+        <form.EmailField name="user.email" required />
+        <form.CheckboxField
+          required
+          name="user.meets_criteria"
+          formControlLabelProps={{
+            label: (
+              <>
+                I am over 18 years old have read and understood the&nbsp;
+                <Link to={paths.termsOfUse.tab.termsOfUse._} target="_blank">
+                  Terms of use
+                </Link>
+                &nbsp;and the&nbsp;
+                <Link
+                  to={paths.privacyNotice.tab.privacyNotice._}
+                  target="_blank"
+                >
+                  Privacy notice
+                </Link>
+                .
+              </>
+            ),
+          }}
+        />
+        <form.CheckboxField
+          name="user.add_to_newsletter"
+          formControlLabelProps={{
+            label:
+              "Sign up to receive updates about Code for Life games and teaching resources.",
+          }}
+        />
+        <NewPasswordField name="user.password" userType="teacher" />
+        <Stack alignItems="end">
+          <form.SubmitButton endIcon={<ChevronRightIcon />}>
+            Register
+          </form.SubmitButton>
+        </Stack>
+      </form.Form>
+    </BaseForm>
+  )
+}
+
+export default TeacherForm
diff --git a/src/pages/resetPassword/PasswordForm.tsx b/src/pages/resetPassword/PasswordForm.tsx
index 9fbec4d..6cc9127 100644
--- a/src/pages/resetPassword/PasswordForm.tsx
+++ b/src/pages/resetPassword/PasswordForm.tsx
@@ -6,7 +6,7 @@ import * as form from "codeforlife/components/form"
 import { LinkButton } from "codeforlife/components/router"
 
 import { useResetPasswordMutation } from "../../api/user"
-import { NewPasswordField } from "../../components"
+import { NewPasswordField } from "../../components/form"
 import { paths } from "../../router"
 
 export interface PasswordFormProps {
@@ -46,7 +46,7 @@ const PasswordForm: FC<PasswordFormProps> = ({ userType, userId, token }) => {
       <form.Form
         initialValues={{
           password: "",
-          repeat_password: "",
+          password_repeat: "",
         }}
         onSubmit={({ password }) =>
           resetPassword([userId, { token, password }])
diff --git a/src/router/routes/authentication.tsx b/src/router/routes/authentication.tsx
index e38fe3d..2188206 100644
--- a/src/router/routes/authentication.tsx
+++ b/src/router/routes/authentication.tsx
@@ -2,7 +2,7 @@ import { Route } from "react-router-dom"
 
 import EmailVerification from "../../pages/emailVerification/EmailVerification"
 import Login from "../../pages/login/Login"
-// import Register from '../../pages/register/Register'
+import Register from "../../pages/register/Register"
 import ResetPassword from "../../pages/resetPassword/ResetPassword"
 import paths from "../paths"
 
@@ -34,7 +34,7 @@ const authentication = (
       element={<EmailVerification />}
     />
     <Route path={paths.resetPassword._} element={<ResetPassword />} />
-    {/* <Route path={paths.register._} element={<Register />} /> */}
+    <Route path={paths.register._} element={<Register />} />
   </>
 )
 
diff --git a/yarn.lock b/yarn.lock
index 2a3d186..0c68a38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2650,9 +2650,9 @@ clsx@^2.1.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.1.2":
-  version "2.1.2"
-  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/c8d3ae8eb8dee688276fe78a648be321dfdb23d9"
+"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.1.3":
+  version "2.1.3"
+  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/f4b88435300bc17a6f4f7555f537150a20d7e779"
   dependencies:
     "@emotion/react" "^11.10.6"
     "@emotion/styled" "^11.10.6"