refactor: TTA-145 Refactor login ui v2

src/app/app.module.ts

@@ -49,7 +49,7 @@ import { ProjectEffects } from './modules/customer-management/components/project
 import { TechnologyEffects } from './modules/shared/store/technology.effects';
 import { ProjectTypeEffects } from './modules/customer-management/components/projects-type/store/project-type.effects';
 import { reducers } from './reducers';
-import { CLIENT_URL, environment } from '../environments/environment';
+import { environment } from '../environments/environment';
 import { EnvironmentType } from '../environments/enum';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 // tslint:disable-next-line: max-line-length
@@ -91,8 +91,6 @@ import { CalendarComponent } from './modules/time-entries/components/calendar/ca
 import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { DarkModeComponent } from './modules/shared/components/dark-mode/dark-mode.component';
-import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
-import { GoogleLoginProvider } from 'angularx-social-login';
 import { SearchUserComponent } from './modules/shared/components/search-user/search-user.component';
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
@@ -201,7 +199,6 @@ const maskConfig: Partial<IConfig> = {
       useFactory: adapterFactory,
     }),
     NgSelectModule,
-    SocialLoginModule
   ],
   providers: [
     {
@@ -211,18 +208,7 @@ const maskConfig: Partial<IConfig> = {
     },
     DatePipe,
     CookieService,
-    {
-      provide: 'SocialAuthServiceConfig',
-      useValue: {
-        autoLogin: false,
-        providers: [
-          {
-            id: GoogleLoginProvider.PROVIDER_ID,
-            provider: new GoogleLoginProvider(CLIENT_URL)
-          }
-        ]
-      } as SocialAuthServiceConfig,
-    }
+    {provide: Window, useValue: window}
   ],
   bootstrap: [AppComponent],
 })

src/app/modules/login/login.component.html

@@ -7,8 +7,19 @@
     <h3>Please log in</h3>
   </div>
 
-  <div class="login-controls">
-    <button (click)="isProduction ? login() : loginWithGoogle() " class="btn btn-primary">login</button>
+  <div class="login-controls" *ngIf="isProduction">
+    <button (click)="login() " class="btn btn-primary">login</button>
+  </div>
+  <div *ngIf="!isProduction">
+    <div
+      id="g_id_onload"
+      [attr.data-client_id]="cliendId"
+      data-callback="handleCredentialResponse">
+    </div>
+    <div
+      class="g_id_signin"
+      data-theme="filled_blue"
+      data-type="standard">
+    </div>
   </div>
-
 </div>

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

@@ -100,21 +100,21 @@ describe('LoginComponent', () => {
     expect(featureToggleCookiesService.setCookies).toHaveBeenCalled();
   }));
 
-  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(of(false));
-    spyOn(loginService, 'setLocalStorage').and.returnValue();
-    spyOn(loginService, 'getUser').and.returnValue(of({token: ''}));
-    spyOn(loginService, 'setCookies').and.returnValue();
-    spyOn(loginService, 'signIn').and.returnValue();
-    spyOn(featureToggleCookiesService, 'setCookies').and.returnValue(featureToggleCookiesService.setCookies());
-
-    component.ngOnInit();
-    component.loginWithGoogle();
-
-    expect(loginService.signIn).toHaveBeenCalled();
-    expect(loginService.setCookies).toHaveBeenCalled();
-    expect(featureToggleCookiesService.setCookies).toHaveBeenCalled();
-  }));
+  // 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(of(false));
+  //   spyOn(loginService, 'setLocalStorage').and.returnValue();
+  //   spyOn(loginService, 'getUser').and.returnValue(of({token: ''}));
+  //   spyOn(loginService, 'setCookies').and.returnValue();
+  //   spyOn(loginService, 'signIn').and.returnValue();
+  //   spyOn(featureToggleCookiesService, 'setCookies').and.returnValue(featureToggleCookiesService.setCookies());
+
+  //   component.ngOnInit();
+  //   component.loginWithGoogle();
+
+  //   expect(loginService.signIn).toHaveBeenCalled();
+  //   expect(loginService.setCookies).toHaveBeenCalled();
+  //   expect(featureToggleCookiesService.setCookies).toHaveBeenCalled();
+  // }));
 
   it('should not sign-up or login with google if is already logged-in into the app on Production', inject([Router],  (router: Router) => {
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(true);
@@ -124,11 +124,11 @@ describe('LoginComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['']);
   }));
 
-  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(of(true));
-    spyOn(router, 'navigate').and.stub();
-    component.loginWithGoogle();
-    expect(loginService.isLogin).toHaveBeenCalled();
-    expect(router.navigate).toHaveBeenCalledWith(['']);
-  }));
+  // 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(of(true));
+  //   spyOn(router, 'navigate').and.stub();
+  //   component.loginWithGoogle();
+  //   expect(loginService.isLogin).toHaveBeenCalled();
+  //   expect(router.navigate).toHaveBeenCalledWith(['']);
+  // }));
 });

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

@@ -1,46 +1,85 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, NgZone } from '@angular/core';
 import { AzureAdB2CService } from './services/azure.ad.b2c.service';
 import { Router } from '@angular/router';
 import { FeatureToggleCookiesService } from '../shared/feature-toggles/feature-toggle-cookies/feature-toggle-cookies.service';
 
