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>
   );

apps/login/app/(login)/otp/[method]/page.tsx

@@ -30,11 +30,8 @@ export default async function Page({
         {method === "email" && (
           <p className="ztdl-p">Enter the code you got via your email.</p>
         )}
-        {method === "u2f" && (
-          <p className="ztdl-p">Verify your account with your device.</p>
-        )}
 
-        {method && ["time-based", "sms", "email"].includes(method) ? (
+        {method && (
           <LoginOTP
             loginName={loginName}
             sessionId={sessionId}
@@ -42,13 +39,6 @@ export default async function Page({
             organization={organization}
             method={method}
           ></LoginOTP>
-        ) : (
-          <VerifyU2F
-            loginName={loginName}
-            sessionId={sessionId}
-            authRequestId={authRequestId}
-            organization={organization}
-          ></VerifyU2F>
         )}
       </div>
     </DynamicTheme>

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

@@ -0,0 +1,34 @@
+import { getBrandingSettings, getLoginSettings, server } from "#/lib/zitadel";
+import DynamicTheme from "#/ui/DynamicTheme";
+import LoginOTP from "#/ui/LoginOTP";
+import VerifyU2F from "#/ui/VerifyU2F";
+
+export default async function Page({
+  searchParams,
+  params,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+  params: 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">Verify your account with your device.</p>
+
+        <VerifyU2F
+          loginName={loginName}
+          sessionId={sessionId}
+          authRequestId={authRequestId}
+          organization={organization}
+        ></VerifyU2F>
+      </div>
+    </DynamicTheme>
+  );
+}

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

@@ -0,0 +1,76 @@
+import {
+  addOTPEmail,
+  addOTPSMS,
+  getBrandingSettings,
+  getSession,
+  registerTOTP,
+  server,
+} from "#/lib/zitadel";
+import DynamicTheme from "#/ui/DynamicTheme";
+import TOTPRegister from "#/ui/TOTPRegister";
+import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+
+export default async function Page({
+  searchParams,
+  params,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+  params: Record<string | number | symbol, string | undefined>;
+}) {
+  const { loginName, organization } = searchParams;
+  const { method } = params;
+
+  const branding = await getBrandingSettings(server, organization);
+
+  const totpResponse = await loadSession(loginName, organization).then(
+    ({ session, token }) => {
+      if (session && session.factors?.user?.id) {
+        if (method === "time-based") {
+          return registerTOTP(session.factors.user.id, token);
+        } else if (method === "sms") {
+          return addOTPSMS(session.factors.user.id);
+        } else if (method === "email") {
+          return addOTPEmail(session.factors.user.id);
+        } else {
+          throw new Error("Invalid method");
+        }
+      } else {
+        throw new Error("No session found");
+      }
+    }
+  );
+
+  async function loadSession(loginName?: string, organization?: string) {
+    const recent = await getMostRecentCookieWithLoginname(
+      loginName,
+      organization
+    );
+
+    return getSession(server, recent.id, recent.token).then((response) => {
+      return { session: response?.session, token: recent.token };
+    });
+  }
+
+  return (
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Register Device</h1>
+        <p className="ztdl-p">
+          Choose a device to register for 2-Factor Authentication.
+        </p>
+
+        <div>
+          {/* {auth && <div>{auth.to}</div>} */}
+          {totpResponse &&
+            "uri" in totpResponse &&
+            "secret" in totpResponse && (
+              <TOTPRegister
+                uri={totpResponse.uri as string}
+                secret={totpResponse.secret as string}
+              ></TOTPRegister>
+            )}
+        </div>
+      </div>
+    </DynamicTheme>
+  );
+}