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

frontend/src/app/components/master-page/master-page.component.html

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

frontend/src/app/components/master-page/master-page.component.ts

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

frontend/src/app/components/menu/menu.component.html

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

frontend/src/app/components/menu/menu.component.ts

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

frontend/src/app/shared/shared.module.ts

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