1 files changed, 70 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
new file mode 100644
index 000000000..8276e01e7
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
@@ -0,0 +1,70 @@
+<cd-modal [modalRef]="activeModal">
+  <ng-container i18n="form title"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
+
+  <ng-container class="modal-content">
+    <form #frm="ngForm"
+          [formGroup]="formGroup"
+          novalidate>
+      <div class="modal-body">
+        <!-- Type -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !editing}"
+                 for="type"
+                 i18n>Type</label>
+          <div class="cd-col-form-input">
+            <input id="type"
+                   class="form-control"
+                   type="text"
+                   *ngIf="editing"
+                   [readonly]="true"
+                   formControlName="type">
+            <select id="type"
+                    class="form-control"
+                    formControlName="type"
+                    *ngIf="!editing"
+                    autofocus>
+              <option i18n
+                      *ngIf="types !== null"
+                      [ngValue]="null">-- Select a type --</option>
+              <option *ngFor="let type of types"
+                      [value]="type">{{ type }}</option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('type', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
+
+        <!-- Permission -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="perm"
+                 i18n>Permission</label>
+          <div class="cd-col-form-input">
+            <select id="perm"
+                    class="form-control"
+                    formControlName="perm">
+              <option i18n
+                      [ngValue]="null">-- Select a permission --</option>
+              <option *ngFor="let perm of ['read', 'write', '*']"
+                      [value]="perm">
+                {{ perm }}
+              </option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('perm', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>