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>

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

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;

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 = '';
+    const isTooShort =
-    let passwordInputError = '';
+      passwordInput.length && passwordInput.length < PASSWORD_MIN_LENGTH;
-    const passwordEvaluation = zxcvbn(passwordInput);
+    const { score } = zxcvbn(passwordInput);
-    const passwordStrengthLabel = getPasswordStrengthLabel(
+    const passwordStrengthLabel = getPasswordStrengthLabel(isTooShort, score);
-      passwordEvaluation.score,
+    const passwordStrengthComponent = t('passwordStrength', [
-      t,
+      <span key={score} className={passwordStrengthLabel.className}>
-    );
-    let passwordStrengthDescription = passwordStrengthLabel.description;
-    let passwordStrengthInput = t('passwordStrength', [
-      <span
-        key={passwordEvaluation.score}
-        className={passwordStrengthLabel.className}
-      >
         {passwordStrengthLabel.text}
       </span>,
     ]);
-
+    const confirmError =
-    if (passwordInput.length < 8) {
+      !confirmPassword || passwordInput === confirmPassword
-      passwordInputError = passwordInput.length
+        ? ''
-        ? t('passwordNotLongEnough')
+        : t('passwordsDontMatch');
-        : '';
-      passwordStrengthInput = null;
-      passwordStrengthDescription = '';
-    }
-
-    if (confirmPassword && passwordInput !== confirmPassword) {
-      confirmError = t('passwordsDontMatch');
-    }
 
     setPassword(passwordInput);
-    setPasswordError(passwordInputError);
+    setPasswordStrength(passwordStrengthComponent);
-    setPasswordStrength(passwordStrengthInput);
+    setPasswordStrengthText(passwordStrengthLabel.description);
-    setPasswordStrengthText(passwordStrengthDescription);
     setConfirmPasswordError(confirmError);
   };
 
   const handleConfirmPasswordChange = (confirmPasswordInput) => {
-    let error = '';
+    const error =
-    if (password !== confirmPasswordInput) {
+      password === confirmPasswordInput ? '' : t('passwordsDontMatch');
-      error = 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}