logout out automatically when session expires

.gitlab-ci.yml

@@ -98,6 +98,7 @@ dockerize-ui:
                 - docker rm $CONTAINER_NAME || echo "container not existing, never mind"
                 - docker run -d --network docker-server 
                                 --ip $CONTAINER_IP
+                                $VOLUMEOPT
                                 --name $CONTAINER_NAME
                                 --restart always 
                                 $IMAGE_NAME:$CI_COMMIT_TAG
@@ -109,6 +110,7 @@ deploy-api:
                 IMAGE_NAME: ${CI_REGISTRY}/${CI_PROJECT_PATH}/api
                 CONTAINER_NAME: hv2-api
                 CONTAINER_IP: 172.16.10.38
+                VOLUMEOPT: -v hv2-api-conf:/opt/app/config
 
 deploy-ui:
         extends: 

api/server.py

@@ -3,7 +3,7 @@ from flask_cors import CORS
 
 # instantiate the webservice
 app = connexion.App(__name__)
-app.add_api('openapi.yaml')
+app.add_api('openapi.yaml', options = {"swagger_ui": False})
 
 # CORSify it - otherwise Angular won't accept it
 CORS(app.app, 

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

@@ -4,17 +4,22 @@
       [mode]="(isHandset$ | async) ? 'over' : 'side'"
       [opened]="(isHandset$ | async) === false">
     <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>
@@ -31,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 {