ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">Update RGW Encryption Configurations</ng-container>
   4
   5   <ng-container class="modal-content">
   6     <form name="configForm"
   7           #frm="ngForm"
   8           [formGroup]="configForm">
   9     <div class="modal-body">
  10       <div class="form-group row">
  11         <label class="cd-col-form-label required"
  12                for="encryptionType"
  13                i18n>Encryption Type</label>
  14         <div class="col-md-auto custom-checkbox form-check-inline ms-3">
  15           <input class="form-check-input"
  16                  formControlName="encryptionType"
  17                  id="s3Enabled"
  18                  type="radio"
  19                  name="encryptionType"
  20                  value="AES256">
  21           <label class="custom-check-label"
  22                  for="s3Enabled"
  23                  i18n>SSE-S3 Encryption</label>
  24         </div>
  25
  26         <div class="col-md-auto custom-checkbox form-check-inline">
  27           <input class="form-check-input"
  28                  formControlName="encryptionType"
  29                  id="kmsEnabled"
  30                  name="encryptionType"
  31                  value="aws:kms"
  32                  type="radio">
  33           <label class="custom-check-label"
  34                  for="kmsEnabled"
  35                  i18n>SSE-KMS Encryption</label>
  36         </div>
  37       </div>
  38
  39       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
  40         <div class="form-group row">
  41           <label class="cd-col-form-label required"
  42                  for="kms_provider"
  43                  i18n>Key management service provider</label>
  44           <div class="cd-col-form-input">
  45             <select id="kms_provider"
  46                     name="kms_provider"
  47                     class="form-select"
  48                     formControlName="kms_provider">
  49               <option i18n
  50                       *ngIf="kmsProviders !== null"
  51                       [ngValue]="null">-- Select a provider --</option>
  52               <option *ngFor="let provider of kmsProviders"
  53                       [value]="provider">{{ provider }}</option>
  54             </select>
  55             <span class="invalid-feedback"
  56                   *ngIf="configForm.showError('kms_provider', frm, 'required')"
  57                   i18n>This field is required.</span>
  58           </div>
  59         </div>
  60       </div>
  61
  62       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
  63         <div class="form-group row">
  64           <label class="cd-col-form-label required"
  65                  for="auth_method"
  66                  i18n>Authentication Method</label>
  67           <div class="cd-col-form-input">
  68             <select id="auth_method"
  69                     name="auth_method"
  70                     class="form-select"
  71                     formControlName="auth_method">
  72               <option i18n
  73                       *ngIf="authMethods !== null"
  74                       [ngValue]="null">-- Select a method --</option>
  75               <option *ngFor="let auth_method of authMethods"
  76                       [value]="auth_method">{{ auth_method }}</option>
  77             </select>
  78             <span class="invalid-feedback"
  79                   *ngIf="configForm.showError('auth_method', frm, 'required')"
  80                   i18n>This field is required.</span>
  81           </div>
  82         </div>
  83       </div>
  84
  85       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
  86         <div class="form-group row">
  87           <label class="cd-col-form-label required"
  88                  for="secret_engine"
  89                  i18n>Secret Engine</label>
  90           <div class="cd-col-form-input">
  91             <select id="secret_engine"
  92                     name="secret_engine"
  93                     class="form-select"
  94                     formControlName="secret_engine">
  95               <option i18n
  96                       *ngIf="secretEngines !== null"
  97                       [ngValue]="null">-- Select a method --</option>
  98               <option *ngFor="let secret_engine of secretEngines"
  99                       [value]="secret_engine">{{ secret_engine }}</option>
 100             </select>
 101             <span class="invalid-feedback"
 102                   *ngIf="configForm.showError('secret_engine', frm, 'required')"
 103                   i18n>This field is required.</span>
 104           </div>
 105         </div>
 106       </div>
 107
 108       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 109         <div class="form-group row">
 110           <label class="cd-col-form-label"
 111                  for="secret_path"
 112                  i18n>Secret Path
 113           </label>
 114           <div class="cd-col-form-input">
 115             <input id="secret_path"
 116                    name="secret_path"
 117                    class="form-control"
 118                    type="text"
 119                    formControlName="secret_path">
 120             <span class="invalid-feedback"
 121                   *ngIf="configForm.showError('secret_path', frm, 'required')"
 122                   i18n>This field is required.</span>
 123           </div>
 124         </div>
 125       </div>
 126
 127       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 128         <div class="form-group row">
 129           <label class="cd-col-form-label"
 130                  for="namespace"
 131                  i18n>Namespace
 132           </label>
 133           <div class="cd-col-form-input">
 134             <input id="namespace"
 135                    name="namespace"
 136                    class="form-control"
 137                    type="text"
 138                    formControlName="namespace">
 139           </div>
 140         </div>
 141       </div>
 142
 143       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 144         <div class="form-group row">
 145           <label class="cd-col-form-label required"
 146                  for="address"
 147                  i18n>Vault Address
 148           </label>
 149           <div class="cd-col-form-input">
 150             <input id="address"
 151                    name="address"
 152                    class="form-control"
 153                    formControlName="address">
 154             <span class="invalid-feedback"
 155                   *ngIf="configForm.showError('address', frm, 'required')"
 156                   i18n>This field is required.</span>
 157           </div>
 158         </div>
 159       </div>
 160
 161       <div *ngIf="configForm.getValue('auth_method') === 'token'"
 162            class="form-group row">
 163         <label class="cd-col-form-label required"
 164                for="token">
 165         <span i18n>Token</span>
 166         </label>
 167         <div class="cd-col-form-input">
 168           <input type="file"
 169                  formControlName="token"
 170                  (change)="fileUpload($event.target.files, 'token')">
 171           <span class="invalid-feedback"
 172                 *ngIf="configForm.showError('token', frm, 'required')"
 173                 i18n>This field is required.</span>
 174         </div>
 175       </div>
 176
 177       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 178         <div class="form-group row">
 179           <label class="cd-col-form-label"
 180                  for="ssl_cert">
 181           <span i18n>CA Certificate</span>
 182           <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 183           </label>
 184           <div class="cd-col-form-input">
 185             <input type="file"
 186                    formControlName="ssl_cert"
 187                    (change)="fileUpload($event.target.files, 'ssl_cert')">
 188             <span class="invalid-feedback"
 189                   *ngIf="configForm.showError('ssl_cert', frm, 'required')"
 190                   i18n>This field is required.</span>
 191           </div>
 192         </div>
 193       </div>
 194
 195       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 196         <div class="form-group row">
 197           <label class="cd-col-form-label"
 198                  for="client_cert">
 199           <span i18n>Client Certificate</span>
 200           <cd-helper i18n>The Client certificate in PEM format.</cd-helper>
 201           </label>
 202           <div class="cd-col-form-input">
 203             <input type="file"
 204                    formControlName="client_cert"
 205                    (change)="fileUpload($event.target.files, 'client_cert')">
 206             <span class="invalid-feedback"
 207                   *ngIf="configForm.showError('client_cert', frm, 'required')"
 208                   i18n>This field is required.</span>
 209           </div>
 210         </div>
 211       </div>
 212
 213       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 214         <div class="form-group row">
 215           <label class="cd-col-form-label"
 216                  for="client_key">
 217           <span i18n>Client Private Key</span>
 218           <cd-helper i18n>The Client Private Key in PEM format.</cd-helper>
 219           </label>
 220           <div class="cd-col-form-input">
 221             <input type="file"
 222                    (change)="fileUpload($event.target.files, 'client_key')">
 223             <span class="invalid-feedback"
 224                   *ngIf="configForm.showError('client_key', frm, 'required')"
 225                   i18n>This field is required.</span>
 226           </div>
 227         </div>
 228       </div>
 229     </div>
 230     <div class="modal-footer">
 231       <cd-form-button-panel (submitActionEvent)="onSubmit()"
 232                             [submitText]="actionLabels.SUBMIT"
 233                             [form]="configForm"></cd-form-button-panel>
 234     </div>
 235     </form>
 236   </ng-container>
 237 </cd-modal>