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

7 files changed, 114 insertions, 122 deletions

diff --git a/config/config.json b/config/config.json
index f468e49ee..45da5770b 100644
--- a/config/config.json
+++ b/config/config.json
@@ -78,7 +78,7 @@
     "EmailSettings": {
         "EnableSignUpWithEmail": true,
         "EnableSignInWithEmail": true,
-        "EnableSignInWithUsername": false,
+        "EnableSignInWithUsername": true,
         "SendEmailNotifications": false,
         "RequireEmailVerification": false,
         "FeedbackName": "",
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>
         );
     }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index e3c1aac0f..79f3c5cbe 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -965,20 +965,19 @@
   "login.email": "Email",
   "login.find": "Find your other teams",
   "login.forgot": "I forgot my password",
-  "login.gitlab": "with GitLab",
-  "login.google": "with Google Apps",
+  "login.invalidPassword": "Your password is incorrect.",
+  "login.gitlab": "GitLab",
+  "login.google": "Google Apps",
   "login.ldapUsername": "LDAP Username",
-  "login.loginIdRequired": "A {type} is required",
   "login.noAccount": "Don't have an account? ",
   "login.on": "on {siteName}",
   "login.or": "or",
   "login.password": "Password",
   "login.passwordChanged": " Password updated successfully",
-  "login.passwordRequired": "A password is required",
   "login.session_expired": " Your session has expired. Please login again.",
   "login.signIn": "Sign in",
-  "login.signTo": "Sign in to:",
-  "login.userNotFound": "We couldn't find an existing account matching your login credentials.",
+  "login.signInWith": "Sign in with:",
+  "login.userNotFound": "We couldn't find an account matching your login credentials.",
   "login.username": "Username",
   "login.verified": " Email Verified",
   "login_mfa.enterToken": "To complete the sign in process, please enter a token from your smartphone's authenticator",
diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json
index 434444e94..8a2e716f4 100644
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -965,8 +965,8 @@
   "login.email": "Correo electrónico",
   "login.find": "Encuentra tus otros equipos",
   "login.forgot": "Olvide mi contraseña",
-  "login.gitlab": "con GitLab",
-  "login.google": "con Google Apps",
+  "login.gitlab": "GitLab",
+  "login.google": "Google Apps",
   "login.ldapUsername": "Usuario LDAP",
   "login.loginIdRequired": "Se requiere un {type}",
   "login.noAccount": "¿No tienes una cuenta? ",
@@ -974,10 +974,8 @@
   "login.or": "o",
   "login.password": "Contraseña",
   "login.passwordChanged": " La contraseña ha sido actualizada",
-  "login.passwordRequired": "La contraseña es obligatoria",
   "login.session_expired": " Tu sesión ha expirado. Por favor inicia sesión nuevamente.",
   "login.signIn": "Entrar",
-  "login.signTo": "Ingresar a:",
   "login.userNotFound": "No pudimos encontrar una cuenta que coincida con tus credenciales.",
   "login.username": "Nombre de usuario",
   "login.verified": " Correo electrónico Verificado",
diff --git a/webapp/i18n/fr.json b/webapp/i18n/fr.json
index 31f646d84..12f469c01 100644
--- a/webapp/i18n/fr.json
+++ b/webapp/i18n/fr.json
@@ -821,17 +821,15 @@
   "login.email": "Adresse électronique",
   "login.find": "Trouver vos autres équipes",
   "login.forgot": "Mot de passe perdu",
-  "login.gitlab": "avec GitLab",
-  "login.google": "avec Google Apps",
+  "login.gitlab": "GitLab",
+  "login.google": "Google Apps",
   "login.ldapUsername": "Utilisateur LDAP",
   "login.noAccount": "Pas de compte utilisateur ?",
   "login.on": "sur {siteName}",
   "login.or": "ou",
   "login.password": "Mot de passe",
-  "login.passwordRequired": "Le mot de passe est obligatoire",
   "login.session_expired": "Votre session a expiré. Merci de vous reconnecter.",
   "login.signIn": "Connexion",
-  "login.signTo": "Se connecter à :",
   "login.username": "Nom d'utilisateur",
   "login.verified": "Adresse électronique vérifiée",
   "member_item.makeAdmin": "Passer Administrateur",
diff --git a/webapp/i18n/ja.json b/webapp/i18n/ja.json
index e7198bd81..1b1b56302 100644
--- a/webapp/i18n/ja.json
+++ b/webapp/i18n/ja.json
@@ -915,17 +915,15 @@
   "login.email": "電子メールアドレス",
   "login.find": "参加している他のチームを探す",
   "login.forgot": "パスワードを忘れました",
-  "login.gitlab": "GitLabでログインする",
-  "login.google": "Google Appsでログインする",
+  "login.gitlab": "GitLab",
+  "login.google": "Google Apps",
   "login.ldapUsername": "LDAPユーザー名",
   "login.noAccount": "アカウントを持っていますか? ",
   "login.on": "{siteName}にて",
   "login.or": "または",
   "login.password": "パスワード",
-  "login.passwordRequired": "パスワードは必須です",
   "login.session_expired": " あなたのセッションは有効期限が切れました。再度ログインしてください。",
   "login.signIn": "利用登録",
-  "login.signTo": "利用登録先: ",
   "login.username": "LDAPユーザー名",
   "login.verified": " 電子メールアドレスが確認されました",
   "login_mfa.enterToken": "利用登録を完了するには、スマートフォンのauthenticatorからのトークンを入力してください。",
diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt.json
index 5471c8a5e..6bd3d5724 100644
--- a/webapp/i18n/pt.json
+++ b/webapp/i18n/pt.json
@@ -953,8 +953,8 @@
   "login.email": "E-mail",
   "login.find": "Encontre suas outras equipes",
   "login.forgot": "Eu esqueci a minha senha",
-  "login.gitlab": "com GitLab",
-  "login.google": "com Google Apps",
+  "login.gitlab": "GitLab",
+  "login.google": "Google Apps",
   "login.ldapUsername": "Usuário LDAP",
   "login.loginIdRequired": "Um {type} é necessário",
   "login.noAccount": "Não tem uma conta? ",
@@ -962,10 +962,8 @@
   "login.or": "ou",
   "login.password": "Senha",
   "login.passwordChanged": " Senha atualizada com sucesso",
-  "login.passwordRequired": "É necessário uma senha",
   "login.session_expired": " Sua sessão expirou. Por favor faça login novamente.",
   "login.signIn": "Login",
-  "login.signTo": "Login em:",
   "login.userNotFound": "Não foi possível encontrar uma conta existente que corresponda com as suas credenciais.",
   "login.username": "Usuário",
   "login.verified": " Email Verificado",