Add password strength meter

apps/desktop-e2e/src/features/multisig.feature

@@ -1,9 +1,9 @@
 Feature: Multisig Account Creation
 
   Scenario: User creates a multisig account
     Given I have account
-      | type       | label | secretKey                                              | password |
-      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | 12345678 |
+      | type       | label | secretKey                                              | password            |
+      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | Qwerty123123!23vcxz |
     And I am on an Accounts page
 
     When I am creating a multisig account
@@ -25,7 +25,7 @@
       | Approvers            | Alice,tz1gUNyn3hmnEWqkusWPzxRaon1cs7ndWh7h |
       | Min No. of approvals | 1                                          |
 
-    When I sign transaction with password "12345678"
+    When I sign transaction with password "Qwerty123123!23vcxz"
     Then I see "Operation Submitted" modal
 
     And I close modal

apps/desktop-e2e/src/features/onboarding.feature

@@ -1,3 +1,3 @@
 Feature: User Onboarding
 
   Scenario: User creates a new seed phrase account
@@ -33,8 +33,8 @@
     When I click "Continue" button
     Then I am on "Umami Master Password" onboarding page
 
-    When I fill "Password" with "12345678"
-    And I fill "Confirm Password" with "12345678"
+    When I fill "Password" with "Qwerty123123!23vcxz"
+    And I fill "Confirm Password" with "Qwerty123123!23vcxz"
     And I click "Submit" button
     Then I am on an Accounts page
     And I see a toast "Account successfully created!"
@@ -76,8 +76,8 @@
     When I click "Continue" button
     Then I am on "Umami Master Password" onboarding page
 
-    When I fill "Password" with "12345678"
-    And I fill "Confirm Password" with "12345678"
+    When I fill "Password" with "Qwerty123123!23vcxz"
+    And I fill "Confirm Password" with "Qwerty123123!23vcxz"
     And I click "Submit" button
     Then I am on an Accounts page
     And I see a toast "Account successfully created!"
@@ -119,8 +119,8 @@
     When I click "Continue" button
     Then I am on "Umami Master Password" onboarding page
 
-    When I fill "Password" with "12345678"
-    And I fill "Confirm Password" with "12345678"
+    When I fill "Password" with "Qwerty123123!23vcxz"
+    And I fill "Confirm Password" with "Qwerty123123!23vcxz"
     And I click "Submit" button
     Then I am on an Accounts page
     And I see a toast "Account successfully created!"
@@ -158,8 +158,8 @@
     When I click "Continue" button
     Then I am on "Umami Master Password" onboarding page
 
-    When I fill "Password" with "12345678"
-    And I fill "Confirm Password" with "12345678"
+    When I fill "Password" with "Qwerty123123!23vcxz"
+    And I fill "Confirm Password" with "Qwerty123123!23vcxz"
     And I click "Submit" button
     Then I am on an Accounts page
     And I see a toast "Account successfully created!"

apps/desktop-e2e/src/features/staking.feature

@@ -1,3 +1,3 @@
 Feature: Staking
 
   # TODO:
@@ -8,8 +8,8 @@
   # stake - unstake - finalize unstake
   Scenario: I delegate to a baker
     Given I have account
-      | type       | label | secretKey                                              | password |
-      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | 12345678 |
+      | type       | label | secretKey                                              | password            |
+      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | Qwerty123123!23vcxz |
     And I am on an Accounts page
     When I open account drawer for "Alice"
     And I delegate to "baker1"
@@ -23,8 +23,8 @@
 
   Scenario: I undelegate
     Given I have account
-      | type       | label | secretKey                                              | password |
-      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | 12345678 |
+      | type       | label | secretKey                                              | password            |
+      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | Qwerty123123!23vcxz |
     And I am on an Accounts page
     When I open account drawer for "Alice"
     And I delegate to "baker1"
@@ -44,8 +44,8 @@
 
   Scenario: I stake to a baker
     Given I have account
-      | type       | label | secretKey                                              | password |
-      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | 12345678 |
+      | type       | label | secretKey                                              | password            |
+      | secret_key | Alice | edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSpJiEbq | Qwerty123123!23vcxz |
     And I am on an Accounts page
     Given baker "baker1" sets delegation parameters
       | limit-of-staking-over-baking | 5    |

apps/desktop-e2e/src/features/updates.feature

@@ -1,9 +1,9 @@
 Feature: Automatic updates
 
   Scenario: My account has been topped-up
     Given I have account
-      | type       | label     | password | secretKey                                              |
-      | secret_key | Account 1 | 12345678 | spsk2jm29sHC99HDi64VBpSwEMZRQ7WfHdvQPVMZCkyWyR4spBrtRW |
+      | type       | label     | password            | secretKey                                              |
+      | secret_key | Account 1 | Qwerty123123!23vcxz | spsk2jm29sHC99HDi64VBpSwEMZRQ7WfHdvQPVMZCkyWyR4spBrtRW |
     And I am on an Accounts page
     When "Account 1" is topped-up with "1.123"
     And I wait until the next refetch

