feat: TT-577 get profile pic from Google account

Author: kjduy

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

@@ -2,32 +2,46 @@ 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 } from 'angularx-social-login';
+import { 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) {}
+  constructor(
+    private azureAdB2CService: AzureAdB2CService,
+    private loginService: LoginService,
+    private authService: SocialAuthService,
+  ) { }
 
   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.authService.authState.subscribe((user) => {
+      this.user = user;
+      this.userPhoto = user.photoUrl;
+      localStorage.setItem('googleUserPhoto', this.userPhoto);
+    });
+    this.userPhoto = localStorage.getItem('googleUserPhoto');
   }
 }