From c0fde5f7e55e083dd132f3e4e96e7f8144289507 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mikaoelitiana@users.noreply.github.com>
Date: Tue, 17 Jan 2017 02:30:54 +0300
Subject: 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
---
 webapp/components/login/login_controller.jsx | 31 +++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

(limited to 'webapp/components')

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>
-- 
cgit v1.2.3-1-g7c22