fix(LoginPage): improve form's error style and behavior (#942)

Author: ronlavi2412

packages/patternfly-3/patternfly-react/less/login-page.less

@@ -0,0 +1,4 @@
+.login-form-error {
+  color: @color-pf-red-100;
+  margin-bottom: 10px;
+}

packages/patternfly-3/patternfly-react/less/patternfly-react.less

@@ -14,4 +14,4 @@
 @import 'treeview';
 @import 'pagination';
 @import 'expand-collapse';
-
+@import 'login-page';

packages/patternfly-3/patternfly-react/sass/patternfly-react/_login-page.scss

@@ -0,0 +1,4 @@
+.login-form-error {
+  color: $color-pf-red-100;
+  margin-bottom: 10px;
+}

packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss

@@ -14,4 +14,4 @@
 @import 'treeview';
 @import 'pagination';
 @import 'expand-collapse';
-
+@import 'login-page';

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

@@ -125,9 +125,6 @@ exports[`Component matches snapshot 1`] = `
                   class=""
                   novalidate=""
                 >
-                  <div
-                    class="login-form-error "
-                  />
                   <div
                     class="login_card_input  form-group"
                   >

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

@@ -114,8 +114,15 @@ exports[`Component matches snapshot 1`] = `
           novalidate=""
         >
           <div
-            class="login-form-error "
-          />
+            class="login-form-error"
+            style="overflow: hidden; height: 0px;"
+          >
+            <div
+              class="ReactCollapse--content"
+            >
+              Your account has been blocked. Contact your administrator to unblock it.
+            </div>
+          </div>
           <div
             class="login_card_input  form-group"
           >

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

@@ -20,7 +20,7 @@ class LoginCardWithValidation extends React.Component {
     },
     isCapsLock: false,
     form: {
-      showError: false,
+      showError: this.props.showError,
       submitError: this.props.submitError,
       disableSubmit: this.props.disableSubmit,
       isSubmitting: this.props.isSubmitting
@@ -260,7 +260,8 @@ LoginCardWithValidation.propTypes = {
   onSubmit: PropTypes.func,
   submitError: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disableSubmit: PropTypes.bool,
-  isSubmitting: PropTypes.bool
+  isSubmitting: PropTypes.bool,
+  showError: PropTypes.bool
 };
 
 LoginCardWithValidation.defaultProps = {
@@ -270,7 +271,8 @@ LoginCardWithValidation.defaultProps = {
   onSubmit: e => e.target.submit(),
   submitError: null,
   disableSubmit: false,
-  isSubmitting: false
+  isSubmitting: false,
+  showError: false
 };
 
 export default LoginCardWithValidation;

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Collapse from 'react-collapse';
+import { default as cx } from 'classnames';
+import { excludeKeys } from '../../../../common/helpers';
 
-const LoginFormError = ({ children, show, className, ...props }) => (
-  <div className={`login-form-error ${className}`}>
-    <Collapse {...props} isOpened={show}>
+const LoginFormError = ({ children, show, className, ...props }) =>
+  children && (
+    <Collapse {...excludeKeys(props, ['className'])} isOpened={show} className={cx('login-form-error', className)}>
       {children}
     </Collapse>
-  </div>
-);
+  );
 
 LoginFormError.propTypes = {
   className: PropTypes.string,