From 1acb1b2e5d45299d0cebd71ced18b5af5faf5b53 Mon Sep 17 00:00:00 2001
From: legobeat <109787230+legobeat@users.noreply.github.com>
Date: Thu, 15 Dec 2022 20:56:27 +0000
Subject: [PATCH] Refactor password validation (#16902)

* ui: add common constant PASSWORD_MIN_LENGTH=8

* ui: simplify password validation logic

* ui: getPasswordStrengthLabel using t from context

Co-authored-by: Alex Donesky <adonesky@gmail.com>
---
 .../app/create-new-vault/create-new-vault.js  |  3 +-
 ui/helpers/constants/common.js                |  1 +
 .../create-password/create-password.js        | 68 ++++++++-----------
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/ui/components/app/create-new-vault/create-new-vault.js b/ui/components/app/create-new-vault/create-new-vault.js
index f27e1a6e8..b8ad32670 100644
--- a/ui/components/app/create-new-vault/create-new-vault.js
+++ b/ui/components/app/create-new-vault/create-new-vault.js
@@ -6,6 +6,7 @@ import Button from '../../ui/button';
 import CheckBox from '../../ui/check-box';
 import Typography from '../../ui/typography';
 import SrpInput from '../srp-input';
+import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 
 export default function CreateNewVault({
   disabled = false,
@@ -27,7 +28,7 @@ export default function CreateNewVault({
       let newConfirmPasswordError = '';
       let newPasswordError = '';
 
-      if (newPassword && newPassword.length < 8) {
+      if (newPassword && newPassword.length < PASSWORD_MIN_LENGTH) {
         newPasswordError = t('passwordNotLongEnough');
       }
 
diff --git a/ui/helpers/constants/common.js b/ui/helpers/constants/common.js
index d0281dde6..a08fb17bb 100644
--- a/ui/helpers/constants/common.js
+++ b/ui/helpers/constants/common.js
@@ -23,3 +23,4 @@ _supportRequestLink =
 
 export const SUPPORT_REQUEST_LINK = _supportRequestLink;
 export const CONTRACT_ADDRESS_LINK = _contractAddressLink;
+export const PASSWORD_MIN_LENGTH = 8;
diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js
index 369d45ead..2033783c7 100644
--- a/ui/pages/onboarding-flow/create-password/create-password.js
+++ b/ui/pages/onboarding-flow/create-password/create-password.js
@@ -26,6 +26,7 @@ import {
   TwoStepProgressBar,
   twoStepStages,
 } from '../../../components/app/step-progress-bar';
+import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { getFirstTimeFlowType } from '../../../selectors';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
@@ -55,76 +56,66 @@ export default function CreatePassword({
       return false;
     }
 
-    if (password.length < 8) {
+    if (password.length < PASSWORD_MIN_LENGTH) {
       return false;
     }
 
     return !passwordError && !confirmPasswordError;
   }, [password, confirmPassword, passwordError, confirmPasswordError]);
 
-  const getPasswordStrengthLabel = (score, translation) => {
+  const getPasswordStrengthLabel = (isTooShort, score) => {
+    if (isTooShort) {
+      return {
+        className: 'create-password__weak',
+        text: t('passwordNotLongEnough'),
+        description: '',
+      };
+    }
     if (score >= 4) {
       return {
         className: 'create-password__strong',
-        text: translation('strong'),
+        text: t('strong'),
         description: '',
       };
-    } else if (score === 3) {
+    }
+    if (score === 3) {
       return {
         className: 'create-password__average',
-        text: translation('average'),
+        text: t('average'),
         description: t('passwordStrengthDescription'),
       };
     }
     return {
       className: 'create-password__weak',
-      text: translation('weak'),
+      text: t('weak'),
       description: t('passwordStrengthDescription'),
     };
   };
 
   const handlePasswordChange = (passwordInput) => {
-    let confirmError = '';
-    let passwordInputError = '';
-    const passwordEvaluation = zxcvbn(passwordInput);
-    const passwordStrengthLabel = getPasswordStrengthLabel(
-      passwordEvaluation.score,
-      t,
-    );
-    let passwordStrengthDescription = passwordStrengthLabel.description;
-    let passwordStrengthInput = t('passwordStrength', [
-      <span
-        key={passwordEvaluation.score}
-        className={passwordStrengthLabel.className}
-      >
+    const isTooShort =
+      passwordInput.length && passwordInput.length < PASSWORD_MIN_LENGTH;
+    const { score } = zxcvbn(passwordInput);
+    const passwordStrengthLabel = getPasswordStrengthLabel(isTooShort, score);
+    const passwordStrengthComponent = t('passwordStrength', [
+      <span key={score} className={passwordStrengthLabel.className}>
         {passwordStrengthLabel.text}
       </span>,
     ]);
-
-    if (passwordInput.length < 8) {
-      passwordInputError = passwordInput.length
-        ? t('passwordNotLongEnough')
-        : '';
-      passwordStrengthInput = null;
-      passwordStrengthDescription = '';
-    }
-
-    if (confirmPassword && passwordInput !== confirmPassword) {
-      confirmError = t('passwordsDontMatch');
-    }
+    const confirmError =
+      !confirmPassword || passwordInput === confirmPassword
+        ? ''
+        : t('passwordsDontMatch');
 
     setPassword(passwordInput);
-    setPasswordError(passwordInputError);
-    setPasswordStrength(passwordStrengthInput);
-    setPasswordStrengthText(passwordStrengthDescription);
+    setPasswordStrength(passwordStrengthComponent);
+    setPasswordStrengthText(passwordStrengthLabel.description);
     setConfirmPasswordError(confirmError);
   };
 
   const handleConfirmPasswordChange = (confirmPasswordInput) => {
-    let error = '';
-    if (password !== confirmPasswordInput) {
-      error = t('passwordsDontMatch');
-    }
+    const error =
+      password === confirmPasswordInput ? '' : t('passwordsDontMatch');
 
     setConfirmPassword(confirmPasswordInput);
     setConfirmPasswordError(error);
@@ -185,7 +176,6 @@ export default function CreatePassword({
           <FormField
             dataTestId="create-password-new"
             autoFocus
-            error={passwordError}
             passwordStrength={passwordStrength}
             passwordStrengthText={passwordStrengthText}
             onChange={handlePasswordChange}