Merge pull request #669 from BIX-Digital/feature/GH-637-handle-basic-auth-in-spa

add form based auth in spa

Author: netzartist

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 
+- 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))
 - Setup webhook in jira projects on project creation event ([#452](https://github.com/opendevstack/ods-provisioning-app/issues/452))
@@ -13,6 +14,7 @@
 
 ### Fixed
 
+- Handle basic auth in SPA ([#637](https://github.com/opendevstack/ods-provisioning-app/issues/637))
 - Fix SPA searchbar layout ([#664](https://github.com/opendevstack/ods-provisioning-app/issues/664))
 - Wrong exception logging of bitbucket project key pre flight check ([#655](https://github.com/opendevstack/ods-provisioning-app/issues/655))
 - Show an error message when the component id does not match the regex expression ([#624](https://github.com/opendevstack/ods-provisioning-app/issues/624))

client/.gitignore

@@ -47,3 +47,5 @@ Thumbs.db
 
 # app
 proxy.conf.json
+sslcert/
+/local.package.json

client/README.md

@@ -2,7 +2,9 @@
 
 ## Status
 
-This first version of the new frontend stack was introduced as an experimental feature within OpenDevStack 3.x ([original issue](https://github.com/opendevstack/ods-provisioning-app/issues/518)). It can be activated for users with a `frontend.spa.enabled` feature flag in Spring Boot.
+This first version of the new frontend stack was introduced as an experimental feature within OpenDevStack 3.x
+([original issue](https://github.com/opendevstack/ods-provisioning-app/issues/518)). It can be activated for users with a
+`frontend.spa.enabled` feature flag in Spring Boot.
 
 OpenDevStack NEXT will include this new frontend activated by default (without featue flag).
 
@@ -35,14 +37,27 @@ Doing this there's no need to run Spring Boot locally.
 
 ### 3. Test the setup
 
-Run `yarn start:dev` and when it succeeded open `http://localhost:4200` in your browser. You should see the Angular app starting. The app will automatically reload if you change any of the source files.
+Run `yarn start:dev` and when it succeeded open `http://localhost:4200` in your browser. You should see the Angular app starting. The app
+will automatically reload if you change any of the source files.
 
 ## Development
 
 ### Dev Server
 
 `yarn start:dev`: Starts a live reload dev server on `http://localhost:4200/`
 
+### Dev Server with SSL localhost
+
+Depending on the authentication strategy configured in Spring Boot it might be necessary to serve localhost over https so that the app
+behaves correctly. Although not ideal, we discovered this as the most effortless solution in the time of writing.
+
+1. Create a self-signed certificate and add it to your OS - we found
+   [this article](https://medium.com/@richardr39/using-angular-cli-to-serve-over-https-locally-70dab07417c8) quite helpful to set it up.
+2. We recommend creating `sslcert` folder - the `.gitignore` file already includes this naming.
+3. As mentioned in the article create a new script entry in `package.json`. We recommend naming it `start:dev:ssl`, like this:
+
+`"start:dev:ssl": "ng serve --proxy-config proxy.conf.json --ssl --ssl-key ./sslcert/localhost.key --ssl-cert ./sslcert/localhost.crt"`
+
 ### Build
 
 `yarn build`: The build artifacts will be stored in the `dist/` directory. `yarn build:prod` will be used for the pipeline.
@@ -58,11 +73,14 @@ Run `yarn start:dev` and when it succeeded open `http://localhost:4200` in your
 
 ### Prettier
 
-Prettier is used as a pre-commit hook to format js, json, md, ts files. Formatting of html files has been temporarily removed due to inflexibility in context of Angular component markup.
+Prettier is used as a pre-commit hook to format js, json, md, ts files. Formatting of html files has been temporarily removed due to
+inflexibility in context of Angular component markup.
 
 ## Contributions welcome!
 
-We're happy if you'd like to contribute to the further development of the new frontend client. Feel free to check the [existing issues tagged with "frontend-spa"](https://github.com/opendevstack/ods-provisioning-app/labels/frontend-spa) or add a new issue there.
+We're happy if you'd like to contribute to the further development of the new frontend client. Feel free to check the
+[existing issues tagged with "frontend-spa"](https://github.com/opendevstack/ods-provisioning-app/labels/frontend-spa) or add a new issue
+there.
 
 ## Usage of Angular CLI
 

client/proxy.conf.template.json

@@ -4,11 +4,8 @@
       "host": "<Your Host>",
       "protocol": "https:"
     },
-    "secure": false,
+    "secure": true,
     "changeOrigin": true,
-    "logLevel": "info",
-    "headers": {
-      "Authorization": "Basic <Your Authorization Key>"
-    }
+    "logLevel": "info"
   }
 }

client/src/app/app.component.html

@@ -4,7 +4,7 @@
       <div class="logo">
         <h1>ODS Provisioning</h1>
       </div>
-      <div class="user-area" [hidden]="router.url.indexOf('/logout') !== -1">
+      <div class="user-area" hidden>
         <div class="user-area__logout">
           <a
             mat-mini-fab
@@ -34,8 +34,7 @@ <h1>ODS Provisioning</h1>
 
     <ng-container *ngIf="!isError; else globalError">
       <div class="container">
-
-        <div class="sidebar">
+        <div class="sidebar" *ngIf="!hideSidebar">
           <app-sidebar
             [projects]="projects"
             [isNewProjectFormActive]="isNewProjectFormActive"

client/src/app/app.component.ts

@@ -2,13 +2,14 @@ import { Component, OnInit, Renderer2 } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { EditModeService } from './modules/edit-mode/services/edit-mode.service';
-import { catchError, filter } from 'rxjs/operators';
+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 { NavigationStart, Router } from '@angular/router';
+import { ActivatedRoute, 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';
 
 @Component({
   selector: 'app-root',
@@ -19,25 +20,53 @@ export class AppComponent implements OnInit {
   isLoading = true;
   isError: boolean;
   isNewProjectFormActive = false;
+  hideSidebar = false;
 
   projects: ProjectData[] = [];
 
   constructor(
     public editMode: EditModeService,
     public router: Router,
+    private activatedRoute: ActivatedRoute,
     private matIconRegistry: MatIconRegistry,
     private domSanitizer: DomSanitizer,
     private renderer: Renderer2,
     private projectService: ProjectService,
-    private storageService: StorageService
+    private storageService: StorageService,
+    private authenticationService: AuthenticationService
   ) {
     this.matIconRegistry.addSvgIconSet(this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/mdi-custom-icons.svg'));
     this.matIconRegistry.addSvgIconSet(this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/tech-stack.svg'));
   }
 
   ngOnInit() {
-    this.checkRedirectToProjectDetail();
-    this.loadAllProjects();
+    this.activatedRoute.queryParams.subscribe(params => {
+      if (params['sso']) {
+        this.setSsoMode();
+      }
+    });
+
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        if (event.url === '/') {
+          this.loadAllProjects();
+        }
+        this.isLoading = false;
+      }
+    });
+  }
+
+  private setSsoMode() {
+    this.authenticationService.sso = true;
+    this.router.navigate([], {
+      queryParams: {
+        sso: null
+      }
+    });
+  }
+
+  private isSsoActive() {
+    return this.authenticationService.sso;
   }
 
   getEditModeStatus() {
@@ -55,12 +84,10 @@ export class AppComponent implements OnInit {
   }
 
   private checkRedirectToProjectDetail() {
-    this.router.events.pipe(filter(event => event instanceof NavigationStart && event.url === '/')).subscribe(() => {
-      const projectKey = this.getProjectKeyFormStorage();
-      if (projectKey) {
-        this.router.navigateByUrl(`/project/${projectKey}`);
-      }
-    });
+    const projectKey = this.getProjectKeyFormStorage();
+    if (projectKey) {
+      this.router.navigateByUrl(`/project/${projectKey}`);
+    }
   }
 
   private getProjectKeyFormStorage(): string | undefined {
@@ -73,15 +100,17 @@ export class AppComponent implements OnInit {
       .getAllProjects()
       .pipe(
         catchError(() => {
-          this.isError = true;
           this.isLoading = false;
+          this.isError = true;
           return EMPTY;
         })
       )
       .subscribe((response: ProjectData[]) => {
         this.projects = response;
         this.isLoading = false;
         this.isError = false;
+        this.hideSidebar = false;
+        this.checkRedirectToProjectDetail();
       });
   }
 }

client/src/app/app.module.ts

@@ -9,10 +9,14 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { GeneralErrorPageModule } from './modules/general-error-page/general-error-page.module';
 import { LoadingIndicatorModule } from './modules/loading-indicator/loading-indicator.module';
+import { CustomErrorHandlerModule } from './modules/error-handler/custom-error-handler.module';
+import { AuthenticationModule } from './modules/authentication/authentication.module';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
+    CustomErrorHandlerModule,
+    AuthenticationModule,
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,

client/src/app/modules/app-routing/app-routing.module.ts

@@ -6,6 +6,7 @@ import { ProjectPageModule } from '../project-page/project-page.module';
 import { StorageModule } from '../storage/storage.module';
 import { NewProjectModule } from '../new-project/new-project.module';
 import { ProjectModule } from '../project/project.module';
+import { AuthenticationModule } from '../authentication/authentication.module';
 
 const routes: Routes = [
   {
@@ -24,6 +25,10 @@ const routes: Routes = [
     path: 'about',
     loadChildren: () => import('../about-page/about-page.module').then(m => m.AboutPageModule)
   },
+  {
+    path: 'login',
+    loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
+  },
   {
     path: 'logout',
     loadChildren: () => import('../logout/logout.module').then(m => m.LogoutModule)
@@ -62,9 +67,12 @@ const routes: Routes = [
       apiProjectTemplatesUrl: environment.apiProjectTemplatesUrl,
       apiGenerateProjectKeyUrl: environment.apiGenerateProjectKeyUrl
     }),
-    NewProjectModule
+    NewProjectModule,
+    AuthenticationModule.withOptions({
+      apiAuthUrl: environment.apiAuthUrl,
+      apiLogoutUrl: environment.apiLogoutUrl
+    })
   ],
-  exports: [RouterModule],
-  providers: []
+  exports: [RouterModule]
 })
 export class AppRoutingModule {}

client/src/app/modules/authentication/authentication.module.ts

@@ -0,0 +1,28 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuthenticationService } from './services/authentication.service';
+import { HttpClientModule } from '@angular/common/http';
+import { API_AUTH_URL, API_LOGOUT_URL } from '../../tokens';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, HttpClientModule],
+  providers: [AuthenticationService]
+})
+export class AuthenticationModule {
+  static withOptions(options: { apiAuthUrl: string; apiLogoutUrl: string }): ModuleWithProviders<AuthenticationModule> {
+    return {
+      ngModule: AuthenticationModule,
+      providers: [
+        {
+          provide: API_AUTH_URL,
+          useValue: options.apiAuthUrl
+        },
+        {
+          provide: API_LOGOUT_URL,
+          useValue: options.apiLogoutUrl
+        }
+      ]
+    };
+  }
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationService } from './authentication.service';
+
+describe('AuthenticationService', () => {
+  let service: AuthenticationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthenticationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});