From 5c18b94f881939c42e62fdea5924e49b855f0587 Mon Sep 17 00:00:00 2001
From: laviro <1ronlavi@gmail.com>
Date: Wed, 6 Feb 2019 17:10:09 +0200
Subject: [PATCH] fix(LoginPage): remove inputs errors

---
 .../sass/patternfly-react/_login-page.scss    |   2 +-
 .../components/LoginPage/LoginPage.stories.js | 205 +-------
 .../components/LoginPage/LoginPageFixtures.js | 473 ++++++++++++++++++
 .../__snapshots__/LoginPage.test.js.snap      |   3 +
 .../SocialLoginPage.test.js.snap              |  10 +-
 .../LoginCardComponents/LoginCardForm.js      |  21 +-
 .../LoginCardComponents/LoginCardInput.js     |  31 +-
 .../LoginCardWithValidation.js                | 195 ++++++--
 .../LoginCardComponents/LoginFormError.js     |  16 +-
 9 files changed, 696 insertions(+), 260 deletions(-)
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPageFixtures.js

diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_login-page.scss b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_login-page.scss
index 54ff5569891..562e9ce12b9 100644
--- a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_login-page.scss
+++ b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_login-page.scss
@@ -4,5 +4,5 @@
 }
 
 .login-pf-input-warning {
-  margin-top: '5px';
+  margin-top: 5px;
 }
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 a26a162bcb6..f4f3b078e38 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
@@ -1,14 +1,19 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, number } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
 import { defaultTemplate } from 'storybook/decorators/storyTemplates';
 import { storybookPackageName, STORYBOOK_CATEGORY, DOCUMENTATION_URL } from 'storybook/constants/siteConstants';
 import LoginPage from './LoginPage';
-import englishMessages from './mocks/messages.en';
-import frenchMessages from './mocks/messages.fr';
-import images from './assets/img';
+
 import { name } from '../../../package.json';
+import {
+  getManagedPageWithErrorsOnTopProps,
+  getManagedPageProps,
+  getBuildYourOwnPageProps,
+  createLogoList,
+  getManagedSocialLoginPageProps,
+  getBuildYourOwnSocialLoginPageProps
+} from './LoginPageFixtures';
 
 const stories = storiesOf(
   `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.APPLICATION_FRAMEWORK}/Login Page`,
@@ -23,196 +28,22 @@ stories.addDecorator(
   })
 );
 
-const storyAction = (e, message) => {
-  e.preventDefault();
-  action(message)();
-};
-
-const createProps = () => {
-  const { header, footerLinks, card } = englishMessages;
-  footerLinks.forEach(link => {
-    link.onClick = e => storyAction(e, 'Footer Link was pressed');
-  });
-  return {
-    container: {
-      backgroundUrl: images.background,
-      translations: { en: englishMessages, fr: frenchMessages },
-      className: '',
-      alert: {
-        message: header.alert,
-        onDismiss: e => storyAction(e, 'Notification was dismissed'),
-        show: true
-      }
-    },
-    header: {
-      logoSrc: images.brand,
-      logoTitle: header.logo,
-      caption: header.caption
-    },
-    footerLinks,
-    card: {
-      title: card.header.title,
-      selectedLanguage: card.header.selectedLanguage,
-      availableLanguages: card.header.availableLanguages,
-      signUp: {
-        label: card.signUp.label,
-        link: {
-          children: card.signUp.link.label,
-          href: '#',
-          onClick: e => storyAction(e, 'sign up was clicked')
-        }
-      },
-      form: {
-        validate: true,
-        submitError: card.form.error,
-        showError: true,
-        usernameField: {
-          id: 'card_email',
-          type: 'email',
-          placeholder: card.usernameField.placeholder,
-          errors: card.usernameField.errors,
-          error: card.usernameField.errors.invalid,
-          showError: true
-        },
-        passwordField: {
-          id: 'card_password',
-          type: 'password',
-          placeholder: card.passwordField.placeholder,
-          minLength: 8,
-          errors: card.passwordField.errors,
-          warnings: card.passwordField.warnings,
-          warning: card.passwordField.warnings.capsLock,
-          showWarning: true
-        },
-        additionalFields: null,
-        rememberMe: {
-          label: card.rememberMe,
-          onClick: e => action('remember me checkbox was clicked')()
-        },
-        forgotPassword: {
-          label: card.forgotPassword,
-          href: '#',
-          onClick: e => storyAction(e, 'Forgot password was clicked')
-        },
-        submitText: card.form.submitText,
-        onSubmit: (e, onError) => {
-          onError(card.form.error);
-          storyAction(e, 'Form was submitted');
-        }
-      },
-      social: {
-        links: createLogoList()
-      }
-    }
-  };
-};
-
-const createLogoList = () => {
-  const socialLinkClick = e => storyAction(e, 'Social Link was clicked');
-  const {
-    google,
-    facebook,
-    linkedin,
-    github,
-    instagram,
-    stackExchange,
-    twitter,
-    git,
-    openID,
-    dropbox,
-    fedora,
-    skype
-  } = images;
-  return [
-    {
-      src: google,
-      alt: 'Google',
-      text: 'Google',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: facebook,
-      alt: 'Facebook',
-      text: 'Facebook',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: linkedin,
-      alt: 'Linkedin',
-      text: 'Linkedin',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: github,
-      alt: 'Github',
-      text: 'Github',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: instagram,
-      alt: 'Instagram',
-      text: 'Instagram',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: git,
-      alt: 'Git',
-      text: 'Git',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: openID,
-      alt: 'OpenID',
-      text: 'OpenID',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: dropbox,
-      alt: 'Dropbox',
-      text: 'Dropbox',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: fedora,
-      alt: 'Fedora',
-      text: 'Fedora',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: skype,
-      alt: 'Skype',
-      text: 'Skype',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: twitter,
-      alt: 'Twitter',
-      text: 'Twitter',
-      onClick: e => socialLinkClick(e)
-    },
-    {
-      src: stackExchange,
-      alt: 'StackExchange',
-      text: 'StackExchange',
-      onClick: e => socialLinkClick(e)
-    }
-  ];
-};
+stories.addWithInfo('Managed Login Page with errors display on top of the form', () => (
+  <LoginPage {...getManagedPageWithErrorsOnTopProps()} />
+));
 
