diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx index 3291f7e0..1e5eb8a4 100644 --- a/src/reset-password/ResetPasswordPage.jsx +++ b/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'])} diff --git a/src/reset-password/data/service.js b/src/reset-password/data/service.js index 8a4f234e..45693a2a 100644 --- a/src/reset-password/data/service.js +++ b/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) => {