From 3199c0e0155437b8aab8fde7d60ad545936ef914 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 1 May 2021 20:32:52 +0530
Subject: [PATCH] Show loading state for login button

---
 frontend/src/LoginPage/LoginPage.jsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/LoginPage/LoginPage.jsx b/frontend/src/LoginPage/LoginPage.jsx
index 0c59426a4e..a1bf8638cd 100644
--- a/frontend/src/LoginPage/LoginPage.jsx
+++ b/frontend/src/LoginPage/LoginPage.jsx
@@ -10,6 +10,10 @@ class LoginPage extends React.Component {
     if (authenticationService.currentUserValue) {
       this.props.history.push('/');
     }
+
+    this.state = {
+      isLoading: false
+    };
   }
 
   handleChange = (event) => {
@@ -19,20 +23,26 @@ class LoginPage extends React.Component {
   authUser = (e) => {
     e.preventDefault();
 
+    this.setState({ isLoading: true });
+
     const { email, password } = this.state;
 
     authenticationService.login(email, password).then(
       () => {
         const { from } = this.props.location.state || { from: { pathname: '/' } };
         this.props.history.push(from);
+        this.setState({ isLoading: false });
       },
       () => {
         toast.error('Invalid username or password', { hideProgressBar: true, position: 'top-center' });
+        this.setState({ isLoading: false });
       }
     );
   };
 
   render() {
+    const { isLoading } = this.state;
+
     return (
       <div className="page page-center">
         <div className="container-tight py-2">
@@ -58,7 +68,7 @@ class LoginPage extends React.Component {
                 <label className="form-label">
                   Password
                   <span className="form-label-description">
-                    <a href="/forgot-password">Forgot password</a>
+                    <a tabIndex="-1" href="/forgot-password">Forgot password</a>
                   </span>
                 </label>
                 <div className="input-group input-group-flat">
@@ -73,14 +83,8 @@ class LoginPage extends React.Component {
                   <span className="input-group-text"></span>
                 </div>
               </div>
-              <div className="mb-2">
-                <label className="form-check">
-                  <input type="checkbox" className="form-check-input" />
-                  <span className="form-check-label">Remember this device</span>
-                </label>
-              </div>
               <div className="form-footer">
-                <button className="btn btn-primary w-100" onClick={this.authUser}>
+                <button className={`btn btn-primary w-100 ${isLoading ? 'btn-loading' : ''}`} onClick={this.authUser}>
                   Sign in
                 </button>
               </div>