Andal.LND/frontend-app-authn
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update and show error alert on form submission only (#127)

Browse Source
This commit is contained in:
Zainab Amir
2021-02-06 16:32:03 +05:00
committed by GitHub
parent 0bfb90aafa
commit d1b84bde48
2 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/forgot-password/ForgotPasswordPage.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { Formik } from 'formik';
import PropTypes from 'prop-types';
@@ -31,6 +31,7 @@ const ForgotPasswordPage = (props) => {
const platformName = getConfig().SITE_NAME;
const regex = new RegExp(VALID_EMAIL_REGEX, 'i');
const [validationError, setValidationError] = useState('');
const getErrorMessage = (errors) => {
const header = intl.formatMessage(messages['forgot.password.request.server.error']);
@@ -48,6 +49,19 @@ const ForgotPasswordPage = (props) => {
return status === 'forbidden' ? <RequestInProgressAlert /> : null;
};
const getValidationMessage = (email) => {
let error = '';
if (email === '') {
error = intl.formatMessage(messages['forgot.password.empty.email.field.error']);
} else if (!regex.test(email)) {
error = intl.formatMessage(messages['forgot.password.page.invalid.email.message']);
}
setValidationError(error);
return error;
};
sendPageEvent('login_and_registration', 'reset');
return (
@@ -55,24 +69,19 @@ const ForgotPasswordPage = (props) => {
initialValues={{ email: '' }}
validateOnChange={false}
validate={(values) => {
// eslint-disable-next-line prefer-const
let errors = {};
const validationMessage = getValidationMessage(values.email);
if (values.email === '') {
errors.email = intl.formatMessage(messages['forgot.password.empty.email.field.error']);
} else if (!regex.test(values.email)) {
errors.email = intl.formatMessage(messages['forgot.password.page.invalid.email.message']);
}
if (errors) {
if (validationMessage !== '') {
window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
return { email: validationMessage };
}
return errors;
return {};
}}
onSubmit={(values) => { props.forgotPassword(values.email); }}
>
{({
errors, handleSubmit, setFieldValue, validateForm, values,
errors, handleSubmit, setFieldValue, values,
}) => (
<>
{status === 'complete' ? <Redirect to={LOGIN_PAGE} /> : null}
@@ -89,8 +98,8 @@ const ForgotPasswordPage = (props) => {
<ValidationFormGroup
className="mb-0 w-100"
for="email"
invalid={errors.email !== undefined}
invalidMessage={errors.email}
invalid={validationError !== ''}
invalidMessage={validationError}
helpText={intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })}
>
<Form.Label htmlFor="forgot-password-input" className="h6 mr-1">
@@ -102,7 +111,7 @@ const ForgotPasswordPage = (props) => {
type="email"
placeholder="username@domain.com"
value={values.email}
onBlur={() => validateForm()}
onBlur={() => getValidationMessage(values.email)}
onChange={e => setFieldValue('email', e.target.value)}
/>
</ValidationFormGroup>

16
src/forgot-password/tests/ForgotPasswordPage.test.jsx
View File

@@ -86,7 +86,7 @@ describe('ForgotPasswordPage', () => {
});
it('should display email validation error message', async () => {
const validationMessage = "The email address you've provided isn't formatted correctly.";
const validationMessage = "Failed to send forgot password email.The email address you've provided isn't formatted correctly.";
const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
wrapper.find('input#forgot-password-input').simulate(
@@ -95,8 +95,7 @@ describe('ForgotPasswordPage', () => {
await act(async () => { await wrapper.find('button.btn-primary').simulate('click'); });
wrapper.update();
expect(wrapper.find('#email-invalid-feedback').text()).toEqual(validationMessage);
expect(wrapper.find('.alert-danger').text()).toEqual('Failed to send forgot password email.'.concat(validationMessage));
expect(wrapper.find('.alert-danger').text()).toEqual(validationMessage);
});
it('should show alert on server error', () => {
@@ -112,16 +111,13 @@ describe('ForgotPasswordPage', () => {
});
it('should display empty email validation message', async () => {
const validationMessage = 'Please enter your Email.';
const validationMessage = 'Failed to send forgot password email.Please enter your Email.';
const forgotPasswordPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
await act(async () => { await forgotPasswordPage.find('button.btn-primary').simulate('click'); });
forgotPasswordPage.update();
expect(forgotPasswordPage.find('#email-invalid-feedback').text()).toEqual(validationMessage);
expect(forgotPasswordPage.find('.alert-danger').text()).toEqual(
'Failed to send forgot password email.'.concat(validationMessage),
);
expect(forgotPasswordPage.find('.alert-danger').text()).toEqual(validationMessage);
});
it('should display request in progress error message', () => {
@@ -145,7 +141,7 @@ describe('ForgotPasswordPage', () => {
});
it('should display error message on blur event', async () => {
const validationMessage = 'Failed to send forgot password email.Please enter your Email.';
const validationMessage = 'Please enter your Email.';
const forgotPasswordPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
const emailInput = forgotPasswordPage.find('input#forgot-password-input');
@@ -154,7 +150,7 @@ describe('ForgotPasswordPage', () => {
});
forgotPasswordPage.update();
expect(forgotPasswordPage.find('.alert-danger').text()).toEqual(validationMessage);
expect(forgotPasswordPage.find('#email-invalid-feedback').text()).toEqual(validationMessage);
});
it('check cookie rendered', () => {