feat: Teacher account tab

src/app/schemas.ts

@@ -27,3 +27,12 @@ export const indyPasswordSchema = yup
   .matches(/[A-Z]/, "password must contain at least one uppercase letter")
   .matches(/[a-z]/, "password must contain at least one lowercase letter")
   .matches(/[0-9]/, "password must contain at least one digit")
+
+// A nullable schema allowing for empty values. Use when needing to apply a
+// schema to an optional field, e.g. the new password field in the account form.
+// Apply to any other schema using .concat().
+// TODO: Reassess the need for this after we split the account details form
+export const nullableSchema = yup
+  .string()
+  .nullable()
+  .transform((curr: string, orig: string) => (orig === "" ? null : curr))

src/pages/studentAccount/UpdateAccountForm.tsx → src/components/form/UpdateAccountForm.tsx

@@ -1,8 +1,8 @@
 import * as forms from "codeforlife/components/form"
-import { Stack, Typography } from "@mui/material"
 import { getDirty, isDirty } from "codeforlife/utils/form"
 import { type FC } from "react"
-import { LinkButton } from "codeforlife/components/router"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router"
 import { useNavigate } from "codeforlife/hooks"
 
 import {
@@ -11,15 +11,23 @@
   type UpdateUserResult,
   useUpdateUserMutation,
 } from "../../api/user"
-import { indyPasswordSchema, studentPasswordSchema } from "../../app/schemas"
-import { LastNameField } from "../../components/form"
+import {
+  indyPasswordSchema,
+  nullableSchema,
+  studentPasswordSchema,
+  teacherPasswordSchema,
+} from "../../app/schemas"
+import { LastNameField } from "./index"
+import { paths } from "../../routes"
+import { useLogoutMutation } from "../../api"
 
 export interface UpdateAccountFormProps {
   user: RetrieveUserResult
 }
 
 const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
   const navigate = useNavigate()
