mermaid flow diagram

apps/login/readme.md

@@ -1,3 +1,46 @@
 # ZITADEL Login UI
 
 This is going to be our next UI for the hosted login. It's based on Next.js 13 and its introduced `app/` directory.
+
+## Flow Diagram
+
+```mermaid
+    flowchart TD
+    A[Start] --> register
+    A[Start] --> accounts
+    A[Start] --> loginname
+    A[Start] --> register
+    idp-success --> B[signedin]
+    idp --> idp-success
+    idp --> idp-failure
+    idp-failure --> loginname
+    loginname --> password
+    A[Start] -- signInWithIDP --> idp
+    loginname -- hasPasskey --> passkey
+    loginname -- allowRegister --> register
+    passkey-add --passwordAllowed --> password
+    passkey -- hasPassword --> password
+    passkey --> B[signedin]
+    password -- hasMFA --> mfa
+    password -- allowPasskeys --> passkey-add
+    mfa --> otp
+    otp --> B[signedin]
+    mfa--> u2f
+    u2f -->B[signedin]
+    register --> passkey-add
+    register --> password-set
+    password-set --> B[signedin]
+    passkey-add --> B[signedin]
+    password --> B[signedin]
+    password-- forceMFA -->mfaset
+    mfaset --> u2fset
+    mfaset --> otpset
+    u2fset --> B[signedin]
+    otpset --> B[signedin]
+    accounts--> loginname
+
+    password -- not verified yet -->verify
+    register-- withpassword -->verify
+    passkey-- notVerified --> verify
+    verify --> B[signedin]
+```

apps/login/src/app/(login)/loginname/page.tsx

@@ -45,7 +45,6 @@ export default async function Page({
         <p className="ztdl-p">Enter your login data.</p>
 
         <UsernameForm
-          loginSettings={loginSettings}
           loginName={loginName}
           authRequestId={authRequestId}
           organization={organization}

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

@@ -1,27 +0,0 @@
-import BackButton from "@/ui/BackButton";
-import { Button, ButtonVariants } from "@/ui/Button";
-import { TextInput } from "@/ui/Input";
-import UserAvatar from "@/ui/UserAvatar";
-
-export default function Page() {
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Password</h1>
-      <p className="ztdl-p mb-6 block">Enter your password.</p>
-
-      <UserAvatar
-        showDropdown
-        displayName="Max Peintner"
-        loginName="max@zitadel.com"
-      ></UserAvatar>
-
-      <div className="w-full">
-        <TextInput type="password" label="Password" />
-      </div>
-      <div className="flex w-full flex-row items-center justify-between">
-        <BackButton />
-        <Button variant={ButtonVariants.Primary}>continue</Button>
-      </div>
-    </div>
-  );
-}

apps/login/src/ui/UsernameForm.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { sendLoginname } from "@/lib/server/loginname";
-import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useRouter } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -16,7 +15,6 @@ type Inputs = {
 };
 
 type Props = {
-  loginSettings: LoginSettings | undefined;
   loginName: string | undefined;
   authRequestId: string | undefined;
   organization?: string;
@@ -26,7 +24,6 @@ type Props = {
 };
 
 export default function UsernameForm({
-  loginSettings,
   loginName,
   authRequestId,
   organization,