From 0ee28a335f2be65d1e4977fdd8ab2c107938570e Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Mon, 21 Aug 2023 17:04:17 +0200
Subject: [PATCH] [header] show anon image if user did not set a picture (to
 improve later)

---
 .../master-page/master-page.component.html        | 15 +++++++++++----
 .../master-page/master-page.component.scss        |  5 +++++
 .../master-page/master-page.component.ts          |  7 +++++--
 .../svg-images/svg-images.component.html          |  5 +++++
 frontend/src/app/services/api.service.ts          | 11 +++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 4b48c2075..2fb71b587 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -4,10 +4,17 @@
 <header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <!-- Hamburger -->
-  <div *ngIf="servicesEnabled" class="profile_image_container" (click)="hamburgerClick()">
-    <img *ngIf="userAuth" [src]="'/api/v1/services/account/image/' + userAuth.user.username" class="profile_image">
-    <app-svg-images *ngIf="!userAuth" name="hamburger" height=40></app-svg-images>
-  </div>
+  <ng-container *ngIf="servicesEnabled">
+    <div *ngIf="user" class="profile_image_container" [class]="{'anon': !user.imageMd5}" (click)="hamburgerClick()">
+      <img *ngIf="user.imageMd5" [src]="'/api/v1/services/account/image/' + user.username + '?md5=' + user.imageMd5" class="profile_image">
+      <app-svg-images *ngIf="!user.imageMd5" name="anon"></app-svg-images>
+    </div>
+    <div *ngIf="user === null" class="profile_image_container" (click)="hamburgerClick()">
+      <app-svg-images name="hamburger" height="40"></app-svg-images>
+    </div>
+    <!-- Empty placeholder -->
+    <div *ngIf="user === undefined" class="profile_image_container"></div>
+  </ng-container>
 
   <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index a34dea0bd..23dfd8b39 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -216,6 +216,11 @@ nav {
   text-align: center;
   align-self: center;
   cursor: pointer;
+  &.anon {
+    border: 1px solid lightgrey;
+    color: grey;
+    border-radius: 10px;
+  }
 }
 .profile_image {
   height: 35px;
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index 7aa47d5af..16e210ca8 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -6,6 +6,7 @@ import { EnterpriseService } from '../../services/enterprise.service';
 import { NavigationService } from '../../services/navigation.service';
 import { MenuComponent } from '../menu/menu.component';
 import { StorageService } from '../../services/storage.service';
+import { ApiService } from '../../services/api.service';
 
 @Component({
   selector: 'app-master-page',
@@ -28,6 +29,7 @@ export class MasterPageComponent implements OnInit {
   networkPaths$: Observable<Record<string, string>>;
   footerVisible = true;
   userAuth: any | undefined;
+  user: any = undefined;
   servicesEnabled = false;
 
   @ViewChild(MenuComponent)
@@ -38,7 +40,8 @@ export class MasterPageComponent implements OnInit {
     private languageService: LanguageService,
     private enterpriseService: EnterpriseService,
     private navigationService: NavigationService,
-    private storageService: StorageService
+    private storageService: StorageService,
+    private apiService: ApiService,
   ) { }
 
   ngOnInit(): void {
@@ -81,7 +84,7 @@ export class MasterPageComponent implements OnInit {
   }
 
   refreshAuth(): void {
-    this.userAuth = this.storageService.getAuth();
+    this.apiService.getUserInfo$().subscribe(user => this.user = user);
   }
 
   hamburgerClick(): void {
diff --git a/frontend/src/app/components/svg-images/svg-images.component.html b/frontend/src/app/components/svg-images/svg-images.component.html
index 452cd14df..5e8d7d29f 100644
--- a/frontend/src/app/components/svg-images/svg-images.component.html
+++ b/frontend/src/app/components/svg-images/svg-images.component.html
@@ -79,6 +79,11 @@
       <path stroke-width="0.5" stroke-linecap="round" d="M0.5 2.5 H7 M0.5 5 H5.5 M0.5 7.5 H7"></path>
     </svg>
   </ng-container>
+  <ng-container *ngSwitchCase="'anon'">
+    <svg [attr.width]="width" [attr.height]="height" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 9.5v-2a3 3 0 116 0v2c0 1.11-.603 2.08-1.5 2.599v1.224a1 1 0 00.629.928l2.05.82A3.693 3.693 0 0118.5 18.5h-13c0-1.51.92-2.868 2.321-3.428l2.05-.82a1 1 0 00.629-.929v-1.224A2.999 2.999 0 019 9.5z"></path>
+    </svg>
+  </ng-container>
 </ng-container>
 
 <ng-template #bitcoinLogo let-color let-width="width" let-height="height" let-viewBox="viewBox">
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index b5f1d5bc9..cd1109da1 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -362,6 +362,17 @@ export class ApiService {
     });
   }
 
+  getUserInfo$(): Observable<any> {
+    const auth = this.storageService.getAuth();
+    if (!auth) {
+      return of(null);
+    }
+
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/account`, {
+      headers: { 'Authorization': auth.token }
+    });
+  }
+
   logout$(): Observable<any> {
     const auth = this.storageService.getAuth();
     if (!auth) {