UI fix for errors in signup and login pages and adding space between buttons in the security tab (#3512)

* Fixing the errors style on login and signup pages

* Adding space between login options in the security section

4 files changed, 24 insertions, 8 deletions

diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx
index 3c73759c5..047595ef2 100644
--- a/webapp/components/form_error.jsx
+++ b/webapp/components/form_error.jsx
@@ -8,6 +8,7 @@ export default class FormError extends React.Component {
         // accepts either a single error or an array of errors
         return {
             error: React.PropTypes.node,
+            margin: React.PropTypes.node,
             errors: React.PropTypes.arrayOf(React.PropTypes.node)
         };
     }
@@ -39,6 +40,16 @@ export default class FormError extends React.Component {
             return null;
         }
 
+        if (this.props.margin) {
+            return (
+                <div className='form-group has-error'>
+                    <label className='control-label'>
+                        {message}
+                    </label>
+                </div>
+            );
+        }
+
         return (
             <div className='col-sm-12 has-error'>
                 <label className='control-label'>
diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx
index cd4175d3c..ca06caf0b 100644
--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -336,7 +336,10 @@ export default class LoginController extends React.Component {
                     onSubmit={this.preSubmit}
                 >
                     <div className='signup__email-container'>
-                        <FormError error={this.state.serverError}/>
+                        <FormError
+                            error={this.state.serverError}
+                            margin={true}
+                        />
                         <div className={'form-group' + errorClass}>
                             <input
                                 className='form-control'
diff --git a/webapp/components/signup_user_complete.jsx b/webapp/components/signup_user_complete.jsx
index fa5e9268e..f342dc792 100644
--- a/webapp/components/signup_user_complete.jsx
+++ b/webapp/components/signup_user_complete.jsx
@@ -393,7 +393,10 @@ export default class SignupUserComplete extends React.Component {
                 onSubmit={this.handleLdapSignup}
             >
                 <div className='signup__email-container'>
-                    <FormError error={this.state.ldapError}/>
+                    <FormError
+                        error={this.state.ldapError}
+                        margin={true}
+                    />
                     <div className={'form-group' + errorClass}>
                         <input
                             className='form-control'
diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx
index 247dc0f81..ec84f4cb5 100644
--- a/webapp/components/user_settings/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security.jsx
@@ -551,7 +551,7 @@ class SecurityTab extends React.Component {
                 }
 
                 emailOption = (
-                    <div>
+                    <div className='padding-bottom x2'>
                         <Link
                             className='btn btn-primary'
                             to={link}
@@ -569,7 +569,7 @@ class SecurityTab extends React.Component {
             let gitlabOption;
             if (global.window.mm_config.EnableSignUpWithGitLab === 'true' && user.auth_service === '') {
                 gitlabOption = (
-                    <div>
+                    <div className='padding-bottom x2'>
                         <Link
                             className='btn btn-primary'
                             to={'/claim/email_to_oauth?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GITLAB_SERVICE}
@@ -587,7 +587,7 @@ class SecurityTab extends React.Component {
             let googleOption;
             if (global.window.mm_config.EnableSignUpWithGoogle === 'true' && user.auth_service === '') {
                 googleOption = (
-                    <div>
+                    <div className='padding-bottom x2'>
                         <Link
                             className='btn btn-primary'
                             to={'/' + teamName + '/claim/email_to_oauth?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GOOGLE_SERVICE}
@@ -605,7 +605,7 @@ class SecurityTab extends React.Component {
             let ldapOption;
             if (global.window.mm_config.EnableLdap === 'true' && user.auth_service === '') {
                 ldapOption = (
-                    <div>
+                    <div className='padding-bottom x2'>
                         <Link
                             className='btn btn-primary'
                             to={'/claim/email_to_ldap?email=' + encodeURIComponent(user.email)}
@@ -623,7 +623,7 @@ class SecurityTab extends React.Component {
             let samlOption;
             if (global.window.mm_config.EnableSaml === 'true' && user.auth_service === '') {
                 samlOption = (
-                    <div>
+                    <div className='padding-bottom x2'>
                         <Link
                             className='btn btn-primary'
                             to={'/claim/email_to_oauth?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.SAML_SERVICE}
@@ -643,7 +643,6 @@ class SecurityTab extends React.Component {
                 <div key='userSignInOption'>
                     {emailOption}
                     {gitlabOption}
-                    <br/>
                     {ldapOption}
                     {samlOption}
                     {googleOption}