1 files changed, 55 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
new file mode 100644
index 000000000..29b669b14
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
@@ -0,0 +1,55 @@
+<cd-modal #modal
+          [modalRef]="activeModal">
+  <ng-container class="modal-title">
+    <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
+  </ng-container>
+
+  <ng-container class="modal-content">
+    <form name="deletionForm"
+          #formDir="ngForm"
+          [formGroup]="deletionForm"
+          novalidate>
+      <div class="modal-body">
+        <ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
+        <div class="question">
+          <span *ngIf="itemNames; else noNames">
+            <p *ngIf="itemNames.length === 1; else manyNames"
+               i18n>Are you sure that you want to {{ actionDescription | lowercase }} <strong>{{ itemNames[0] }}</strong>?</p>
+            <ng-template #manyNames>
+              <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected items?</p>
+              <ul>
+                <li *ngFor="let itemName of itemNames"><strong>{{ itemName }}</strong></li>
+              </ul>
+            </ng-template >
+          </span>
+          <ng-template #noNames>
+            <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
+          </ng-template>
+          <ng-container *ngTemplateOutlet="childFormGroupTemplate; context:{form:deletionForm}"></ng-container>
+          <div class="form-group">
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox"
+                     class="custom-control-input"
+                     name="confirmation"
+                     id="confirmation"
+                     formControlName="confirmation"
+                     autofocus>
+              <label class="custom-control-label"
+                     for="confirmation"
+                     i18n>Yes, I am sure.</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <cd-form-button-panel (submitActionEvent)="callSubmitAction()"
+                              [form]="deletionForm"
+                              [submitText]="(actionDescription | titlecase) + ' ' + itemDescription"></cd-form-button-panel>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
+
+<ng-template #deletionHeading>
+  {{ actionDescription | titlecase }} {{ itemDescription }}
+</ng-template>