feat: TTA-83 Improve Admins Validation in Frontend

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser": "10.2.2",
     "@angular/platform-browser-dynamic": "10.2.2",
     "@angular/router": "10.2.2",
+    "@auth0/angular-jwt": "^5.0.2",
     "@azure/app-configuration": "1.1.0",
     "@azure/identity": "1.1.0",
     "@ng-select/ng-select": "7.2.0",

src/app/app.module.ts

@@ -48,7 +48,7 @@ import { ActivityEffects } from './modules/activities-management/store/activity-
 import { ProjectEffects } from './modules/customer-management/components/projects/components/store/project.effects';
 import { TechnologyEffects } from './modules/shared/store/technology.effects';
 import { ProjectTypeEffects } from './modules/customer-management/components/projects-type/store/project-type.effects';
-import { reducers, metaReducers } from './reducers';
+import { reducers } from './reducers';
 import { CLIENT_URL, environment } from '../environments/environment';
 import { EnvironmentType } from '../environments/enum';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
@@ -179,7 +179,6 @@ const maskConfig: Partial<IConfig> = {
     MatIconModule,
     MatListModule,
     StoreModule.forRoot(reducers, {
-      metaReducers,
     }),
     environment.production === EnvironmentType.TT_DEV
       ? StoreDevtoolsModule.instrument({

src/app/guards/login-guard/login.guard.spec.ts

@@ -7,6 +7,7 @@ import { LoginGuard } from './login.guard';
 import { LoginService } from '../../modules/login/services/login.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { SocialAuthService } from 'angularx-social-login';
+import { of } from 'rxjs';
 
 
 describe('LoginGuard', () => {
@@ -15,13 +16,13 @@ describe('LoginGuard', () => {
   let azureAdB2CService: AzureAdB2CService;
   const azureAdB2CServiceStub = {
     isLogin() {
-      return true;
+      return of(true);
     }
   };
   let loginService: LoginService;
   const loginServiceStub = {
     isLogin() {
-      return true;
+      return of(true);
     }
   };
   const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['']);
@@ -46,36 +47,41 @@ describe('LoginGuard', () => {
   it('can activate the route when user is logged-in on Production', () => {
     loginGuard.isProduction = true;
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(true);
-    const canActivate = loginGuard.canActivate();
+    loginGuard.canActivate().subscribe(canActivate => {
+      expect(canActivate).toEqual(true);
+    });
     expect(azureAdB2CService.isLogin).toHaveBeenCalled();
-    expect(canActivate).toEqual(true);
   });
 
+
   it('can activate the route when user is logged-in Locally', () => {
     loginGuard.isProduction = false;
-    spyOn(loginService, 'isLogin').and.returnValue(true);
-    const canActivate = loginGuard.canActivate();
+    spyOn(loginService, 'isLogin').and.returnValue(of(true));
+    loginGuard.canActivate().subscribe(isLogin => {
+      expect(isLogin).toEqual(true);
+    });
     expect(loginService.isLogin).toHaveBeenCalled();
-    expect(canActivate).toEqual(true);
   });
 
   it('can not active the route and is redirected to login if user is not logged-in on Production', inject([Router],  (router: Router) => {
     loginGuard.isProduction = true;
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(false);
     spyOn(router, 'navigate').and.stub();
-    const canActivate = loginGuard.canActivate();
+    loginGuard.canActivate().subscribe(canActivate => {
+      expect(canActivate).toEqual(false);
+    });
     expect(azureAdB2CService.isLogin).toHaveBeenCalled();
-    expect(canActivate).toEqual(false);
     expect(router.navigate).toHaveBeenCalledWith(['login']);
   }));
 
   it('can not active the route and is redirected to login if user is not logged-in Locally', inject([Router],  (router: Router) => {
     loginGuard.isProduction = false;
-    spyOn(loginService, 'isLogin').and.returnValue(false);
+    spyOn(loginService, 'isLogin').and.returnValue(of(false));
     spyOn(router, 'navigate').and.stub();
-    const canActivate = loginGuard.canActivate();
+    loginGuard.canActivate().subscribe(isLogin => {
+      expect(isLogin).toEqual(false);
+    });
     expect(loginService.isLogin).toHaveBeenCalled();
-    expect(canActivate).toEqual(false);
     expect(router.navigate).toHaveBeenCalledWith(['login']);
   }));
 

src/app/guards/login-guard/login.guard.ts

@@ -3,7 +3,9 @@ import { Router, CanActivate } from '@angular/router';
 import { AzureAdB2CService } from '../../modules/login/services/azure.ad.b2c.service';
 import { LoginService } from '../../modules/login/services/login.service';
 import { environment } from 'src/environments/environment';
+import { map } from 'rxjs/operators';
 import { EnvironmentType } from 'src/environments/enum';
+import { of } from 'rxjs';
 
 
 @Injectable({
@@ -21,19 +23,22 @@ export class LoginGuard implements CanActivate {
     if (this.isProduction) {
       if (this.azureAdB2CService.isLogin()) {
         this.azureAdB2CService.setCookies();
-        return true;
+        return of(true);
       } else {
         this.router.navigate(['login']);
-        return false;
+        return of(false);
       }
     } else {
-      if (this.loginService.isLogin()) {
-        this.loginService.setCookies();
-        return true;
-      } else {
-        this.router.navigate(['login']);
-        return false;
-      }
+      return this.loginService.isLogin().pipe(
+        map(isLogin => {
+          if (!isLogin) {
+            this.router.navigate(['login']);
+            return false;
+          }
+          this.loginService.setCookies();
+          return true;
+        })
+      );
     }
   }
 }

src/app/modules/login/login.component.spec.ts

@@ -18,7 +18,7 @@ describe('LoginComponent', () => {
 
   const azureAdB2CServiceStub = {
     isLogin() {
-      return true;
+      return of(true);
     },
     signIn() {
       return of();
@@ -29,7 +29,7 @@ describe('LoginComponent', () => {
 
   const loginServiceStub = {
     isLogin() {
-      return true;
+      return of(true);
     },
     signIn() {
       return of();
@@ -99,7 +99,7 @@ describe('LoginComponent', () => {
   }));
 
   it('should sign up or login with google if is not logged-in into the app Locally', inject([Router],  (router: Router) => {
-    spyOn(loginService, 'isLogin').and.returnValue(false);
+    spyOn(loginService, 'isLogin').and.returnValue(of(false));
     spyOn(loginService, 'setLocalStorage').and.returnValue();
     spyOn(loginService, 'getUser').and.returnValue(of(() => {}));
     spyOn(loginService, 'setCookies').and.returnValue();
@@ -123,7 +123,7 @@ describe('LoginComponent', () => {
   }));
 
   it('should not sign-up or login with google if is already logged-in into the app Locally', inject([Router],  (router: Router) => {
-    spyOn(loginService, 'isLogin').and.returnValue(true);
+    spyOn(loginService, 'isLogin').and.returnValue(of(true));
     spyOn(router, 'navigate').and.stub();
     component.loginWithGoogle();
     expect(loginService.isLogin).toHaveBeenCalled();

src/app/modules/login/login.component.ts

@@ -7,6 +7,7 @@ import { SocialAuthService, SocialUser } from 'angularx-social-login';
 import { environment } from 'src/environments/environment';
 import { EnvironmentType } from 'src/environments/enum';
 import { LoginService } from './services/login.service';
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -31,7 +32,9 @@ export class LoginComponent implements OnInit {
         this.loginService.setLocalStorage('idToken', user.idToken);
         this.loginService.getUser(user.idToken).subscribe((response) => {
           this.loginService.setCookies();
-          this.loginService.setLocalStorage('user2', JSON.stringify(response));
+          const tokenObject = JSON.stringify(response);
+          const tokenJson = JSON.parse(tokenObject);
+          this.loginService.setLocalStorage('user', tokenJson.token);
           this.router.navigate(['']);
         });
       }
@@ -49,11 +52,14 @@ export class LoginComponent implements OnInit {
       });
     }
   }
+
   loginWithGoogle() {
-    if (this.loginService.isLogin()) {
-      this.router.navigate(['']);
-    } else {
-      this.loginService.signIn();
-    }
+    this.loginService.isLogin().subscribe(isLogin => {
+      if (isLogin) {
+        this.router.navigate(['']);
+      } else {
+        this.loginService.signIn();
+      }
+    });
   }
 }

src/app/modules/login/services/login.service.spec.ts

@@ -1,5 +1,6 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { JwtHelperService } from '@auth0/angular-jwt';
 import { SocialAuthService } from 'angularx-social-login';
 import { CookieService } from 'ngx-cookie-service';
 import { of } from 'rxjs';
@@ -14,6 +15,10 @@ describe('LoginService', () => {
   let account;
   const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['signOut', 'signIn']);
   const cookieStoreStub = {};
+  const helper = new JwtHelperService();
+  const getAccountInfo = () => {
+    return helper.decodeToken(account);
+  };
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -27,12 +32,7 @@ describe('LoginService', () => {
     cookieService = TestBed.inject(CookieService);
     httpMock = TestBed.inject(HttpTestingController);
     socialAuthService = TestBed.inject(SocialAuthService);
-    account = {
-      id: 'abc',
-      name: 'abc',
-      email: 'abc',
-      groups: ['abc'],
-    };
+    account = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImFiYyIsIm5hbWUiOiJhYmMiLCJlbWFpbCI6ImFiYyIsImdyb3VwcyI6WyJhYmMiXX0.UNxyDT8XzXJhI1F3LySBU7TJlpENPUPHj8my7Obw2ZM';
     let store = {};
     const mockLocalStorage = {
       getItem: (key: string): string => {
@@ -48,7 +48,7 @@ describe('LoginService', () => {
     spyOn(localStorage, 'getItem').and.callFake(mockLocalStorage.getItem);
     spyOn(localStorage, 'setItem').and.callFake(mockLocalStorage.setItem);
     spyOn(localStorage, 'clear').and.callFake(mockLocalStorage.clear);
-    localStorage.setItem('user2', JSON.stringify(account));
+    localStorage.setItem('user', account);
   });
 
   it('should be created', () => {
@@ -58,19 +58,19 @@ describe('LoginService', () => {
   it('should get name from localStorage', () => {
     const name = service.getName();
 
-    expect(name).toEqual(account.name);
+    expect(name).toEqual(getAccountInfo().name);
   });
 
   it('should get userId from localStorage', () => {
     const userId = service.getUserId();
 
-    expect(userId).toEqual(account.id);
+    expect(userId).toEqual(getAccountInfo().id);
   });
 
   it('should get UserGroup from localStorage', () => {
     const userGroup = service.getUserGroup();
 
-    expect(userGroup).toEqual(account.groups);
+    expect(userGroup).toEqual(getAccountInfo().groups);
   });
 
   it('should get BearerToken from localStorage', () => {
@@ -99,18 +99,19 @@ describe('LoginService', () => {
 
   it('should return true when user is Login', () => {
     spyOn(cookieService, 'check').and.returnValue(true);
+    spyOn(service, 'isValidToken').and.returnValue(of(true));
 
-    const isLogin = service.isLogin();
-
-    expect(isLogin).toBeTruthy();
+    service.isLogin().subscribe(isLogin => {
+      expect(isLogin).toEqual(true);
+    });
   });
 
   it('should return false when user is not Login', () => {
-    spyOn(cookieService, 'check').and.returnValue(false);
+    spyOn(service, 'isValidToken').and.returnValue(of(false));
 
-    const isLogin = service.isLogin();
-
-    expect(isLogin).toBeFalsy();
+    service.isLogin().subscribe(isLogin => {
+      expect(isLogin).toEqual(false);
+    });
   });
 
   it('should login with social angularx-social-login', () => {