Add password strength meter #1949

OKendigelyan · 2024-09-25T12:20:58Z

Proposed changes

Task link

Types of changes

Steps to reproduce

Screenshots

Web

Screen.Recording.2024-09-25.at.15.19.18.mov

Desktop

Screen.Recording.2024-09-25.at.15.20.37.mov

Checklist

Tests that prove my fix is effective or that my feature works have been added
Documentation has been added (if appropriate)
Screenshots are added (if any UI changes have been made)
All TODOs have a corresponding task created (and the link is attached to it)

vercel · 2024-09-25T12:21:03Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
umami-v2-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2024 1:17pm
umami-v2-web-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2024 1:17pm

asiia-trilitech

Thank you, Oleg - great addition to the password checks 🔥

Please check comments before merging

asiia-trilitech · 2024-09-25T14:28:18Z

packages/components/src/hooks/usePasswordValidation.tsx

+  );
+};
+
+type UsePasswordValidationProps = {


nit, optional: maybe move UsePasswordValidationProps & usePasswordValidation hook to the top of the file?

packages/components/src/hooks/usePasswordValidation.test.tsx

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

apps/desktop/src/components/PasswordInput.tsx

asiia-trilitech · 2024-09-25T14:58:56Z

apps/desktop/src/components/PasswordInput.tsx

+    if (validate) {
+      const validateResult = validate(val);
+
+      if (checkPasswordStrength && validateResult === true) {


validate?: (val: string) => string | boolean;

Is string result for the errors?

validateResult can be a string? won't validateResult === true return true as well?

validateResult could be either a sting or boolean
A non-empty string is a truthy value, but is not strictly equal to true

asiia-trilitech · 2024-09-25T15:02:07Z

apps/desktop/src/components/PasswordInput.tsx

  minLength = MIN_LENGTH,
  validate,
  ...rest
 }: PasswordInputProps<T, U>) => {
  const { register } = useFormContext<T>();
  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const { validatePassword, PasswordStrengthBar } = usePasswordValidation({


nit: maybe validatePasswordStrength to avoid confusion with validate function from the input

apps/web/src/components/PasswordInput/PasswordInput.tsx

asiia-trilitech · 2024-09-25T15:11:56Z

apps/web/src/components/PasswordInput/PasswordInput.tsx

Please apply comments from desktop version of PasswordInput as well

asiia-trilitech · 2024-09-25T15:18:48Z

packages/components/src/hooks/usePasswordValidation.tsx

+  const colors = [colorScheme, "red.500", "yellow.500", "green.500"];
+  const passwordError = form.formState.errors[inputName];
+
+  const getColor = (index: number) => {


nit: maybe getSectionColor & sectionIndex?

@OKendigelyan please consider renaming / adding a comment - it's a bit hard to understand what the function from a first glance

asiia-trilitech · 2024-09-25T15:22:09Z

packages/components/src/hooks/usePasswordValidation.tsx

+
+type PasswordStrengthBarProps = {
+  score: number;
+  colorScheme: string;


nit: maybe defaultSectionColoror defaultColor here?

serjonya-trili · 2024-09-26T11:37:20Z

apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx

@@ -55,6 +57,7 @@ export const ChangePasswordMenu = () => {
              data-testid="new-password-confirmation"
              inputName="newPasswordConfirmation"
              label="Confirm password"
+              minLength={0}


shall we make it the default for the password input so that we don't need to repeat it everywhere?

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx

serjonya-trili · 2024-09-26T11:44:44Z

packages/components/src/hooks/usePasswordValidation.tsx

+    switch (score) {
+      case 1:
+      case 2:
+        return "Weak";


capitalized strength looks strange in UI tbh, maybe use the lowercased one?

packages/components/src/hooks/usePasswordValidation.tsx

asiia-trilitech

Thanks for the changes @OKendigelyan
Approved with some minor comments 🚀

asiia-trilitech · 2024-10-02T17:27:24Z

packages/components/src/hooks/usePasswordValidation.tsx

+  const colors = [colorScheme, "red.500", "yellow.500", "green.500"];
+  const passwordError = form.formState.errors[inputName];
+
+  const getColor = (index: number) => {


@OKendigelyan please consider renaming / adding a comment - it's a bit hard to understand what the function from a first glance

asiia-trilitech · 2024-10-02T17:29:53Z

packages/components/src/hooks/usePasswordValidation.tsx

+};
+
+type UsePasswordValidationProps = {
+  color?: string;


maybe defaultBarColor or something similar? Not very obvious what this param is for with the current name

I think color would be more concise in this case, given that the only place where color can be used as a prop in this hook is the PasswordStrengthBar, so I don't think it can be too confusing

asiia-trilitech · 2024-10-02T17:31:10Z

apps/web/src/components/PasswordInput/PasswordInput.tsx

  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
+    inputName,
+    minLength,


Why MIN_LENGTH is defined here and not in usePasswordValidation?
Could it have values other than 12?

Is it to use it here for the error message?
Maybe instead we can keep everything related to the validation in usePasswordValidation, and export the minLength from there?

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx

asiia-trilitech · 2024-10-02T17:39:53Z

apps/web/src/components/PasswordInput/PasswordInput.tsx

  const color = useColor();

  const error = errors[inputName];
  const errorMessage = error?.message as string;

+  const handleValidate = (val: string) => {
+    if (validate) {
+      const validateResult = validate(val);


nit: maybe validationResult?

OKendigelyan force-pushed the add-password-strength-meter branch from 5093f76 to 348cd03 Compare September 25, 2024 14:08

vercel bot had a problem deploying to Preview – umami-v2-web-storybook September 25, 2024 14:08 Failure

vercel bot had a problem deploying to Preview – umami-v2-web September 25, 2024 14:09 Failure

OKendigelyan marked this pull request as ready for review September 25, 2024 14:18

OKendigelyan requested review from serjonya-trili and asiia-trilitech September 25, 2024 14:18

vercel bot deployed to Preview – umami-v2-web September 25, 2024 14:19 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook September 25, 2024 14:20 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch 2 times, most recently from a386786 to d91a8b5 Compare September 25, 2024 14:26

vercel bot deployed to Preview – umami-v2-web-storybook September 25, 2024 14:28 View deployment

vercel bot deployed to Preview – umami-v2-web September 25, 2024 14:28 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook September 25, 2024 14:45 View deployment

vercel bot deployed to Preview – umami-v2-web September 25, 2024 14:45 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch from 5158e2b to d7f1d41 Compare September 25, 2024 15:00

vercel bot deployed to Preview – umami-v2-web September 25, 2024 15:01 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook September 25, 2024 15:02 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch from d7f1d41 to 1ae6f1d Compare September 25, 2024 15:03

vercel bot deployed to Preview – umami-v2-web September 25, 2024 15:10 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook September 25, 2024 15:12 View deployment

asiia-trilitech approved these changes Sep 25, 2024

View reviewed changes

OKendigelyan force-pushed the add-password-strength-meter branch from 16efe96 to e83a7cb Compare September 26, 2024 11:42

vercel bot deployed to Preview – umami-v2-web-storybook September 26, 2024 11:44 View deployment

vercel bot deployed to Preview – umami-v2-web September 26, 2024 11:44 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch 2 times, most recently from b6d5638 to 8c422c1 Compare September 26, 2024 11:56

serjonya-trili reviewed Sep 26, 2024

View reviewed changes

vercel bot deployed to Preview – umami-v2-web September 26, 2024 11:59 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook September 26, 2024 12:00 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook October 1, 2024 18:45 View deployment

OKendigelyan requested a review from asiia-trilitech October 2, 2024 10:30

OKendigelyan force-pushed the add-password-strength-meter branch from ccaa9e0 to 8b6874d Compare October 2, 2024 10:30

vercel bot deployed to Preview – umami-v2-web October 2, 2024 10:39 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook October 2, 2024 10:40 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch from 8b6874d to 240337f Compare October 2, 2024 16:32

vercel bot deployed to Preview – umami-v2-web October 2, 2024 16:34 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook October 2, 2024 16:36 View deployment

asiia-trilitech approved these changes Oct 2, 2024

View reviewed changes

asiia-trilitech reviewed Oct 2, 2024

View reviewed changes

OKendigelyan force-pushed the add-password-strength-meter branch from 240337f to 4ef32d7 Compare October 3, 2024 12:48

vercel bot deployed to Preview – umami-v2-web October 3, 2024 12:50 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook October 3, 2024 12:51 View deployment

OKendigelyan force-pushed the add-password-strength-meter branch from 4ef32d7 to 9ff1492 Compare October 3, 2024 13:09

vercel bot deployed to Preview – umami-v2-web October 3, 2024 13:10 View deployment

vercel bot deployed to Preview – umami-v2-web-storybook October 3, 2024 13:11 View deployment

OKendigelyan added 8 commits October 3, 2024 14:15

Add password validation hook

82a91b7

Update handle validate in PasswordInput

b25439d

Fix tests

942b453

Fix e2e

0c4390e

Update desktop tests

22107fe

Fix review

e7c011a

Add password requirements check

406da5f

Update usePasswordValidation tests

84be53f

OKendigelyan force-pushed the add-password-strength-meter branch from 9ff1492 to 84be53f Compare October 3, 2024 13:15

vercel bot deployed to Preview – umami-v2-web-storybook October 3, 2024 13:17 View deployment

vercel bot deployed to Preview – umami-v2-web October 3, 2024 13:17 View deployment

OKendigelyan enabled auto-merge (squash) October 3, 2024 13:23

OKendigelyan merged commit 192b5d3 into main Oct 3, 2024
6 checks passed

OKendigelyan deleted the add-password-strength-meter branch October 3, 2024 13:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add password strength meter #1949

Add password strength meter #1949

OKendigelyan commented Sep 25, 2024 •

edited

Loading

vercel bot commented Sep 25, 2024 •

edited

Loading

asiia-trilitech left a comment

asiia-trilitech Sep 25, 2024

asiia-trilitech Sep 25, 2024

OKendigelyan Sep 26, 2024

asiia-trilitech Sep 25, 2024

asiia-trilitech Sep 25, 2024

asiia-trilitech Sep 25, 2024

asiia-trilitech Oct 2, 2024

asiia-trilitech Sep 25, 2024

serjonya-trili Sep 26, 2024

serjonya-trili Sep 26, 2024

asiia-trilitech left a comment

asiia-trilitech Oct 2, 2024

asiia-trilitech Oct 2, 2024

OKendigelyan Oct 3, 2024

asiia-trilitech Oct 2, 2024

asiia-trilitech Oct 2, 2024

asiia-trilitech Oct 2, 2024

Add password strength meter #1949

Add password strength meter #1949

Conversation

OKendigelyan commented Sep 25, 2024 • edited Loading

Proposed changes

Types of changes

Steps to reproduce

Screenshots

Checklist

vercel bot commented Sep 25, 2024 • edited Loading

asiia-trilitech left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asiia-trilitech left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OKendigelyan commented Sep 25, 2024 •

edited

Loading

vercel bot commented Sep 25, 2024 •

edited

Loading