fix(auth): fix and improve login/logout route

projects/auth/src/lib/auth-form/auth-form.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="visible">
   <div *ngIf="!auth.logged && backgroundDisable" class="backgroundDisable"></div>
 
-  <div *ngIf="!auth.logged" class="login center-block">
+  <div *ngIf="!auth.logged && !logoutDiv" class="login center-block">
     <h1>{{'igo.auth.connection' | translate}}</h1>
 
     <igo-auth-google
@@ -19,8 +19,14 @@ <h1>{{'igo.auth.connection' | translate}}</h1>
     </igo-auth-intern>
   </div>
 
-  <div *ngIf="auth.logged && alreadyConnectedDiv" class="login center-block">
+  <div *ngIf="auth.logged && alreadyConnectedDiv && !logoutDiv" class="login center-block">
     <p>{{'igo.auth.welcome' | translate: user}}</p>
-    <button type="button" (click)="logout()">{{'igo.auth.signOut' | translate}}</button>
+    <button mat-raised-button type="button" (click)="logout()">{{'igo.auth.signOut' | translate}}</button>
   </div>
+
+  <div *ngIf="logoutDiv" class="login center-block">
+    <p>{{'igo.auth.deconnection' | translate}}</p>
+    <button *ngIf="options.homeRoute" mat-raised-button type="button" (click)="home()">{{'igo.auth.home' | translate}}</button>
+  </div>
+
 </div>

projects/auth/src/lib/auth-form/auth-form.component.ts

@@ -5,7 +5,8 @@ import {
   Input,
   Optional
 } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, NavigationStart } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 import { ConfigService } from '@igo2/core';
 import { AuthOptions } from '../shared/auth.interface';
@@ -40,6 +41,7 @@ export class AuthFormComponent implements OnInit {
   public user;
 
   public visible = true;
+  public logoutDiv = false;
 
   constructor(
     public auth: AuthService,
@@ -48,47 +50,74 @@ export class AuthFormComponent implements OnInit {
   ) {
     this.options = this.config.getConfig('auth') || {};
     this.visible = Object.getOwnPropertyNames(this.options).length !== 0;
-
-    if (this.auth.decodeToken()) {
-      this.user = {
-        name: this.auth.decodeToken().user.sourceId
-      };
-    }
   }
 
   public ngOnInit() {
     this.analyzeRoute();
+    this.getName();
   }
 
   public login() {
     this.auth.goToRedirectUrl();
+    this.getName();
   }
 
   public logout() {
     this.auth.logout().subscribe(() => {
-      if (this.router && this.options.loginRoute) {
-        this.router.navigate([this.options.loginRoute]);
+      this.user = undefined;
+      if (this.router) {
+        if (this.options.logoutRoute) {
+          this.router.navigate([this.options.logoutRoute]);
+        } else if (this.options.homeRoute) {
+          this.router.navigate([this.options.homeRoute]);
+        }
       }
     });
   }
 
+  public home() {
+    if (this.router && this.options.homeRoute) {
+      this.router.navigate([this.options.homeRoute]);
+    }
+  }
+
+  private getName() {
+    if (this.auth.decodeToken()) {
+      const tokenDecoded = this.auth.decodeToken();
+      this.user = {
+        name: tokenDecoded.user.firstName || tokenDecoded.user.sourceId
+      };
+    }
+  }
+
   private analyzeRoute() {
     if (!this.router) {
       return;
     }
 
-    const logoutRoute = this.options.logoutRoute;
-    const loginRoute = this.options.loginRoute;
-    const currentRoute = this.router.url;
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationStart))
+      .subscribe((changeEvent: any) => {
+        if (changeEvent.url) {
+          const currentRoute = changeEvent.url;
+          const logoutRoute = this.options.logoutRoute;
+          const loginRoute = this.options.loginRoute;
 
-    const isLogoutRoute: boolean = currentRoute === logoutRoute;
-    const isLoginRoute: boolean = currentRoute === loginRoute;
+          const isLogoutRoute: boolean = currentRoute === logoutRoute;
+          const isLoginRoute: boolean = currentRoute === loginRoute;
 
-    if (isLogoutRoute) {
-      this.logout();
-    } else if (isLoginRoute) {
-      this.backgroundDisable = false;
-      this.alreadyConnectedDiv = true;
-    }
+          this.backgroundDisable = true;
+          this.logoutDiv = false;
+
+          if (isLogoutRoute) {
+            this.auth.logout();
+            this.backgroundDisable = false;
+            this.logoutDiv = true;
+          } else if (isLoginRoute) {
+            this.backgroundDisable = false;
+            this.alreadyConnectedDiv = true;
+          }
+        }
+      });
   }
 }

projects/auth/src/lib/shared/auth.interface.ts

@@ -19,6 +19,7 @@ export interface AuthOptions {
   allowAnonymous?: boolean;
   loginRoute?: string;
   logoutRoute?: string;
+  homeRoute?: string;
   intern?: AuthInternOptions;
   facebook?: AuthFacebookOptions;
   google?: AuthGoogleOptions;

projects/auth/src/lib/shared/profils.guard.ts

@@ -5,6 +5,7 @@ import {
   ActivatedRouteSnapshot,
   RouterStateSnapshot
 } from '@angular/router';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ConfigService } from '@igo2/core';

projects/auth/src/locale/en.auth.json

@@ -7,7 +7,9 @@
       "password": "Password",
       "signOut": "Sign out",
       "user": "User",
-      "welcome": "Welcome {{name}}!"
+      "welcome": "Welcome {{name}}!",
+      "deconnection": "You are logged out.",
+      "home": "Return to the home page"
     }
   }
 }

projects/auth/src/locale/fr.auth.json

@@ -7,7 +7,9 @@
       "password": "Mot de passe",
       "signOut": "Se déconnecter",
       "user": "Utilisateur",
-      "welcome": "Bienvenue {{name}}!"
+      "welcome": "Bienvenue {{name}}!",
+      "deconnection": "Vous êtes déconnecté",
+      "home": "Retourner à la page d'accueil"
     }
   }
 }

projects/auth/src/public_api.ts

@@ -4,7 +4,10 @@
 
 export { AuthFormComponent } from './lib/auth-form';
 export * from './lib/shared/auth.service';
+export * from './lib/shared/logged.guard';
 export * from './lib/shared/auth.guard';
+export * from './lib/shared/admin.guard';
+export * from './lib/shared/profils.guard';
 export * from './lib/shared/auth.interceptor';
 export * from './lib/shared/auth.interface';
 export * from './lib/shared/protected.directive';