ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html

   1 <cd-modal #modal
   2           [modalRef]="modalRef">
   3   <ng-container class="modal-title">
   4     <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
   5   </ng-container>
   6
   7   <ng-container class="modal-content">
   8     <form name="deletionForm"
   9           #formDir="ngForm"
  10           [formGroup]="deletionForm"
  11           novalidate>
  12       <div class="modal-body">
  13         <ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
  14         <div class="question">
  15           <span *ngIf="itemNames; else noNames">
  16             <p *ngIf="itemNames.length === 1; else manyNames"
  17                i18n>Are you sure that you want to {{ actionDescription | lowercase }} <strong>{{ itemNames[0] }}</strong>?</p>
  18             <ng-template #manyNames>
  19               <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected items?</p>
  20               <ul>
  21                 <li *ngFor="let itemName of itemNames"><strong>{{ itemName }}</strong></li>
  22               </ul>
  23             </ng-template >
  24           </span>
  25           <ng-template #noNames>
  26             <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
  27           </ng-template>
  28           <div class="form-group">
  29             <div class="custom-control custom-checkbox">
  30               <input type="checkbox"
  31                      class="custom-control-input"
  32                      name="confirmation"
  33                      id="confirmation"
  34                      formControlName="confirmation"
  35                      autofocus>
  36               <label class="custom-control-label"
  37                      for="confirmation"
  38                      i18n>Yes, I am sure.</label>
  39             </div>
  40           </div>
  41         </div>
  42       </div>
  43       <div class="modal-footer">
  44         <cd-submit-button #submitButton
  45                           [form]="deletionForm"
  46                           (submitAction)="callSubmitAction()">
  47           <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
  48         </cd-submit-button>
  49         <cd-back-button [back]="modalRef.hide"
  50                         name="Cancel"
  51                         i18n-name>
  52         </cd-back-button>
  53       </div>
  54     </form>
  55   </ng-container>
  56 </cd-modal>
  57
  58 <ng-template #deletionHeading>
  59   {{ actionDescription | titlecase }} {{ itemDescription }}
  60 </ng-template>