Clear old monitoring snapshots, logout endpoint

web/angular/src/app/account-details/account-details.component.css

@@ -0,0 +1,3 @@
+mat-divider {
+    margin: 1em 0 !important;
+}

web/angular/src/app/account-details/account-details.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-    <mat-card class="mat-elevation-z8" *ngIf="account">
+    <mat-card class="mat-elevation-z8" *ngIf="authService.account">
 
         <mat-card-header>
             <mat-card-title>{{"account.title" | translate}}</mat-card-title>
@@ -11,19 +11,22 @@
             <mat-list>
                 <mat-list-item>
                     {{"account.username" | translate}}:&nbsp;
-                    <pre>{{account.username}}</pre>
+                    <pre>{{authService.account.username}}</pre>
                 </mat-list-item>
             </mat-list>
 
             <mat-expansion-panel>
                 <mat-expansion-panel-header>{{"account.metadata" | translate}}</mat-expansion-panel-header>
-                <pre> {{account | json}}</pre>
+                <pre> {{authService.account | json}}</pre>
             </mat-expansion-panel>
+
+            <mat-divider class="divider" [inset]="true"></mat-divider>
+
         </mat-card-content>
 
         <mat-card-actions>
-
-
+            <button mat-raised-button color="primary" (click)="logout()">{{"account.logout" | translate}}</button>
         </mat-card-actions>
     </mat-card>
 </div>
+

web/angular/src/app/account-details/account-details.component.ts

@@ -8,13 +8,13 @@ import {AuthService} from "../auth.service";
 })
 export class AccountDetailsComponent implements OnInit {
 
-    account: Manager;
-
-    constructor(private authService: AuthService) {
+    constructor(public authService: AuthService) {
     }
 
     ngOnInit() {
-        this.account = this.authService.account;
     }
 
+    public logout() {
+        this.authService.logout();
+    }
 }

web/angular/src/app/api.service.ts

@@ -45,6 +45,10 @@ export class ApiService {
         return this.http.post(this.url + "/login", credentials, this.options)
     }
 
+    logout() {
+        return this.http.get(this.url + "/logout", this.options)
+    }
+
     getAccountDetails() {
         return this.http.get(this.url + "/account", this.options)
     }

web/angular/src/app/app.component.html

@@ -29,8 +29,12 @@
         </mat-menu>
     </div>
     <span class="nav-spacer"></span>
-    <button mat-button [class.mat-accent]="router.url == '/login'" class="nav-link"
+    <button mat-button [class.mat-accent]="router.url == '/login'"
+            class="nav-link" *ngIf="!authService.account"
             [routerLink]="'login'">{{"nav.login" | translate}}</button>
+    <button mat-button [class.mat-accent]="router.url == '/account'"
+            class="nav-link" *ngIf="authService.account"
+            [routerLink]="'account'">{{"nav.account" | translate}}</button>
 
     <button mat-button [matMenuTriggerFor]="langMenu">
         {{"nav.lang_select" | translate}}

web/angular/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 import {TranslateService} from "@ngx-translate/core";
+import {AuthService} from "./auth.service";
 
 @Component({
     selector: 'app-root',
@@ -18,7 +19,9 @@ export class AppComponent {
         {lang: "en", display: "English"},
     ];
 
-    constructor(private translate: TranslateService, private router: Router) {
+    constructor(private translate: TranslateService,
+                private router: Router,
+                public authService: AuthService) {
 
         translate.addLangs([
             "en",

web/angular/src/app/auth.service.ts

@@ -14,6 +14,10 @@ export class AuthService {
     constructor(private apiService: ApiService,
                 private messengerService: MessengerService,
                 private router: Router) {
+        this.apiService.getAccountDetails()
+            .subscribe((data: any) => {
+                this.account = data.manager;
+            })
     }
 
     public login(credentials: Credentials) {
@@ -33,6 +37,20 @@ export class AuthService {
             )
     }
 
+    public logout() {
+        return this.apiService.logout()
+            .subscribe(
+                () => {
+                    this.account = null;
+                    this.router.navigateByUrl("");
+                },
+                error => {
+                    console.log(error);
+                    this.messengerService.show(error.error.message);
+                }
+            )
+    }
+
     public register(credentials: Credentials) {
         return this.apiService.register(credentials)
             .subscribe(() =>

web/angular/src/assets/i18n/en.json

@@ -6,7 +6,8 @@
         "project_list": "Projects",
         "new_project": "New Project",
         "login": "Login",
-        "worker_dashboard": "Workers"
+        "worker_dashboard": "Workers",
+        "account": "Account"
     },
     "logs": {
         "filter": "Filter",
@@ -79,7 +80,8 @@
         "metadata": "Account metadata",
         "title": "Account details",
         "subtitle": "toto: subtitle",
-        "username": "Username"
+        "username": "Username",
+        "logout": "Logout"
     },
     "workers": {
         "title": "Completed tasks per worker",

web/angular/src/assets/i18n/fr.json

@@ -6,7 +6,8 @@
         "project_list": "Projets",
         "new_project": "Nouveau projet",
         "login": "Ouvrir un session",
-        "worker_dashboard": "Workers"
+        "worker_dashboard": "Workers",
+        "account": "Compte"
     },
     "logs": {
         "filter": "Filtrer",
@@ -81,7 +82,8 @@
         "metadata": "Métadonnés du compte",
         "title": "Détails du compte",
         "subtitle": "toto: sous-titre",
-        "username": "Nom d'utilisateur"
+        "username": "Nom d'utilisateur",
+        "logout": "Fermer la session"
     },
     "workers": {
         "title": "Tâches complétés par worker",