restructure update student user view

src/pages/teacherDashboard/classes/updateStudentUser/UpdateNameForm.tsx

@@ -0,0 +1,60 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { type User } from "codeforlife/api"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
+
+import { useUpdateUserMutation } from "../../../../api/user"
+
+export interface UpdateNameFormProps {
+  classPath: string
+  studentUser: Pick<User, "id" | "first_name">
+}
+
+const UpdateNameForm: FC<UpdateNameFormProps> = ({
+  classPath,
+  studentUser,
+}) => {
+  const [updateUser] = useUpdateUserMutation()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <Typography variant="h5">Update name</Typography>
+      <Typography>
+        Remember this is the name they use to log in with, so you should tell
+        them what you&apos;ve changed it to.
+      </Typography>
+      <forms.Form
+        initialValues={studentUser}
+        onSubmit={submitForm(updateUser, {
+          then: () => {
+            navigate(classPath, {
+              state: {
+                notifications: [
+                  {
+                    index: 1,
+                    props: {
+                      children: "Student's details successfully updated.",
+                    },
+                  },
+                ],
+              },
+            })
+          },
+        })}
+      >
+        <forms.FirstNameField
+          required
+          dirty
+          label="First name of student"
+          placeholder="Enter first name of student"
+        />
+        <forms.SubmitButton>Update</forms.SubmitButton>
+      </forms.Form>
+    </>
+  )
+}
+
+export default UpdateNameForm

src/pages/teacherDashboard/classes/updateStudentUser/UpdatePasswordForm.tsx

@@ -0,0 +1,74 @@
+import * as forms from "codeforlife/components/form"
+import { type Class, type StudentUser } from "codeforlife/api"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router-dom"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
+
+import { NewPasswordField } from "../../../../components/form"
+import { type ResetStudentsPasswordState } from "../resetStudentsPassword/ResetStudentsPassword"
+import { type RetrieveUserResult } from "../../../../api/user"
+import { paths } from "../../../../routes"
+import { useResetStudentsPasswordMutation } from "../../../../api/student"
+
+export interface UpdatePasswordFormProps {
+  classId: Class["id"]
+  user: StudentUser<RetrieveUserResult>
+}
+
+const UpdatePasswordForm: FC<UpdatePasswordFormProps> = ({ classId, user }) => {
+  const [resetStudentsPassword] = useResetStudentsPasswordMutation()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <Typography variant="h5">Update password</Typography>
+      <Typography>
+        You can set this student&apos;s password. Setting the password will also
+        regenerate their direct access link. Enter and confirm the password in
+        the boxes below. Try to prevent others from being able to guess the new
+        password when making this decision.
+      </Typography>
+      <forms.Form
+        initialValues={{
+          [user.student.id]: {
+            user: { password: "", password_repeat: "" },
+          },
+        }}
+        onSubmit={submitForm(resetStudentsPassword, {
+          exclude: [`${user.student.id}.user.password_repeat`],
+          then: resetStudentsPasswordResult => {
+            navigate<ResetStudentsPasswordState>(
+              generatePath(
+                paths.teacher.dashboard.tab.classes.class.students.resetPassword
+                  ._,
+                { classId },
+              ),
+              {
+                state: {
+                  studentUsers: [user],
+                  resetStudentsPasswordResult,
+                },
+              },
+            )
+          },
+        })}
+      >
+        <NewPasswordField
+          name={`${user.student.id}.user.password`}
+          userType="student"
+          label="Password of student"
+          placeholder="Enter password of student"
+          repeatFieldProps={{
+            label: "Repeat password of student",
+            placeholder: "Enter password of student again",
+          }}
+        />
+        <forms.SubmitButton>Update</forms.SubmitButton>
+      </forms.Form>
+    </>
+  )
+}
+
+export default UpdatePasswordForm

src/pages/teacherDashboard/classes/updateStudentUser/UpdateStudentUser.tsx

@@ -0,0 +1,79 @@
+import * as pages from "codeforlife/components/page"
+import { type Class, type StudentUser, type User } from "codeforlife/api"
+import { Link, Navigate } from "codeforlife/components/router"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router-dom"
+import { handleResultState } from "codeforlife/utils/api"
+import { useParams } from "codeforlife/hooks"
+
+import {
+  type RetrieveUserResult,
+  useRetrieveUserQuery,
+} from "../../../../api/user"
+import { classIdSchema, userIdSchema } from "../../../../app/schemas"
+import UpdateNameForm from "./UpdateNameForm"
+import UpdatePasswordForm from "./UpdatePasswordForm"
+import { paths } from "../../../../routes"
+import { useRetrieveClassQuery } from "../../../../api/klass"
+
+const _UpdateStudentUser: FC<{
+  classId: Class["id"]
+  studentUserId: User["id"]
+}> = ({ classId, studentUserId }) => {
+  const retrieveClassResult = useRetrieveClassQuery(classId)
+  const retrieveUserResult = useRetrieveUserQuery(studentUserId)
+
+  const classPath = generatePath(paths.teacher.dashboard.tab.classes.class._, {
+    classId,
+  })
+
+  return handleResultState(retrieveClassResult, klass =>
+    handleResultState(retrieveUserResult, user => (
+      <>
+        <pages.Section>
+          <Typography align="center" variant="h4" marginBottom={11.5}>
+            Edit student details for {user.first_name} from class {klass.name} (
+            {klass.id})
+          </Typography>
+          <Link className="back-to" to={classPath}>
+            Class
+          </Link>
+          <Typography mb={0}>
+            Edit this student&apos;s name and manage their password and direct
+            access link.
+          </Typography>
+        </pages.Section>
+        <pages.Section>
+          <UpdateNameForm
+            classPath={classPath}
+            studentUser={{ id: studentUserId, first_name: user.first_name }}
+          />
+        </pages.Section>
+        <pages.Section>
+          <UpdatePasswordForm
+            classId={classId}
+            user={user as StudentUser<RetrieveUserResult>}
+          />
+        </pages.Section>
+      </>
+    )),
+  )
+}
+
+export interface UpdateStudentUserProps {}
+
+const UpdateStudentUser: FC<UpdateStudentUserProps> = () => {
+  const params = useParams({
+    classId: classIdSchema.required(),
+    studentUserId: userIdSchema.required(),
+  })
+
+  return params ? (
+    <_UpdateStudentUser {...params} />
+  ) : (
+    <Navigate to={paths.teacher.dashboard.tab.classes._} />
+  )
+}
+
+export default UpdateStudentUser