PLT-2809 Followups to login page redesign (#2901)

* Rearranged controls on the login page

* Prevented login when username or password hasn't been entered

* Updated login page error messages

* Enabled sign in with username by default

1 files changed, 100 insertions, 99 deletions

diff --git a/webapp/components/login/login.jsx b/webapp/components/login/login.jsx
index d2ee1be81..0a12ed645 100644
--- a/webapp/components/login/login.jsx
+++ b/webapp/components/login/login.jsx
@@ -50,58 +50,25 @@ export default class Login extends React.Component {
         e.preventDefault();
 
         const loginId = this.state.loginId.trim();
-        if (!loginId) {
-            const ldapEnabled = global.window.mm_config.EnableLdap === 'true';
-            const usernameSigninEnabled = global.window.mm_config.EnableSignInWithUsername === 'true';
-            const emailSigninEnabled = global.window.mm_config.EnableSignInWithEmail === 'true';
-
-            this.setState({
-                serverError: (
-                    <FormattedMessage
-                        id='login.loginIdRequired'
-                        defaultMessage='A {type} is required'
-                        values={{
-                            type: this.createLoginPlaceholder(emailSigninEnabled, usernameSigninEnabled, ldapEnabled)
-                        }}
-                    />
-                )
-            });
-
-            return;
-        }
-
         const password = this.state.password.trim();
-        if (!password) {
-            this.setState({
-                serverError: (
-                    <FormattedMessage
-                        id='login.passwordRequired'
-                        defaultMessage='A password is required'
-                    />
-                )
-            });
-
-            return;
-        }
 
-        if (global.window.mm_config.EnableMultifactorAuthentication !== 'true') {
+        if (global.window.mm_config.EnableMultifactorAuthentication === 'true') {
+            Client.checkMfa(
+                loginId,
+                (data) => {
+                    if (data.mfa_required === 'true') {
+                        this.setState({showMfa: true});
+                    } else {
+                        this.submit(loginId, password, '');
+                    }
+                },
+                (err) => {
+                    this.setState({serverError: err.message});
+                }
+            );
+        } else {
             this.submit(loginId, password, '');
-            return;
         }
-
-        Client.checkMfa(
-            loginId,
-            (data) => {
-                if (data.mfa_required === 'true') {
-                    this.setState({showMfa: true});
-                } else {
-                    this.submit(loginId, password, '');
-                }
-            },
-            (err) => {
-                this.setState({serverError: err.message});
-            }
-        );
     }
 
     submit(loginId, password, token) {
@@ -125,7 +92,16 @@ export default class Login extends React.Component {
                         serverError: (
                             <FormattedMessage
                                 id='login.userNotFound'
-                                defaultMessage="We couldn't find an existing account matching your login credentials."
+                                defaultMessage="We couldn't find an account matching your login credentials."
+                            />
+                        )
+                    });
+                } else if (err.id === 'api.user.check_user_password.invalid.app_error' || err.id === 'ent.ldap.do_login.invalid_password.app_error') {
+                    this.setState({
+                        serverError: (
+                            <FormattedMessage
+                                id='login.invalidPassword'
+                                defaultMessage='Your password is incorrect.'
                             />
                         )
                     });
@@ -251,58 +227,25 @@ export default class Login extends React.Component {
             }
         }
 
+        const loginControls = [];
+
         const ldapEnabled = global.window.mm_config.EnableLdap === 'true';
         const gitlabSigninEnabled = global.window.mm_config.EnableSignUpWithGitLab === 'true';
         const googleSigninEnabled = global.window.mm_config.EnableSignUpWithGoogle === 'true';
         const usernameSigninEnabled = global.window.mm_config.EnableSignInWithUsername === 'true';
         const emailSigninEnabled = global.window.mm_config.EnableSignInWithEmail === 'true';
 
-        const oauthLogins = [];
-        if (gitlabSigninEnabled) {
-            oauthLogins.push(
-                <a
-                    className='btn btn-custom-login gitlab'
-                    key='gitlab'
-                    href={Client.getOAuthRoute() + '/gitlab/login'}
-                >
-                    <span className='icon'/>
-                    <span>
-                        <FormattedMessage
-                            id='login.gitlab'
-                            defaultMessage='with GitLab'
-                        />
-                    </span>
-                </a>
-            );
-        }
-
-        if (googleSigninEnabled) {
-            oauthLogins.push(
-                <Link
-                    className='btn btn-custom-login google'
-                    key='google'
-                    to={Client.getOAuthRoute() + '/google/login'}
-                >
-                    <span className='icon'/>
-                    <span>
-                        <FormattedMessage
-                            id='login.google'
-                            defaultMessage='with Google Apps'
-                        />
-                    </span>
-                </Link>
-            );
-        }
-
-        let login = null;
         if (emailSigninEnabled || usernameSigninEnabled || ldapEnabled) {
             let errorClass = '';
             if (this.state.serverError) {
                 errorClass = ' has-error';
             }
 
-            login = (
-                <form onSubmit={this.preSubmit}>
+            loginControls.push(
+                <form
+                    key='loginBoxes'
+                    onSubmit={this.preSubmit}
+                >
                     <div className='signup__email-container'>
                         <FormError error={this.state.serverError}/>
                         <div className={'form-group' + errorClass}>
@@ -330,6 +273,7 @@ export default class Login extends React.Component {
                             <button
                                 type='submit'
                                 className='btn btn-primary'
+                                disabled={!this.state.loginId || !this.state.password}
                             >
                                 <FormattedMessage
                                     id='login.signIn'
@@ -342,10 +286,9 @@ export default class Login extends React.Component {
             );
         }
 
-        var userSignUp;
         if (global.window.mm_config.EnableOpenServer === 'true') {
-            userSignUp = (
-                <div>
+            loginControls.push(
+                <div key='signup'>
                     <span>
                         <FormattedMessage
                             id='login.noAccount'
@@ -365,10 +308,12 @@ export default class Login extends React.Component {
             );
         }
 
-        let forgotPassword;
         if (usernameSigninEnabled || emailSigninEnabled) {
-            forgotPassword = (
-                <div className='form-group'>
+            loginControls.push(
+                <div
+                    key='forgotPassword'
+                    className='form-group'
+                >
                     <Link to={'/reset_password'}>
                         <FormattedMessage
                             id='login.forgot'
@@ -379,13 +324,69 @@ export default class Login extends React.Component {
             );
         }
 
+        if ((emailSigninEnabled || usernameSigninEnabled || ldapEnabled) && (gitlabSigninEnabled || googleSigninEnabled)) {
+            loginControls.push(
+                <div
+                    key='divider'
+                    className='or__container'
+                >
+                    <FormattedMessage
+                        id='login.or'
+                        defaultMessage='or'
+                    />
+                </div>
+            );
+
+            loginControls.push(
+                <h5 key='oauthHeader'>
+                    <FormattedMessage
+                        id='login.signInWith'
+                        defaultMessage='Sign in with:'
+                    />
+                </h5>
+            );
+        }
+
+        if (gitlabSigninEnabled) {
+            loginControls.push(
+                <a
+                    className='btn btn-custom-login gitlab'
+                    key='gitlab'
+                    href={Client.getOAuthRoute() + '/gitlab/login'}
+                >
+                    <span className='icon'/>
+                    <span>
+                        <FormattedMessage
+                            id='login.gitlab'
+                            defaultMessage='GitLab'
+                        />
+                    </span>
+                </a>
+            );
+        }
+
+        if (googleSigninEnabled) {
+            loginControls.push(
+                <Link
+                    className='btn btn-custom-login google'
+                    key='google'
+                    to={Client.getOAuthRoute() + '/google/login'}
+                >
+                    <span className='icon'/>
+                    <span>
+                        <FormattedMessage
+                            id='login.google'
+                            defaultMessage='Google Apps'
+                        />
+                    </span>
+                </Link>
+            );
+        }
+
         return (
             <div>
                 {extraBox}
-                {oauthLogins}
-                {login}
-                {userSignUp}
-                {forgotPassword}
+                {loginControls}
             </div>
         );
     }