From bf88446d90b11e29974fd3f28628ae2b360c515d Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Mon, 15 Jul 2024 16:00:17 +0200
Subject: [PATCH] backbuttons

---
 apps/login/src/app/(login)/mfa/page.tsx              | 6 ++++++
 apps/login/src/app/(login)/mfa/set/page.tsx          | 6 ++++++
 apps/login/src/app/(login)/otp/[method]/set/page.tsx | 2 ++
 apps/login/src/ui/LoginOTP.tsx                       | 2 ++
 apps/login/src/ui/LoginPasskey.tsx                   | 9 ++-------
 apps/login/src/ui/RegisterFormWithoutPassword.tsx    | 9 ++-------
 apps/login/src/ui/RegisterPasskey.tsx                | 9 ++-------
 apps/login/src/ui/RegisterU2F.tsx                    | 9 ++-------
 apps/login/src/ui/SignInWithIDP.tsx                  | 5 +++++
 9 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/apps/login/src/app/(login)/mfa/page.tsx b/apps/login/src/app/(login)/mfa/page.tsx
index 1d13c02f8fa..ef8aeddba47 100644
--- a/apps/login/src/app/(login)/mfa/page.tsx
+++ b/apps/login/src/app/(login)/mfa/page.tsx
@@ -5,6 +5,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import ChooseSecondFactor from "@/ui/ChooseSecondFactor";
 import DynamicTheme from "@/ui/DynamicTheme";
 import UserAvatar from "@/ui/UserAvatar";
@@ -96,6 +97,11 @@ export default async function Page({
         ) : (
           <Alert>No second factors available to setup.</Alert>
         )}
+
+        <div className="mt-8 flex w-full flex-row items-center">
+          <BackButton />
+          <span className="flex-grow"></span>
+        </div>
       </div>
     </DynamicTheme>
   );
diff --git a/apps/login/src/app/(login)/mfa/set/page.tsx b/apps/login/src/app/(login)/mfa/set/page.tsx
index 9d855b105b8..0e38e966d2c 100644
--- a/apps/login/src/app/(login)/mfa/set/page.tsx
+++ b/apps/login/src/app/(login)/mfa/set/page.tsx
@@ -7,6 +7,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup";
 import DynamicTheme from "@/ui/DynamicTheme";
 import UserAvatar from "@/ui/UserAvatar";
@@ -110,6 +111,11 @@ export default async function Page({
         ) : (
           <Alert>No second factors available to setup.</Alert>
         )}
+
+        <div className="mt-8 flex w-full flex-row items-center">
+          <BackButton />
+          <span className="flex-grow"></span>
+        </div>
       </div>
     </DynamicTheme>
   );
diff --git a/apps/login/src/app/(login)/otp/[method]/set/page.tsx b/apps/login/src/app/(login)/otp/[method]/set/page.tsx
index f1785fd683d..ff31cd88515 100644
--- a/apps/login/src/app/(login)/otp/[method]/set/page.tsx
+++ b/apps/login/src/app/(login)/otp/[method]/set/page.tsx
@@ -7,6 +7,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import { Button, ButtonVariants } from "@/ui/Button";
 import DynamicTheme from "@/ui/DynamicTheme";
 import { Spinner } from "@/ui/Spinner";
