feat: TT-577 get profile pic from Google account

Author: alejandra-ponce

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

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { SocialAuthService } from 'angularx-social-login';
+import {SocialAuthService, SocialUser} from 'angularx-social-login';
 import { CookieService } from 'ngx-cookie-service';
 import { of } from 'rxjs';
 
@@ -13,6 +13,9 @@ describe('LoginService', () => {
   let socialAuthService: SocialAuthService;
   let account;
   const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['signOut', 'signIn']);
+  socialAuthServiceStub.signIn.and.returnValue(new Promise<SocialUser>( resolve => {
+    return {photoUrl: ''};
+  }));
   const cookieStoreStub = {};
 
   beforeEach(() => {

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

@@ -20,7 +20,9 @@ export class LoginService {
   }
 
   signIn() {
-    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
+    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).then(user => {
+      localStorage.setItem('googleUserPhoto', user.photoUrl);
+    });
   }
   logout() {
     this.socialAuthService.signOut();

src/app/modules/shared/components/user/user.component.html

@@ -1,5 +1,5 @@
 <div class=" py-8 flex items-center pl-3">
-  <img src="{{ userPhoto }}" alt="user-icon" class="round"/>
+  <img [src]="userPhoto" alt="user-icon" class="round"/>
   <span class="pl-1">
     <h2 class="font-poppins text-base font-semibold pl-2 dark:text-whiteTW">{{ userName }}</h2>
     <p class="font-poppins mt-1 text-xs font-medium pl-2 text-grayTW dark:text-whiteTW">{{ userEmail }}</p>

src/app/modules/shared/components/user/user.component.ts

@@ -2,24 +2,21 @@ import { Component, OnInit } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
 import { LoginService } from '../../../login/services/login.service';
-import { SocialUser, SocialAuthService } from 'angularx-social-login';
 
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.scss'],
 })
 export class UserComponent implements OnInit {
-  user: SocialUser;
   userPhoto: string;
   userName: string;
   userEmail: string;
   isProduction = environment.production;
 
   constructor(
     private azureAdB2CService: AzureAdB2CService,
-    private loginService: LoginService,
-    private authService: SocialAuthService,
+    private loginService: LoginService
   ) { }
 
   ngOnInit(): void {
@@ -36,11 +33,6 @@ export class UserComponent implements OnInit {
         this.azureAdB2CService.setTenantId();
       }
     }
-    this.authService.authState.subscribe((user) => {
-      this.user = user;
-      this.userPhoto = user.photoUrl;
-      localStorage.setItem('googleUserPhoto', this.userPhoto);
-    });
     this.userPhoto = localStorage.getItem('googleUserPhoto');
   }
 }