quick save

src/pages/resetPassword/EmailForm.tsx

@@ -0,0 +1,57 @@
+import { Send as SendIcon } from "@mui/icons-material"
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+import * as form from "codeforlife/components/form"
+import { LinkButton } from "codeforlife/components/router"
+
+import { useLazyRequestPasswordResetQuery } from "../../api/user"
+import { paths } from "../../router"
+
+export interface EmailFormProps {}
+
+const EmailForm: FC<EmailFormProps> = () => {
+  const [requestPasswordReset, result] = useLazyRequestPasswordResetQuery()
+
+  return result.isSuccess ? (
+    <Stack gap={1} alignItems="center">
+      <Typography textAlign="center" variant="h4">
+        Thank you
+      </Typography>
+      <SendIcon color="white" sx={{ fontSize: "100px", marginY: 5 }} />
+      <Typography>
+        If you have entered a valid email address, you will receive a link
+        enabling you to reset your password.
+      </Typography>
+      <LinkButton to={paths._}>Back to homepage</LinkButton>
+    </Stack>
+  ) : (
+    <Stack gap={1}>
+      <Typography textAlign="center" variant="h4">
+        Reset password
+      </Typography>
+      <Typography textAlign="center" variant="h5">
+        Please enter your email address
+      </Typography>
+      <Typography>
+        We will send an email with a link to reset your password.
+      </Typography>
+      <form.Form
+        initialValues={{ email: "" }}
+        onSubmit={values => {
+          requestPasswordReset(values)
+        }}
+      >
+        <form.EmailField required />
+        <Stack direction="row" gap={5} justifyContent="center" paddingY={3}>
+          <LinkButton variant="outlined" to={-1}>
+            Cancel
+          </LinkButton>
+          <form.SubmitButton>Reset password</form.SubmitButton>
+        </Stack>
+      </form.Form>
+    </Stack>
+  )
+}
+
+export default EmailForm

src/pages/resetPassword/PasswordForm.tsx

@@ -0,0 +1,67 @@
+import { CheckCircleOutline as CheckCircleOutlineIcon } from "@mui/icons-material"
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+import * as form from "codeforlife/components/form"
+import { LinkButton } from "codeforlife/components/router"
+
+import { useResetPasswordMutation } from "../../api/user"
+// import CflPasswordFields from "../../features/cflPasswordFields/CflPasswordFields"
+import { paths } from "../../router"
+
+export interface PasswordFormProps {
+  userType: "teacher" | "independent"
+  userId: number
+  token: string
+}
+
+const PasswordForm: FC<PasswordFormProps> = ({ userType, userId, token }) => {
+  const [resetPassword, result] = useResetPasswordMutation()
+
+  return result.isSuccess ? (
+    <Stack gap={1} alignItems="center">
+      <Typography textAlign="center" variant="h4">
+        Your password has been reset
+      </Typography>
+      <CheckCircleOutlineIcon
+        color="white"
+        sx={{ fontSize: "100px", marginY: 5 }}
+      />
+      <Typography>Please log in.</Typography>
+      <LinkButton
+        to={userType === "teacher" ? paths.login.teacher._ : paths.login.indy._}
+      >
+        OK
+      </LinkButton>
+    </Stack>
+  ) : (
+    <Stack gap={1}>
+      <Typography textAlign="center" variant="h4">
+        Password Reset
+      </Typography>
+      <Typography>
+        Please enter a new password and confirm it in the box below to reset
+        your account’s password.
+      </Typography>
+      <form.Form
+        initialValues={{
+          password: "",
+          repeat_password: "",
+        }}
+        onSubmit={({ password }) =>
+          resetPassword([userId, { token, password }])
+        }
+      >
+        {/* <CflPasswordFields userType={userType} /> */}
+        <Stack mt={3} direction="row" gap={5} justifyContent="center">
+          <LinkButton variant="outlined" to={paths._}>
+            Cancel
+          </LinkButton>
+          <form.SubmitButton>Reset password</form.SubmitButton>
+        </Stack>
+      </form.Form>
+    </Stack>
+  )
+}
+
+export default PasswordForm

src/pages/resetPassword/ResetPassword.tsx

@@ -0,0 +1,52 @@
+import { type FC, useEffect } from "react"
+import * as yup from "yup"
+
+import * as page from "codeforlife/components/page"
+import { useNavigate, useParams } from "codeforlife/hooks"
+import { ThemedBox } from "codeforlife/theme"
+
+import { themeOptions } from "../../app/theme"
+import { paths } from "../../router"
+import EmailForm from "./EmailForm"
+import PasswordForm from "./PasswordForm"
+
+export interface ResetPasswordProps {}
+
+const ResetPassword: FC<ResetPasswordProps> = () => {
+  const navigate = useNavigate()
+
+  const params = useParams({
+    userType: yup
+      .string()
+      .oneOf(["teacher", "independent"] as const)
+      .required(),
+    userId: yup.number(),
+    token: yup.string(),
+  })
+
+  useEffect(() => {
+    if (!params) navigate(paths.error.type.pageNotFound._)
+  }, [navigate, params])
+
+  if (!params) return <></>
+
+  return (
+    <page.Page>
+      <page.Section maxWidth="md">
+        <ThemedBox withShapes options={themeOptions} userType={params.userType}>
+          {params.userId && params.token ? (
+            <PasswordForm
+              userType={params.userType}
+              userId={params.userId}
+              token={params.token}
+            />
+          ) : (
+            <EmailForm />
+          )}
+        </ThemedBox>
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default ResetPassword

src/router/paths.ts

@@ -12,11 +12,9 @@ const paths = _("", {
     }),
     indy: _("/independent"),
   }),
-  resetPassword: _("/reset-password", {
-    userType: _("/:userType", {
-      teacher: _({ userType: "teacher" }),
-      indy: _({ userType: "independent" }),
-    }),
+  resetPassword: _("/reset-password/:userType/:userId?/:token?", {
+    teacher: _({ userType: "teacher" }),
+    indy: _({ userType: "independent" }),
   }),
   teacher: _("/teacher", {
     onboarding: _("/onboarding"),

src/router/routes/authentication.tsx

@@ -3,7 +3,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 ResetPassword from '../../pages/resetPassword/ResetPassword'
+import ResetPassword from "../../pages/resetPassword/ResetPassword"
 import paths from "../paths"
 
 const authentication = (
@@ -33,7 +33,7 @@ const authentication = (
       path={paths.register.emailVerification.userType._}
       element={<EmailVerification />}
     />
-    {/* <Route path={paths.resetPassword.userType._} element={<ResetPassword />} /> */}
+    <Route path={paths.resetPassword._} element={<ResetPassword />} />
     {/* <Route path={paths.register._} element={<Register />} /> */}
   </>
 )