PLT-4784 Display Sign In button spinner (#5046)

* PLT-4784 Display Sign In button spinner

When the user clicks the Sign In button, display a spinner on the left

fixes #4973

* Replace "Sing in..." by "Signing in..."

* fix: replace ternary with if block

2 files changed, 25 insertions, 7 deletions

diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx
index 6dc7af883..b02d66bbb 100644
--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -47,7 +47,8 @@ export default class LoginController extends React.Component {
             samlEnabled: global.window.mm_license.IsLicensed === 'true' && global.window.mm_config.EnableSaml === 'true',
             loginId: '', // the browser will set a default for this
             password: '',
-            showMfa: false
+            showMfa: false,
+            loading: false
         };
     }
 
@@ -137,7 +138,7 @@ export default class LoginController extends React.Component {
     }
 
     submit(loginId, password, token) {
-        this.setState({serverError: null});
+        this.setState({serverError: null, loading: true});
 
         Client.webLogin(
             loginId,
@@ -172,6 +173,7 @@ export default class LoginController extends React.Component {
                     err.id === 'ent.ldap.do_login.user_not_registered.app_error') {
                     this.setState({
                         showMfa: false,
+                        loading: false,
                         serverError: (
                             <FormattedMessage
                                 id='login.userNotFound'
@@ -182,6 +184,7 @@ export default class LoginController extends React.Component {
                 } else if (err.id === 'api.user.check_user_password.invalid.app_error' || err.id === 'ent.ldap.do_login.invalid_password.app_error') {
                     this.setState({
                         showMfa: false,
+                        loading: false,
                         serverError: (
                             <FormattedMessage
                                 id='login.invalidPassword'
@@ -190,7 +193,7 @@ export default class LoginController extends React.Component {
                         )
                     });
                 } else {
-                    this.setState({showMfa: false, serverError: err.message});
+                    this.setState({showMfa: false, serverError: err.message, loading: false});
                 }
             }
         );
@@ -348,6 +351,23 @@ export default class LoginController extends React.Component {
                 errorClass = ' has-error';
             }
 
+            let loginButton =
+                (<FormattedMessage
+                    id='login.signIn'
+                    defaultMessage='Sign in'
+                 />);
+
+            if (this.state.loading) {
+                loginButton =
+                (<span>
+                    <span className='fa fa-refresh icon--rotate'/>
+                    <FormattedMessage
+                        id='login.signInLoading'
+                        defaultMessage='Signing in...'
+                    />
+                </span>);
+            }
+
             loginControls.push(
                 <form
                     key='loginBoxes'
@@ -387,10 +407,7 @@ export default class LoginController extends React.Component {
                                 type='submit'
                                 className='btn btn-primary'
                             >
-                                <FormattedMessage
-                                    id='login.signIn'
-                                    defaultMessage='Sign in'
-                                />
+                                { loginButton }
                             </button>
                         </div>
                     </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 942ab62f3..3e0f6117a 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1556,6 +1556,7 @@
   "login.passwordChanged": " Password updated successfully",
   "login.session_expired": " Your session has expired. Please login again.",
   "login.signIn": "Sign in",
+  "login.signInLoading": "Signing in...",
   "login.signInWith": "Sign in with:",
   "login.userNotFound": "We couldn't find an account matching your login credentials.",
   "login.username": "Username",