fix: fix the password field behaviour (#94)

edx · Jun 28, 2024 · 46e5668 · 46e5668
1 parent ac35ba1
commit 46e5668
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 35 deletions.
diff --git a/src/forms/fields/password-field/index.jsx b/src/forms/fields/password-field/index.jsx
@@ -45,9 +45,16 @@ const PasswordField = forwardRef((props, ref) => {
 
   const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
   const [showPasswordRequirements, setShowPasswordRequirements] = useState(false);
+  const [isFieldFocusOut, setFieldFocusOut] = useState(false);
 
   const handleOnBlur = (e) => {
     const { name: fieldName, value: fieldValue } = e.target;
+
+    if (isFieldFocusOut) {
+      setShowPasswordRequirements(false);
+      setFieldFocusOut(false);
+    }
+
     if (fieldName === props.name && e.relatedTarget?.name === 'passwordIcon') {
       return; // Do not run validations on password icon click
     }
@@ -93,6 +100,12 @@ const PasswordField = forwardRef((props, ref) => {
     setShowPasswordRequirements(showPasswordTooltip && true);
   };
 
+  const handleKeyDown = (e) => {
+    if (e.shiftKey && e.key === 'Tab') {
+      setFieldFocusOut(true);
+    }
+  };
+
   const HideButton = (
     <IconButton
       name="passwordIcon"
@@ -159,6 +172,7 @@ const PasswordField = forwardRef((props, ref) => {
           onChange={handleChange}
           onFocus={handleFocus}
           onBlur={handleOnBlur}
+          onKeyDown={handleKeyDown}
           autoComplete="current-password"
           trailingElement={isPasswordHidden ? ShowButton : HideButton}
           floatingLabel={floatingLabel}
@@ -175,37 +189,6 @@ const PasswordField = forwardRef((props, ref) => {
           {errorMessage}
         </Form.Control.Feedback>
       )}
-      {errorMessage && showPasswordTooltip && (
-        <>
-          <Form.Control.Feedback
-            key="letter-check"
-            className="form-text-size"
-            hasIcon
-            feedback-for={name}
-            type={LETTER_REGEX.test(props.value) ? 'valid' : 'invalid'}
-          >
-            {formatMessage(messages.oneLetter)}
-          </Form.Control.Feedback>
-          <Form.Control.Feedback
-            key="number-check"
-            className="form-text-size"
-            hasIcon
-            feedback-for={name}
-            type={NUMBER_REGEX.test(props.value) ? 'valid' : 'invalid'}
-          >
-            {formatMessage(messages.oneNumber)}
-          </Form.Control.Feedback>
-          <Form.Control.Feedback
-            key="characters-check"
-            className="form-text-size"
-            hasIcon
-            feedback-for={name}
-            type={props.value.length >= 8 ? 'valid' : 'invalid'}
-          >
-            {formatMessage(messages.eightCharacters)}
-          </Form.Control.Feedback>
-        </>
-      )}
     </Form.Group>
   );
 });

diff --git a/src/forms/fields/password-field/index.test.jsx b/src/forms/fields/password-field/index.test.jsx
@@ -178,7 +178,7 @@ describe('PasswordField', () => {
     expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
     expect(props.handleErrorChange).toHaveBeenCalledWith(
       'password',
-      'Password needs to include:',
+      'Password criteria has not been met',
     );
   });
 

diff --git a/src/forms/fields/password-field/messages.jsx b/src/forms/fields/password-field/messages.jsx
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
   passwordValidationMessage: {
     id: 'password.validation.message',
-    defaultMessage: 'Password needs to include:',
+    defaultMessage: 'Password criteria has not been met',
     description: 'Error message for empty or invalid password',
   },
 });

diff --git a/src/forms/registration-popup/tests/RegistrationPopup.test.jsx b/src/forms/registration-popup/tests/RegistrationPopup.test.jsx
@@ -24,7 +24,7 @@ const mockStore = configureStore();
 const emptyFieldValidation = {
   name: 'Full name is required',
   email: 'Email is required',
-  password: 'Password needs to include:',
+  password: 'Password criteria has not been met',
 };
 
 const populateRequiredFields = (

diff --git a/src/forms/reset-password-popup/messages.js b/src/forms/reset-password-popup/messages.js
@@ -81,7 +81,7 @@ const messages = defineMessages({
   },
   passwordValidationMessage: {
     id: 'password.validation.message',
-    defaultMessage: 'Password needs to include:',
+    defaultMessage: 'Password criteria has not been met',
     description: 'Error message for invalid password',
   },
   passwordDoNotMatch: {