From 44aab833f7155dff3e7f532c57797c002459533d Mon Sep 17 00:00:00 2001
From: Ron Lavi <1ronlavi@gmail.com>
Date: Mon, 26 Nov 2018 20:55:45 +0200
Subject: [PATCH] fix(LoginPage): Add submit error callback handling (#952)

---
 .../components/LoginPage/LoginPage.stories.js |  5 ++-
 .../components/LoginPage/LoginPage.test.js    | 18 ++++++++-
 .../LoginCardWithValidation.js                | 40 +++++++++++++------
 3 files changed, 48 insertions(+), 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
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(<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/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
     };
   };