otp methods

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

@@ -1,3 +1,25 @@
-export default function Page() {
-  return <div className="flex flex-col items-center space-y-4">mfa</div>;
+import { getBrandingSettings, server } from "#/lib/zitadel";
+import DynamicTheme from "#/ui/DynamicTheme";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const { loginName, authRequestId, sessionId, organization, code, submit } =
+    searchParams;
+
+  const branding = await getBrandingSettings(server, organization);
+
+  return (
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Verify 2-Factor</h1>
+
+        <p className="ztdl-p">Choose one of the following second factors.</p>
+
+        <div></div>
+      </div>
+    </DynamicTheme>
+  );
 }

apps/login/app/(login)/mfa/set/page.tsx

@@ -1,34 +1,36 @@
-"use client";
+import { getBrandingSettings, server } from "#/lib/zitadel";
 import { Button, ButtonVariants } from "#/ui/Button";
+import DynamicTheme from "#/ui/DynamicTheme";
 import { TextInput } from "#/ui/Input";
 import UserAvatar from "#/ui/UserAvatar";
 import { useRouter } from "next/navigation";
 
-export default function Page() {
-  const router = useRouter();
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const { loginName, authRequestId, sessionId, organization, code, submit } =
+    searchParams;
+
+  const branding = await getBrandingSettings(server, organization);
 
   return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Second Factor</h1>
-      <p className="ztdl-p mb-6 block">Please select a second factor.</p>
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Verify 2-Factor</h1>
 
-      <UserAvatar
-        showDropdown
-        displayName="Max Peintner"
-        loginName="max@zitadel.com"
-      ></UserAvatar>
-      <div className="w-full">
-        <TextInput type="password" label="Password" />
+        <p className="ztdl-p">Choose one of the following second factors.</p>
+
+        <UserAvatar
+          showDropdown
+          displayName="Max Peintner"
+          loginName="max@zitadel.com"
+        ></UserAvatar>
+        <div className="w-full">
+          <TextInput type="password" label="Password" />
+        </div>
       </div>
-      <div className="flex w-full flex-row items-center justify-between">
-        <Button
-          onClick={() => router.back()}
-          variant={ButtonVariants.Secondary}
-        >
-          back
-        </Button>
-        <Button variant={ButtonVariants.Primary}>continue</Button>
-      </div>
-    </div>
+    </DynamicTheme>
   );
 }