back button cleanup

apps/login/src/app/(login)/mfa/create/page.tsx

@@ -1,12 +1,9 @@
-"use client";
+import BackButton from "@/ui/BackButton";
 import { Button, ButtonVariants } from "@/ui/Button";
 import { TextInput } from "@/ui/Input";
 import UserAvatar from "@/ui/UserAvatar";
-import { useRouter } from "next/navigation";
 
 export default function Page() {
-  const router = useRouter();
-
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Password</h1>
@@ -22,12 +19,7 @@ export default function Page() {
         <TextInput type="password" label="Password" />
       </div>
       <div className="flex w-full flex-row items-center justify-between">
-        <Button
-          onClick={() => router.back()}
-          variant={ButtonVariants.Secondary}
-        >
-          back
-        </Button>
+        <BackButton />
         <Button variant={ButtonVariants.Primary}>continue</Button>
       </div>
     </div>

apps/login/src/ui/ChangePasswordForm.tsx

@@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
 import Alert from "./Alert";
+import BackButton from "./BackButton";
 import { Button, ButtonVariants } from "./Button";
 import { TextInput } from "./Input";
 import PasswordComplexity from "./PasswordComplexity";
@@ -129,9 +130,7 @@ export default function ChangePasswordForm({
       {error && <Alert>{error}</Alert>}
 
       <div className="mt-8 flex w-full flex-row items-center justify-between">
-        <Button type="button" variant={ButtonVariants.Secondary}>
-          back
-        </Button>
+        <BackButton />
         <Button
           type="submit"
           variant={ButtonVariants.Primary}