From 4712d99856dbf2da1ce3e506e6bde00983306f9e Mon Sep 17 00:00:00 2001
From: Liam Neville <liam@zitadel.com>
Date: Fri, 6 Feb 2026 17:23:36 +0300
Subject: [PATCH] fix(login): respect password complexity settings in UI
 (#11528)

<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

# Which Problems Are Solved

- Login V2 UI displays all password complexity requirements (symbol,
number, uppercase, lowercase) regardless of the actual
instance/organization configuration
- Users see requirements they don't need to meet, causing confusion

# How the Problems Are Solved

- Updated the PasswordComplexity component to conditionally render each
requirement based on the corresponding `requires*` flag from the
password complexity settings
- Only enabled requirements are now displayed to users

# Additional Changes

None.

# Additional Context

- Closes #11511
---
 .../components/password-complexity.test.tsx   | 135 +++++++++++++++++-
 .../src/components/password-complexity.tsx    |  58 ++++----
 2 files changed, 166 insertions(+), 27 deletions(-)

diff --git a/apps/login/src/components/password-complexity.test.tsx b/apps/login/src/components/password-complexity.test.tsx
index c563730e8..8337ea50e 100644
--- a/apps/login/src/components/password-complexity.test.tsx
+++ b/apps/login/src/components/password-complexity.test.tsx
@@ -119,7 +119,7 @@ describe("<PasswordComplexity/>", () => {
     expect(svg).toHaveClass("text-warn-light-500");
   });
 
-  test("should render all complexity checks", () => {
+  test("should render all complexity checks when all requirements are enabled", () => {
     render(
       <NextIntlClientProvider locale="en" messages={messages}>
         <PasswordComplexity
@@ -144,5 +144,138 @@ describe("<PasswordComplexity/>", () => {
     expect(screen.getByTestId("number-check")).toBeInTheDocument();
     expect(screen.getByTestId("uppercase-check")).toBeInTheDocument();
     expect(screen.getByTestId("lowercase-check")).toBeInTheDocument();
+    expect(screen.getByTestId("equal-check")).toBeInTheDocument();
+  });
+
+  test("should not render symbol check when requiresSymbol is false", () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <PasswordComplexity
+          password="Password1!"
+          equals
+          passwordComplexitySettings={
+            {
+              minLength: BigInt(8),
+              requiresLowercase: true,
+              requiresUppercase: true,
+              requiresNumber: true,
+              requiresSymbol: false,
+              resourceOwnerType: 0,
+            } as any
+          }
+        />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.queryByTestId("symbol-check")).not.toBeInTheDocument();
+    expect(screen.getByTestId("number-check")).toBeInTheDocument();
+    expect(screen.getByTestId("uppercase-check")).toBeInTheDocument();
+    expect(screen.getByTestId("lowercase-check")).toBeInTheDocument();
+  });
+
+  test("should not render number check when requiresNumber is false", () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <PasswordComplexity
+          password="Password1!"
+          equals
+          passwordComplexitySettings={
+            {
+              minLength: BigInt(8),
+              requiresLowercase: true,
+              requiresUppercase: true,
+              requiresNumber: false,
+              requiresSymbol: true,
+              resourceOwnerType: 0,
+            } as any
+          }
+        />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByTestId("symbol-check")).toBeInTheDocument();
+    expect(screen.queryByTestId("number-check")).not.toBeInTheDocument();
+    expect(screen.getByTestId("uppercase-check")).toBeInTheDocument();
+    expect(screen.getByTestId("lowercase-check")).toBeInTheDocument();
+  });
+
+  test("should not render uppercase check when requiresUppercase is false", () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <PasswordComplexity
+          password="Password1!"
+          equals
+          passwordComplexitySettings={
+            {
+              minLength: BigInt(8),
+              requiresLowercase: true,
+              requiresUppercase: false,
+              requiresNumber: true,
+              requiresSymbol: true,
+              resourceOwnerType: 0,
+            } as any
+          }
+        />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByTestId("symbol-check")).toBeInTheDocument();
+    expect(screen.getByTestId("number-check")).toBeInTheDocument();
+    expect(screen.queryByTestId("uppercase-check")).not.toBeInTheDocument();
+    expect(screen.getByTestId("lowercase-check")).toBeInTheDocument();
+  });
+
+  test("should not render lowercase check when requiresLowercase is false", () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <PasswordComplexity
+          password="Password1!"
+          equals
+          passwordComplexitySettings={
+            {
+              minLength: BigInt(8),
+              requiresLowercase: false,
+              requiresUppercase: true,
+              requiresNumber: true,
+              requiresSymbol: true,
+              resourceOwnerType: 0,
+            } as any
+          }
+        />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByTestId("symbol-check")).toBeInTheDocument();
+    expect(screen.getByTestId("number-check")).toBeInTheDocument();
+    expect(screen.getByTestId("uppercase-check")).toBeInTheDocument();
+    expect(screen.queryByTestId("lowercase-check")).not.toBeInTheDocument();
+  });
+
+  test("should only render length and equals checks when all other requirements are disabled", () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <PasswordComplexity
+          password="password"
+          equals
+          passwordComplexitySettings={
+            {
+              minLength: BigInt(8),
+              requiresLowercase: false,
+              requiresUppercase: false,
+              requiresNumber: false,
+              requiresSymbol: false,
+              resourceOwnerType: 0,
+            } as any
+          }
+        />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByTestId("length-check")).toBeInTheDocument();
+    expect(screen.getByTestId("equal-check")).toBeInTheDocument();
+    expect(screen.queryByTestId("symbol-check")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("number-check")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("uppercase-check")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("lowercase-check")).not.toBeInTheDocument();
   });
 });
