fix(LoginPage): Add submit error callback handling (#952)

patternfly · Nov 26, 2018 · 44aab83 · 44aab83
1 parent 2cc0ab9
commit 44aab83
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
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
@@ -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
@@ -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(<LoginPage {...props} />);
+  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(<LoginPage {...createProps()} />);
   const usernameElement = component.find('input[type="email"]').at(0);

diff --git a/...-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js b/...-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
     };
   };