-import { SocialAuthService, SocialUser } from 'angularx-social-login';
-import { environment } from 'src/environments/environment';
+import { environment, CLIENT_URL } from 'src/environments/environment';
 import { EnvironmentType } from 'src/environments/enum';
 import { LoginService } from './services/login.service';
 import { UserService } from '../user/services/user.service';
 
+declare global {
+  interface Window {
+    handleCredentialResponse: (response: any) => void;
+  }
+}
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
-  socialUser: SocialUser;
   isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
+  cliendId = CLIENT_URL;
+  auth2: any;
+
 
   constructor(
     private azureAdB2CService: AzureAdB2CService,
     private router: Router,
     private featureToggleCookiesService: FeatureToggleCookiesService,
-    private socialAuthService: SocialAuthService,
     private loginService?: LoginService,
-    private userService?: UserService
+    private userService?: UserService,
+    private ngZone?: NgZone
   ) {}
 
+
+  googleAuthSDK() {
+
+    (<any>window)['googleSDKLoaded'] = () => {
+      (<any>window)['gapi'].load('auth2', () => {
+        this.auth2 = (<any>window)['gapi'].auth2.init({
+          client_id: this.cliendId,
+          plugin_name:'login',
+          cookiepolicy: 'single_host_origin',
+          scope: 'profile email'
+        });
+      });
+    }
+    (function (d, s, id) {
+      var js, gjs = d.getElementsByTagName(s)[1];
+      if (d.getElementById(id)) { return; }
+      js = d.createElement(s); js.id = id;
+      js.src = "https://accounts.google.com/gsi/client";
+      gjs.parentNode.insertBefore(js, gjs);
+    }(document, 'script', 'async defer'));
+  }
+
   ngOnInit() {
-    this.socialAuthService.authState.subscribe((user) => {
-      if (user != null) {
-        this.featureToggleCookiesService.setCookies();
-        this.loginService.setLocalStorage('idToken', user.idToken);
-        this.loginService.getUser(user.idToken).subscribe((response) => {
+
+    this.googleAuthSDK();
+    if(this.isProduction && this.azureAdB2CService.isLogin()){
+        this.router.navigate(['']);
+    } else {
+      this.loginService.isLogin().subscribe(isLogin => {
+        if (isLogin) {
+          this.router.navigate(['']);
+        }
+      });
+    }
+    window.handleCredentialResponse = (response) => {
+      const {credential = ''} = response;
+      this.featureToggleCookiesService.setCookies();
+      this.loginService.setLocalStorage('idToken', credential);
+      this.loginService.getUser(credential).subscribe((response) => {
           this.loginService.setCookies();
           const tokenObject = JSON.stringify(response);
           const tokenJson = JSON.parse(tokenObject);
           this.loginService.setLocalStorage('user', tokenJson.token);
-          this.router.navigate(['']);
-        });
-      }
-    });
+          this.ngZone.run(() => this.router.navigate(['']));
+      });
+    }
   }
 
   login(): void {
@@ -62,13 +101,4 @@ export class LoginComponent implements OnInit {
     }
   }
 
-  loginWithGoogle() {
-    this.loginService.isLogin().subscribe(isLogin => {
-      if (isLogin) {
-        this.router.navigate(['']);
-      } else {
-        this.loginService.signIn();
-      }
-    });
-  }
 }

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

@@ -114,17 +114,17 @@ describe('LoginService', () => {
     });
   });
 
-  it('should login with social angularx-social-login', () => {
-    service.signIn();
-    expect(socialAuthService.signIn).toHaveBeenCalled();
-  });
+  // it('should login with social angularx-social-login', () => {
+  //   service.signIn();
+  //   expect(socialAuthService.signIn).toHaveBeenCalled();
+  // });
 
   it('should logout with social angularx-social-login', () => {
     spyOn(cookieService, 'deleteAll').and.returnValue();
 
     service.logout();
 
-    expect(socialAuthService.signOut).toHaveBeenCalled();
+    // expect(socialAuthService.signOut).toHaveBeenCalled();
     expect(localStorage.clear).toHaveBeenCalled();
     expect(cookieService.deleteAll).toHaveBeenCalled();
   });

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

@@ -1,6 +1,5 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { GoogleLoginProvider, SocialAuthService } from 'angularx-social-login';
 import { CookieService } from 'ngx-cookie-service';
 import { EnvironmentType, UserEnum } from 'src/environments/enum';
 import { environment } from 'src/environments/environment';
@@ -20,18 +19,12 @@ export class LoginService {
   constructor(
     private http?: HttpClient,
     private cookieService?: CookieService,
-    private socialAuthService?: SocialAuthService
   ) {
     this.baseUrl = `${environment.timeTrackerApiUrl}/users`;
     this.helper = new JwtHelperService();
   }
 
-  signIn() {
-    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
-  }
-
   logout() {
-    this.socialAuthService.signOut();
     this.cookieService.deleteAll();
     localStorage.clear();
   }

src/index.html

@@ -17,5 +17,6 @@
       crossorigin="anonymous"
     ></script>
     <script src="https://kit.fontawesome.com/76d0c245a1.js" crossorigin="anonymous"></script>
+    <script src="https://accounts.google.com/gsi/client" crossorigin="anonymous" async defer></script>
   </body>
 </html>