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 *ngFor="let auth_method of authMethods"
  73                       [value]="auth_method">{{ auth_method }}</option>
  74             </select>
  75             <span class="invalid-feedback"
  76                   *ngIf="configForm.showError('auth_method', frm, 'required')"
  77                   i18n>This field is required.</span>
  78           </div>
  79         </div>
  80       </div>
  81
  82       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
  83         <div class="form-group row">
  84           <label class="cd-col-form-label required"
  85                  for="secret_engine"
  86                  i18n>Secret Engine</label>
  87           <div class="cd-col-form-input">
  88             <select id="secret_engine"
  89                     name="secret_engine"
  90                     class="form-select"
  91                     formControlName="secret_engine">
  92               <option *ngFor="let secret_engine of secretEngines"
  93                       [value]="secret_engine">{{ secret_engine }}</option>
  94             </select>
  95             <span class="invalid-feedback"
  96                   *ngIf="configForm.showError('secret_engine', frm, 'required')"
  97                   i18n>This field is required.</span>
  98           </div>
  99         </div>
 100       </div>
 101
 102       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 103         <div class="form-group row">
 104           <label class="cd-col-form-label"
 105                  for="secret_path"
 106                  i18n>Secret Path
 107           </label>
 108           <div class="cd-col-form-input">
 109             <input id="secret_path"
 110                    name="secret_path"
 111                    class="form-control"
 112                    type="text"
 113                    formControlName="secret_path">
 114             <span class="invalid-feedback"
 115                   *ngIf="configForm.showError('secret_path', frm, 'required')"
 116                   i18n>This field is required.</span>
 117           </div>
 118         </div>
 119       </div>
 120
 121       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 122         <div class="form-group row">
 123           <label class="cd-col-form-label"
 124                  for="namespace"
 125                  i18n>Namespace
 126           </label>
 127           <div class="cd-col-form-input">
 128             <input id="namespace"
 129                    name="namespace"
 130                    class="form-control"
 131                    type="text"
 132                    formControlName="namespace">
 133           </div>
 134         </div>
 135       </div>
 136
 137       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 138         <div class="form-group row">
 139           <label class="cd-col-form-label required"
 140                  for="address"
 141                  i18n>Vault Address
 142           </label>
 143           <div class="cd-col-form-input">
 144             <input id="address"
 145                    name="address"
 146                    class="form-control"
 147                    formControlName="address"
 148                    placeholder="http://127.0.0.1:8000">
 149             <span class="invalid-feedback"
 150                   *ngIf="configForm.showError('address', frm, 'required')"
 151                   i18n>This field is required.</span>
 152           </div>
 153         </div>
 154       </div>
 155
 156       <div *ngIf="configForm.getValue('auth_method') === 'token'"
 157            class="form-group row">
 158         <label class="cd-col-form-label required"
 159                for="token">
 160         <span i18n>Token</span>
 161         <cd-helper i18n>
 162           The token authentication method expects a Vault token to be present in a plaintext file.
 163         </cd-helper>
 164         </label>
 165         <div class="cd-col-form-input">
 166           <input type="file"
 167                  formControlName="token"
 168                  (change)="fileUpload($event.target.files, 'token')">
 169           <span class="invalid-feedback"
 170                 *ngIf="configForm.showError('token', frm, 'required')"
 171                 i18n>This field is required.</span>
 172         </div>
 173       </div>
 174
 175       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 176         <div class="form-group row">
 177           <label class="cd-col-form-label"
 178                  for="ssl_cert">
 179           <span i18n>CA Certificate</span>
 180           <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 181           </label>
 182           <div class="cd-col-form-input">
 183             <input type="file"
 184                    formControlName="ssl_cert"
 185                    (change)="fileUpload($event.target.files, 'ssl_cert')">
 186             <span class="invalid-feedback"
 187                   *ngIf="configForm.showError('ssl_cert', frm, 'required')"
 188                   i18n>This field is required.</span>
 189           </div>
 190         </div>
 191       </div>
 192
 193       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 194         <div class="form-group row">
 195           <label class="cd-col-form-label"
 196                  for="client_cert">
 197           <span i18n>Client Certificate</span>
 198           <cd-helper i18n>The Client certificate in PEM format.</cd-helper>
 199           </label>
 200           <div class="cd-col-form-input">
 201             <input type="file"
 202                    formControlName="client_cert"
 203                    (change)="fileUpload($event.target.files, 'client_cert')">
 204             <span class="invalid-feedback"
 205                   *ngIf="configForm.showError('client_cert', frm, 'required')"
 206                   i18n>This field is required.</span>
 207           </div>
 208         </div>
 209       </div>
 210
 211       <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
 212         <div class="form-group row">
 213           <label class="cd-col-form-label"
 214                  for="client_key">
 215           <span i18n>Client Private Key</span>
 216           <cd-helper i18n>The Client Private Key in PEM format.</cd-helper>
 217           </label>
 218           <div class="cd-col-form-input">
 219             <input type="file"
 220                    (change)="fileUpload($event.target.files, 'client_key')">
 221             <span class="invalid-feedback"
 222                   *ngIf="configForm.showError('client_key', frm, 'required')"
 223                   i18n>This field is required.</span>
 224           </div>
 225         </div>
 226       </div>
 227     </div>
 228     <div class="modal-footer">
 229       <cd-form-button-panel (submitActionEvent)="onSubmit()"
 230                             [submitText]="actionLabels.SUBMIT"
 231                             [form]="configForm"></cd-form-button-panel>
 232     </div>
 233     </form>
 234   </ng-container>
 235 </cd-modal>