feat: TT-577 get profile pic from Google account (#825)

* feat: TT-577 get profile pic from Google account

* feat: TT-577 get profile pic from Google account

* feat: TT-577 get profile pic from Google account

Co-authored-by: alejandra-ponce <[email protected]>

Author: kjduy

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,7 +1,7 @@
 <div class=" py-8 flex items-center pl-3">
-  <img src="assets/icons/user.svg" alt="user-icon" width="40" height="40"/>
+  <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>
+    <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>
   </span>
-</div>
+</div>

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

@@ -1,5 +1,11 @@
 @import '../../../../../styles/colors.scss';
 
+.round {
+  width:40px;
+  height:40px;
+  border-radius:150px;
+}
+
 .user-profile {
   color: black;
   cursor: pointer;

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

@@ -9,25 +9,30 @@ import { LoginService } from '../../../login/services/login.service';
   styleUrls: ['./user.component.scss'],
 })
 export class UserComponent implements OnInit {
+  userPhoto: string;
   userName: string;
   userEmail: string;
   isProduction = environment.production;
 
-  constructor(private azureAdB2CService: AzureAdB2CService, private loginService: LoginService) {}
+  constructor(
+    private azureAdB2CService: AzureAdB2CService,
+    private loginService: LoginService
+  ) { }
 
   ngOnInit(): void {
-    if (this.isProduction){
+    if (this.isProduction) {
       if (this.azureAdB2CService.isLogin()) {
         this.userName = this.azureAdB2CService.getName();
         this.userEmail = this.azureAdB2CService.getUserEmail();
         this.azureAdB2CService.setTenantId();
       }
-    }else{
+    } else {
       if (this.loginService.isLogin()) {
         this.userName = this.loginService.getName();
         this.userEmail = this.loginService.getUserEmail();
         this.azureAdB2CService.setTenantId();
       }
     }
+    this.userPhoto = localStorage.getItem('googleUserPhoto');
   }
 }