From 9ff1492f9f7f96754b618eabc7d9e69600fa9ca5 Mon Sep 17 00:00:00 2001
From: Oleg Chendighelean <oleg.chendighelean@trili.tech>
Date: Tue, 1 Oct 2024 17:25:53 +0100
Subject: [PATCH] Update usePasswordValidation tests

---
 .../ChangePasswordForm.test.tsx               |  6 ++--
 .../ChangePassword/ChangePasswordForm.tsx     |  4 +--
 .../password/EnterAndConfirmPassword.test.tsx |  5 ----
 .../password/EnterAndConfirmPassword.tsx      |  3 +-
 .../password/EnterPassword.test.tsx           |  5 ----
 .../restoreSecretKey/RestoreSecretKey.tsx     |  2 +-
 apps/desktop/src/components/PasswordInput.tsx | 24 +++++----------
 .../src/components/SendFlow/SignButton.tsx    |  2 +-
 apps/desktop/src/setupTests.tsx               |  8 -----
 .../MasterPasswordModal.tsx                   |  1 -
 .../ChangePasswordMenu.test.tsx               |  2 +-
 .../ChangePasswordMenu/ChangePasswordMenu.tsx |  4 +--
 .../ImportWallet/ImportBackupTab.tsx          |  2 +-
 .../Onboarding/ImportWallet/SecretKeyTab.tsx  |  2 +-
 .../SetupPassword/SetupPassword.tsx           |  3 +-
 .../PasswordInput/PasswordInput.tsx           | 28 +++++++----------
 .../src/components/SendFlow/SignButton.tsx    |  2 +-
 .../src/hooks/usePasswordValidation.test.tsx  | 29 +++++++++++-------
 .../src/hooks/usePasswordValidation.tsx       | 30 +++++++++++--------
 pnpm-lock.yaml                                | 26 ++++++++--------
 20 files changed, 80 insertions(+), 108 deletions(-)

diff --git a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.test.tsx b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.test.tsx
index dd8afc071d..d9f239e32d 100644
--- a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.test.tsx
+++ b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.test.tsx
@@ -55,7 +55,7 @@ describe("ChangePassword Form", () => {
 
       await waitFor(() => {
         expect(screen.getByTestId("new-password-error")).toHaveTextContent(
-          "Your password must be at least 12 characters long"
+          "Password must be at least 12 characters long"
         );
       });
     });
