feat: VAN-666 - Reject new password that is detected as vulnerable (#471)

src/reset-password/ResetPasswordPage.jsx

@@ -53,7 +53,11 @@ const ResetPasswordPage = (props) => {
   const validatePasswordFromBackend = async (password) => {
     let errorMessage = '';
     try {
-      errorMessage = await validatePassword(password);
+      const payload = {
+        reset_password_page: true,
+        password,
+      };
+      errorMessage = await validatePassword(payload);
     } catch (err) {
       errorMessage = '';
     }
@@ -85,6 +89,24 @@ const ResetPasswordPage = (props) => {
     return !Object.values(formErrors).some(x => (x !== ''));
   };
 
+  const handleOnBlur = (event) => {
+    let { name, value } = event.target;
+
+    // Do not validate when focus out from 'newPassword' and focus on 'passwordValidation' icon
+    // for better user experience.
+    if (event.relatedTarget
+      && event.relatedTarget.name === 'passwordValidation'
+      && name === 'newPassword'
+    ) {
+      return;
+    }
+    if (name === 'passwordValidation') {
+      name = 'newPassword';
+      value = newPassword;
+    }
+    validateInput(name, value);
+  };
+
   const handleConfirmPasswordChange = (e) => {
     const { value } = e.target;
 
@@ -157,7 +179,7 @@ const ResetPasswordPage = (props) => {
                   name="newPassword"
                   value={newPassword}
                   handleChange={(e) => setNewPassword(e.target.value)}
-                  handleBlur={(e) => validateInput(e.target.name, e.target.value)}
+                  handleBlur={handleOnBlur}
                   handleFocus={handleOnFocus}
                   errorMessage={formErrors.newPassword}
                   floatingLabel={intl.formatMessage(messages['new.password.label'])}

src/reset-password/data/service.js

@@ -39,14 +39,14 @@ export async function resetPassword(payload, token, queryParams) {
   return data;
 }
 
-export async function validatePassword(password) {
+export async function validatePassword(payload) {
   const requestConfig = {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
   };
   const { data } = await getHttpClient()
     .post(
       `${getConfig().LMS_BASE_URL}/api/user/v1/validation/registration`,
-      formurlencoded({ password }),
+      formurlencoded(payload),
       requestConfig,
     )
     .catch((e) => {