machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nymkappa 2023-08-21 17:04:17 +02:00
parent 285485c69e
commit 0ee28a335f
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/components/master-page/master-page.component.html
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">

5
frontend/src/app/components/master-page/master-page.component.scss
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;

7
frontend/src/app/components/master-page/master-page.component.ts
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 {

5
frontend/src/app/components/svg-images/svg-images.component.html
View File

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

11
frontend/src/app/services/api.service.ts
View File

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