Merge pull request #1373 from eciis/add-loading-bar-in-login

Adding load-circle in login page
eciis · Jan 7, 2019 · 681f284 · 681f284
2 parents 1538013 + ce454cc
commit 681f284
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/frontend/auth/authService.js b/frontend/auth/authService.js
@@ -121,6 +121,7 @@
         };
 
         function login(loginMethodPromisse) {
+            service.isLoadingUser = true;
             return authObj.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(function() {
                 return loginMethodPromisse.then(function(response) {
                     return response.user;
@@ -138,6 +139,8 @@
                     service.sendEmailVerification(user);
                     throw "Error! Email not verified.";
                 }
+            }).finally(() => {
+                service.isLoadingUser = false;
             });
         }
 

diff --git a/frontend/auth/login.html b/frontend/auth/login.html
@@ -21,11 +21,12 @@
                 <input type="password" name="password" ng-model="loginCtrl.user.password"
                   class="custom-card-input" required="true"  minlength="6" aria-label="Senha">
               </md-input-container>
-              <div layout="row" layout-align-xs="center center" layout-align="end center">
-                <md-button type="submit" class="md-raised md-primary" md-colors="{background: 'teal-500'}">
+              <div layout="row" layout-align-xs="center center" layout-align="end center" ng-if="!loginCtrl.isLoadingUser()">
+                <md-button type="submit" class="md-raised md-primary" md-colors="{background: 'teal-500'}" >
                   Acessar
                 </md-button>
               </div>
+              <load-circle ng-if="loginCtrl.isLoadingUser()"></load-circle>
             </form>
 
             <md-button layout="row" layout-align="start center" class="login-btn"

diff --git a/frontend/auth/loginController.js b/frontend/auth/loginController.js
@@ -13,6 +13,14 @@
 
         var redirectPath = $stateParams.redirect;
 
+        /**
+         * Verify if the Auth Service is loading User.
+         * @returns {boolean} True if it is loading user, false if not.
+         */
+        loginCtrl.isLoadingUser = function () {
+            return AuthService.isLoadingUser;
+        };
+
         loginCtrl.loginWithGoogle = function loginWithGoogle() {
             var promise = AuthService.loginWithGoogle();
             promise.then(function success() {
@@ -28,8 +36,10 @@
         };
 
         loginCtrl.loginWithEmailPassword = function loginWithEmailPassword() {
+            loginCtrl.isLoading = true;
             AuthService.loginWithEmailAndPassword(loginCtrl.user.email, loginCtrl.user.password).then(
                 function success() {
+                    loginCtrl.isLoading = false;
                     redirectTo(redirectPath);
                 }
             ).catch(function(error) {

diff --git a/frontend/test/specs/auth/loginControllerSpec.js b/frontend/test/specs/auth/loginControllerSpec.js
@@ -60,4 +60,16 @@
             expect(state.go).toHaveBeenCalledWith(states.HOME);
         });
     });
+
+    describe('isLoadingUser()', function() {
+        it('should return true if AuthService.isLoadingUser is true', () => {
+            authService.isLoadingUser = true;
+            expect(logginCtrl.isLoadingUser()).toBe(true);
+        });
+
+        it('should return false if AuthService.isLoadingUser is false', () => {
+            authService.isLoadingUser = false;
+            expect(logginCtrl.isLoadingUser()).toBe(false);
+        });
+    });
 }));