apps/desktop-e2e/src/pages/AccountDrawerPage.ts

@@ -22,7 +22,7 @@ export class AccountDrawerPage {
 
     await this.page.getByRole("button", { name: "Preview" }).click();
 
-    await new SignPage(this.page, "12345678").sign();
+    await new SignPage(this.page, "Qwerty123123!23vcxz").sign();
   }
 
   getRoundButton(buttonName: string): Locator {
@@ -46,7 +46,7 @@ export class AccountDrawerPage {
 
     await this.page.getByRole("button", { name: "Preview" }).click();
 
-    await new SignPage(this.page, "12345678").sign();
+    await new SignPage(this.page, "Qwerty123123!23vcxz").sign();
   }
 
   async stake(amount: number): Promise<void> {
@@ -59,7 +59,7 @@ export class AccountDrawerPage {
 
     await this.page.getByLabel("Enter Amount").fill(String(amount));
     await this.page.getByRole("button", { name: "Preview" }).click();
-    await new SignPage(this.page, "12345678").sign();
+    await new SignPage(this.page, "Qwerty123123!23vcxz").sign();
   }
 
   async stakedBalance(): Promise<number> {

apps/desktop/jest.config.ts

@@ -5,5 +5,5 @@ export default {
   rootDir: "./",
   testTimeout: 20000,
   bail: false,
-  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.tsx"],
 };

apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigPendingOperation.test.tsx

@@ -36,6 +36,7 @@ jest.mock("@umami/state", () => ({
 }));
 
 const MOCK_TEZOS_TOOLKIT = {};
+const password = "Qwerty123123!23vcxz";
 let store: UmamiStore;
 
 beforeEach(() => {
@@ -124,7 +125,7 @@ describe("<MultisigPendingOperation />", () => {
 
     expect(jest.mocked(estimate)).toHaveBeenCalledWith(operation, MAINNET);
 
-    await act(() => user.type(screen.getByTestId("password"), "mockPass"));
+    await act(() => user.type(screen.getByTestId("password"), password));
 
     const submitButton = screen.getByRole("button", {
       name: "Execute transaction",
@@ -187,7 +188,7 @@ describe("<MultisigPendingOperation />", () => {
 
     expect(jest.mocked(estimate)).toHaveBeenCalledWith(operations, MAINNET);
 
-    await act(() => user.type(screen.getByTestId("password"), "mockPass"));
+    await act(() => user.type(screen.getByTestId("password"), password));
 
     const submitButton = screen.getByRole("button", {
       name: "Approve transaction",

apps/desktop/src/components/ChangePassword/ChangePasswordForm.test.tsx

@@ -46,7 +46,7 @@ describe("ChangePassword Form", () => {
       });
     });
 
-    it("requires 8 characters", async () => {
+    it("requires 12 characters", async () => {
       render(fixture());
 
       const newPasswordInput = screen.getByTestId("new-password");
@@ -55,7 +55,7 @@ describe("ChangePassword Form", () => {
 
       await waitFor(() => {
         expect(screen.getByTestId("new-password-error")).toHaveTextContent(
-          "Your password must be at least 8 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();

apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx

@@ -25,7 +25,7 @@ type ChangePasswordFormValues = {
 
 export const ChangePasswordForm = () => {
   const { onClose } = useDynamicModalContext();
-  const form = useForm<ChangePasswordFormValues>({ mode: "onBlur" });
+  const form = useForm<ChangePasswordFormValues>({ mode: "all" });
   const toast = useToast();
   const dispatch = useAppDispatch();
   const { handleAsyncAction, isLoading } = useAsyncActionHandler();
@@ -80,6 +80,7 @@ export const ChangePasswordForm = () => {
               <PasswordInput
                 data-testid="new-password"
                 inputName="newPassword"
+                isStrengthCheckEnabled
                 label="New Password"
                 placeholder="Enter new password"
                 required="New password is required"

apps/desktop/src/components/FormErrorMessage.tsx

@@ -8,7 +8,7 @@ import { ExclamationIcon } from "../assets/icons";
 import colors from "../style/colors";
 
 export const FormErrorMessage = ({ children, ...props }: FormErrorMessageProps) => (
-  <OriginalFormErrorMessage color={colors.orange} fontSize="12px" {...props}>
+  <OriginalFormErrorMessage color={colors.orange} fontSize="14px" {...props}>
     <Icon as={ExclamationIcon} marginRight="6px" />
     {children}
   </OriginalFormErrorMessage>

apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.test.tsx

@@ -3,6 +3,8 @@ import { noop } from "lodash";
 import { EnterAndConfirmPassword } from "./EnterAndConfirmPassword";
 import { act, render, screen, userEvent } from "../../../../mocks/testUtils";
 
+const mockPassword = "Qwerty123123!23vcxz";
+
 const fixture = (isLoading: boolean) => (
   <EnterAndConfirmPassword isLoading={isLoading} onSubmit={noop} />
 );
@@ -24,17 +26,12 @@ describe("<EnterAndConfirmPassword />", () => {
   describe("Form", () => {
     test("Working verification", async () => {
       render(fixture(false));
-      await checkPasswords("password", "password", true);
+      await checkPasswords(mockPassword, mockPassword, true);
     });
 
     test("Not matching password", async () => {
       render(fixture(false));
-      await checkPasswords("password", "password1", false);
-    });
-
-    test("Not meeting password policy", async () => {
-      render(fixture(false));
-      await checkPasswords("tes", "tes", false);
+      await checkPasswords(mockPassword, "password1", false);
     });
 
     test("Form is loading", () => {

apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx

@@ -19,7 +19,7 @@ export const EnterAndConfirmPassword = ({
   };
 
   const form = useForm<ConfirmPasswordFormValues>({
-    mode: "onBlur",
+    mode: "onChange",
   });
 
   const {
@@ -42,6 +42,7 @@ export const EnterAndConfirmPassword = ({
             <PasswordInput
               data-testid="password"
               inputName="password"
+              isStrengthCheckEnabled
               placeholder="Enter master password"
             />
             {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}

apps/desktop/src/components/Onboarding/masterPassword/password/EnterPassword.test.tsx

@@ -3,6 +3,8 @@ import { noop } from "lodash";
 import { EnterPassword } from "./EnterPassword";
 import { act, render, screen, userEvent } from "../../../../mocks/testUtils";
 
+const mockPassword = "Qwerty123123!23vcxz";
+
 const fixture = (isLoading: boolean) => <EnterPassword isLoading={isLoading} onSubmit={noop} />;
 
 const checkPasswords = async (password: string, expected: boolean) => {
@@ -19,12 +21,7 @@ describe("<EnterPassword />", () => {
   describe("Form", () => {
     test("Working verification", async () => {
       render(fixture(false));
-      await checkPasswords("password", true);
-    });
-
-    test("Not meeting password policy", async () => {
-      render(fixture(false));
-      await checkPasswords("tes", false);
+      await checkPasswords(mockPassword, true);
     });
 
     test("Form is loading", () => {

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

apps/desktop/src/components/PasswordInput.tsx

@@ -6,22 +6,23 @@ import {
   type InputProps,
   InputRightElement,
 } from "@chakra-ui/react";
+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";
-
-const MIN_LENGTH = 8;
+import colors from "../style/colors";
 
 // <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;
+  isStrengthCheckEnabled?: boolean;
   required?: string | boolean;
   minLength?: RegisterOptions<T, U>["minLength"];
-  validate?: RegisterOptions<T, U>["validate"];
+  validate?: (val: string) => string | boolean;
 } & InputProps;
 
 // TODO: add an error message and make it nested under FormControl
@@ -30,12 +31,32 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   label = "Password",
   placeholder = "Enter your password",
   required = "Password is required",
-  minLength = MIN_LENGTH,
+  isStrengthCheckEnabled = false,
+  minLength = DEFAULT_MIN_LENGTH,
   validate,
   ...rest
 }: PasswordInputProps<T, U>) => {
   const { register } = useFormContext<T>();
   const [showPassword, setShowPassword] = useState<boolean>(false);
+  const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
+    color: colors.gray[500],
+    inputName,
+    minLength,
+  });
+
+  const handleValidate = (val: string) => {
+    if (validate) {
+      const validationResult = validate(val);
+
+      if (isStrengthCheckEnabled && validationResult === true) {
+        return validatePasswordStrength(val);
+      }
+
+      return validationResult;
+    } else if (isStrengthCheckEnabled) {
+      return validatePasswordStrength(val);
+    }
+  };
 
   return (
     <>
@@ -48,14 +69,7 @@ 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,
+            validate: handleValidate,
           })}
           {...rest}
         />
@@ -69,6 +83,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           </Button>
         </InputRightElement>
       </InputGroup>
+      {isStrengthCheckEnabled && PasswordStrengthBar}
     </>
   );
 };

apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx

@@ -52,7 +52,6 @@ export const MasterPasswordModal = ({ onSubmit }: MasterPasswordModalProps) => {
               inputName="password"
               label="Password"
               placeholder="Enter your password"
-              required="Password is required"
             />
           </ModalBody>
           <ModalFooter>