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("", () => { 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( ", () => { 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( + + + , + ); + + 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( + + + , + ); + + 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( + + + , + ); + + 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( + + + , + ); + + 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( + + + , + ); + + 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({ /> - ) : ( - + ) : null} + {passwordComplexitySettings.requiresSymbol && ( +
+ {renderIcon(hasSymbol, t)} + + + +
+ )} + {passwordComplexitySettings.requiresNumber && ( +
+ {renderIcon(hasNumber, t)} + + + +
+ )} + {passwordComplexitySettings.requiresUppercase && ( +
+ {renderIcon(hasUppercase, t)} + + + +
+ )} + {passwordComplexitySettings.requiresLowercase && ( +
+ {renderIcon(hasLowercase, t)} + + + +
)} -
- {renderIcon(hasSymbol, t)} - - - -
-
- {renderIcon(hasNumber, t)} - - - -
-
- {renderIcon(hasUppercase, t)} - - - -
-
- {renderIcon(hasLowercase, t)} - - - -
{renderIcon(equals, t)}