diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html | 55 |
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> |