diff --git a/security-c4po-angular/src/app/header/header.component.html b/security-c4po-angular/src/app/header/header.component.html
index 27306f8..c27a203 100644
--- a/security-c4po-angular/src/app/header/header.component.html
+++ b/security-c4po-angular/src/app/header/header.component.html
@@ -6,7 +6,7 @@
-
{{SECURITYC4PO_TITLE}}
+ {{SECURITYC4PO_TITLE}}
diff --git a/security-c4po-angular/src/app/header/header.component.scss b/security-c4po-angular/src/app/header/header.component.scss
index 2a80347..37c4ceb 100644
--- a/security-c4po-angular/src/app/header/header.component.scss
+++ b/security-c4po-angular/src/app/header/header.component.scss
@@ -36,6 +36,9 @@
.logo-container {
font-style: oblique;
color: #e74c3c;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
nb-action {
diff --git a/security-c4po-angular/src/app/header/header.component.ts b/security-c4po-angular/src/app/header/header.component.ts
index c0e6694..598411b 100644
--- a/security-c4po-angular/src/app/header/header.component.ts
+++ b/security-c4po-angular/src/app/header/header.component.ts
@@ -34,7 +34,12 @@ export class HeaderComponent implements OnInit {
// User Menu Properties
userPictureOnly = false;
user: BehaviorSubject = new BehaviorSubject(null);
- userMenu: NbMenuItem[] = [{title: '', pathMatch: 'prefix'}];
+ userMenu: NbMenuItem[] = [
+ {
+ title: '',
+ pathMatch: 'prefix'
+ }
+ ];
readonly FALLBACK_IMG = 'assets/images/demo/anon-user-icon.png';
constructor(
@@ -67,7 +72,7 @@ export class HeaderComponent implements OnInit {
console.error(err);
}
});
- // Handle user profile manu selection
+ // Handle user profile menu selection
this.menuService.onItemClick()
.pipe(
untilDestroyed(this)
diff --git a/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.scss b/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.scss
index 4635d8a..66248f6 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.scss
+++ b/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.scss
@@ -1,5 +1,5 @@
@import '../../../assets/@theme/styles/themes';
.pentest-categories {
- width: 22vw;
+ width: 20rem;
}
diff --git a/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.ts b/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.ts
index c873b90..696d82a 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.ts
+++ b/security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.ts
@@ -9,18 +9,18 @@ import {TranslateService} from '@ngx-translate/core';
import {ProjectState} from '@shared/stores/project-state/project-state';
import {catchError, switchMap, tap} from 'rxjs/operators';
import {Pentest, transformPentestsToObjectiveEntries} from '@shared/models/pentest.model';
+import {UntilDestroy} from '@ngneat/until-destroy';
@Component({
selector: 'app-objective-categories',
templateUrl: './objective-categories.component.html',
styleUrls: ['./objective-categories.component.scss']
})
-export class ObjectiveCategoriesComponent implements OnInit, OnDestroy {
+@UntilDestroy()
+export class ObjectiveCategoriesComponent implements OnInit {
categories: NbMenuItem[] = [];
selectedCategory: Category = 0;
- private destroy$ = new Subject();
-
constructor(private store: Store,
private menuService: NbMenuService,
private translateService: TranslateService) {
@@ -49,13 +49,15 @@ export class ObjectiveCategoriesComponent implements OnInit, OnDestroy {
untilDestroyed(this)
)
.subscribe((menuBag) => {
- this.selectedCategory = menuBag.item.data;
- this.categories.forEach(category => {
- category.selected = false;
- });
- if (this.selectedCategory >= 0) {
- menuBag.item.selected = true;
- this.store.dispatch(new ChangeCategory(this.selectedCategory));
+ if (menuBag.tag === 'menu') {
+ this.selectedCategory = menuBag.item.data;
+ this.categories.forEach(category => {
+ category.selected = false;
+ });
+ if (this.selectedCategory >= 0) {
+ menuBag.item.selected = true;
+ this.store.dispatch(new ChangeCategory(this.selectedCategory));
+ }
}
});
}
@@ -86,9 +88,4 @@ export class ObjectiveCategoriesComponent implements OnInit, OnDestroy {
}
}
}
-
- ngOnDestroy(): void {
- this.destroy$.next();
- this.destroy$.complete();
- }
}
diff --git a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.html b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.html
index 3c8a36c..e0e692c 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.html
+++ b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.html
@@ -9,20 +9,23 @@
-
- {{selectedProject$.getValue().title}}
+
-
+
+
-
@@ -36,5 +39,11 @@
+
+
+
+
+
+
diff --git a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss
index ab15660..a39c1cc 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss
+++ b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss
@@ -1,16 +1,30 @@
+@import '../../../assets/@theme/styles/_text-overflow.scss';
+
.pentest-header {
- width: calc(100vw - 14%);
+ width: 100vw;
.back-button-container {
.back-element-icon {
}
}
+ .header-info {
+ position: absolute;
+ margin-left: 10rem;
+ margin-right: 10rem;
+ text-align: center;
+
+ .state-tag {
+ }
+
+ .project-title {
+ @include multiLineEllipsis($font-size: 1.5rem, $font-weight: bold, $line-height: 2rem, $lines-to-show: 1, $max-width: 36rem);
+ }
+ }
+
.button-container {
- display: flex;
- align-content: flex-end;
- // ToDo: Fix so that longer / shorter name won't change needed margin
- // margin-right: 2.25rem;
+ position: absolute;
+ right: 2rem;
.element-icon {
}
diff --git a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.spec.ts b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.spec.ts
index e3d01c1..428e25a 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.spec.ts
+++ b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.spec.ts
@@ -11,7 +11,7 @@ import {RouterTestingModule} from '@angular/router/testing';
import {NgxsModule, Store} from '@ngxs/store';
import {PROJECT_STATE_NAME, ProjectState, ProjectStateModel} from '@shared/stores/project-state/project-state';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {NbActionsModule, NbIconModule} from '@nebular/theme';
+import {NbActionsModule, NbIconModule, NbMenuService} from '@nebular/theme';
import {ProjectService} from '@shared/services/api/project.service';
import {ProjectServiceMock} from '@shared/services/api/project.service.mock';
import {ProjectDialogService} from '@shared/modules/project-dialog/service/project-dialog.service';
@@ -27,6 +27,7 @@ import {ExportReportDialogServiceMock} from '@shared/modules/export-report-dialo
import {ReportState} from '@shared/models/state.enum';
const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
+ allProjects: [],
selectedProject: {
id: '56c47c56-3bcd-45f1-a05b-c197dbd33111',
client: 'E Corp',
@@ -35,6 +36,7 @@ const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
tester: 'Novatester',
summary: '',
state: ReportState.NEW,
+ version: '1.0',
testingProgress: 0,
createdBy: '11c47c56-3bcd-45f1-a05b-c197dbd33110'
},
@@ -80,6 +82,7 @@ describe('ObjectiveHeaderComponent', () => {
NgxsModule.forRoot([ProjectState])
],
providers: [
+ NbMenuService,
{provide: ProjectService, useValue: new ProjectServiceMock()},
{provide: ProjectDialogService, useClass: ProjectDialogServiceMock},
{provide: ExportReportDialogService, useClass: ExportReportDialogServiceMock},
diff --git a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.ts b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.ts
index 973acd9..46fb507 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.ts
+++ b/security-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.ts
@@ -16,6 +16,9 @@ import {ProjectDialogService} from '@shared/modules/project-dialog/service/proje
import {InitProjectState} from '@shared/stores/project-state/project-state.actions';
import {ExportReportDialogService} from '@shared/modules/export-report-dialog/service/export-report-dialog.service';
import {ExportReportDialogComponent} from '@shared/modules/export-report-dialog/export-report-dialog.component';
+import {NbMenuItem} from '@nebular/theme/components/menu/menu.service';
+import {NbMenuService} from '@nebular/theme';
+import {TranslateService} from '@ngx-translate/core';
@UntilDestroy()
@Component({
@@ -27,6 +30,23 @@ export class ObjectiveHeaderComponent implements OnInit {
readonly fa = FA;
selectedProject$: BehaviorSubject = new BehaviorSubject(null);
+ // Mobile menu properties
+ objectiveActionItems: NbMenuItem[] = [
+ {
+ title: 'global.action.edit',
+ badge: {
+ status: 'warning'
+ }
+ },
+ {
+ title: 'global.action.report',
+ badge: {
+ status: 'info'
+ }
+ },
+ ];
+ readonly BARS_IMG = 'assets/images/icons/bars.svg';
+ readonly ELLIPSIS_IMG = 'assets/images/icons/ellipsis.svg';
constructor(private store: Store,
private readonly notificationService: NotificationService,
@@ -34,7 +54,10 @@ export class ObjectiveHeaderComponent implements OnInit {
private projectDialogService: ProjectDialogService,
private projectService: ProjectService,
private exportReportDialogService: ExportReportDialogService,
- private readonly router: Router) {
+ private readonly router: Router,
+ private translateService: TranslateService,
+ private menuService: NbMenuService
+ ) {
}
ngOnInit(): void {
@@ -52,6 +75,33 @@ export class ObjectiveHeaderComponent implements OnInit {
console.error(err);
}
});
+
+ // Handle user profile menu action selection
+ this.menuService.onItemClick()
+ .pipe(
+ untilDestroyed(this)
+ )
+ .subscribe((menuBag) => {
+ if (menuBag.item.badge && menuBag.item.badge.status === 'warning') {
+ this.onClickEditPentestProject();
+ } else if (menuBag.item.badge && menuBag.item.badge.status === 'info') {
+ this.onClickGeneratePentestReport();
+ }
+ });
+ // Setup stream to translate menu action item
+ this.translateService.stream('global.action.edit')
+ .pipe(
+ untilDestroyed(this)
+ ).subscribe((text: string) => {
+ this.objectiveActionItems[0].title = text;
+ });
+ // Setup stream to translate menu action item
+ this.translateService.stream('global.action.report')
+ .pipe(
+ untilDestroyed(this)
+ ).subscribe((text: string) => {
+ this.objectiveActionItems[1].title = text;
+ });
}
onClickRouteBack(): void {
@@ -78,13 +128,15 @@ export class ObjectiveHeaderComponent implements OnInit {
untilDestroyed(this)
).subscribe({
next: (project) => {
- this.store.dispatch(new InitProjectState(
- project,
- [],
- []
- )).pipe(
- untilDestroyed(this)
- ).subscribe();
+ if (project) {
+ this.store.dispatch(new InitProjectState(
+ project,
+ [],
+ []
+ )).pipe(
+ untilDestroyed(this)
+ ).subscribe();
+ }
}
});
}
diff --git a/security-c4po-angular/src/app/objective-overview/objective-overview.module.ts b/security-c4po-angular/src/app/objective-overview/objective-overview.module.ts
index 817fc97..b8b1f0d 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-overview.module.ts
+++ b/security-c4po-angular/src/app/objective-overview/objective-overview.module.ts
@@ -11,7 +11,7 @@ import {
NbListModule,
NbButtonModule,
NbTooltipModule,
- NbActionsModule
+ NbActionsModule, NbUserModule, NbContextMenuModule
} from '@nebular/theme';
import {TranslateModule} from '@ngx-translate/core';
import {StatusTagModule} from '@shared/widgets/status-tag/status-tag.module';
@@ -26,6 +26,7 @@ import {ExportReportDialogModule} from '@shared/modules/export-report-dialog/exp
import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
import {CommentWidgetModule} from '@shared/widgets/comment-widget/comment-widget.module';
import {ReportStateTagModule} from '@shared/widgets/report-state-tag/report-state-tag.module';
+import {VersionTagModule} from '@shared/widgets/version-tag/version-tag.module';
@NgModule({
declarations: [
@@ -33,33 +34,36 @@ import {ReportStateTagModule} from '@shared/widgets/report-state-tag/report-stat
ObjectiveCategoriesComponent,
ObjectiveTableComponent,
],
- imports: [
- CommonModule,
- CommonAppModule,
- NbLayoutModule,
- NbCardModule,
- NbButtonModule,
- // nbTooltip crashes app right now if used in component,
- // workaround: use title in html for now
- NbTooltipModule,
- NbTreeGridModule,
- TranslateModule,
- StatusTagModule,
- RouterModule,
- FormsModule,
- NbListModule,
- FontAwesomeModule,
- FlexLayoutModule,
- NbActionsModule,
- ExportReportDialogModule,
- ProjectDialogModule,
- ObjectiveOverviewRoutingModule,
- // Table Widgets
- FindigWidgetModule,
- CommentWidgetModule,
- NbMenuModule,
- ReportStateTagModule
- ],
+ imports: [
+ CommonModule,
+ CommonAppModule,
+ NbLayoutModule,
+ NbCardModule,
+ NbButtonModule,
+ // nbTooltip crashes app right now if used in component,
+ // workaround: use title in html for now
+ NbTooltipModule,
+ NbTreeGridModule,
+ TranslateModule,
+ StatusTagModule,
+ RouterModule,
+ FormsModule,
+ NbListModule,
+ FontAwesomeModule,
+ FlexLayoutModule,
+ NbActionsModule,
+ ExportReportDialogModule,
+ ProjectDialogModule,
+ ObjectiveOverviewRoutingModule,
+ // Table Widgets
+ FindigWidgetModule,
+ CommentWidgetModule,
+ NbMenuModule,
+ ReportStateTagModule,
+ VersionTagModule,
+ NbUserModule,
+ NbContextMenuModule
+ ],
exports: [
ObjectiveHeaderComponent,
ObjectiveCategoriesComponent,
diff --git a/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.html b/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.html
index d4fab07..148af87 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.html
+++ b/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.scss b/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.scss
index 124f0c9..dad7048 100644
--- a/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.scss
+++ b/security-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.scss
@@ -1,7 +1,11 @@
@import '../../../assets/@theme/styles/themes';
.pentest-table {
- width: calc(78vw - 18%);
+ // width: calc(78vw - 18%);
+ // width: 100%;
+ // width: calc(100% - 20rem);
+ margin-right: 2rem;
+ padding-right: 2rem;
.pentest-cell {
// Add style here
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.spec.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.spec.ts
index 93011d3..86becfa 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.spec.ts
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.spec.ts
@@ -25,6 +25,7 @@ import {CommentDialogServiceMock} from '@shared/modules/comment-dialog/service/c
import {ReportState} from '@shared/models/state.enum';
const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
+ allProjects: [],
selectedProject: {
id: '56c47c56-3bcd-45f1-a05b-c197dbd33111',
client: 'E Corp',
@@ -33,6 +34,7 @@ const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
tester: 'Novatester',
summary: '',
state: ReportState.NEW,
+ version: '1.0',
testingProgress: 0,
createdBy: '11c47c56-3bcd-45f1-a05b-c197dbd33110'
},
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.spec.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.spec.ts
index 1529afe..a38bb50 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.spec.ts
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.spec.ts
@@ -16,6 +16,7 @@ import {NotificationServiceMock} from '@shared/services/toaster-service/notifica
import {ReportState} from '@shared/models/state.enum';
const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
+ allProjects: [],
selectedProject: {
id: '56c47c56-3bcd-45f1-a05b-c197dbd33111',
client: 'E Corp',
@@ -24,6 +25,7 @@ const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
tester: 'Novatester',
summary: '',
state: ReportState.NEW,
+ version: '1.0',
testingProgress: 0,
createdBy: '11c47c56-3bcd-45f1-a05b-c197dbd33110'
},
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.spec.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.spec.ts
index c5613b4..aacacab 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.spec.ts
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.spec.ts
@@ -25,6 +25,7 @@ import {DialogServiceMock} from '@shared/services/dialog-service/dialog.service.
import {ReportState} from '@shared/models/state.enum';
const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
+ allProjects: [],
selectedProject: {
id: '56c47c56-3bcd-45f1-a05b-c197dbd33111',
client: 'E Corp',
@@ -33,6 +34,7 @@ const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
tester: 'Novatester',
summary: '',
state: ReportState.NEW,
+ version: '1.0',
testingProgress: 0,
createdBy: '11c47c56-3bcd-45f1-a05b-c197dbd33110'
},
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.spec.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.spec.ts
index 0e8ccc0..6908617 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.spec.ts
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.spec.ts
@@ -16,6 +16,7 @@ import {PentestStatus} from '@shared/models/pentest-status.model';
import {ReportState} from '@shared/models/state.enum';
const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
+ allProjects: [],
selectedProject: {
id: '56c47c56-3bcd-45f1-a05b-c197dbd33111',
client: 'E Corp',
@@ -24,6 +25,7 @@ const DESIRED_PROJECT_STATE_SESSION: ProjectStateModel = {
tester: 'Novatester',
summary: '',
state: ReportState.NEW,
+ version: '1.0',
testingProgress: 0,
createdBy: '11c47c56-3bcd-45f1-a05b-c197dbd33110'
},
diff --git a/security-c4po-angular/src/app/pentest/pentest-header/pentest-header.component.html b/security-c4po-angular/src/app/pentest/pentest-header/pentest-header.component.html
index fa5dd94..521fe6f 100644
--- a/security-c4po-angular/src/app/pentest/pentest-header/pentest-header.component.html
+++ b/security-c4po-angular/src/app/pentest/pentest-header/pentest-header.component.html
@@ -1,4 +1,4 @@
-
+