+  const [logout] = useLogoutMutation()
 
   const initialValues = user.student
     ? {
@@ -42,9 +50,7 @@
     <>
       {user.student ? (
         <>
-          <Typography align="center" variant="h4">
-            Update your password
-          </Typography>
+          <Typography variant="h5">Update your password</Typography>
           <Typography>
             You may edit your password below. It must be long enough and hard
             enough to stop your friends guessing it and stealing all of your
@@ -56,9 +62,7 @@
         </>
       ) : (
         <>
-          <Typography align="center" variant="h4">
-            Update your account details
-          </Typography>
+          <Typography variant="h5">Update your account details</Typography>
           <Typography>You can update your account details below.</Typography>
           <Typography>
             Please note: If you change your email address, you will need to
@@ -89,22 +93,32 @@
             return arg
           },
           then: (_: UpdateUserResult, values: typeof initialValues) => {
+            let redirectPath = generatePath(".")
             const messages = [
               "Your account details have been changed successfully.",
             ]
             if (isDirty(values, initialValues, "email")) {
-              // TODO: implement this behavior on the backend.
-              messages.push(
-                "Your email will be changed once you have verified it, until then you can still log in with your old email.",
-              )
+              redirectPath = generatePath(paths.login.teacher._)
+              void logout(null)
+                .unwrap()
+                .then(() => {
+                  messages.push(
+                    "Your email will be changed once you have verified it, until then you can still log in with your old email.",
+                  )
+                })
             }
             if (isDirty(values, initialValues, "password")) {
-              messages.push(
-                "Going forward, please login using your new password.",
-              )
+              redirectPath = generatePath(paths.login.teacher._)
+              void logout(null)
+                .unwrap()
+                .then(() => {
+                  messages.push(
+                    "Going forward, please log in using your new password.",
+                  )
+                })
             }
 
-            navigate(".", {
+            navigate(redirectPath, {
               state: {
                 notifications: messages.map(message => ({
                   props: { children: message },
@@ -120,9 +134,14 @@
             "password",
           ])
 
-          let passwordSchema = user.student
-            ? studentPasswordSchema
-            : indyPasswordSchema
+          let passwordSchema = indyPasswordSchema.concat(nullableSchema)
+
+          if (user.student) {
+            passwordSchema = studentPasswordSchema
+          } else if (user.teacher) {
+            passwordSchema = teacherPasswordSchema.concat(nullableSchema)
+          }
+
           if (isDirty(form.values, initialValues, "current_password")) {
             passwordSchema = passwordSchema.notOneOf(
               [form.values.current_password],
@@ -144,7 +163,7 @@
                 label="New password"
                 repeatFieldProps={{ label: "Repeat new password" }}
                 withRepeatField={Boolean(user.student) || dirty.password}
                 schema={passwordSchema}
               />
               {(Boolean(user.student) || dirty.email || dirty.password) && (
                 <forms.PasswordField
@@ -154,12 +173,11 @@
                   placeholder="Enter your current password"
                 />
               )}
-              <Stack direction="row" spacing={2} paddingY={3}>
-                <LinkButton variant="outlined" to={-1}>
-                  Cancel
-                </LinkButton>
-                <forms.SubmitButton>Update details</forms.SubmitButton>
-              </Stack>
+              <forms.SubmitButton
+                sx={theme => ({ marginTop: theme.spacing(3) })}
+              >
+                Update details
+              </forms.SubmitButton>
             </>
           )
         }}

src/components/form/index.tsx

@@ -2,6 +2,8 @@ export * from "./ClassAutocompleteField"
 export { default as ClassAutocompleteField } from "./ClassAutocompleteField"
 export * from "./ClassNameField"
 export { default as ClassNameField } from "./ClassNameField"
+export * from "./DeleteAccountForm"
+export { default as DeleteAccountForm } from "./DeleteAccountForm"
 export * from "./LastNameField"
 export { default as LastNameField } from "./LastNameField"
 export * from "./NewPasswordField"
@@ -12,3 +14,5 @@ export * from "./SchoolNameField"
 export { default as SchoolNameField } from "./SchoolNameField"
 export * from "./TeacherAutocompleteField"
 export { default as TeacherAutocompleteField } from "./TeacherAutocompleteField"
+export * from "./UpdateAccountForm"
+export { default as UpdateAccountForm } from "./UpdateAccountForm"

src/pages/studentAccount/StudentAccount.tsx

@@ -5,8 +5,7 @@ import { type SessionMetadata } from "codeforlife/hooks"
 import { Typography } from "@mui/material"
 import { handleResultState } from "codeforlife/utils/api"
 
-import DeleteAccountForm from "./DeleteAccountForm"
-import UpdateAccountForm from "./UpdateAccountForm"
+import * as forms from "../../components/form"
 import { paths } from "../../routes"
 import { useRetrieveUserQuery } from "../../api/user"
 
@@ -23,7 +22,7 @@ const _StudentAccount: FC<SessionMetadata> = ({ user_type, user_id }) =>
         bgcolor={user_type === "student" ? "tertiary" : "secondary"}
       />
       <page.Section>
-        <UpdateAccountForm user={user} />
+        <forms.UpdateAccountForm user={user} />
       </page.Section>
       {user_type === "indy" && (
         <>
@@ -36,7 +35,7 @@ const _StudentAccount: FC<SessionMetadata> = ({ user_type, user_id }) =>
             <LinkButton to={paths.indy.dashboard.joinClass._}>Join</LinkButton>
           </page.Section>
           <page.Section>
-            <DeleteAccountForm user={user} />
+            <forms.DeleteAccountForm user={user} />
           </page.Section>
         </>
       )}

src/pages/teacherDashboard/account/Account.tsx

@@ -1,17 +1,48 @@
+import * as page from "codeforlife/components/page"
 import { type FC } from "react"
 import { type SchoolTeacherUser } from "codeforlife/api"
+import { Typography } from "@mui/material"
 
+import * as forms from "../../../components/form"
+import BackupTokens from "./BackupTokens"
+import Manage2FAForm from "./Manage2FAForm"
 import { type RetrieveUserResult } from "../../../api/user"
+import Setup2FA from "./Setup2FA.tsx"
 
 export interface AccountProps {
   authUser: SchoolTeacherUser<RetrieveUserResult>
-  view?: "otp"
+  view?: "otp" | "backupTokens"
 }
 
-// @ts-expect-error unused var
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Account: FC<AccountProps> = ({ authUser }) => {
-  return <>TODO</>
+const Account: FC<AccountProps> = ({ authUser, view }) => {
+  if (view) {
+    return {
+      otp: <Setup2FA user={authUser} />,
+      backupTokens: <BackupTokens user={authUser} />,
+    }[view]
+  }
+
+  return (
+    <>
+      <page.Section>
+        <Typography align="center" variant="h4">
+          Your account
+        </Typography>
+        <forms.UpdateAccountForm user={authUser} />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
+        <Typography variant="h5">Two factor authentication</Typography>
+        <Typography>
+          Use your smartphone or tablet to enhance your account&apos;s security
+          by using an authenticator app.
+        </Typography>
+        <Manage2FAForm user={authUser} />
+      </page.Section>
+      <page.Section>
+        <forms.DeleteAccountForm user={authUser} />
+      </page.Section>
+    </>
+  )
 }
 
 export default Account

src/pages/teacherDashboard/account/BackupTokens.tsx

@@ -0,0 +1,13 @@
+import { type FC } from "react"
+import { type RetrieveUserResult } from "../../../api/user"
+import { type SchoolTeacherUser } from "codeforlife/api"
+
+export interface BackupTokensProps {
+  user: SchoolTeacherUser<RetrieveUserResult>
+}
+
+const BackupTokens: FC<BackupTokensProps> = () => {
+  return <>TODO</>
+}
+
+export default BackupTokens