Add confirm modal in delete widget component

src/Turnierplan.App/Client/cypress/e2e/create-and-delete-organization.cy.js

@@ -5,7 +5,8 @@ it('create a new organization and delete it', () => {
   cy.add_organization().then((organizationName) => {
     cy.getx(turnierplan.pageFrame.navigationTab(turnierplan.viewOrganizationPage.settingsPageId)).click();
     cy.getx(turnierplan.deleteWidget.confirmationField).type(organizationName);
-    cy.getx(turnierplan.deleteWidget.confirmButton).click();
+    cy.getx(turnierplan.deleteWidget.deleteButton).click();
+    cy.getx(turnierplan.deleteWidget.confirmDeleteButton).click();
     cy.contains('Ihre Organisation wurde gelöscht'); // This is the confirmation toast
   });
 });

src/Turnierplan.App/Client/cypress/support/turnierplan.js

@@ -4,7 +4,8 @@ export const turnierplan = {
     organizationNameField: 'create-organization-page-organization-name-field'
   },
   deleteWidget: {
-    confirmButton: 'delete-widget-confirm-button',
+    confirmDeleteButton: 'delete-widget-confirm-delete-button',
+    deleteButton: 'delete-widget-delete-button',
     confirmationField: 'delete-widget-confirmation-field'
   },
   header: {

src/Turnierplan.App/Client/src/app/i18n/de.ts

@@ -1098,8 +1098,11 @@ export const de = {
       ConfirmTooltip: 'Löschvorgang bestätigen'
     },
     DeleteWidget: {
-      EnterToConfirm: 'Zur Bestätigung geben Sie bitte &quot;<strong>{{text}}</strong>&quot; in folgendes Textfeld ein:',
-      Delete: 'Löschen'
+      EnterToConfirm:
+        'Zur Bestätigung geben Sie bitte &quot;<span class="text-decoration-underline">{{text}}</span>&quot; in folgendes Textfeld ein:',
+      ConfirmModalText: 'Bestätigen Sie den Löschvorgang. Dies kann <span class="fw-bold">nicht</span> rückgängig gemacht werden!',
+      Delete: 'Löschen',
+      DeleteConfirm: 'Löschen bestätigen'
     },
     VisibilitySelector: {
       Private: 'Privat',

src/Turnierplan.App/Client/src/app/portal/components/delete-widget/delete-widget.component.html

@@ -20,12 +20,34 @@
   <div class="d-flex flex-row">
     <div [ngClass]="{ 'tp-cursor-not-allowed': !allowDeletion }">
       <tp-action-button
-        [tpE2E]="'delete-widget-confirm-button'"
+        [tpE2E]="'delete-widget-delete-button'"
         [type]="'outline-danger'"
         [icon]="'trash'"
         [disabled]="!allowDeletion"
         [title]="'Portal.DeleteWidget.Delete'"
-        (buttonClick)="deleteClicked()" />
+        (buttonClick)="deleteClicked(confirmModal)" />
     </div>
   </div>
 }
+
+<ng-template #confirmModal>
+  <div class="modal-header">
+    <div class="modal-title" [translate]="translationKey + '.Title'"></div>
+  </div>
+  <div class="modal-body d-flex flex-column">
+    <div [innerHTML]="'Portal.DeleteWidget.ConfirmModalText' | translate"></div>
+    <div class="mt-3 d-flex flex-row gap-2 text-danger">
+      <i class="bi bi-trash"></i>
+      <span class="fw-bold">{{ confirmationText }}</span>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <tp-action-button [type]="'outline-dark'" [title]="'Portal.General.Cancel'" (buttonClick)="openModal?.dismiss()" />
+    <tp-action-button
+      [tpE2E]="'delete-widget-confirm-delete-button'"
+      [type]="'danger'"
+      [icon]="'trash'"
+      [title]="'Portal.DeleteWidget.DeleteConfirm'"
+      (buttonClick)="confirmDeleteClicked()" />
+  </div>
+</ng-template>

src/Turnierplan.App/Client/src/app/portal/components/delete-widget/delete-widget.component.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
 import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActionButtonComponent } from '../action-button/action-button.component';
 import { E2eDirective } from '../../../core/directives/e2e.directive';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'tp-delete-widget',
@@ -17,25 +18,37 @@ export class DeleteWidgetComponent {
   @Input()
   public thinLayout: boolean = false;
 
+  @Input()
+  public set targetObjectName(value: string) {
+    this.confirmationText = value.replace(/[^A-Za-z0-9.\-_|ÄÖÜäöüß ]+/g, '').trim();
+  }
+
   @Output()
   public deleteClick = new EventEmitter<void>();
 
   protected confirmationText?: string;
   protected confirmationTextInput: string = '';
   protected allowDeletion = false;
+  protected openModal?: NgbModalRef;
 
-  @Input()
-  public set targetObjectName(value: string) {
-    this.confirmationText = value.replace(/[^A-Za-z0-9.\-_|ÄÖÜäöüß ]+/g, '').trim();
-  }
+  constructor(private readonly modalService: NgbModal) {}
 
   protected checkConfirmationText(): void {
     this.allowDeletion = this.confirmationText !== undefined && this.confirmationText === this.confirmationTextInput.trim();
   }
 
-  protected deleteClicked(): void {
+  protected deleteClicked(template: TemplateRef<unknown>): void {
     if (this.allowDeletion) {
-      this.deleteClick.emit();
+      this.openModal = this.modalService.open(template, {
+        size: 'md',
+        fullscreen: 'md',
+        centered: true
+      });
     }
   }
+
+  protected confirmDeleteClicked(): void {
+    this.openModal?.dismiss();
+    this.deleteClick.emit();
+  }
 }