From de659e32937fc6790851893d89380bb3b3734566 Mon Sep 17 00:00:00 2001
From: Marcel Haag <marcelhaag1999@gmail.com>
Date: Fri, 4 Nov 2022 12:49:38 +0100
Subject: [PATCH] feat: added pentest status selection

---
 .../pentest-content.component.html            | 25 ++++--
 .../pentest-content.component.scss            | 22 +++++
 .../pentest-content.component.ts              | 82 ++++++++++++++++++-
 .../src/app/pentest/pentest.module.ts         | 41 +++++-----
 .../src/assets/i18n/de-DE.json                |  9 ++
 .../src/assets/i18n/en-US.json                |  9 ++
 .../src/shared/services/pentest.service.ts    |  8 ++
 .../status-tag/status-tag.component.ts        |  2 +-
 8 files changed, 168 insertions(+), 30 deletions(-)

diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html
index 5a98ec8..511a1be 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html
@@ -2,22 +2,35 @@
   <div class="content">
     <nb-tabset>
       <nb-tab class="pentest-tabset" tabTitle="{{ 'global.action.info' | translate }}">
-        <app-pentest-info [pentestInfo$] = pentest$></app-pentest-info>
+        <app-pentest-info [pentestInfo$]=pentest$></app-pentest-info>
       </nb-tab>
-      <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.findings' | translate }}" badgeText="{{currentNumberOfFindings$.getValue()}}" badgeStatus="danger">
-        <app-pentest-findings [pentestInfo$] = pentest$></app-pentest-findings>
+      <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.findings' | translate }}"
+              badgeText="{{currentNumberOfFindings$.getValue()}}" badgeStatus="danger">
+        <app-pentest-findings [pentestInfo$]=pentest$></app-pentest-findings>
       </nb-tab>
-      <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.comments' | translate }}" badgeText="{{currentNumberOfComments$.getValue()}}" badgeStatus="info">
-        <app-pentest-comments [pentestInfo$] = pentest$></app-pentest-comments>
+      <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.comments' | translate }}"
+              badgeText="{{currentNumberOfComments$.getValue()}}" badgeStatus="info">
+        <app-pentest-comments [pentestInfo$]=pentest$></app-pentest-comments>
       </nb-tab>
     </nb-tabset>
   </div>
 
   <div fxLayoutAlign="end end" class="content-footer">
+    <!-- Pentest Status Selection -->
+    <div class="pentest-status-dialog">
+      <nb-select class="status"
+                 [(selected)]="currentStatus"
+                 shape="round" filled
+                 status="{{getPentestFillStatus(currentStatus)}}">
+        <nb-option *ngFor="let status of statusTexts" [value]="status.value">
+          {{ status.translationText | translate }}
+        </nb-option>
+      </nb-select>
+    </div>
     <button nbButton
             class="save-pentest-button"
             status="primary"
