fix(Login card page): Submit is disabled when input is empty (#1188)

Author: MariaAga

packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.stories.js

@@ -94,7 +94,6 @@ const createProps = () => {
           href: '#',
           onClick: e => storyAction(e, 'Forgot password was clicked')
         },
-        disableSubmit: false,
         submitText: card.form.submitText,
         onSubmit: (e, onError) => {
           onError(card.form.error);

packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPage.test.js

@@ -72,7 +72,6 @@ const createProps = () => {
           href: '#',
           onClick: mockFunction
         },
-        disableSubmit: false,
         submitText: card.form.submitText
       }
     }
@@ -177,6 +176,10 @@ test('Submit while inputs are empty cause specific errors to be shown and onChan
   const component = mount(<LoginPage {...createProps()} />);
   const usernameElement = component.find('input[type="email"]').at(0);
   const passwordElement = component.find('input[type="password"]').at(0);
+  const submit = component.find('button[type="submit"]').at(0);
+
+  expect(submit.props().disabled).toEqual(true);
+
   component
     .find('form')
     .at(0)
@@ -197,15 +200,6 @@ test('Submit while inputs are empty cause specific errors to be shown and onChan
       .props().showError
   ).toEqual(true);
 
-  usernameElement.simulate('change', { target: { value: 'Ron' } });
-
-  expect(
-    component
-      .find(Input)
-      .at(0)
-      .props().showError
-  ).toEqual(false);
-
   // check password field
   expect(
     component
@@ -221,6 +215,15 @@ test('Submit while inputs are empty cause specific errors to be shown and onChan
       .props().showError
   ).toEqual(true);
 
+  usernameElement.simulate('change', { target: { value: 'Ron' } });
+
+  expect(
+    component
+      .find(Input)
+      .at(0)
+      .props().showError
+  ).toEqual(false);
+
   passwordElement.simulate('change', { target: { value: 'Q!w2e3' } });
 
   expect(

packages/patternfly-3/patternfly-react/src/components/LoginPage/SocialLoginPage.test.js

@@ -140,7 +140,6 @@ const createProps = () => {
           href: '#',
           onClick: mockFunction
         },
-        disableSubmit: false,
         submitText: card.form.submitText,
         onSubmit: mockFunction
       },

packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap

@@ -172,6 +172,7 @@ exports[`Component matches snapshot 1`] = `
                   </div>
                   <button
                     class="login-pf-submit-button btn btn-lg btn-primary btn-block"
+                    disabled=""
                     type="submit"
                   >
                     Log In

packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/SocialLoginPage.test.js.snap

@@ -170,6 +170,7 @@ exports[`Component matches snapshot 1`] = `
           </div>
           <button
             class="login-pf-submit-button btn btn-lg btn-primary btn-block"
+            disabled=""
             type="submit"
           >
             Log In

packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardWithValidation.js

@@ -22,7 +22,7 @@ class LoginCardWithValidation extends React.Component {
     form: {
       showError: this.props.showError,
       submitError: this.props.submitError,
-      disableSubmit: this.props.disableSubmit,
+      disableSubmit: true,
       isSubmitting: this.props.isSubmitting
     }
   };
@@ -35,15 +35,30 @@ class LoginCardWithValidation extends React.Component {
     window.removeEventListener('keyup', this.toggleCapsLock);
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  static getDerivedStateFromProps(props, state) {
+    // disableSubmit prop will only be used in a not validated login card
+    const { validate, disableSubmit } = props;
+    if (validate) return null;
+    if (disableSubmit !== state.form.disableSubmit) {
+      return {
+        form: { disableSubmit }
+      };
+    }
+    return null;
+  }
+
   onInputChange = (e, inputType) => {
     this.props[inputType].onChange && this.props[inputType].onChange(e);
-    this.setState({
-      [inputType]: {
-        ...this.state[inputType],
-        value: e.target.value,
-        showError: false
-      }
-    });
+    const updateState = {
+      usernameField: { value: inputType === 'usernameField' ? e.target.value : this.state.usernameField.value },
+      passwordField: { value: inputType === 'passwordField' ? e.target.value : this.state.passwordField.value }
+    };
+    updateState[inputType].showError = false;
+    updateState.form = {
+      disableSubmit: updateState.usernameField.value.length < 1 || updateState.passwordField.value.length < 1
+    };
+    this.setState(updateState);
   };
 
   onInputFocus = (e, inputType) => {
@@ -273,6 +288,7 @@ LoginCardWithValidation.propTypes = {
   }),
   onSubmit: PropTypes.func,
   submitError: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  // eslint-disable-next-line react/no-unused-prop-types
   disableSubmit: PropTypes.bool,
   isSubmitting: PropTypes.bool,
   showError: PropTypes.bool