@@ -154,6 +155,7 @@ export default async function Page({
             </p>
 
             <div className="mt-8 flex w-full flex-row items-center">
+              <BackButton />
               <span className="flex-grow"></span>
               <Link
                 href={
diff --git a/apps/login/src/ui/LoginOTP.tsx b/apps/login/src/ui/LoginOTP.tsx
index 1235d6ec87e..e7cc00f4d2c 100644
--- a/apps/login/src/ui/LoginOTP.tsx
+++ b/apps/login/src/ui/LoginOTP.tsx
@@ -10,6 +10,7 @@ import { Checks } from "@zitadel/server";
 import { useForm } from "react-hook-form";
 import { TextInput } from "./Input";
 import { Challenges } from "@zitadel/server";
+import BackButton from "./BackButton";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -228,6 +229,7 @@ export default function LoginOTP({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
+        <BackButton />
         <span className="flex-grow"></span>
         <Button
           type="submit"
diff --git a/apps/login/src/ui/LoginPasskey.tsx b/apps/login/src/ui/LoginPasskey.tsx
index 6048d5b73b0..a907704c09b 100644
--- a/apps/login/src/ui/LoginPasskey.tsx
+++ b/apps/login/src/ui/LoginPasskey.tsx
@@ -7,6 +7,7 @@ import { Button, ButtonVariants } from "./Button";
 import Alert from "./Alert";
 import { Spinner } from "./Spinner";
 import { Checks } from "@zitadel/server";
+import BackButton from "./BackButton";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -250,13 +251,7 @@ export default function LoginPasskey({
             use password
           </Button>
         ) : (
-          <Button
-            type="button"
-            variant={ButtonVariants.Secondary}
-            onClick={() => router.back()}
-          >
-            back
-          </Button>
+          <BackButton />
         )}
 
         <span className="flex-grow"></span>
diff --git a/apps/login/src/ui/RegisterFormWithoutPassword.tsx b/apps/login/src/ui/RegisterFormWithoutPassword.tsx
index fc95aac02ae..022be43b749 100644
--- a/apps/login/src/ui/RegisterFormWithoutPassword.tsx
+++ b/apps/login/src/ui/RegisterFormWithoutPassword.tsx
@@ -12,6 +12,7 @@ import AuthenticationMethodRadio, {
   methods,
 } from "./AuthenticationMethodRadio";
 import Alert from "./Alert";
+import BackButton from "./BackButton";
 
 type Inputs =
   | {
@@ -166,13 +167,7 @@ export default function RegisterFormWithoutPassword({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center justify-between">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        <BackButton />
         <Button
           type="submit"
           variant={ButtonVariants.Primary}
diff --git a/apps/login/src/ui/RegisterPasskey.tsx b/apps/login/src/ui/RegisterPasskey.tsx
index 67c864c0c4b..37ca41cbf0e 100644
--- a/apps/login/src/ui/RegisterPasskey.tsx
+++ b/apps/login/src/ui/RegisterPasskey.tsx
@@ -8,6 +8,7 @@ import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { AuthRequest, RegisterPasskeyResponse } from "@zitadel/server";
 import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import BackButton from "./BackButton";
 type Inputs = {};
 
 type Props = {
@@ -216,13 +217,7 @@ export default function RegisterPasskey({
             skip
           </Button>
         ) : (
-          <Button
-            type="button"
-            variant={ButtonVariants.Secondary}
-            onClick={() => router.back()}
-          >
-            back
-          </Button>
+          <BackButton />
         )}
 
         <span className="flex-grow"></span>
diff --git a/apps/login/src/ui/RegisterU2F.tsx b/apps/login/src/ui/RegisterU2F.tsx
index 71ccad812ab..db471797263 100644
--- a/apps/login/src/ui/RegisterU2F.tsx
+++ b/apps/login/src/ui/RegisterU2F.tsx
@@ -8,6 +8,7 @@ import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { RegisterU2FResponse } from "@zitadel/server";
 import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import BackButton from "./BackButton";
 type Inputs = {};
 
 type Props = {
@@ -191,13 +192,7 @@ export default function RegisterU2F({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        <BackButton />
 
         <span className="flex-grow"></span>
         <Button
diff --git a/apps/login/src/ui/SignInWithIDP.tsx b/apps/login/src/ui/SignInWithIDP.tsx
index 4e74999953e..37d824e1827 100644
--- a/apps/login/src/ui/SignInWithIDP.tsx
+++ b/apps/login/src/ui/SignInWithIDP.tsx
@@ -10,6 +10,7 @@ import {
 import { useRouter } from "next/navigation";
 import { ProviderSlug } from "@/lib/demos";
 import Alert from "./Alert";
+import BackButton from "./BackButton";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -141,6 +142,10 @@ export function SignInWithIDP({
           <Alert>{error}</Alert>
         </div>
       )}
+      <div className="mt-8 flex w-full flex-row items-center">
+        <BackButton />
+        <span className="flex-grow"></span>
+      </div>
     </div>
   );
 }