logout out automatically when session expires

ui/hv2-ui/src/app/navigation/navigation.component.html

@@ -2,20 +2,24 @@
   <mat-sidenav #drawer class="sidenav" fixedInViewport
       [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
       [mode]="(isHandset$ | async) ? 'over' : 'side'"
-      [opened]="(isHandset$ | async) === false"
+      [opened]="(isHandset$ | async) === false">
-      *ngIf="authenticated">
     <mat-toolbar>Menu</mat-toolbar>
-    <mat-nav-list>
+    <mat-nav-list *ngIf="!authenticated">
+      <a mat-list-item href="/login">Anmelden</a>
+    </mat-nav-list>
+    <mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/tenants">Meine Mieter/innen</a>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/flats">Meine Wohnungen</a>
       <a mat-list-item href="/parkings">Meine Garagen</a>
       <a mat-list-item href="/commercialunits">Meine Büros</a>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/overheadadvances">Betriebskostensätze</a>
       <a mat-list-item href="/fees">Mietsätze</a>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/premises">Meine Häuser</a>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
+      <a mat-list-item href="/logout">Abmelden</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
@@ -32,13 +36,11 @@
       <span class="spacer"></span>
       <span class="gittagversion">GITTAGVERSION</span>
       <span class="gittagversion" *ngIf="authenticated">Läuft aus in {{expiryTime | async }} Sekunden</span>
-      <a *ngIf="!authenticated" mat-button routerLink="/login">Login</a>
-      <a *ngIf="authenticated" mat-button routerLink="/logout">Logout</a>
     </mat-toolbar>
     <!-- Add Content Here -->
 
     <router-outlet></router-outlet>
-    <app-messages></app-messages>
+    <app-messages *ngIf="authenticated"></app-messages>
-
   </mat-sidenav-content>
+
 </mat-sidenav-container>

ui/hv2-ui/src/app/token.service.ts

@@ -6,6 +6,7 @@ import jwt_decode  from 'jwt-decode'
 import { Observable, interval, Subject, Subscription } from 'rxjs'
 import { map, takeWhile } from 'rxjs/operators'
 import { authserviceBaseUrl, applicationId } from './config'
+import { Router } from '@angular/router';
 
 
 interface TokenTuple {
@@ -24,8 +25,11 @@ export class TokenService {
   private _expiryTime =  new Subject<number>()
   private subscription: Subscription
 
-  constructor(private http: HttpClient, private messageService: MessageService) {
+  constructor(
-  }
+    private http: HttpClient, 
+    private router: Router,
+    private messageService: MessageService
+  ) { }
 
   checkAuthenticated(): boolean {
     let result: boolean = false
@@ -60,7 +64,15 @@ export class TokenService {
     if (this.subscription && !this.subscription.closed) {
       this.subscription.unsubscribe()
     }
-    this.subscription = interval(1000).pipe(map(v => start - v)).pipe(takeWhile(v => v != 0)).subscribe(v => this._expiryTime.next(v))
+    this.subscription = interval(1000)
+      .pipe(map(v => start - v))
+      .pipe(takeWhile(v => v >= 0))
+      .subscribe((v) => {
+        this._expiryTime.next(v)
+        if (v == 0) {
+          this.router.navigate(['/logout'])
+        }
+      })
   }
 
   async login(login: string, password: string) : Promise<void> {

ui/hv2-ui/src/styles.css

@@ -1,6 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+html, body { 
+    height: 100%; 
+    box-sizing: border-box;
+    margin: 0;
+}
+
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 table {