1 files changed, 109 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
new file mode 100644
index 000000000..117ad371d
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
@@ -0,0 +1,109 @@
+<div class="form-group row">
+  <label class="cd-col-form-label"
+         i18n>Clients</label>
+
+  <div class="cd-col-form-input"
+       [formGroup]="form"
+       #formDir="ngForm">
+    <span *ngIf="form.get('clients').value.length === 0"
+          class="no-border text-muted">
+      <span class="form-text text-muted"
+            i18n>Any client can access</span>
+    </span>
+
+    <ng-container formArrayName="clients">
+      <div *ngFor="let item of clientsFormArray.controls; let index = index; trackBy: trackByFn">
+        <div class="card"
+             [formGroup]="item">
+          <div class="card-header">
+            {{ (index + 1) | ordinal }}
+            <span class="float-right clickable"
+                  name="remove_client"
+                  (click)="removeClient(index)"
+                  ngbTooltip="Remove">&times;</span>
+          </div>
+
+          <div class="card-body">
+            <!-- Addresses -->
+            <div class="form-group row">
+              <label i18n
+                     class="cd-col-form-label required"
+                     for="addresses">Addresses</label>
+              <div class="cd-col-form-input">
+                <input type="text"
+                       class="form-control"
+                       name="addresses"
+                       id="addresses"
+                       formControlName="addresses"
+                       placeholder="192.168.0.10, 192.168.1.0/8">
+                <span class="invalid-feedback">
+                  <span *ngIf="showError(index, 'addresses', formDir, 'required')"
+                        i18n>This field is required.</span>
+
+                  <span *ngIf="showError(index, 'addresses', formDir, 'pattern')">
+                    <ng-container i18n>Must contain one or more comma-separated values</ng-container>
+                    <br>
+                    <ng-container i18n>For example:</ng-container> 192.168.0.10, 192.168.1.0/8
+                  </span>
+                </span>
+              </div>
+            </div>
+
+            <!-- Access Type-->
+            <div class="form-group row">
+              <label i18n
+                     class="cd-col-form-label"
+                     for="access_type">Access Type</label>
+              <div class="cd-col-form-input">
+                <select class="form-control"
+                        name="access_type"
+                        id="access_type"
+                        formControlName="access_type">
+                  <option value="">{{ getNoAccessTypeDescr() }}</option>
+                  <option *ngFor="let item of nfsAccessType"
+                          [value]="item.value">{{ item.value }}</option>
+                </select>
+                <span class="form-text text-muted"
+                      *ngIf="getValue(index, 'access_type')">
+                  {{ getAccessTypeHelp(index) }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Squash -->
+            <div class="form-group row">
+              <label class="cd-col-form-label"
+                     for="squash">
+                <span i18n>Squash</span>
+                <ng-container *ngTemplateOutlet="squashHelperTpl"></ng-container>
+              </label>
+              <div class="cd-col-form-input">
+                <select class="form-control"
+                        name="squash"
+                        id="squash"
+                        formControlName="squash">
+                  <option value="">{{ getNoSquashDescr() }}</option>
+                  <option *ngFor="let squash of nfsSquash"
+                          [value]="squash">{{ squash }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+
+    <div class="row">
+      <div class="col-12">
+        <div class="float-right">
+          <button class="btn btn-light "
+                  (click)="addClient()"
+                  name="add_client">
+            <i [ngClass]="[icons.add]"></i>
+            <ng-container i18n>Add clients</ng-container>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>