@@ -104,8 +104,8 @@ describe("ChangePassword Form", () => {
       const newPasswordConfirmationInput = screen.getByTestId("new-password-confirmation");
 
       fireEvent.change(currentPasswordInput, { target: { value: "myOldPassword" } });
-      fireEvent.change(newPasswordInput, { target: { value: "myNewPassword" } });
-      fireEvent.change(newPasswordConfirmationInput, { target: { value: "myNewPassword" } });
+      fireEvent.change(newPasswordInput, { target: { value: "myNewPassword123L!" } });
+      fireEvent.change(newPasswordConfirmationInput, { target: { value: "myNewPassword123L!" } });
 
       await waitFor(() => {
         expect(screen.getByRole("button", { name: "Update Password" })).toBeEnabled();
diff --git a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
index 876989e937..34b99db8fb 100644
--- a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
+++ b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
@@ -66,7 +66,6 @@ export const ChangePasswordForm = () => {
                 data-testid="current-password"
                 inputName="currentPassword"
                 label="Current Password"
-                minLength={0}
                 placeholder="Enter your current password"
                 required="Current password is required"
               />
@@ -81,7 +80,7 @@ export const ChangePasswordForm = () => {
               <PasswordInput
                 data-testid="new-password"
                 inputName="newPassword"
-                isCheckPasswordStrengthEnabled
+                isStrengthCheckEnabled
                 label="New Password"
                 placeholder="Enter new password"
                 required="New password is required"
@@ -101,7 +100,6 @@ export const ChangePasswordForm = () => {
                 data-testid="new-password-confirmation"
                 inputName="newPasswordConfirmation"
                 label="Confirm New Password"
-                minLength={0}
                 placeholder="Confirm new password"
                 required="Confirmation is required"
                 validate={(val: string) =>
diff --git a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.test.tsx b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.test.tsx
index 1a4cc67fdb..d08a988ba8 100644
--- a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.test.tsx
+++ b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.test.tsx
@@ -34,11 +34,6 @@ describe("<EnterAndConfirmPassword />", () => {
       await checkPasswords(mockPassword, "password1", false);
     });
 
-    test("Not meeting password policy", async () => {
-      render(fixture(false));
-      await checkPasswords("tes", "tes", false);
-    });
-
     test("Form is loading", () => {
       render(fixture(true));
       const submit = screen.getByRole("button", { name: /submit/i });
diff --git a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
index 717a38e117..118ca06f61 100644
--- a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
+++ b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
@@ -42,7 +42,7 @@ export const EnterAndConfirmPassword = ({
             <PasswordInput
               data-testid="password"
               inputName="password"
-              isCheckPasswordStrengthEnabled
+              isStrengthCheckEnabled
               placeholder="Enter master password"
             />
             {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
@@ -53,7 +53,6 @@ export const EnterAndConfirmPassword = ({
               data-testid="confirmation"
               inputName="confirm"
               label="Confirm Password"
-              minLength={0}
               placeholder="Confirm your password"
               required="Confirmation is required"
               validate={(val: string) =>
diff --git a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterPassword.test.tsx b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterPassword.test.tsx
index d5955ad3a9..7d6d17c547 100644
--- a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterPassword.test.tsx
+++ b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterPassword.test.tsx
@@ -24,11 +24,6 @@ describe("<EnterPassword />", () => {
       await checkPasswords(mockPassword, true);
     });
 
-    test("Not meeting password policy", async () => {
-      render(fixture(false));
-      await checkPasswords("tes", false);
-    });
-
     test("Form is loading", () => {
       render(fixture(true));
 
diff --git a/apps/desktop/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx b/apps/desktop/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
index 45d93f07c9..4ac2842376 100644
--- a/apps/desktop/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
+++ b/apps/desktop/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
@@ -61,7 +61,7 @@ export const RestoreSecretKey = ({ goToStep }: { goToStep: (step: OnboardingStep
 
           {isEncrypted && (
             <FormControl marginTop="20px" isInvalid={!!errors.password}>
-              <PasswordInput data-testid="password" inputName="password" minLength={0} />
+              <PasswordInput data-testid="password" inputName="password" />
               {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
             </FormControl>
           )}
diff --git a/apps/desktop/src/components/PasswordInput.tsx b/apps/desktop/src/components/PasswordInput.tsx
index 0650e1e313..63f1a0843a 100644
--- a/apps/desktop/src/components/PasswordInput.tsx
+++ b/apps/desktop/src/components/PasswordInput.tsx
@@ -6,22 +6,20 @@ import {
   type InputProps,
   InputRightElement,
 } from "@chakra-ui/react";
-import { usePasswordValidation } from "@umami/components";
+import { DEFAULT_MIN_LENGTH, usePasswordValidation } from "@umami/components";
 import { useState } from "react";
 import { type FieldValues, type Path, type RegisterOptions, useFormContext } from "react-hook-form";
 
 import { EyeIcon, EyeSlashIcon } from "../assets/icons";
 import colors from "../style/colors";
 
-const MIN_LENGTH = 12;
-
 // <T extends FieldValues> is needed to be compatible with the useForm's type parameter (FormData)
 // <U extends Path<T>> makes sure that we can pass in only valid inputName that exists in FormData
 type PasswordInputProps<T extends FieldValues, U extends Path<T>> = {
   inputName: U;
   label?: string;
   placeholder?: string;
-  isCheckPasswordStrengthEnabled?: boolean;
+  isStrengthCheckEnabled?: boolean;
   required?: string | boolean;
   minLength?: RegisterOptions<T, U>["minLength"];
   validate?: (val: string) => string | boolean;
@@ -33,8 +31,8 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   label = "Password",
   placeholder = "Enter your password",
   required = "Password is required",
-  isCheckPasswordStrengthEnabled = false,
-  minLength = MIN_LENGTH,
+  isStrengthCheckEnabled = false,
+  minLength = DEFAULT_MIN_LENGTH,
   validate,
   ...rest
 }: PasswordInputProps<T, U>) => {
@@ -43,18 +41,19 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
     color: colors.gray[500],
     inputName,
+    minLength,
   });
 
   const handleValidate = (val: string) => {
     if (validate) {
       const validationResult = validate(val);
 
-      if (isCheckPasswordStrengthEnabled && validationResult === true) {
+      if (isStrengthCheckEnabled && validationResult === true) {
         return validatePasswordStrength(val);
       }
 
       return validationResult;
-    } else if (isCheckPasswordStrengthEnabled) {
+    } else if (isStrengthCheckEnabled) {
       return validatePasswordStrength(val);
     }
   };
@@ -70,13 +69,6 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           type={showPassword ? "text" : "password"}
           {...register(inputName, {
             required,
-            minLength:
-              minLength && required
-                ? {
-                    value: minLength,
-                    message: `Your password must be at least ${minLength} characters long`,
-                  }
-                : undefined,
             validate: handleValidate,
           })}
           {...rest}
@@ -91,7 +83,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           </Button>
         </InputRightElement>
       </InputGroup>
-      {isCheckPasswordStrengthEnabled && PasswordStrengthBar}
+      {isStrengthCheckEnabled && PasswordStrengthBar}
     </>
   );
 };
diff --git a/apps/desktop/src/components/SendFlow/SignButton.tsx b/apps/desktop/src/components/SendFlow/SignButton.tsx
index 4fc6b12360..594b6c0627 100644
--- a/apps/desktop/src/components/SendFlow/SignButton.tsx
+++ b/apps/desktop/src/components/SendFlow/SignButton.tsx
@@ -101,7 +101,7 @@ export const SignButton = ({
         <Box width="100%">
           <FormProvider {...form}>
             <FormControl isInvalid={!!errors.password} marginY="16px">
-              <PasswordInput data-testid="password" inputName="password" minLength={0} />
+              <PasswordInput data-testid="password" inputName="password" />
               {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
             </FormControl>
             <Button
diff --git a/apps/desktop/src/setupTests.tsx b/apps/desktop/src/setupTests.tsx
index 4acf3d9e06..ba167fbc8b 100644
--- a/apps/desktop/src/setupTests.tsx
+++ b/apps/desktop/src/setupTests.tsx
@@ -26,14 +26,6 @@ MockDate.set("2023-03-27T14:15:09.760Z");
 
 jest.mock("./env", () => ({ IS_DEV: false }));
 
-jest.mock("@umami/components", () => ({
-  ...jest.requireActual("@umami/components"),
-  usePasswordValidation: () => ({
-    validatePasswordStrength: () => true,
-    PasswordStrengthBar: <div>PasswordStrengthBar</div>,
-  }),
-}));
-
 beforeEach(() => {
   // Add missing browser APIs
   Object.defineProperties(global, {
diff --git a/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx b/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
index 25c827904c..ea8f64642c 100644
--- a/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
+++ b/apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx
@@ -51,7 +51,6 @@ export const MasterPasswordModal = ({ onSubmit }: MasterPasswordModalProps) => {
               data-testid="master-password"
               inputName="password"
               label="Password"
-              minLength={0}
               placeholder="Enter your password"
             />
           </ModalBody>
diff --git a/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.test.tsx b/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.test.tsx
index 36f93b5e1f..cc54cdd235 100644
--- a/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.test.tsx
+++ b/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.test.tsx
@@ -60,7 +60,7 @@ describe("<ChangePasswordMenu />", () => {
 
       await waitFor(() => {
         expect(screen.getByTestId("new-password-error")).toHaveTextContent(
-          "Your password must be at least 12 characters long"
+          "Password must be at least 12 characters long"
         );
       });
     });
diff --git a/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx b/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx
index e302d458b7..38d925a324 100644
--- a/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx
+++ b/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx
@@ -37,7 +37,6 @@ export const ChangePasswordMenu = () => {
               data-testid="current-password"
               inputName="currentPassword"
               label="Current Password"
-              minLength={0}
               placeholder="Your password"
               required="Current password is required"
             />
@@ -45,7 +44,7 @@ export const ChangePasswordMenu = () => {
             <PasswordInput
               data-testid="new-password"
               inputName="newPassword"
-              isCheckPasswordStrengthEnabled
+              isStrengthCheckEnabled
               label="New Password"
               placeholder="New password"
               required="New password is required"
@@ -57,7 +56,6 @@ export const ChangePasswordMenu = () => {
               data-testid="new-password-confirmation"
               inputName="newPasswordConfirmation"
               label="Confirm password"
-              minLength={0}
               placeholder="Confirm password"
               required="Confirmation is required"
               validate={(val: string) =>
diff --git a/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx
index 3543155762..ad8f23e727 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx
@@ -106,7 +106,7 @@ export const ImportBackupTab = () => {
             />
             {errors.file && <FormErrorMessage>{errors.file.message}</FormErrorMessage>}
           </FormControl>
-          <PasswordInput inputName="password" minLength={0} required={false} />
+          <PasswordInput inputName="password" required={false} />
           <Button width="full" isDisabled={!isValid} type="submit" variant="primary">
             Import Wallet
           </Button>
diff --git a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
index f8fa7e2347..8d8f31d7e5 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
@@ -52,7 +52,7 @@ export const SecretKeyTab = () => {
             {errors.secretKey && <FormErrorMessage>{errors.secretKey.message}</FormErrorMessage>}
           </FormControl>
 
-          {isEncrypted && <PasswordInput inputName="secretKeyPassword" minLength={0} />}
+          {isEncrypted && <PasswordInput inputName="secretKeyPassword" />}
 
           <Button width="full" isDisabled={!isValid} type="submit" variant="primary">
             Next
diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
index afb926b9f1..99fd755e0c 100644
--- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
+++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
@@ -199,7 +199,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
             <Flex flexDirection="column" gap="24px">
               <PasswordInput
                 inputName="password"
-                isCheckPasswordStrengthEnabled={!isPasswordSet}
+                isStrengthCheckEnabled={!isPasswordSet}
                 label={isPasswordSet ? "Password" : "Set Password"}
                 required="Password is required"
               />
@@ -207,7 +207,6 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
                 <PasswordInput
                   inputName="passwordConfirmation"
                   label="Confirm Password"
-                  minLength={0}
                   required="Password confirmation is required"
                   validate={value => value === getValues("password") || "Passwords do not match"}
                 />
diff --git a/apps/web/src/components/PasswordInput/PasswordInput.tsx b/apps/web/src/components/PasswordInput/PasswordInput.tsx
index 7e64db1503..4f4283e0cb 100644
--- a/apps/web/src/components/PasswordInput/PasswordInput.tsx
+++ b/apps/web/src/components/PasswordInput/PasswordInput.tsx
@@ -8,15 +8,13 @@ import {
   type InputProps,
   InputRightElement,
 } from "@chakra-ui/react";
-import { usePasswordValidation } from "@umami/components";
+import { DEFAULT_MIN_LENGTH, usePasswordValidation } from "@umami/components";
 import { useState } from "react";
 import { type FieldValues, type Path, type RegisterOptions, useFormContext } from "react-hook-form";
 
 import { EyeIcon, EyeOffIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 
-const MIN_LENGTH = 12;
-
 // <T extends FieldValues> is needed to be compatible with the useForm's type parameter (FormData)
 // <U extends Path<T>> makes sure that we can pass in only valid inputName that exists in FormData
 type PasswordInputProps<T extends FieldValues, U extends Path<T>> = {
@@ -24,7 +22,7 @@ type PasswordInputProps<T extends FieldValues, U extends Path<T>> = {
   label?: string;
   placeholder?: string;
   required?: string | boolean;
-  isCheckPasswordStrengthEnabled?: boolean;
+  isStrengthCheckEnabled?: boolean;
   minLength?: RegisterOptions<T, U>["minLength"];
   validate?: (val: string) => string | boolean;
 } & InputProps & {
@@ -36,8 +34,8 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   label = "Password",
   placeholder = "Enter your password",
   required = "Password is required",
-  minLength = MIN_LENGTH,
-  isCheckPasswordStrengthEnabled = false,
+  minLength = DEFAULT_MIN_LENGTH,
+  isStrengthCheckEnabled = false,
   validate,
   ...rest
 }: PasswordInputProps<T, U>) => {
@@ -49,6 +47,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   const [showPassword, setShowPassword] = useState<boolean>(false);
   const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
     inputName,
+    minLength,
   });
 
   const color = useColor();
@@ -58,27 +57,20 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
 
   const handleValidate = (val: string) => {
     if (validate) {
-      const validateResult = validate(val);
+      const validationResult = validate(val);
 
-      if (isCheckPasswordStrengthEnabled && validateResult === true) {
+      if (isStrengthCheckEnabled && validationResult === true) {
         return validatePasswordStrength(val);
       }
 
-      return validateResult;
-    } else if (isCheckPasswordStrengthEnabled) {
+      return validationResult;
+    } else if (isStrengthCheckEnabled) {
       return validatePasswordStrength(val);
     }
   };
 
   const registerProps = register(inputName, {
     required,
-    minLength:
-      minLength && required
-        ? {
-            value: minLength,
-            message: `Your password must be at least ${minLength} characters long`,
-          }
-        : undefined,
     validate: handleValidate,
   });
 
@@ -111,7 +103,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           />
         </InputRightElement>
       </InputGroup>
-      {isCheckPasswordStrengthEnabled && PasswordStrengthBar}
+      {isStrengthCheckEnabled && PasswordStrengthBar}
       {error && (
         <FormErrorMessage data-testid={`${rest["data-testid"]}-error`}>
           {errorMessage}
diff --git a/apps/web/src/components/SendFlow/SignButton.tsx b/apps/web/src/components/SendFlow/SignButton.tsx
index e04ac531cf..fac03c51c7 100644
--- a/apps/web/src/components/SendFlow/SignButton.tsx
+++ b/apps/web/src/components/SendFlow/SignButton.tsx
@@ -114,7 +114,7 @@ export const SignButton = ({
                 <Input
                   data-testid="password"
                   type="password"
-                  {...form.register("password", { minLength: 8, required: "Password is required" })}
+                  {...form.register("password", { required: "Password is required" })}
                 />
                 {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
               </FormControl>
diff --git a/packages/components/src/hooks/usePasswordValidation.test.tsx b/packages/components/src/hooks/usePasswordValidation.test.tsx
index beed46149d..fcfcfafe84 100644
--- a/packages/components/src/hooks/usePasswordValidation.test.tsx
+++ b/packages/components/src/hooks/usePasswordValidation.test.tsx
@@ -4,15 +4,16 @@ import { usePasswordValidation } from "./usePasswordValidation";
 import { act, render, screen, userEvent } from "../testUtils";
 
 const password = {
-  wrong: "123123",
-  weak: "Qwerty1231231",
-  medium: "Qwerty123123!23",
+  short: "123123",
+  noUppercase: "qwerty1231231",
+  noNumber: "Qwertykgjfdkjk!",
+  noSpecialChar: "Qwerty123123123",
   strong: "Qwerty123123!23vcxz",
 };
 
 const TestComponent = () => {
   const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation();
-  const { register } = useFormContext();
+  const { formState, register } = useFormContext();
 
   return (
     <>
@@ -25,6 +26,7 @@ const TestComponent = () => {
         })}
       />
       {PasswordStrengthBar}
+      <span data-testid="password-error">{formState.errors.password?.message as string}</span>
     </>
   );
 };
@@ -53,23 +55,28 @@ describe("usePasswordValidation", () => {
   });
 
   it.each([
-    [password.weak, "Weak"],
-    [password.medium, "Medium"],
-    [password.strong, "Strong"],
+    [password.short, "Password must be at least 12 characters long"],
+    [password.noUppercase, "Password must contain at least one uppercase letter"],
+    [password.noNumber, "Password must contain at least one number"],
+    [password.noSpecialChar, "Password must contain at least one special character"],
   ])("should update PasswordStrengthBar based on score", async (password, text) => {
     const user = userEvent.setup();
     render(<Wrapper />);
 
     await act(() => user.type(screen.getByLabelText("Password"), password));
-    expect(screen.getByTestId(`password-strength-${text}`)).toBeVisible();
+
+    expect(screen.queryByTestId("password-strength-text")).not.toBeInTheDocument();
+    expect(screen.getByTestId("password-error")).toHaveTextContent(text);
   });
 
-  it("should not display password strength text if there is a password error", async () => {
+  it("should display that password is strong if all requirements are met", async () => {
     const user = userEvent.setup();
     render(<Wrapper />);
 
-    await act(() => user.type(screen.getByLabelText("Password"), password.wrong));
+    await act(() => user.type(screen.getByLabelText("Password"), password.strong));
 
-    expect(screen.queryByTestId("password-strength-text")).not.toBeInTheDocument();
+    expect(screen.getByTestId("password-strength-text")).toHaveTextContent(
+      "Your password is strong"
+    );
   });
 });
diff --git a/packages/components/src/hooks/usePasswordValidation.tsx b/packages/components/src/hooks/usePasswordValidation.tsx
index bff4cb345a..db538375d7 100644
--- a/packages/components/src/hooks/usePasswordValidation.tsx
+++ b/packages/components/src/hooks/usePasswordValidation.tsx
@@ -4,8 +4,11 @@ import { useFormContext } from "react-hook-form";
 import { z } from "zod";
 import zxcvbn from "zxcvbn";
 
+export const DEFAULT_MIN_LENGTH = 12;
+
 const DEFAULT_SCORE = 0;
 const DEFAULT_COLOR = "gray.100";
+const DEFAULT_PASSWORD_FIELD_NAME = "password";
 
 type PasswordStrengthBarProps = {
   score: number;
@@ -16,22 +19,24 @@ type PasswordStrengthBarProps = {
 type UsePasswordValidationProps = {
   color?: string;
   inputName?: string;
+  minLength?: number;
 };
 
 const PASSWORD_REQUIREMENTS_COUNT = 4;
-const passwordSchema = z
-  .string()
-  .min(12, { message: "Password must be at least 12 characters long" })
-  .regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter" })
-  .regex(/\d/, { message: "Password must contain at least one number" })
-  .regex(/[!@#$%^&*(),.?":{}|<>]/, {
-    message: "Password must contain at least one special character",
-  });
+const getPasswordSchema = (minLength: number) =>
+  z
+    .string()
+    .min(minLength, { message: `Password must be at least ${minLength} characters long` })
+    .regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter" })
+    .regex(/\d/, { message: "Password must contain at least one number" })
+    .regex(/[!@#$%^&*(),.?":{}|<>]/, {
+      message: "Password must contain at least one special character",
+    });
 
 const PasswordStrengthBar = ({ score, color, hasError }: PasswordStrengthBarProps) => {
   const colors = [color, "red.500", "yellow.500", "green.500"];
 
-  const getColor = (index: number) => {
+  const getSectionColor = (index: number) => {
     switch (score) {
       case 1:
       case 2:
@@ -54,7 +59,7 @@ const PasswordStrengthBar = ({ score, color, hasError }: PasswordStrengthBarProp
           <Box
             key={index}
             flex="1"
-            background={getColor(index)}
+            background={getSectionColor(index)}
             borderRadius="8px"
             transition="background-color 0.2s ease"
           />
@@ -71,7 +76,8 @@ const PasswordStrengthBar = ({ score, color, hasError }: PasswordStrengthBarProp
 
 export const usePasswordValidation = ({
   color = DEFAULT_COLOR,
-  inputName = "password",
+  inputName = DEFAULT_PASSWORD_FIELD_NAME,
+  minLength = DEFAULT_MIN_LENGTH,
 }: UsePasswordValidationProps = {}) => {
   const [passwordScore, setPasswordScore] = useState(DEFAULT_SCORE);
   const form = useFormContext();
@@ -89,7 +95,7 @@ export const usePasswordValidation = ({
     let schemaErrors = 0;
 
     try {
-      passwordSchema.parse(value);
+      getPasswordSchema(minLength).parse(value);
     } catch (e) {
       if (e instanceof z.ZodError) {
         schemaErrors = e.errors.length;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e47f2de1cd..36e5844f43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
     devDependencies:
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4))
+        version: 29.7.0(@types/node@20.14.11)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.4))
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -906,7 +906,7 @@ importers:
     dependencies:
       '@chakra-ui/icons':
         specifier: ^2.1.1
-        version: 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 2.2.1(@chakra-ui/react@2.8.2(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(framer-motion@11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@chakra-ui/react':
         specifier: ^2.8.2
         version: 2.8.2(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(framer-motion@11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1018,7 +1018,7 @@ importers:
         version: 8.57.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.14.11)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.4))
+        version: 29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4))
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1345,13 +1345,13 @@ importers:
         version: 2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
       eslint-plugin-jest:
         specifier: ^28.8.3
-        version: 28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(babel-plugin-macros@3.1.0))(typescript@5.5.4)
+        version: 28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)))(typescript@5.5.4)
       eslint-plugin-jest-dom:
         specifier: ^5.4.0
         version: 5.4.0(@testing-library/dom@10.4.0)(eslint@8.57.0)
       eslint-plugin-playwright:
         specifier: ^1.6.2
-        version: 1.6.2(eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(babel-plugin-macros@3.1.0))(typescript@5.5.4))(eslint@8.57.0)
+        version: 1.6.2(eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)))(typescript@5.5.4))(eslint@8.57.0)
       eslint-plugin-react:
         specifier: ^7.37.1
         version: 7.37.1(eslint@8.57.0)
@@ -17051,23 +17051,23 @@ snapshots:
     optionalDependencies:
       '@testing-library/dom': 10.4.0
 
-  eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(babel-plugin-macros@3.1.0))(typescript@5.5.4):
+  eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)))(typescript@5.5.4):
     dependencies:
       '@typescript-eslint/utils': 7.18.0(eslint@8.57.0)(typescript@5.5.4)
       eslint: 8.57.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)
-      jest: 29.7.0(@types/node@20.14.11)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.4))
+      jest: 29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-playwright@1.6.2(eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(babel-plugin-macros@3.1.0))(typescript@5.5.4))(eslint@8.57.0):
+  eslint-plugin-playwright@1.6.2(eslint-plugin-jest@28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)))(typescript@5.5.4))(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
       globals: 13.24.0
     optionalDependencies:
-      eslint-plugin-jest: 28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(babel-plugin-macros@3.1.0))(typescript@5.5.4)
+      eslint-plugin-jest: 28.8.3(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)))(typescript@5.5.4)
 
   eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
     dependencies:
@@ -18356,10 +18356,10 @@ snapshots:
 
   jest-config@29.7.0(@types/node@20.14.11)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.25.2)
+      babel-jest: 29.7.0(@babel/core@7.25.7)
       chalk: 4.1.2
       ci-info: 3.9.0
       deepmerge: 4.3.1
@@ -18387,10 +18387,10 @@ snapshots:
 
   jest-config@29.7.0(@types/node@22.1.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4)):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.25.2)
+      babel-jest: 29.7.0(@babel/core@7.25.7)
       chalk: 4.1.2
       ci-info: 3.9.0
       deepmerge: 4.3.1