Merge pull request #676 from BIX-Digital/feature/GH-675-handle-logout-in-spa

Handle logout in SPA

Author: netzartist

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 
+- Handle logout in SPA ([#675](https://github.com/opendevstack/ods-provisioning-app/issues/675)) 
 - Handle form based auth in SPA ([#637](https://github.com/opendevstack/ods-provisioning-app/issues/637)) 
 - Add default permissions to project groups on project creation ([#636](https://github.com/opendevstack/ods-provisioning-app/pull/636))
 - Add support for odsbox for local development([#579](https://github.com/opendevstack/ods-provisioning-app/issues/579))

client/src/app/app.component.html

@@ -4,7 +4,7 @@
       <div class="logo">
         <h1>ODS Provisioning</h1>
       </div>
-      <div class="user-area" hidden>
+      <div class="user-area" *ngIf="showLogoutButton">
         <div class="user-area__logout">
           <a
             mat-mini-fab

client/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { catchError } from 'rxjs/operators';
 import { EMPTY } from 'rxjs';
 import { EditModeFlag } from './modules/edit-mode/domain/edit-mode';
 import { StorageService } from './modules/storage/services/storage.service';
-import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
 import { ProjectService } from './modules/project/services/project.service';
 import { ProjectData, ProjectStorage } from './domain/project';
 import { AuthenticationService } from './modules/authentication/services/authentication.service';
@@ -21,13 +21,13 @@ export class AppComponent implements OnInit {
   isError: boolean;
   isNewProjectFormActive = false;
   hideSidebar = false;
+  showLogoutButton = true;
 
   projects: ProjectData[] = [];
 
   constructor(
     public editMode: EditModeService,
     public router: Router,
-    private activatedRoute: ActivatedRoute,
     private matIconRegistry: MatIconRegistry,
     private domSanitizer: DomSanitizer,
     private renderer: Renderer2,
@@ -40,35 +40,20 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.activatedRoute.queryParams.subscribe(params => {
-      if (params['sso']) {
-        this.setSsoMode();
-      }
-    });
+    this.authenticationService.checkAndSetSsoMode();
 
     this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
         if (event.url === '/') {
           this.loadAllProjects();
+        } else if (event.url === '/login' || event.url === '/logout') {
+          this.showLogoutButton = false;
+          this.isLoading = false;
         }
-        this.isLoading = false;
-      }
-    });
-  }
-
-  private setSsoMode() {
-    this.authenticationService.sso = true;
-    this.router.navigate([], {
-      queryParams: {
-        sso: null
       }
     });
   }
 
-  private isSsoActive() {
-    return this.authenticationService.sso;
-  }
-
   getEditModeStatus() {
     this.editMode.getEditModeFlag.subscribe((editMode: EditModeFlag) => {
       if (editMode.enabled) {
@@ -87,6 +72,8 @@ export class AppComponent implements OnInit {
     const projectKey = this.getProjectKeyFormStorage();
     if (projectKey) {
       this.router.navigateByUrl(`/project/${projectKey}`);
+    } else {
+      this.router.navigateByUrl('/project');
     }
   }
 
@@ -100,6 +87,7 @@ export class AppComponent implements OnInit {
       .getAllProjects()
       .pipe(
         catchError(() => {
+          // show generic error page
           this.isLoading = false;
           this.isError = true;
           return EMPTY;

client/src/app/modules/authentication/services/authentication.service.ts

@@ -1,6 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { API_AUTH_URL, API_LOGOUT_URL } from '../../../tokens';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -10,18 +11,25 @@ export class AuthenticationService {
 
   constructor(
     private httpClient: HttpClient,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
     @Inject(API_AUTH_URL) private apiAuthUrl: string,
     @Inject(API_LOGOUT_URL) private apiLogoutUrl: string
   ) {}
 
-  set sso(enabled: boolean) {
-    this._sso = enabled;
-  }
-
   get sso(): boolean {
     return this._sso;
   }
 
+  checkAndSetSsoMode() {
+    this.activatedRoute.queryParams.subscribe(params => {
+      if (params['sso']) {
+        this._sso = true;
+        this.removeSsoUrlParam();
+      }
+    });
+  }
+
   login(username: string, password: string): any {
     const formData: FormData = new FormData();
     formData.append('username', username);
@@ -34,6 +42,14 @@ export class AuthenticationService {
   }
 
   logout(): any {
-    return this.httpClient.post<any>(this.apiLogoutUrl, '');
+    return this.httpClient.get<any>(this.apiLogoutUrl);
+  }
+
+  private removeSsoUrlParam() {
+    this.router.navigate([], {
+      queryParams: {
+        sso: null
+      }
+    });
   }
 }

client/src/app/modules/error-handler/http-request-interceptor.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
+import { EMPTY, Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { AuthenticationService } from '../authentication/services/authentication.service';
@@ -42,6 +42,7 @@ export class HttpRequestInterceptor implements HttpInterceptor {
       catchError((error: HttpErrorResponse) => {
         if (error.status === 401) {
           this.router.navigateByUrl(this.authenticationService.sso ? '/' : '/login');
+          return EMPTY;
         }
 
         // TODO Improvement idea:

client/src/app/modules/general-error-page/components/general-error-page.component.html

@@ -1,7 +1,7 @@
 <div class="empty-content">
   <div class="infobox">
     <div class="infobox__img">
-      <img src="assets/icons/project-not-found.svg" alt="General error" />
+      <img src="assets/icons/error.svg" alt="General error" />
     </div>
     <div class="infobox__headline">General error</div>
     <div class="infobox__subline">There was a problem fetching initial data. Please try again soon.</div>

client/src/app/modules/logout/components/logout.component.html

@@ -5,7 +5,7 @@
 <div class="empty-content" data-test-login *ngIf="!isLoading">
   <div class="infobox">
     <div class="infobox__img">
-      <img src="assets/icons/quickstarter-not-found.svg" alt="Logged out" />
+      <img src="assets/icons/quickstarters.svg" alt="Logged out" />
     </div>
     <div class="infobox__headline">Logout successfully</div>
     <div class="infobox__subline">You might login again</div>

client/src/app/modules/new-project/components/new-project.component.html

@@ -7,7 +7,7 @@
     <div class="empty-content">
       <div class="infobox">
         <div class="infobox__img">
-          <img src="assets/icons/project-empty.svg" alt="Project template data could not be retrieved" />
+          <img src="assets/icons/error.svg" alt="Project template data could not be retrieved" />
         </div>
         <div class="infobox__headline">Project template data could not be retrieved</div>
         <div class="infobox__subline">Please try again soon</div>

client/src/app/modules/project-page/components/project-page.component.html

@@ -7,21 +7,21 @@
     <div class="empty-content">
       <div class="infobox" *ngIf="errorType === 'NOT_FOUND'">
         <div class="infobox__img">
-          <img src="assets/icons/project-not-found.svg" alt="Project was not found" />
+          <img src="assets/icons/error.svg" alt="Project was not found" />
         </div>
         <div class="infobox__headline">Project was not found</div>
         <div class="infobox__subline">Please check URL or select another project.</div>
       </div>
       <div class="infobox" *ngIf="errorType === 'NO_PROJECT_KEY'">
         <div class="infobox__img">
-          <img src="assets/icons/project-empty.svg" alt="No project selected" />
+          <img src="assets/icons/error.svg" alt="No project selected" />
         </div>
         <div class="infobox__headline">No project selected</div>
         <div class="infobox__subline">Select or create a project to see more detail.</div>
       </div>
       <div class="infobox" *ngIf="errorType === 'TECHNICAL_ERROR'">
         <div class="infobox__img">
-          <img src="assets/icons/project-empty.svg" alt="Technical error" />
+          <img src="assets/icons/error.svg" alt="Technical error" />
         </div>
         <div class="infobox__headline">Technical error</div>
         <div class="infobox__subline">There was a technical error retrieving the project. Please try again soon.</div>

client/src/app/modules/project-page/components/quickstarter-list.component.html

@@ -75,7 +75,7 @@
     <ng-container *ngIf="hasPlatformRuntime; else noPlatformRuntime">
       <div class="infobox" data-test-qs-list-platform-runtime-yes>
         <div class="infobox__img">
-          <img src="assets/icons/quickstarter-not-found.svg" alt="No quickstarters applied yet" />
+          <img src="assets/icons/quickstarters.svg" alt="No quickstarters applied yet" />
         </div>
         <div class="infobox__headline">No quickstarters applied yet</div>
         <div class="infobox__subline">Add new components to your project</div>
@@ -93,7 +93,7 @@
     <ng-template #noPlatformRuntime>
       <div class="infobox" data-test-qs-list-platform-runtime-no>
         <div class="infobox__img">
-          <img src="assets/icons/quickstarter-not-found.svg" alt="No quickstarters possible" />
+          <img src="assets/icons/quickstarters.svg" alt="No quickstarters possible" />
         </div>
         <div class="infobox__headline">No quickstarters possible in this project</div>
         <div class="infobox__subline">Quickstarters can only be applied in OpenShift projects</div>