otp form

src/pages/login/teacherForms/Otp.tsx

@@ -1,8 +1,9 @@
 import { Stack } from "@mui/material"
-import type { FC } from "react"
+import { type FC } from "react"
 
 import * as form from "codeforlife/components/form"
-import { useNavigate } from "codeforlife/hooks"
+import { LinkButton } from "codeforlife/components/router"
+import { useNavigate, useSessionRequired } from "codeforlife/hooks"
 import { submitForm } from "codeforlife/utils/form"
 
 import { useLoginWithOtpMutation } from "../../../api/sso"
@@ -15,22 +16,38 @@ const Otp: FC<OtpProps> = () => {
   const [loginWithOtp] = useLoginWithOtpMutation()
   const navigate = useNavigate()
 
-  return (
-    <BaseForm
-      themedBoxProps={{ userType: "teacher" }}
-      header="text"
-      subheader="text"
-      initialValues={{ otp: 0 }}
-      onSubmit={submitForm(loginWithOtp, {
-        then: () => {
-          navigate(paths.teacher.dashboard.school._)
-        },
-      })}
-    >
-      <Stack alignItems="end">
-        <form.SubmitButton>Log in</form.SubmitButton>
-      </Stack>
-    </BaseForm>
+  return useSessionRequired(
+    paths.login.teacher._,
+    ({ otp_bypass_token_exists }) => (
+      <BaseForm
+        themedBoxProps={{ userType: "teacher" }}
+        header="Welcome"
+        subheader="Please enter the token generated by your token generator."
+        initialValues={{ otp: "" }}
+        onSubmit={submitForm(loginWithOtp, {
+          then: () => {
+            navigate(paths.teacher.dashboard.school._)
+          },
+        })}
+      >
+        <form.OtpField helperText="Enter your code from your app" />
+        {otp_bypass_token_exists && (
+          <LinkButton
+            className="body"
+            to={paths.login.teacher.otp.bypassToken._}
+          >
+            Use a backup token
+          </LinkButton>
+        )}
+        <Stack direction="row" spacing={2} justifyContent="space-between">
+          <LinkButton to={paths.login.teacher._} variant="outlined">
+            Cancel
+          </LinkButton>
+          <form.SubmitButton>Log in</form.SubmitButton>
+        </Stack>
+      </BaseForm>
+    ),
+    { next: false },
   )
 }