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

Fix login page validations

Browse Source 
1) Removing focusout calls.
2) Adds email < 3 character length.

VAN-362
This commit is contained in:
Adeel Khan
2021-02-16 03:24:04 +05:00
parent dc0d5f8d4a
commit effdf62c9e
3 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/login/LoginPage.jsx
View File

@@ -66,12 +66,6 @@ class LoginPage extends React.Component {
this.setState(prevState => ({ institutionLogin: !prevState.institutionLogin }));
}
handleOnBlur = () => {
if (this.state.isSubmitted) {
this.setState({ isSubmitted: false });
}
}
handleSubmit = (e) => {
e.preventDefault();
this.setState({ isSubmitted: true });
@@ -107,6 +101,8 @@ class LoginPage extends React.Component {
if (email === '') {
errors.email = this.props.intl.formatMessage(messages['email.validation.message']);
} else if (email.length < 3) {
errors.email = this.props.intl.formatMessage(messages['email.format.validation.less.chars.message']);
} else if (!regex.test(email)) {
errors.email = this.props.intl.formatMessage(messages['email.format.validation.message']);
} else {
@@ -212,7 +208,6 @@ class LoginPage extends React.Component {
invalidMessage={errors.email}
value={email}
helpText={intl.formatMessage(messages['email.help.message'])}
onBlur={(e) => { this.handleOnBlur(); this.validateEmail(e.target.value); }}
onChange={(e) => this.setState({ email: e.target.value, isSubmitted: false })}
/>
<AuthnValidationFormGroup
@@ -223,7 +218,6 @@ class LoginPage extends React.Component {
invalid={errors.password !== ''}
invalidMessage={errors.password}
value={password}
onBlur={(e) => { this.handleOnBlur(); this.validatePassword(e.target.value); }}
onChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
/>
<LoginHelpLinks page={LOGIN_PAGE} />

5
src/login/messages.jsx
View File

@@ -91,6 +91,11 @@ const messages = defineMessages({
defaultMessage: 'The email address you\'ve provided isn\'t formatted correctly.',
description: 'Validation message that appears when email address format is incorrect',
},
'email.format.validation.less.chars.message': {
id: 'email.format.validation.less.chars.message',
defaultMessage: 'Email must have at least 3 characters.',
description: 'Validation message that appears when email address is less than 3 characters',
},
'email.validation.message': {
id: 'email.validation.message',
defaultMessage: 'Please enter your Email.',

48
src/login/tests/LoginPage.test.jsx
View File

@@ -146,7 +146,7 @@ describe('LoginPage', () => {
expect(root.find('button.field-link').first().text()).toEqual('Need help signing in?');
});
it('updates the error state for invalid email', () => {
it('updates the error state for empty email input on form submission', () => {
const errorState = { email: 'Please enter your Email.', password: '' };
store.dispatch = jest.fn(store.dispatch);
@@ -161,6 +161,35 @@ describe('LoginPage', () => {
);
});
it('updates the error state for invalid email; less than 3 characters on form submission', () => {
const errorState = { email: 'Email must have at least 3 characters.', password: '' };
store.dispatch = jest.fn(store.dispatch);
const loginPage = (mount(reduxWrapper(<IntlLoginPage {...props} />))).find('LoginPage');
loginPage.find('input#password').simulate('change', { target: { value: 'test', name: 'password' } });
loginPage.find('input#email').simulate('change', { target: { value: 'te', name: 'email' } });
loginPage.find('button.btn-brand').simulate('click');
expect(loginPage.state('errors')).toEqual(errorState);
expect(store.dispatch).toHaveBeenCalledWith(
loginRequestFailure({ errorCode: 'invalid-form', context: errorState }),
);
});
it('updates the error state for invalid email format validation on form submission', () => {
const errorState = { email: 'The email address you\'ve provided isn\'t formatted correctly.', password: '' };
store.dispatch = jest.fn(store.dispatch);
const loginPage = (mount(reduxWrapper(<IntlLoginPage {...props} />))).find('LoginPage');
loginPage.find('input#password').simulate('change', { target: { value: 'test', name: 'password' } });
loginPage.find('input#email').simulate('change', { target: { value: 'test@', name: 'email' } });
loginPage.find('button.btn-brand').simulate('click');
expect(loginPage.state('errors')).toEqual(errorState);
});
it('updates the error state for invalid password', () => {
const errorState = { email: '', password: 'Please enter your Password.' };
store.dispatch = jest.fn(store.dispatch);
@@ -176,26 +205,9 @@ describe('LoginPage', () => {
);
});
it('should update the error message on focus out', () => {
const errorState = { email: 'Please enter your Email.', password: 'Please enter your Password.' };
const loginPage = (mount(reduxWrapper(<IntlLoginPage {...props} />))).find('LoginPage');
loginPage.find('input#password').simulate('blur', { target: { value: '', name: 'password' } });
loginPage.find('input#email').simulate('blur', { target: { value: '', name: 'email' } });
expect(loginPage.state('errors')).toEqual(errorState);
errorState.email = 'The email address you\'ve provided isn\'t formatted correctly.';
// Enter email with invalid format
loginPage.find('input#email').simulate('blur', { target: { value: 'invalid-email', name: 'email' } });
expect(loginPage.state('errors')).toEqual(errorState);
});
it('submits login request for valid email and password values', () => {
store.dispatch = jest.fn(store.dispatch);
const loginPage = (mount(reduxWrapper(<IntlLoginPage {...props} />))).find('LoginPage');
loginPage.find('input#email').simulate('change', { target: { value: 'test@example.com' } });
loginPage.find('input#password').simulate('change', { target: { value: 'password' } });
loginPage.find('button.btn-brand').simulate('click');