-            [disabled]="!pentestChanged$.getValue()"
+            [disabled]="!pentestStatusChanged()"
             title="{{ 'global.action.save' | translate }}"
             (click)="onClickSavePentest()">
       <span class="exit-element-text"> {{ 'global.action.save' | translate }} </span>
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss
index 608d8c2..6dc3c74 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss
@@ -14,6 +14,28 @@
 
   .content-footer {
     height: 5%;
+
+    .pentest-status-dialog {
+      margin: 1rem 2.25rem 1rem 0;
+
+      .status {
+        width: 12rem;
+      }
+
+      .basic {
+        background-color: nb-theme(color-basic-default);
+      }
+      .info {
+        background-color: nb-theme(color-info-default);
+      }
+      .warning {
+        background-color: nb-theme(color-warning-default);
+      }
+      .success {
+        background-color: nb-theme(color-success-default);
+      }
+    }
+
     .save-pentest-button {
       margin: 1rem 6rem 1rem 0;
     }
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.ts
index b16efe8..8e921d3 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.ts
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import * as FA from '@fortawesome/free-solid-svg-icons';
 import {BehaviorSubject} from 'rxjs';
 import {Store} from '@ngxs/store';
 import {ProjectState} from '@shared/stores/project-state/project-state';
 import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
 import {Pentest} from '@shared/models/pentest.model';
+import {PentestStatus} from '@shared/models/pentest-status.model';
+import {StatusText} from '@shared/widgets/status-tag/status-tag.component';
+import {PentestService} from '@shared/services/pentest.service';
+import {NotificationService, PopupType} from '@shared/services/notification.service';
 
 @UntilDestroy()
 @Component({
@@ -21,7 +25,24 @@ export class PentestContentComponent implements OnInit {
   currentNumberOfFindings$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   currentNumberOfComments$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
 
-  constructor(private store: Store) { }
+  // Pentest Status Handler
+  currentStatus: PentestStatus = PentestStatus.NOT_STARTED;
+  private initialPentestStatus: PentestStatus;
+  status = PentestStatus;
+  readonly statusTexts: Array<StatusText> = [
+    {value: PentestStatus.NOT_STARTED, translationText: 'pentest.statusText.not_started'},
+    /* ToDo: Disabled not needed inside pentest */
+    /*{value: PentestStatus.DISABLED, translationText: 'pentest.statusText.disabled'},*/
+    {value: PentestStatus.OPEN, translationText: 'pentest.statusText.open'},
+    {value: PentestStatus.IN_PROGRESS, translationText: 'pentest.statusText.in_progress'},
+    {value: PentestStatus.COMPLETED, translationText: 'pentest.statusText.completed'}
+  ];
+
+  constructor(
+    private readonly pentestService: PentestService,
+    private notificationService: NotificationService,
+    private store: Store) {
+  }
 
   ngOnInit(): void {
     this.store.selectOnce(ProjectState.pentest).pipe(
@@ -29,6 +50,8 @@ export class PentestContentComponent implements OnInit {
     ).subscribe({
       next: (selectedPentest: Pentest) => {
         this.pentest$.next(selectedPentest);
+        this.currentStatus = selectedPentest.status;
+        this.initialPentestStatus = selectedPentest.status;
         const findings = selectedPentest.findingsIds ? selectedPentest.findingsIds.length : 0;
         this.currentNumberOfFindings$.next(findings);
         const comments = selectedPentest.commentsIds ? selectedPentest.commentsIds.length : 0;
@@ -41,6 +64,59 @@ export class PentestContentComponent implements OnInit {
   }
 
   onClickSavePentest(): void {
-    console.info('to be implemented..');
+    this.pentest$.next({...this.pentest$.getValue(), status: this.currentStatus});
+    console.warn('Updated Pentest: ', this.pentest$.getValue());
+    this.pentestService.savePentest(this.pentest$.getValue())
+      .subscribe({
+        next: (pentest: Pentest) => {
+          this.notificationService.showPopup('pentest.popup.save.success', PopupType.SUCCESS);
+        },
+        error: err => {
+          console.log(err);
+          this.notificationService.showPopup('pentest.popup.save.failed', PopupType.FAILURE);
+        }
+      });
+  }
+
+  /**
+   * @return true if initial pentest Status is different from current pentest status
+   */
+  pentestStatusChanged(): boolean {
+    if (this.initialPentestStatus !== this.currentStatus) {
+      this.pentestChanged$.next(true);
+    } else {
+      this.pentestChanged$.next(false);
+    }
+    return this.pentestChanged$.getValue();
+  }
+
+  /**
+   * @return the correct nb-status for current pentest-status
+   */
+  getPentestFillStatus(value: PentestStatus): string {
+    let pentestFillStatus;
+    switch (value) {
+      case PentestStatus.NOT_STARTED: {
+        pentestFillStatus = 'basic';
+        break;
+      }
+      case PentestStatus.OPEN: {
+        pentestFillStatus = 'info';
+        break;
+      }
+      case PentestStatus.IN_PROGRESS: {
+        pentestFillStatus = 'warning';
+        break;
+      }
+      case PentestStatus.COMPLETED: {
+        pentestFillStatus = 'success';
+        break;
+      }
+      default: {
+        pentestFillStatus = 'basic';
+        break;
+      }
+    }
+    return pentestFillStatus;
   }
 }
diff --git a/security-c4po-angular/src/app/pentest/pentest.module.ts b/security-c4po-angular/src/app/pentest/pentest.module.ts
index 99c4069..6a43fe2 100644
--- a/security-c4po-angular/src/app/pentest/pentest.module.ts
+++ b/security-c4po-angular/src/app/pentest/pentest.module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {PentestComponent} from './pentest.component';
-import {NbButtonModule, NbCardModule, NbLayoutModule, NbTabsetModule, NbTreeGridModule} from '@nebular/theme';
+import {NbButtonModule, NbCardModule, NbLayoutModule, NbSelectModule, NbTabsetModule, NbTreeGridModule} from '@nebular/theme';
 import { PentestHeaderComponent } from './pentest-header/pentest-header.component';
 import { PentestContentComponent } from './pentest-content/pentest-content.component';
 import {FlexLayoutModule} from '@angular/flex-layout';
@@ -25,25 +25,26 @@ import {FindingDialogModule} from '@shared/modules/finding-dialog/finding-dialog
     PentestFindingsComponent,
     PentestCommentsComponent
   ],
-  imports: [
-    CommonModule,
-    CommonAppModule,
-    RouterModule.forChild([{
-      path: '',
-      component: PentestComponent
-    }]),
-    NbLayoutModule,
-    NbCardModule,
-    FlexLayoutModule,
-    FontAwesomeModule,
-    TranslateModule,
-    NbButtonModule,
-    StatusTagModule,
-    NbTabsetModule,
-    NbTreeGridModule,
-    SeverityTagModule,
-    FindingDialogModule
-  ]
+    imports: [
+        CommonModule,
+        CommonAppModule,
+        RouterModule.forChild([{
+            path: '',
+            component: PentestComponent
+        }]),
+        NbLayoutModule,
+        NbCardModule,
+        FlexLayoutModule,
+        FontAwesomeModule,
+        TranslateModule,
+        NbButtonModule,
+        StatusTagModule,
+        NbTabsetModule,
+        NbTreeGridModule,
+        SeverityTagModule,
+        FindingDialogModule,
+        NbSelectModule
+    ]
 })
 export class PentestModule {
 }
diff --git a/security-c4po-angular/src/assets/i18n/de-DE.json b/security-c4po-angular/src/assets/i18n/de-DE.json
index 8a8a2cf..3e4989f 100644
--- a/security-c4po-angular/src/assets/i18n/de-DE.json
+++ b/security-c4po-angular/src/assets/i18n/de-DE.json
@@ -174,6 +174,15 @@
       "in_progress": "In Bearbeitung",
       "completed": "Fertig"
     },
+    "popup": {
+      "not.found": "Keine pentests gefunden",
+      "save.success": "Pentest erfolgreich gespeichert",
+      "save.failed": "Pentest konnte nicht gespeichert werden",
+      "update.success": "Pentest erfolgreich aktualisiert",
+      "update.failed": "Pentest konnte nicht aktualisiert werden",
+      "delete.success": "Pentest erfolgreich gelöscht",
+      "delete.failed": "Pentest konnte nicht gelöscht werden"
+    },
     "info": {
       "001": "Nutze Suchmaschinenerkennung und -aufklärung für Informationslecks",
       "002": "Fingerabdruck-Webserver",
diff --git a/security-c4po-angular/src/assets/i18n/en-US.json b/security-c4po-angular/src/assets/i18n/en-US.json
index ab4b6a2..3e96ba9 100644
--- a/security-c4po-angular/src/assets/i18n/en-US.json
+++ b/security-c4po-angular/src/assets/i18n/en-US.json
@@ -174,6 +174,15 @@
       "in_progress": "In progress",
       "completed": "Completed"
     },
+    "popup": {
+      "not.found": "No pentest found",
+      "save.success": "Pentest saved successfully",
+      "save.failed": "Pentest could not be saved",
+      "update.success": "Pentest updated successfully",
+      "update.failed": "Pentest could not be updated",
+      "delete.success": "Pentest deleted successfully",
+      "delete.failed": "Pentest could not be deleted"
+    },
     "info": {
       "001": "Conduct Search Engine Discovery and Reconnaissance for Information Leakage",
       "002": "Fingerprint Web Server",
diff --git a/security-c4po-angular/src/shared/services/pentest.service.ts b/security-c4po-angular/src/shared/services/pentest.service.ts
index 9f8e025..b363761 100644
--- a/security-c4po-angular/src/shared/services/pentest.service.ts
+++ b/security-c4po-angular/src/shared/services/pentest.service.ts
@@ -54,6 +54,14 @@ export class PentestService {
     return this.http.get<Pentest[]>(`${this.apiBaseURL}`, {params: queryParams});
   }
 
+  /**
+   * Save Pentest
+   * @param pentest the information of the Pentest
+   */
+  public savePentest(pentest: Pentest): Observable<Pentest> {
+    return this.http.post<Pentest>(`${this.apiBaseURL}/${pentest.id}`, pentest);
+  }
+
   /**
    * Get Findings for Pentest Id
    * @param pentestId the id of the project
diff --git a/security-c4po-angular/src/shared/widgets/status-tag/status-tag.component.ts b/security-c4po-angular/src/shared/widgets/status-tag/status-tag.component.ts
index 2949c8d..1c07279 100644
--- a/security-c4po-angular/src/shared/widgets/status-tag/status-tag.component.ts
+++ b/security-c4po-angular/src/shared/widgets/status-tag/status-tag.component.ts
@@ -30,7 +30,7 @@ export class StatusTagComponent implements OnInit {
   }
 }
 
-interface StatusText {
+export interface StatusText {
   value: string;
   translationText: string;
 }