git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
   4
   5   <ng-container class="modal-content">
   6     <form #frm="ngForm"
   7           [formGroup]="formGroup"
   8           novalidate>
   9       <div class="modal-body">
  10
  11         <!-- Username -->
  12         <div class="form-group row">
  13           <label class="cd-col-form-label"
  14                  [ngClass]="{'required': !viewing}"
  15                  for="user"
  16                  i18n>Username</label>
  17           <div class="cd-col-form-input">
  18             <input id="user"
  19                    class="form-control"
  20                    type="text"
  21                    *ngIf="viewing"
  22                    [readonly]="true"
  23                    formControlName="user">
  24             <select id="user"
  25                     class="form-control custom-select"
  26                     formControlName="user"
  27                     *ngIf="!viewing"
  28                     autofocus>
  29               <option i18n
  30                       *ngIf="userCandidates !== null"
  31                       [ngValue]="null">-- Select a username --</option>
  32               <option *ngFor="let userCandidate of userCandidates"
  33                       [value]="userCandidate">{{ userCandidate }}</option>
  34             </select>
  35             <span class="invalid-feedback"
  36                   *ngIf="formGroup.showError('user', frm, 'required')"
  37                   i18n>This field is required.</span>
  38           </div>
  39         </div>
  40
  41         <!-- Auto-generate key -->
  42         <div class="form-group row"
  43              *ngIf="!viewing">
  44           <div class="cd-col-form-offset">
  45             <div class="custom-control custom-checkbox">
  46               <input class="custom-control-input"
  47                      id="generate_key"
  48                      type="checkbox"
  49                      formControlName="generate_key">
  50               <label class="custom-control-label"
  51                      for="generate_key"
  52                      i18n>Auto-generate key</label>
  53             </div>
  54           </div>
  55         </div>
  56
  57         <!-- Access key -->
  58         <div class="form-group row"
  59              *ngIf="!formGroup.getValue('generate_key')">
  60           <label class="cd-col-form-label"
  61                  [ngClass]="{'required': !viewing}"
  62                  for="access_key"
  63                  i18n>Access key</label>
  64           <div class="cd-col-form-input">
  65             <div class="input-group">
  66               <input id="access_key"
  67                      class="form-control"
  68                      type="password"
  69                      [readonly]="viewing"
  70                      formControlName="access_key">
  71               <span class="input-group-append">
  72                 <button type="button"
  73                         class="btn btn-light"
  74                         cdPasswordButton="access_key">
  75                 </button>
  76                 <cd-copy-2-clipboard-button source="access_key">
  77                 </cd-copy-2-clipboard-button>
  78               </span>
  79             </div>
  80             <span class="invalid-feedback"
  81                   *ngIf="formGroup.showError('access_key', frm, 'required')"
  82                   i18n>This field is required.</span>
  83           </div>
  84         </div>
  85
  86         <!-- Secret key -->
  87         <div class="form-group row"
  88              *ngIf="!formGroup.getValue('generate_key')">
  89           <label class="cd-col-form-label"
  90                  [ngClass]="{'required': !viewing}"
  91                  for="secret_key"
  92                  i18n>Secret key</label>
  93           <div class="cd-col-form-input">
  94             <div class="input-group">
  95               <input id="secret_key"
  96                      class="form-control"
  97                      type="password"
  98                      [readonly]="viewing"
  99                      formControlName="secret_key">
 100               <span class="input-group-append">
 101                 <button type="button"
 102                         class="btn btn-light"
 103                         cdPasswordButton="secret_key">
 104                 </button>
 105                 <cd-copy-2-clipboard-button source="secret_key">
 106                 </cd-copy-2-clipboard-button>
 107               </span>
 108             </div>
 109             <span class="invalid-feedback"
 110                   *ngIf="formGroup.showError('secret_key', frm, 'required')"
 111                   i18n>This field is required.</span>
 112           </div>
 113         </div>
 114
 115       </div>
 116
 117       <div class="modal-footer">
 118         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 119                               [form]="formGroup"
 120                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 121                               [showSubmit]="!viewing"></cd-form-button-panel>
 122       </div>
 123     </form>
 124   </ng-container>
 125 </cd-modal>