Add strong warning before permanent item deletion (#5044)

src/app/item-page/edit-item-page/item-delete/item-delete.component.html

@@ -84,13 +84,38 @@ <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
 
       </ng-container>
 
+      <ng-template #deleteConfirmationModal>
+        <div class="modal-header bg-light text-dark">
+          <h5 class="modal-title">
+            {{'item.edit.delete.confirmation-title' | translate}}
+          </h5>
+          <button type="button" class="btn-close" aria-label="Close" (click)="modalRef.close()"></button>
+        </div>
+        <div class="modal-body">
+          <p class="fw-bold">{{'item.edit.delete.confirmation-message' | translate}}</p>
+          <p>{{'item.edit.delete.confirmation-detail' | translate}}</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" (click)="modalRef.close()">
+            {{'item.edit.delete.cancel' | translate}}
+          </button>
+          <button class="btn btn-danger" (click)="confirmDeletion()">
+            {{'item.edit.delete.confirm' | translate}}
+          </button>
+        </div>
+      </ng-template>
+
       <div class="space-children-mr">
-        <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
-          class="btn btn-danger perform-action">{{confirmMessage | translate}}
+        <button [dsBtnDisabled]="isDeleting$ | async"
+                class="btn btn-danger perform-action"
+                (click)="openDeleteConfirmationModal()">
+          {{confirmMessage | translate}}
         </button>
-        <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
-          class="btn btn-outline-secondary cancel">
-          {{cancelMessage| translate}}
+
+        <button [dsBtnDisabled]="isDeleting$ | async"
+                [routerLink]="[itemPageRoute, 'edit']"
+                class="btn btn-outline-secondary cancel">
+          {{cancelMessage | translate}}
         </button>
       </div>
 

src/app/item-page/edit-item-page/item-delete/item-delete.component.ts

@@ -5,6 +5,8 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  TemplateRef,
+  ViewChild,
 } from '@angular/core';
 import {
   ActivatedRoute,
@@ -165,6 +167,8 @@ export class ItemDeleteComponent
    */
   private subs: Subscription[] = [];
 
+  @ViewChild('deleteConfirmationModal', { static: true }) deleteConfirmationModal!: TemplateRef<any>;
+
   public isDeleting$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(protected route: ActivatedRoute,
@@ -251,6 +255,21 @@ export class ItemDeleteComponent
     this.modalRef = this.modalService.open(content);
   }
 
+  /**
+   * Open the delete confirmation modal
+   */
+  openDeleteConfirmationModal() {
+    this.modalRef = this.modalService.open(this.deleteConfirmationModal, { centered: true });
+  }
+
+  /**
+   * User confirmed permanent deletion.
+   */
+  confirmDeletion() {
+    this.modalRef.close();
+    this.performAction();
+  }
+
   /**
    * Close the modal which lists the virtual metadata of a relation
    */

src/assets/i18n/en.json5

@@ -2503,6 +2503,12 @@
 
   "item.edit.delete.success": "Successfully started a process to delete this item",
 
+  "item.edit.delete.confirmation-title": "Confirm deletion",
+
+  "item.edit.delete.confirmation-message": "Are you sure you want to permanently delete this item?",
+
+  "item.edit.delete.confirmation-detail": "This item may have been cited, has (or had) a persistent identifier (Handle/DOI), and deleting it may break scholarly references and external links.",
+
   "item.edit.head": "Edit Item",
 
   "item.edit.breadcrumbs": "Edit Item",