diff --git a/apps/login/src/components/password-complexity.tsx b/apps/login/src/components/password-complexity.tsx
index 25f53820f..d21f5ab46 100644
--- a/apps/login/src/components/password-complexity.tsx
+++ b/apps/login/src/components/password-complexity.tsx
@@ -91,33 +91,39 @@ export function PasswordComplexity({
             />
           </span>
         </div>
-      ) : (
-        <span />
+      ) : null}
+      {passwordComplexitySettings.requiresSymbol && (
+        <div className="flex flex-row items-center" data-testid="symbol-check">
+          {renderIcon(hasSymbol, t)}
+          <span className={desc}>
+            <Translated i18nKey="complexity.hasSymbol" namespace="password" />
+          </span>
+        </div>
+      )}
+      {passwordComplexitySettings.requiresNumber && (
+        <div className="flex flex-row items-center" data-testid="number-check">
+          {renderIcon(hasNumber, t)}
+          <span className={desc}>
+            <Translated i18nKey="complexity.hasNumber" namespace="password" />
+          </span>
+        </div>
+      )}
+      {passwordComplexitySettings.requiresUppercase && (
+        <div className="flex flex-row items-center" data-testid="uppercase-check">
+          {renderIcon(hasUppercase, t)}
+          <span className={desc}>
+            <Translated i18nKey="complexity.hasUppercase" namespace="password" />
+          </span>
+        </div>
+      )}
+      {passwordComplexitySettings.requiresLowercase && (
+        <div className="flex flex-row items-center" data-testid="lowercase-check">
+          {renderIcon(hasLowercase, t)}
+          <span className={desc}>
+            <Translated i18nKey="complexity.hasLowercase" namespace="password" />
+          </span>
+        </div>
       )}
-      <div className="flex flex-row items-center" data-testid="symbol-check">
-        {renderIcon(hasSymbol, t)}
-        <span className={desc}>
-          <Translated i18nKey="complexity.hasSymbol" namespace="password" />
-        </span>
-      </div>
-      <div className="flex flex-row items-center" data-testid="number-check">
-        {renderIcon(hasNumber, t)}
-        <span className={desc}>
-          <Translated i18nKey="complexity.hasNumber" namespace="password" />
-        </span>
-      </div>
-      <div className="flex flex-row items-center" data-testid="uppercase-check">
-        {renderIcon(hasUppercase, t)}
-        <span className={desc}>
-          <Translated i18nKey="complexity.hasUppercase" namespace="password" />
-        </span>
-      </div>
-      <div className="flex flex-row items-center" data-testid="lowercase-check">
-        {renderIcon(hasLowercase, t)}
-        <span className={desc}>
-          <Translated i18nKey="complexity.hasLowercase" namespace="password" />
-        </span>
-      </div>
       <div className="flex flex-row items-center" data-testid="equal-check">
         {renderIcon(equals, t)}
         <span className={desc}>