u2f pages, choose 2 factor page

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

@@ -1,35 +1,89 @@
-import { getBrandingSettings, server } from "#/lib/zitadel";
-import { Button, ButtonVariants } from "#/ui/Button";
+import {
+  getBrandingSettings,
+  getLoginSettings,
+  getSession,
+  server,
+} from "#/lib/zitadel";
+import Alert from "#/ui/Alert";
+import ChooseSecondFactorToSetup from "#/ui/ChooseSecondFactorToSetup";
 import DynamicTheme from "#/ui/DynamicTheme";
-import { TextInput } from "#/ui/Input";
 import UserAvatar from "#/ui/UserAvatar";
-import { useRouter } from "next/navigation";
+import {
+  getMostRecentCookieWithLoginname,
+  getSessionCookieById,
+} from "#/utils/cookies";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName, authRequestId, sessionId, organization, code, submit } =
+  const { loginName, altPassword, authRequestId, organization, sessionId } =
     searchParams;
 
+  const sessionFactors = sessionId
+    ? await loadSessionById(sessionId, organization)
+    : await loadSessionByLoginname(loginName, organization);
+
+  async function loadSessionByLoginname(
+    loginName?: string,
+    organization?: string
+  ) {
+    const recent = await getMostRecentCookieWithLoginname(
+      loginName,
+      organization
+    );
+    return getSession(server, recent.id, recent.token).then((response) => {
+      if (response?.session) {
+        return response.session;
+      }
+    });
+  }
+
+  async function loadSessionById(sessionId: string, organization?: string) {
+    const recent = await getSessionCookieById(sessionId, organization);
+    return getSession(server, recent.id, recent.token).then((response) => {
+      if (response?.session) {
+        return response.session;
+      }
+    });
+  }
+
   const branding = await getBrandingSettings(server, organization);
+  const loginSettings = await getLoginSettings(server, organization);
 
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>Verify 2-Factor</h1>
+        <h1>Set up 2-Factor</h1>
 
         <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>
+        {sessionFactors && (
+          <UserAvatar
+            loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+            displayName={sessionFactors.factors?.user?.displayName}
+            showDropdown
+          ></UserAvatar>
+        )}
+
+        {!sessionFactors && <div className="py-4"></div>}
+
+        {!(loginName || sessionId) && (
+          <Alert>Provide your active session as loginName param</Alert>
+        )}
+
+        {loginSettings ? (
+          <ChooseSecondFactorToSetup
+            loginName={loginName}
+            sessionId={sessionId}
+            authRequestId={authRequestId}
+            organization={organization}
+            loginSettings={loginSettings}
+          ></ChooseSecondFactorToSetup>
+        ) : (
+          <Alert>No second factors available to setup.</Alert>
+        )}
       </div>
     </DynamicTheme>
   );