-stories.addWithInfo('Managed Basic Login Page', () => <LoginPage {...createProps()} />);
+stories.addWithInfo('Managed Login Page with errors display under form inputs', () => (
+  <LoginPage {...getManagedPageProps()} />
+));
 
-stories.addWithInfo('Build Your own Basic Login Page', () => {
-  const props = { ...createProps() };
-  props.card.form.validate = false;
-  return LoginPage.Pattern(props);
-});
+stories.addWithInfo('Build Your own Basic Login Page', () => LoginPage.Pattern(getBuildYourOwnPageProps()));
 
 stories.addWithInfo('Managed Social Login Page', () => {
   const logoListCopy = createLogoList();
   const listSize = number('Social List Size', 12);
   const socialLinks = logoListCopy.splice(0, listSize);
 
-  const props = { ...createProps() };
+  const props = { ...getManagedSocialLoginPageProps() };
   props.card.social.links = socialLinks;
 
   return <LoginPage.Social {...props} />;
@@ -223,7 +54,7 @@ stories.addWithInfo('Build Your own Social Login Page', () => {
   const listSize = number('Social List Size', 12);
   const socialLinks = logoListCopy.splice(0, listSize);
 
-  const props = { ...createProps() };
+  const props = { ...getBuildYourOwnSocialLoginPageProps() };
   props.card.social.links = socialLinks;
   props.card.form.validate = false;
   return LoginPage.Social.Pattern(props);
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPageFixtures.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPageFixtures.js
new file mode 100644
index 00000000000..e9ebad3af85
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/LoginPageFixtures.js
@@ -0,0 +1,473 @@
+import englishMessages from './mocks/messages.en';
+import frenchMessages from './mocks/messages.fr';
+import images from './assets/img';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+
+const storyAction = (e, message) => {
+  e.preventDefault();
+  action(message)();
+};
+
+export const createLogoList = () => {
+  const socialLinkClick = e => storyAction(e, 'Social Link was clicked');
+  const {
+    google,
+    facebook,
+    linkedin,
+    github,
+    instagram,
+    stackExchange,
+    twitter,
+    git,
+    openID,
+    dropbox,
+    fedora,
+    skype
+  } = images;
+  return [
+    {
+      src: google,
+      alt: 'Google',
+      text: 'Google',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: facebook,
+      alt: 'Facebook',
+      text: 'Facebook',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: linkedin,
+      alt: 'Linkedin',
+      text: 'Linkedin',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: github,
+      alt: 'Github',
+      text: 'Github',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: instagram,
+      alt: 'Instagram',
+      text: 'Instagram',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: git,
+      alt: 'Git',
+      text: 'Git',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: openID,
+      alt: 'OpenID',
+      text: 'OpenID',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: dropbox,
+      alt: 'Dropbox',
+      text: 'Dropbox',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: fedora,
+      alt: 'Fedora',
+      text: 'Fedora',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: skype,
+      alt: 'Skype',
+      text: 'Skype',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: twitter,
+      alt: 'Twitter',
+      text: 'Twitter',
+      onClick: e => socialLinkClick(e)
+    },
+    {
+      src: stackExchange,
+      alt: 'StackExchange',
+      text: 'StackExchange',
+      onClick: e => socialLinkClick(e)
+    }
+  ];
+};
+
+export const getManagedPageWithErrorsOnTopProps = () => {
+  const { header, footerLinks, card } = englishMessages;
+  footerLinks.forEach(link => {
+    link.onClick = e => storyAction(e, 'Footer Link was pressed');
+  });
+  return {
+    container: {
+      backgroundUrl: images.background,
+      translations: { en: englishMessages, fr: frenchMessages },
+      className: '',
+      alert: {
+        message: header.alert,
+        onDismiss: e => storyAction(e, 'Notification was dismissed'),
+        show: true
+      }
+    },
+    header: {
+      logoSrc: images.brand,
+      logoTitle: header.logo,
+      caption: header.caption
+    },
+    footerLinks,
+    card: {
+      title: card.header.title,
+      selectedLanguage: card.header.selectedLanguage,
+      availableLanguages: card.header.availableLanguages,
+      signUp: {
+        label: card.signUp.label,
+        link: {
+          children: card.signUp.link.label,
+          href: '#',
+          onClick: e => storyAction(e, 'sign up was clicked')
+        }
+      },
+      form: {
+        validate: true,
+        topErrorOnly: true,
+        usernameField: {
+          id: 'card_email',
+          type: 'email',
+          placeholder: card.usernameField.placeholder,
+          errors: card.usernameField.errors
+        },
+        passwordField: {
+          id: 'card_password',
+          type: 'password',
+          placeholder: card.passwordField.placeholder,
+          minLength: 8,
+          errors: card.passwordField.errors,
+          warnings: card.passwordField.warnings
+        },
+        additionalFields: null,
+        rememberMe: {
+          label: card.rememberMe,
+          onClick: e => action('remember me checkbox was clicked')()
+        },
+        forgotPassword: {
+          label: card.forgotPassword,
+          href: '#',
+          onClick: e => storyAction(e, 'Forgot password was clicked')
+        },
+        disableSubmit: false,
+        submitText: card.form.submitText,
+        onSubmit: (e, onError) => {
+          storyAction(e, 'Form was submitted successfully !');
+          setTimeout(() => onError('Returning some server error'), 2000);
+        }
+      }
+    }
+  };
+};
+
+export const getManagedPageProps = () => {
+  const { header, footerLinks, card } = englishMessages;
+  footerLinks.forEach(link => {
+    link.onClick = e => storyAction(e, 'Footer Link was pressed');
+  });
+  return {
+    container: {
+      backgroundUrl: images.background,
+      translations: { en: englishMessages, fr: frenchMessages },
+      className: '',
+      alert: {
+        message: header.alert,
+        onDismiss: e => storyAction(e, 'Notification was dismissed'),
+        show: true
+      }
+    },
+    header: {
+      logoSrc: images.brand,
+      logoTitle: header.logo,
+      caption: header.caption
+    },
+    footerLinks,
+    card: {
+      title: card.header.title,
+      selectedLanguage: card.header.selectedLanguage,
+      availableLanguages: card.header.availableLanguages,
+      signUp: {
+        label: card.signUp.label,
+        link: {
+          children: card.signUp.link.label,
+          href: '#',
+          onClick: e => storyAction(e, 'sign up was clicked')
+        }
+      },
+      form: {
+        validate: true,
+        usernameField: {
+          id: 'card_email',
+          type: 'email',
+          placeholder: card.usernameField.placeholder,
+          errors: card.usernameField.errors
+        },
+        passwordField: {
+          id: 'card_password',
+          type: 'password',
+          placeholder: card.passwordField.placeholder,
+          minLength: 8,
+          errors: card.passwordField.errors,
+          warnings: card.passwordField.warnings
+        },
+        additionalFields: null,
+        rememberMe: {
+          label: card.rememberMe,
+          onClick: e => action('remember me checkbox was clicked')()
+        },
+        forgotPassword: {
+          label: card.forgotPassword,
+          href: '#',
+          onClick: e => storyAction(e, 'Forgot password was clicked')
+        },
+        disableSubmit: false,
+        submitText: card.form.submitText,
+        onSubmit: (e, onError) => {
+          storyAction(e, 'Form was submitted successfully !');
+          setTimeout(() => onError('Returning some server error'), 2000);
+        }
+      },
+      social: {
+        links: createLogoList()
+      }
+    }
+  };
+};
+
+export const getBuildYourOwnPageProps = () => {
+  const { header, footerLinks, card } = englishMessages;
+  footerLinks.forEach(link => {
+    link.onClick = e => storyAction(e, 'Footer Link was pressed');
+  });
+  return {
+    container: {
+      backgroundUrl: images.background,
+      translations: { en: englishMessages, fr: frenchMessages },
+      className: '',
+      alert: {
+        message: header.alert,
+        onDismiss: e => storyAction(e, 'Notification was dismissed'),
+        show: true
+      }
+    },
+    header: {
+      logoSrc: images.brand,
+      logoTitle: header.logo,
+      caption: header.caption
+    },
+    footerLinks,
+    card: {
+      title: card.header.title,
+      selectedLanguage: card.header.selectedLanguage,
+      availableLanguages: card.header.availableLanguages,
+      signUp: {
+        label: card.signUp.label,
+        link: {
+          children: card.signUp.link.label,
+          href: '#',
+          onClick: e => storyAction(e, 'sign up was clicked')
+        }
+      },
+      form: {
+        validate: false,
+        usernameField: {
+          id: 'card_email',
+          type: 'email',
+          placeholder: card.usernameField.placeholder,
+          errors: card.usernameField.errors
+        },
+        passwordField: {
+          id: 'card_password',
+          type: 'password',
+          placeholder: card.passwordField.placeholder,
+          minLength: 8,
+          errors: card.passwordField.errors,
+          warnings: card.passwordField.warnings
+        },
+        additionalFields: null,
+        rememberMe: {
+          label: card.rememberMe,
+          onClick: e => action('remember me checkbox was clicked')()
+        },
+        forgotPassword: {
+          label: card.forgotPassword,
+          href: '#',
+          onClick: e => storyAction(e, 'Forgot password was clicked')
+        },
+        disableSubmit: false,
+        submitText: card.form.submitText,
+        onSubmit: (e, onError) => {
+          storyAction(e, 'Form was submitted successfully !');
+          setTimeout(() => onError('Returning some server error'), 2000);
+        }
+      }
+    }
+  };
+};
+
+export const getManagedSocialLoginPageProps = () => {
+  const { header, footerLinks, card } = englishMessages;
+  footerLinks.forEach(link => {
+    link.onClick = e => storyAction(e, 'Footer Link was pressed');
+  });
+  return {
+    container: {
+      backgroundUrl: images.background,
+      translations: { en: englishMessages, fr: frenchMessages },
+      className: '',
+      alert: {
+        message: header.alert,
+        onDismiss: e => storyAction(e, 'Notification was dismissed'),
+        show: true
+      }
+    },
+    header: {
+      logoSrc: images.brand,
+      logoTitle: header.logo,
+      caption: header.caption
+    },
+    footerLinks,
+    card: {
+      title: card.header.title,
+      selectedLanguage: card.header.selectedLanguage,
+      availableLanguages: card.header.availableLanguages,
+      signUp: {
+        label: card.signUp.label,
+        link: {
+          children: card.signUp.link.label,
+          href: '#',
+          onClick: e => storyAction(e, 'sign up was clicked')
+        }
+      },
+      form: {
+        validate: true,
+        usernameField: {
+          id: 'card_email',
+          type: 'email',
+          placeholder: card.usernameField.placeholder,
+          errors: card.usernameField.errors
+        },
+        passwordField: {
+          id: 'card_password',
+          type: 'password',
+          placeholder: card.passwordField.placeholder,
+          minLength: 8,
+          errors: card.passwordField.errors,
+          warnings: card.passwordField.warnings
+        },
+        additionalFields: null,
+        rememberMe: {
+          label: card.rememberMe,
+          onClick: e => action('remember me checkbox was clicked')()
+        },
+        forgotPassword: {
+          label: card.forgotPassword,
+          href: '#',
+          onClick: e => storyAction(e, 'Forgot password was clicked')
+        },
+        disableSubmit: false,
+        submitText: card.form.submitText,
+        onSubmit: (e, onError) => {
+          storyAction(e, 'Form was submitted successfully !');
+          setTimeout(() => onError('Returning some server error'), 2000);
+        }
+      },
+      social: {
+        links: createLogoList()
+      }
+    }
+  };
+};
+
+export const getBuildYourOwnSocialLoginPageProps = () => {
+  const { header, footerLinks, card } = englishMessages;
+  footerLinks.forEach(link => {
+    link.onClick = e => storyAction(e, 'Footer Link was pressed');
+  });
+  return {
+    container: {
+      backgroundUrl: images.background,
+      translations: { en: englishMessages, fr: frenchMessages },
+      className: '',
+      alert: {
+        message: header.alert,
+        onDismiss: e => storyAction(e, 'Notification was dismissed'),
+        show: true
+      }
+    },
+    header: {
+      logoSrc: images.brand,
+      logoTitle: header.logo,
+      caption: header.caption
+    },
+    footerLinks,
+    card: {
+      title: card.header.title,
+      selectedLanguage: card.header.selectedLanguage,
+      availableLanguages: card.header.availableLanguages,
+      signUp: {
+        label: card.signUp.label,
+        link: {
+          children: card.signUp.link.label,
+          href: '#',
+          onClick: e => storyAction(e, 'sign up was clicked')
+        }
+      },
+      form: {
+        validate: false,
+        submitError: card.form.error,
+        showError: true,
+        usernameField: {
+          id: 'card_email',
+          type: 'email',
+          placeholder: card.usernameField.placeholder,
+          errors: card.usernameField.errors,
+          error: card.usernameField.errors.invalid,
+          showError: true
+        },
+        passwordField: {
+          id: 'card_password',
+          type: 'password',
+          placeholder: card.passwordField.placeholder,
+          minLength: 8,
+          errors: card.passwordField.errors,
+          warnings: card.passwordField.warnings,
+          warning: card.passwordField.warnings.capsLock,
+          showWarning: true
+        },
+        additionalFields: null,
+        rememberMe: {
+          label: card.rememberMe,
+          onClick: e => action('remember me checkbox was clicked')()
+        },
+        forgotPassword: {
+          label: card.forgotPassword,
+          href: '#',
+          onClick: e => storyAction(e, 'Forgot password was clicked')
+        },
+        disableSubmit: false,
+        submitText: card.form.submitText,
+        onSubmit: (e, onError) => {
+          storyAction(e, 'Form was submitted successfully !');
+          setTimeout(() => onError('Returning some server error'), 2000);
+        }
+      },
+      social: {
+        links: createLogoList()
+      }
+    }
+  };
+};
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap
index 1602e14a611..22207a1b585 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap
@@ -125,6 +125,9 @@ exports[`Component matches snapshot 1`] = `
                   class=""
                   novalidate=""
                 >
+                  <div
+                    class="login-form-error"
+                  />
                   <div
                     class="login_card_input form-group"
                   >
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/SocialLoginPage.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/SocialLoginPage.test.js.snap
index fdff5f372d4..d7711630454 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/SocialLoginPage.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/__snapshots__/SocialLoginPage.test.js.snap
@@ -115,12 +115,16 @@ exports[`Component matches snapshot 1`] = `
         >
           <div
             class="login-form-error"
-            style="overflow: hidden; height: 0px;"
           >
             <div
-              class="ReactCollapse--content"
+              class="ReactCollapse--collapse"
+              style="overflow: hidden; height: 0px;"
             >
-              Your account has been blocked. Contact your administrator to unblock it.
+              <div
+                class="ReactCollapse--content"
+              >
+                Your account has been blocked. Contact your administrator to unblock it.
+              </div>
             </div>
           </div>
           <div
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardForm.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardForm.js
index bd898f5826d..0c63eaf44dc 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardForm.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardForm.js
@@ -19,12 +19,15 @@ const LoginCardForm = ({
   submitError,
   showError,
   attributes,
-  isSubmitting
+  isSubmitting,
+  topErrorOnly
 }) => (
   <Form onSubmit={onSubmit} noValidate {...attributes}>
-    <LoginFormError show={showError}>{submitError}</LoginFormError>
-    <LoginCardInput {...usernameField} />
-    <LoginCardInput {...passwordField} />
+    <LoginFormError show={showError} topErrorOnly={topErrorOnly}>
+      {submitError}
+    </LoginFormError>
+    <LoginCardInput {...{ ...usernameField, topErrorOnly }} />
+    <LoginCardInput {...{ ...passwordField, topErrorOnly }} />
     {additionalFields}
     <LoginCardSettings rememberMe={rememberMe} forgotPassword={forgotPassword} />
     <LoginCardSubmitButton isDisabled={disableSubmit} isLoading={isSubmitting}>
@@ -57,7 +60,12 @@ LoginCardForm.propTypes = {
   /** Additional HTML attributes to pass to the form */
   attributes: PropTypes.object,
   /** Indicates the state of the form submit and whether to show a spinner or not */
-  isSubmitting: PropTypes.bool
+  isSubmitting: PropTypes.bool,
+  /** when topErrorOnly is set to true,
+   * the helpblock errors/warnings under each input won't appear,
+   * instead we will have only the form error above.
+   */
+  topErrorOnly: PropTypes.bool
 };
 
 LoginCardForm.defaultProps = {
@@ -87,7 +95,8 @@ LoginCardForm.defaultProps = {
   submitError: null,
   showError: false,
   attributes: null,
-  isSubmitting: false
+  isSubmitting: false,
+  topErrorOnly: false
 };
 
 export default LoginCardForm;
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardInput.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardInput.js
index 5daebe5741a..5735cad6b6e 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardInput.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginCardInput.js
@@ -21,12 +21,21 @@ const LoginCardInput = ({
   showWarning,
   className,
   autoComplete,
-  attributes
+  attributes,
+  topErrorOnly
 }) => {
-  const helpBlock =
-    (showError && <HelpBlock>{error}</HelpBlock>) ||
-    (showWarning && <LoginCardInputWarning>{warning}</LoginCardInputWarning>);
-  const validationState = showError ? 'error' : null;
+  const helpBlock = !topErrorOnly
+    ? (showError && <HelpBlock>{error}</HelpBlock>) ||
+      (showWarning && <LoginCardInputWarning>{warning}</LoginCardInputWarning>)
+    : null;
+  let validationState = null;
+  if (topErrorOnly) {
+    if (showWarning) {
+      validationState = 'warning';
+    }
+  } else if (showError) {
+    validationState = 'error';
+  }
   return (
     <FormGroup className={classNames('login_card_input', className)} controlId={id} validationState={validationState}>
       <FormControl
@@ -40,7 +49,7 @@ const LoginCardInput = ({
         onKeyPress={onKeyPress}
         autoComplete={autoComplete}
       />
-
+      {topErrorOnly && <FormControl.Feedback />}
       <Fade in={showError || showWarning}>
         <div>{helpBlock}</div>
       </Fade>
@@ -78,7 +87,12 @@ LoginCardInput.propTypes = {
   /** Sets the HTML autocomplete */
   autoComplete: PropTypes.string,
   /** Additional HTML input's attributes. */
-  attributes: PropTypes.object
+  attributes: PropTypes.object,
+  /** when topErrorOnly is set to true,
+   * the helpblock errors/warnings under each input won't appear,
+   * instead we will have only the form error above.
+   */
+  topErrorOnly: PropTypes.bool
 };
 
 LoginCardInput.defaultProps = {
@@ -96,7 +110,8 @@ LoginCardInput.defaultProps = {
   showError: false,
   className: null,
   autoComplete: '',
-  attributes: null
+  attributes: null,
+  topErrorOnly: false
 };
 
 export default LoginCardInput;
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 7f1e49a88b1..e03a0186dac 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
@@ -20,10 +20,12 @@ class LoginCardWithValidation extends React.Component {
     },
     isCapsLock: false,
     form: {
-      showError: this.props.showError,
+      showError: this.props.topErrorOnly ? true : this.props.showError,
       submitError: this.props.submitError,
       disableSubmit: true,
-      isSubmitting: this.props.isSubmitting
+      isSubmitting: this.props.isSubmitting,
+      topErrorOnly: this.props.topErrorOnly,
+      errors: [this.props.submitError]
     }
   };
 
@@ -48,17 +50,31 @@ class LoginCardWithValidation extends React.Component {
     return null;
   }
 
+  shouldDisableSubmit = (inputType, updatedInputValue) => {
+    if (updatedInputValue.length < 1) {
+      return true;
+    }
+    const otherInputType = inputType === 'usernameField' ? 'passwordField' : 'usernameField';
+    const otherInputValue = this.state[otherInputType].value;
+    return otherInputValue.length < 1;
+  };
+
   onInputChange = (e, inputType) => {
+    const {
+      target: { value }
+    } = e;
     this.props[inputType].onChange && this.props[inputType].onChange(e);
-    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);
+    this.setState(({ form }) => ({
+      [inputType]: {
+        ...this.state[inputType],
+        value,
+        showError: false
+      },
+      form: {
+        ...form,
+        disableSubmit: this.shouldDisableSubmit(inputType, value)
+      }
+    }));
   };
 
   onInputFocus = (e, inputType) => {
@@ -100,62 +116,84 @@ class LoginCardWithValidation extends React.Component {
   };
 
   onSubmitStart = () => {
-    this.setState({
+    this.setState(({ form }) => ({
       form: {
-        ...this.state.form,
+        ...form,
         disableSubmit: true,
         isSubmitting: true,
+        errors: form.topErrorOnly ? [] : form.topErrorOnly,
         showError: false
       }
-    });
+    }));
   };
 
   onSubmitError = submitError => {
-    this.setState({
+    this.setState(({ form }) => ({
       form: {
-        ...this.state.form,
+        ...form,
         showError: true,
         submitError,
+        errors: [submitError],
         disableSubmit: false,
         isSubmitting: false
       }
-    });
+    }));
+  };
+
+  getFormError = () => {
+    const {
+      form: { topErrorOnly, submitError, errors }
+    } = this.state;
+    return topErrorOnly
+      ? errors.map((error, index) => (
+          <div className="login-form-error" key={index}>
+            {error}
+          </div>
+        ))
+      : submitError;
   };
 
   getModifiedProps = () => {
-    const { usernameField, passwordField } = this.props;
+    const { usernameField, passwordField, isCapsLock, form } = this.state;
+    const {
+      passwordField: { warnings }
+    } = this.props;
     const passwordFieldWarningType = this.state.isCapsLock ? 'capsLock' : this.state.passwordField.warningType;
     return {
       usernameField: {
-        ...usernameField,
+        ...this.props.usernameField,
         onChange: e => this.onInputChange(e, 'usernameField'),
         onFocus: e => this.onInputFocus(e, 'usernameField'),
         onBlur: e => this.onInputBlur(e, 'usernameField'),
         onKeyPress: e => this.onKeyPress(e, 'usernameField'),
-        error: usernameField.errors[this.state.usernameField.errorType],
-        showError: this.state.usernameField.showError
+        error: usernameField.error,
+        showError: usernameField.showError
       },
       passwordField: {
-        ...passwordField,
+        ...this.props.passwordField,
         onChange: e => this.onInputChange(e, 'passwordField'),
         onFocus: e => this.onInputFocus(e, 'passwordField'),
         onBlur: e => this.onInputBlur(e, 'passwordField'),
         onKeyPress: e => this.onKeyPress(e, 'passwordField'),
-        warning: passwordField.warnings[passwordFieldWarningType],
-        showWarning: this.state.passwordField.isFocused && this.state.isCapsLock,
-        error: passwordField.errors[this.state.passwordField.errorType],
-        showError: this.state.passwordField.showError
+        warning: warnings && warnings[passwordFieldWarningType],
+        showWarning: passwordField.isFocused && isCapsLock,
+        error: passwordField.error,
+        showError: passwordField.showError
       },
       onSubmit: e => this.onSubmit(e),
-      showError: this.state.form.showError,
-      disableSubmit: this.state.form.disableSubmit,
-      isSubmitting: this.state.form.isSubmitting,
-      submitError: this.state.form.submitError
+      showError: form.showError,
+      disableSubmit: form.disableSubmit,
+      isSubmitting: form.isSubmitting,
+      submitError: this.getFormError()
     };
   };
 
   handleOnInputErrors = () => {
     const { usernameField, passwordField } = this.state;
+    const { topErrorOnly } = this.props;
+
+    topErrorOnly && this.clearFormErrors();
+
     if (usernameField.value) {
       !this.isUserNameValid() && this.handleOnInvalidUsername();
     } else {
@@ -168,7 +206,7 @@ class LoginCardWithValidation extends React.Component {
       this.handleOnEmptyInput('passwordField');
     }
 
-    this.hideSubmitError();
+    !topErrorOnly && this.hideSubmitError();
   };
 
   isFormValid = () =>
@@ -198,34 +236,91 @@ class LoginCardWithValidation extends React.Component {
     });
   };
 
+  clearFormErrors = () => {
+    this.setState(({ form }) => ({
+      form: {
+        ...form,
+        errors: []
+      }
+    }));
+  };
+
   handleOnPasswordTooShort = () => {
-    this.setState({
+    const {
       passwordField: {
-        ...this.state.passwordField,
-        errorType: 'short',
-        showError: true
+        errors: { short: error }
       }
-    });
+    } = this.props;
+    this.setState(
+      ({ form, passwordField }) =>
+        form.topErrorOnly
+          ? {
+              form: {
+                ...form,
+                errors: [...form.errors, error],
+                showError: true
+              }
+            }
+          : {
+              passwordField: {
+                ...passwordField,
+                error,
+                showError: true
+              }
+            }
+    );
   };
 
-  handleOnInvalidUsername = error => {
-    this.setState({
+  handleOnInvalidUsername = () => {
+    const {
       usernameField: {
-        ...this.state.usernameField,
-        errorType: 'invalid',
-        showError: true
+        errors: { invalid: error }
       }
-    });
+    } = this.props;
+    this.setState(
+      ({ form, usernameField }) =>
+        form.topErrorOnly
+          ? {
+              form: {
+                ...form,
+                errors: [...form.errors, error],
+                showError: true
+              }
+            }
+          : {
+              usernameField: {
+                ...usernameField,
+                error,
+                showError: true
+              }
+            }
+    );
   };
 
   handleOnEmptyInput = inputType => {
-    this.setState({
+    const {
       [inputType]: {
-        ...this.state[inputType],
-        errorType: 'empty',
-        showError: true
+        errors: { empty: error }
       }
-    });
+    } = this.props;
+    this.setState(
+      ({ form }) =>
+        form.topErrorOnly
+          ? {
+              form: {
+                ...form,
+                errors: [...form.errors, error],
+                showError: true
+              }
+            }
+          : {
+              [inputType]: {
+                ...this.state[inputType],
+                error,
+                showError: true
+              }
+            }
+    );
   };
 
   toggleCapsLock = e => {
@@ -291,7 +386,8 @@ LoginCardWithValidation.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   disableSubmit: PropTypes.bool,
   isSubmitting: PropTypes.bool,
-  showError: PropTypes.bool
+  showError: PropTypes.bool,
+  topErrorOnly: PropTypes.bool
 };
 
 LoginCardWithValidation.defaultProps = {
@@ -302,7 +398,8 @@ LoginCardWithValidation.defaultProps = {
   submitError: null,
   disableSubmit: false,
   isSubmitting: false,
-  showError: false
+  showError: false,
+  topErrorOnly: false
 };
 
 export default LoginCardWithValidation;
diff --git a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginFormError.js b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginFormError.js
index 6c46536e2fc..090043fd874 100644
--- a/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginFormError.js
+++ b/packages/patternfly-3/patternfly-react/src/components/LoginPage/components/LoginCardComponents/LoginFormError.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import Collapse from 'react-collapse';
 import { default as cx } from 'classnames';
 
-const LoginFormError = ({ children, show, className, ...props }) =>
-  children && (
-    <Collapse {...props} isOpened={show} className={cx('login-form-error', className)}>
+const LoginFormError = ({ children, show, topErrorOnly, className, ...props }) => (
+  <div className={cx('login-form-error', className)} style={topErrorOnly ? { minHeight: '20px' } : null}>
+    <Collapse {...props} isOpened={children !== null && show}>
       {children}
     </Collapse>
-  );
+  </div>
+);
 
 LoginFormError.propTypes = {
   /** Additional css classes */
@@ -16,13 +17,16 @@ LoginFormError.propTypes = {
   /** children nodes or text */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** Controlls the collapse to open/close */
-  show: PropTypes.bool
+  show: PropTypes.bool,
+  /** if it`s a login page with topErrorOnly, add a fixed space for the form error */
+  topErrorOnly: PropTypes.bool
 };
 
 LoginFormError.defaultProps = {
   className: null,
   children: null,
-  show: false
+  show: false,
+  topErrorOnly: false
 };
 
 export default LoginFormError;