From cc182d932bf698eed9a89fb2bb84862afc2aca7f Mon Sep 17 00:00:00 2001 From: Marcel Haag Date: Tue, 3 Jan 2023 10:55:26 +0100 Subject: [PATCH] As a use I want to have a saver delete dialog --- .../pentest-comments.component.ts | 4 +- .../pentest-findings.component.ts | 4 +- .../project-overview.component.ts | 74 +++++++++++++------ .../project-overview.module.ts | 4 +- .../src/assets/@theme/styles/_dialog.scss | 1 + .../src/assets/i18n/de-DE.json | 9 ++- .../src/assets/i18n/en-US.json | 9 ++- .../confirm-checkbox-dialog.component.html | 1 + .../confirm-checkbox-dialog.component.scss | 4 + .../confirm-checkbox-dialog.component.spec.ts | 25 +++++++ .../confirm-checkbox-dialog.component.ts | 15 ++++ .../confirm-checkbox-dialog.module.ts | 12 +++ .../project-dialog.component.scss | 2 +- .../acceptableInputValidator.ts | 7 ++ .../security-confirm-dialog.component.html | 41 ++++++++++ .../security-confirm-dialog.component.scss | 17 +++++ .../security-confirm-dialog.component.spec.ts | 69 +++++++++++++++++ .../security-confirm-dialog.component.ts | 41 ++++++++++ .../security-confirm-dialog.module.ts | 31 ++++++++ .../services/dialog-service/dialog-message.ts | 8 ++ .../dialog-service/dialog.service.mock.ts | 7 +- .../services/dialog-service/dialog.service.ts | 39 +++++++++- 22 files changed, 389 insertions(+), 35 deletions(-) create mode 100644 security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.html create mode 100644 security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.scss create mode 100644 security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.spec.ts create mode 100644 security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.ts create mode 100644 security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.module.ts create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/acceptableInputValidator.ts create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.html create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.scss create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.spec.ts create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.ts create mode 100644 security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.module.ts diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts index 3674bc8..d76a52f 100644 --- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts +++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts @@ -114,7 +114,7 @@ export class PentestCommentsComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( @@ -154,7 +154,7 @@ export class PentestCommentsComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.ts b/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.ts index a2117f1..7b06906 100644 --- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.ts +++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-findings/pentest-findings.component.ts @@ -109,7 +109,7 @@ export class PentestFindingsComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( @@ -148,7 +148,7 @@ export class PentestFindingsComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( diff --git a/security-c4po-angular/src/app/project-overview/project-overview.component.ts b/security-c4po-angular/src/app/project-overview/project-overview.component.ts index efdec5d..6b788af 100644 --- a/security-c4po-angular/src/app/project-overview/project-overview.component.ts +++ b/security-c4po-angular/src/app/project-overview/project-overview.component.ts @@ -60,7 +60,7 @@ export class ProjectOverviewComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( @@ -86,7 +86,7 @@ export class ProjectOverviewComponent implements OnInit { { closeOnEsc: false, hasScroll: false, - autoFocus: false, + autoFocus: true, closeOnBackdropClick: false } ).pipe( @@ -106,29 +106,61 @@ export class ProjectOverviewComponent implements OnInit { } onClickDeleteProject(project: Project): void { + // Set dialog message const message = { title: 'project.delete.title', key: 'project.delete.key', data: {name: project.title}, - }; - this.dialogService.openConfirmDialog( - message - ).onClose.pipe( - filter((confirm) => !!confirm), - switchMap(() => this.projectService.deleteProjectById(project.id)), - catchError(() => { - this.notificationService.showPopup('project.popup.delete.failed', PopupType.FAILURE); - return []; - }), - untilDestroyed(this) - ).subscribe({ - next: () => { - this.loadProjects(); - this.notificationService.showPopup('project.popup.delete.success', PopupType.SUCCESS); - }, error: error => { - console.error(error); - } - }); + } as any; + // Check if project is empty + if (project.testingProgress === 0) { + this.dialogService.openConfirmDialog( + message + ).onClose.pipe( + filter((confirm) => !!confirm), + switchMap(() => this.projectService.deleteProjectById(project.id)), + catchError(() => { + this.notificationService.showPopup('project.popup.delete.failed', PopupType.FAILURE); + return []; + }), + untilDestroyed(this) + ).subscribe({ + next: () => { + this.loadProjects(); + this.notificationService.showPopup('project.popup.delete.success', PopupType.SUCCESS); + }, error: error => { + console.error(error); + } + }); + } else { + const secMessage = { + title: 'project.delete.title', + key: 'project.delete.sec.key', + confirmString: project.title.toString(), + inputPlaceholderKey: 'project.delete.confirmStringPlaceholder', + data: {name: project.title, confirmString: project.title.toString()}, + } as any; + // Set confirm string + // message.data.confirmString = project.title; + this.dialogService.openSecurityConfirmDialog( + secMessage + ).onClose.pipe( + filter((confirm) => !!confirm), + switchMap(() => this.projectService.deleteProjectById(project.id)), + catchError(() => { + this.notificationService.showPopup('project.popup.delete.failed', PopupType.FAILURE); + return []; + }), + untilDestroyed(this) + ).subscribe({ + next: () => { + this.loadProjects(); + this.notificationService.showPopup('project.popup.delete.success', PopupType.SUCCESS); + }, error: error => { + console.error(error); + } + }); + } } // HTML only diff --git a/security-c4po-angular/src/app/project-overview/project-overview.module.ts b/security-c4po-angular/src/app/project-overview/project-overview.module.ts index 1d5efa6..bc89afd 100644 --- a/security-c4po-angular/src/app/project-overview/project-overview.module.ts +++ b/security-c4po-angular/src/app/project-overview/project-overview.module.ts @@ -10,6 +10,7 @@ import {DateTimeFormatPipe} from '@shared/pipes/date-time-format.pipe'; import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module'; import {CommonAppModule} from '../common-app.module'; import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog.module'; +import {SecurityConfirmDialogModule} from '@shared/modules/security-confirm-dialog/security-confirm-dialog.module'; @NgModule({ declarations: [ @@ -26,8 +27,9 @@ import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog FlexLayoutModule, FontAwesomeModule, TranslateModule, + ProjectDialogModule, ConfirmDialogModule, - ProjectDialogModule + SecurityConfirmDialogModule ] }) export class ProjectOverviewModule { diff --git a/security-c4po-angular/src/assets/@theme/styles/_dialog.scss b/security-c4po-angular/src/assets/@theme/styles/_dialog.scss index 015522b..3ea502a 100644 --- a/security-c4po-angular/src/assets/@theme/styles/_dialog.scss +++ b/security-c4po-angular/src/assets/@theme/styles/_dialog.scss @@ -9,6 +9,7 @@ .dialog-body { font-size: 1rem; + white-space: pre-line; } .dialog-button { diff --git a/security-c4po-angular/src/assets/i18n/de-DE.json b/security-c4po-angular/src/assets/i18n/de-DE.json index 4ac1d99..eb903da 100644 --- a/security-c4po-angular/src/assets/i18n/de-DE.json +++ b/security-c4po-angular/src/assets/i18n/de-DE.json @@ -15,7 +15,10 @@ "action.no": "Nein", "username": "Nutzername", "password": "Passwort", - "no.progress": "Kein Fortschritt" + "no.progress": "Kein Fortschritt", + "validationMessage": { + "inputNotMatching": "Eingabe stimmt nicht überein!" + } }, "languageKeys":{ "de-DE": "Deutsch", @@ -59,7 +62,9 @@ }, "delete": { "title": "Projekt löschen", - "key": "Möchten Sie das Projekt \"{{name}}\" unwiderruflich löschen?" + "key": "Möchten Sie das Projekt \"{{name}}\" unwiderruflich löschen?", + "confirmStringPlaceholder": "Geben Sie zur Bestätigung den Projekttitel ein", + "sec.key": "Möchten Sie das Projekt \"{{name}}\" unwiderruflich löschen? \nSie löschen damit auch alle zugehörigen Daten." }, "validationMessage": { "titleRequired": "Titel ist erforderlich.", diff --git a/security-c4po-angular/src/assets/i18n/en-US.json b/security-c4po-angular/src/assets/i18n/en-US.json index be3f87d..bb5e6ea 100644 --- a/security-c4po-angular/src/assets/i18n/en-US.json +++ b/security-c4po-angular/src/assets/i18n/en-US.json @@ -15,7 +15,10 @@ "action.no": "No", "username": "Username", "password": "Password", - "no.progress": "No progress" + "no.progress": "No progress", + "validationMessage": { + "inputNotMatching": "Input does not match!" + } }, "languageKeys":{ "de-DE": "German", @@ -59,7 +62,9 @@ }, "delete": { "title": "Delete Project", - "key": "Do you want to permanently delete the project \"{{name}}\"?" + "key": "Do you want to permanently delete the project \"{{name}}\"?", + "confirmStringPlaceholder": "Enter project title to confirm", + "sec.key": "Do you want to permanently delete the project \"{{name}}\"? \nAll related data will also be deleted." }, "validationMessage": { "titleRequired": "Title is required.", diff --git a/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.html b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.html new file mode 100644 index 0000000..ec456dd --- /dev/null +++ b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.html @@ -0,0 +1 @@ +

confirm-checkbox-dialog works!

diff --git a/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.scss b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.scss new file mode 100644 index 0000000..0a8ce39 --- /dev/null +++ b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.scss @@ -0,0 +1,4 @@ +@import "../../../assets/@theme/styles/_dialog.scss"; + +* { +} diff --git a/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.spec.ts b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.spec.ts new file mode 100644 index 0000000..5e50d1f --- /dev/null +++ b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmCheckboxDialogComponent } from './confirm-checkbox-dialog.component'; + +describe('ConfirmCheckboxDialogComponent', () => { + let component: ConfirmCheckboxDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ConfirmCheckboxDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmCheckboxDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.ts b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.ts new file mode 100644 index 0000000..3802960 --- /dev/null +++ b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-confirm-checkbox-dialog', + templateUrl: './confirm-checkbox-dialog.component.html', + styleUrls: ['./confirm-checkbox-dialog.component.scss'] +}) +export class ConfirmCheckboxDialogComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.module.ts b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.module.ts new file mode 100644 index 0000000..bed5620 --- /dev/null +++ b/security-c4po-angular/src/shared/modules/confirm-checkbox-dialog/confirm-checkbox-dialog.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + + + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class ConfirmCheckboxDialogModule { } diff --git a/security-c4po-angular/src/shared/modules/project-dialog/project-dialog.component.scss b/security-c4po-angular/src/shared/modules/project-dialog/project-dialog.component.scss index 63123ba..6fabdac 100644 --- a/security-c4po-angular/src/shared/modules/project-dialog/project-dialog.component.scss +++ b/security-c4po-angular/src/shared/modules/project-dialog/project-dialog.component.scss @@ -27,6 +27,6 @@ .error-text { float: left; - color: nb-theme(color-danger-default);; + color: nb-theme(color-danger-default); } } diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/acceptableInputValidator.ts b/security-c4po-angular/src/shared/modules/security-confirm-dialog/acceptableInputValidator.ts new file mode 100644 index 0000000..e092fbf --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/acceptableInputValidator.ts @@ -0,0 +1,7 @@ +import {AbstractControl, ValidatorFn} from '@angular/forms'; + +export function acceptableInputValidator(confirmString: string): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } | null => + control.value === confirmString + ? null : {wrongConfirmString: control.value}; +} diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.html b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.html new file mode 100644 index 0000000..acd091a --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.html @@ -0,0 +1,41 @@ + + + {{ data?.title | translate }} + + + {{ data?.key | translate: data?.data }} +
+ + +
+ + {{ 'global.validationMessage.inputNotMatching' | translate }} + +
+
+
+
+ + + + +
diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.scss b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.scss new file mode 100644 index 0000000..7051e17 --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.scss @@ -0,0 +1,17 @@ +@import "../../../assets/@theme/styles/_dialog.scss"; +@import '../../../assets/@theme/styles/themes'; + +* { +} + +#inputForm { + padding-top: 1rem; + + .form-field{ + margin-bottom: 0.5rem; + } + + .error-text { + color: nb-theme(color-danger-default); + } +} diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.spec.ts b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.spec.ts new file mode 100644 index 0000000..4a6040f --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.spec.ts @@ -0,0 +1,69 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; + +import {SecurityConfirmDialogComponent} from './security-confirm-dialog.component'; +import {CommonModule} from '@angular/common'; +import {NB_DIALOG_CONFIG, NbButtonModule, NbCardModule, NbDialogRef, NbLayoutModule, NbStatusService} from '@nebular/theme'; +import {FlexLayoutModule} from '@angular/flex-layout'; +import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; +import {HttpLoaderFactory} from '../../../app/common-app.module'; +import {HttpClient, HttpClientModule} from '@angular/common/http'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {MockProvider} from 'ng-mocks'; +import {DialogService} from '@shared/services/dialog-service/dialog.service'; +import {DialogServiceMock} from '@shared/services/dialog-service/dialog.service.mock'; +import {createSpyObj} from '@shared/modules/project-dialog/project-dialog.component.spec'; +import {SecurityDialogMessage} from '@shared/services/dialog-service/dialog-message'; + +describe('SecurityConfirmDialogComponent', () => { + let component: SecurityConfirmDialogComponent; + let fixture: ComponentFixture; + + class DummyMockObj { + public static data = { + key: 'test.key', + confirmString: 'test', + } as SecurityDialogMessage; + } + + beforeEach(async () => { + const dialogSpy = createSpyObj('NbDialogRef', ['close']); + + await TestBed.configureTestingModule({ + declarations: [ + SecurityConfirmDialogComponent + ], + imports: [ + CommonModule, + NbLayoutModule, + NbCardModule, + NbButtonModule, + FlexLayoutModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient] + } + }), + HttpClientModule, + HttpClientTestingModule + ], + providers: [ + MockProvider(NbStatusService), + {provide: DialogService, useClass: DialogServiceMock}, + {provide: NbDialogRef, useValue: dialogSpy}, + {provide: NB_DIALOG_CONFIG, useValue: { data: DummyMockObj.data } } + ] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SecurityConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.ts b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.ts new file mode 100644 index 0000000..87c871e --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.component.ts @@ -0,0 +1,41 @@ +import {Component, Inject, Input, OnInit} from '@angular/core'; +import {NB_DIALOG_CONFIG, NbDialogRef} from '@nebular/theme'; +import {FormControl} from '@angular/forms'; +import {acceptableInputValidator} from '@shared/modules/security-confirm-dialog/acceptableInputValidator'; +import {UntilDestroy} from '@ngneat/until-destroy'; +import {SecurityDialogMessage} from '@shared/services/dialog-service/dialog-message'; + +@Component({ + selector: 'app-security-confirm-dialog', + templateUrl: './security-confirm-dialog.component.html', + styleUrls: ['./security-confirm-dialog.component.scss'] +}) +@UntilDestroy() +export class SecurityConfirmDialogComponent implements OnInit{ + + inputCtrl: FormControl; + + constructor(/** + * @param data contains all relevant information the dialog needs + * @param data.title The translation key for the dialog title + * @param data.confirmString The string to confirm the dialog action + * @param data.key The translation key for the shown message + * @param data.data The data that may be used in the message translation key + */ + @Inject(NB_DIALOG_CONFIG) public data: SecurityDialogMessage, + protected dialogRef: NbDialogRef) { + } + + ngOnInit(): void { + // Setup FormControl and custom validator + this.inputCtrl = new FormControl('', acceptableInputValidator(this.data.confirmString)); + } + + onClickConfirm(): void { + this.dialogRef.close({confirm: true}); + } + + onClickClose(): void { + this.dialogRef.close(); + } +} diff --git a/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.module.ts b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.module.ts new file mode 100644 index 0000000..484dbed --- /dev/null +++ b/security-c4po-angular/src/shared/modules/security-confirm-dialog/security-confirm-dialog.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {CommonAppModule} from '../../../app/common-app.module'; +import {NbButtonModule, NbCardModule, NbFormFieldModule, NbInputModule, NbLayoutModule, NbSelectModule} from '@nebular/theme'; +import {FlexLayoutModule} from '@angular/flex-layout'; +import {TranslateModule} from '@ngx-translate/core'; +import {SecurityConfirmDialogComponent} from '@shared/modules/security-confirm-dialog/security-confirm-dialog.component'; +import {ReactiveFormsModule} from '@angular/forms'; + +@NgModule({ + declarations: [ + SecurityConfirmDialogComponent + ], + imports: [ + CommonModule, + CommonAppModule, + NbCardModule, + NbButtonModule, + FlexLayoutModule, + TranslateModule, + NbLayoutModule, + NbSelectModule, + NbInputModule, + NbFormFieldModule, + ReactiveFormsModule + ], + entryComponents: [ + SecurityConfirmDialogComponent + ] +}) +export class SecurityConfirmDialogModule { } diff --git a/security-c4po-angular/src/shared/services/dialog-service/dialog-message.ts b/security-c4po-angular/src/shared/services/dialog-service/dialog-message.ts index 11f9aaa..67a76ef 100644 --- a/security-c4po-angular/src/shared/services/dialog-service/dialog-message.ts +++ b/security-c4po-angular/src/shared/services/dialog-service/dialog-message.ts @@ -4,3 +4,11 @@ export interface DialogMessage { title?: string; inputPlaceholderKey?: string; } + +export interface SecurityDialogMessage { + key: string; + confirmString: string; + data?: any; + title?: string; + inputPlaceholderKey?: string; +} diff --git a/security-c4po-angular/src/shared/services/dialog-service/dialog.service.mock.ts b/security-c4po-angular/src/shared/services/dialog-service/dialog.service.mock.ts index 20ec024..3358af0 100644 --- a/security-c4po-angular/src/shared/services/dialog-service/dialog.service.mock.ts +++ b/security-c4po-angular/src/shared/services/dialog-service/dialog.service.mock.ts @@ -2,7 +2,8 @@ import {DialogService} from '@shared/services/dialog-service/dialog.service'; import {ComponentType} from '@angular/cdk/overlay'; import {TemplateRef} from '@angular/core'; import {NbDialogConfig, NbDialogRef} from '@nebular/theme'; -import {DialogMessage} from '@shared/services/dialog-service/dialog-message'; +import {DialogMessage, SecurityDialogMessage} from '@shared/services/dialog-service/dialog-message'; +import {SecurityConfirmDialogComponent} from '@shared/modules/security-confirm-dialog/security-confirm-dialog.component'; export class DialogServiceMock implements Required { @@ -18,4 +19,8 @@ export class DialogServiceMock implements Required { openConfirmDialog(message: DialogMessage): NbDialogRef { return null; } + + openSecurityConfirmDialog(message: SecurityDialogMessage): NbDialogRef { + return undefined; + } } diff --git a/security-c4po-angular/src/shared/services/dialog-service/dialog.service.ts b/security-c4po-angular/src/shared/services/dialog-service/dialog.service.ts index 1a52226..b3002a3 100644 --- a/security-c4po-angular/src/shared/services/dialog-service/dialog.service.ts +++ b/security-c4po-angular/src/shared/services/dialog-service/dialog.service.ts @@ -1,8 +1,9 @@ import {Injectable, TemplateRef} from '@angular/core'; import {NbDialogConfig, NbDialogRef, NbDialogService} from '@nebular/theme'; import {ComponentType} from '@angular/cdk/overlay'; -import {DialogMessage} from '@shared/services/dialog-service/dialog-message'; +import {DialogMessage, SecurityDialogMessage} from '@shared/services/dialog-service/dialog-message'; import {ConfirmDialogComponent} from '@shared/modules/confirm-dialog/confirm-dialog.component'; +import {SecurityConfirmDialogComponent} from '@shared/modules/security-confirm-dialog/security-confirm-dialog.component'; @Injectable({ providedIn: 'root' @@ -23,7 +24,7 @@ export class DialogService { context: config?.context || undefined, closeOnEsc: config?.closeOnEsc || false, hasScroll: config?.hasScroll || false, - autoFocus: config?.autoFocus || false, + autoFocus: config?.autoFocus || true, closeOnBackdropClick: config?.closeOnBackdropClick || false }); } @@ -37,7 +38,39 @@ export class DialogService { return this.dialog.open(ConfirmDialogComponent, { closeOnEsc: true, hasScroll: false, - autoFocus: false, + autoFocus: true, + closeOnBackdropClick: false, + context: {data: message} + }); + } + + /** + * @param message.key The translation key for the shown message + * @param message.data The data that may be used in the message translation key (Set it null if it's not required in the key) + * @param message.title The translation key for the dialog title + */ + // ToDo: Implement later on.. + /*openConfirmCheckBoxDialog(message: DialogMessage): NbDialogRef { + return this.dialog.open(undefined, { + closeOnEsc: true, + hasScroll: false, + autoFocus: true, + closeOnBackdropClick: false, + context: {data: message} + }); + }*/ + + /** + * @param message.key The translation key for the shown message + * @param message.confirmString The string to be entered for confirmation + * @param message.data The data that may be used in the message translation key (Set it null if it's not required in the key) + * @param message.title The translation key for the dialog title + */ + openSecurityConfirmDialog(message: SecurityDialogMessage): NbDialogRef { + return this.dialog.open(SecurityConfirmDialogComponent, { + closeOnEsc: false, + hasScroll: false, + autoFocus: true, closeOnBackdropClick: false, context: {data: message} });