mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

[menu] handle logout without reload, show signin in sidebar when not logged in

Browse source
This commit is contained in:
nymkappa 2023-08-18 18:33:09 +02:00
parent 0c1221dc07
commit c4f2f4ca66
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
5 changed files with 35 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/master-page/master-page.component.html
View file

@ -1,4 +1,4 @@
<app-menu *ngIf="servicesEnabled"></app-menu>
<app-menu *ngIf="servicesEnabled" (loggedOut)="onLoggedOut()"></app-menu>
<ng-container *ngIf="{ val: network$ | async } as network">
<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">

10
frontend/src/app/components/master-page/master-page.component.ts
View file

@ -59,7 +59,7 @@ export class MasterPageComponent implements OnInit {
});
this.servicesEnabled = this.officialMempoolSpace && this.stateService.env.ACCELERATOR === true && this.stateService.network === '';
this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null;
this.refreshAuth();
}
collapse(): void {
@ -74,6 +74,14 @@ export class MasterPageComponent implements OnInit {
this.stateService.resetScroll$.next(true);
}
onLoggedOut() {
this.refreshAuth();
}
refreshAuth(): void {
this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null;
}
hamburgerClick(): void {
if (this.menuComponent) {
this.menuComponent.hambugerClick();

33
frontend/src/app/components/menu/menu.component.html
View file

@ -1,18 +1,25 @@
<div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
<div class="sidenav" [class]="navOpen ? 'open': 'close'">
<nav>
<span *ngIf="userAuth"><strong>@ {{ userAuth.user.username }}</strong></span>
<a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0" routerLink="/login" role="tab">
<fa-icon [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
<span style="font-size: 20px;">Sign in</span>
</a>
<ng-container *ngIf="userMenuGroups$ | async as menuGroups">
<div *ngFor="let group of menuGroups" style="height: max-content;">
<h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
<span>{{ group.title }}</span>
</h6>
<ul class="nav flex-column" *ngFor="let item of group.items">
<li class="nav-item d-flex justify-content-start align-items-center" (click)="navOpen = false;">
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<button *ngIf="item.link === 'logout'" class="btn nav-link" role="tab" (click)="logout()">{{ item.title }}</button>
<a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</ng-container>
<div *ngFor="let group of menuGroups" style="height: max-content;">
<h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
<span>{{ group.title }}</span>
</h6>
<ul class="nav flex-column" *ngFor="let item of group.items">
<li class="nav-item d-flex justify-content-start align-items-center" (click)="navOpen = false;">
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<button *ngIf="item.link === 'logout'" class="btn nav-link" role="tab" (click)="logout()">{{ item.title }}</button>
<a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</nav>
</div>

4
frontend/src/app/components/menu/menu.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { MenuGroup } from '../../interfaces/services.interface';
@ -13,6 +13,7 @@ export class MenuComponent implements OnInit {
navOpen: boolean = false;
userMenuGroups$: Observable<MenuGroup[]> | undefined;
userAuth: any | undefined;
@Output() loggedOut = new EventEmitter<boolean>();
constructor(
private apiService: ApiService
@ -25,6 +26,7 @@ export class MenuComponent implements OnInit {
logout(): void {
this.apiService.logout$().subscribe();
this.loggedOut.emit(true);
}
hambugerClick() {

3
frontend/src/app/shared/shared.module.ts
View file

@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle } from '@fortawesome/free-solid-svg-icons';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MasterPageComponent } from '../components/master-page/master-page.component';
import { MenuComponent } from '../components/menu/menu.component';
@ -377,5 +377,6 @@ export class SharedModule {
library.addIcons(faNetworkWired);
library.addIcons(faUserCheck);
library.addIcons(faCircleCheck);
library.addIcons(faUserCircle);
}
}