ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html

   1 <cd-modal [modalRef]="bsModalRef">
   2   <ng-container i18n="form title|Example: Create Pool@@formTitle"
   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                 <button type="button"
  77                         class="btn btn-light"
  78                         cdCopy2ClipboardButton="access_key">
  79                 </button>
  80               </span>
  81             </div>
  82             <span class="invalid-feedback"
  83                   *ngIf="formGroup.showError('access_key', frm, 'required')"
  84                   i18n>This field is required.</span>
  85           </div>
  86         </div>
  87
  88         <!-- Secret key -->
  89         <div class="form-group row"
  90              *ngIf="!formGroup.getValue('generate_key')">
  91           <label class="cd-col-form-label"
  92                  [ngClass]="{'required': !viewing}"
  93                  for="secret_key"
  94                  i18n>Secret key</label>
  95           <div class="cd-col-form-input">
  96             <div class="input-group">
  97               <input id="secret_key"
  98                      class="form-control"
  99                      type="password"
 100                      [readonly]="viewing"
 101                      formControlName="secret_key">
 102               <span class="input-group-append">
 103                 <button type="button"
 104                         class="btn btn-light"
 105                         cdPasswordButton="secret_key">
 106                 </button>
 107                 <button type="button"
 108                         class="btn btn-light"
 109                         cdCopy2ClipboardButton="secret_key">
 110                 </button>
 111               </span>
 112             </div>
 113             <span class="invalid-feedback"
 114                   *ngIf="formGroup.showError('secret_key', frm, 'required')"
 115                   i18n>This field is required.</span>
 116           </div>
 117         </div>
 118
 119       </div>
 120
 121       <div class="modal-footer">
 122         <cd-submit-button *ngIf="!viewing"
 123                           (submitAction)="onSubmit()"
 124                           i18n="form action button|Example: Create Pool@@formActionButton"
 125                           [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 126         <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
 127       </div>
 128     </form>
 129   </ng-container>
 130 </cd-modal>