diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.stories.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.stories.js
index 4703e2df081..76dede08e88 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.stories.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.stories.js
@@ -96,7 +96,10 @@ const createProps = () => {
},
disableSubmit: false,
submitText: card.form.submitText,
- onSubmit: e => storyAction(e, 'Form was submitted')
+ onSubmit: (e, onError) => {
+ onError(card.form.error);
+ storyAction(e, 'Form was submitted');
+ }
},
social: {
links: createLogoList()
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.test.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.test.js
index 91a74b46aa7..af183c2192b 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.test.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.test.js
@@ -4,7 +4,7 @@ import { DropdownButton } from 'react-bootstrap';
import englishMessages from './mocks/messages.en';
import frenchMessages from './mocks/messages.fr';
import { LoginPage, LoginCardWithValidation } from './index';
-import { KEY_CODES } from '../../common/helpers';
+import { KEY_CODES, noop } from '../../common/helpers';
const { Input, ForgotPassword, SignUp } = LoginPage.Card;
const { FooterLinks } = LoginPage;
@@ -257,6 +257,22 @@ test('Submit while password is too short raises the correct error', () => {
).toEqual(englishMessages.card.passwordField.errors.short);
});
+test('valid form should be submitted and raise a "server error"', () => {
+ const serverError = 'server error';
+ const props = { ...createProps() };
+ props.card.form.onSubmit = (e, onError) => onError(serverError);
+ const component = mount();
+ const passwordElement = component.find('input[type="password"]').at(0);
+ const usernameElement = component.find('input[type="email"]').at(0);
+ passwordElement.simulate('change', { target: { value: 'validPassword' } });
+ usernameElement.simulate('change', { target: { value: 'validUser@gmail.com' } });
+
+ const validator = component.find(LoginCardWithValidation).instance();
+ validator.onSubmit({ preventDefault: noop, target: { submit: noop } });
+ component.update();
+ expect(validator.state.form.submitError).toBe(serverError);
+});
+
test('Submit while username is invalid cause a specific error to be shown and onChange is disappears', () => {
const component = mount();
const usernameElement = component.find('input[type="email"]').at(0);
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js
index 2f5939e0fac..6376e349009 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js
@@ -77,23 +77,36 @@ class LoginCardWithValidation extends React.Component {
onSubmit = e => {
e.preventDefault();
if (this.isFormValid()) {
- const { onSubmit, submitError } = this.props;
- onSubmit && onSubmit(e);
- submitError &&
- this.setState({
- form: {
- ...this.state.form,
- showError: true,
- error: submitError,
- disableSubmit: true,
- isSubmitting: true
- }
- });
+ this.onSubmitStart();
+ this.props.onSubmit(e, this.onSubmitError);
} else {
this.handleOnInputErrors();
}
};
+ onSubmitStart = () => {
+ this.setState({
+ form: {
+ ...this.state.form,
+ disableSubmit: true,
+ isSubmitting: true,
+ showError: false
+ }
+ });
+ };
+
+ onSubmitError = submitError => {
+ this.setState({
+ form: {
+ ...this.state.form,
+ showError: true,
+ submitError,
+ disableSubmit: false,
+ isSubmitting: false
+ }
+ });
+ };
+
getModifiedProps = () => {
const { usernameField, passwordField } = this.props;
const passwordFieldWarningType = this.state.isCapsLock ? 'capsLock' : this.state.passwordField.warningType;
@@ -121,7 +134,8 @@ class LoginCardWithValidation extends React.Component {
onSubmit: e => this.onSubmit(e),
showError: this.state.form.showError,
disableSubmit: this.state.form.disableSubmit,
- isSubmitting: this.state.form.isSubmitting
+ isSubmitting: this.state.form.isSubmitting,
+ submitError: this.state.form.submitError
};
};