[header] show anon image if user did not set a picture (to improve later)

This commit is contained in:
nymkappa
2023-08-21 17:04:17 +02:00
parent 285485c69e
commit 0ee28a335f
5 changed files with 37 additions and 6 deletions

View File

@@ -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">

View File

@@ -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;

View File

@@ -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 {