-<div class="modal-header">
- <h4 class="modal-title float-left"
- i18n>Create Namespace</h4>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="modalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form name="namespaceForm"
- #formDir="ngForm"
- [formGroup]="namespaceForm"
- novalidate>
- <div class="modal-body">
+<cd-modal [modalRef]="modalRef">
+ <ng-container class="modal-title"
+ i18n>Create Namespace</ng-container>
- <!-- Pool -->
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="pool"
- i18n>Pool</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Pool name..."
- id="pool"
- name="pool"
- formControlName="pool"
- *ngIf="!poolPermission.read">
- <select id="pool"
- name="pool"
- class="form-control custom-select"
- formControlName="pool"
- *ngIf="poolPermission.read">
- <option *ngIf="pools === null"
- [ngValue]="null"
- i18n>Loading...</option>
- <option *ngIf="pools !== null && pools.length === 0"
- [ngValue]="null"
- i18n>-- No rbd pools available --</option>
- <option *ngIf="pools !== null && pools.length > 0"
- [ngValue]="null"
- i18n>-- Select a pool --</option>
- <option *ngFor="let pool of pools"
- [value]="pool.pool_name">{{ pool.pool_name }}</option>
- </select>
- <span *ngIf="namespaceForm.showError('pool', formDir, 'required')"
- class="invalid-feedback"
- i18n>This field is required.</span>
- </div>
- </div>
+ <ng-container class="modal-content">
+ <form name="namespaceForm"
+ #formDir="ngForm"
+ [formGroup]="namespaceForm"
+ novalidate>
+ <div class="modal-body">
- <!-- Name -->
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="namespace"
- i18n>Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Namespace name..."
- id="namespace"
- name="namespace"
- formControlName="namespace"
- autofocus>
- <span class="invalid-feedback"
- *ngIf="namespaceForm.showError('namespace', formDir, 'required')"
- i18n>This field is required.</span>
- <span class="invalid-feedback"
- *ngIf="namespaceForm.showError('namespace', formDir, 'namespaceExists')"
- i18n>Namespace already exists.</span>
- </div>
- </div>
+ <!-- Pool -->
+ <div class="form-group row">
+ <label class="cd-col-form-label required"
+ for="pool"
+ i18n>Pool</label>
+ <div class="cd-col-form-input">
+ <input class="form-control"
+ type="text"
+ placeholder="Pool name..."
+ id="pool"
+ name="pool"
+ formControlName="pool"
+ *ngIf="!poolPermission.read">
+ <select id="pool"
+ name="pool"
+ class="form-control custom-select"
+ formControlName="pool"
+ *ngIf="poolPermission.read">
+ <option *ngIf="pools === null"
+ [ngValue]="null"
+ i18n>Loading...</option>
+ <option *ngIf="pools !== null && pools.length === 0"
+ [ngValue]="null"
+ i18n>-- No rbd pools available --</option>
+ <option *ngIf="pools !== null && pools.length > 0"
+ [ngValue]="null"
+ i18n>-- Select a pool --</option>
+ <option *ngFor="let pool of pools"
+ [value]="pool.pool_name">{{ pool.pool_name }}</option>
+ </select>
+ <span *ngIf="namespaceForm.showError('pool', formDir, 'required')"
+ class="invalid-feedback"
+ i18n>This field is required.</span>
+ </div>
+ </div>
- </div>
+ <!-- Name -->
+ <div class="form-group row">
+ <label class="cd-col-form-label required"
+ for="namespace"
+ i18n>Name</label>
+ <div class="cd-col-form-input">
+ <input class="form-control"
+ type="text"
+ placeholder="Namespace name..."
+ id="namespace"
+ name="namespace"
+ formControlName="namespace"
+ autofocus>
+ <span class="invalid-feedback"
+ *ngIf="namespaceForm.showError('namespace', formDir, 'required')"
+ i18n>This field is required.</span>
+ <span class="invalid-feedback"
+ *ngIf="namespaceForm.showError('namespace', formDir, 'namespaceExists')"
+ i18n>Namespace already exists.</span>
+ </div>
+ </div>
- <div class="modal-footer">
- <div class="button-group text-right">
- <cd-submit-button [form]="namespaceForm"
- (submitAction)="submit()"
- i18n>Create Namespace</cd-submit-button>
- <cd-back-button [back]="modalRef.hide"
- name="Close"
- i18n-name>
- </cd-back-button>
- </div>
- </div>
-</form>
+ </div>
+
+ <div class="modal-footer">
+ <div class="button-group text-right">
+ <cd-submit-button [form]="namespaceForm"
+ (submitAction)="submit()"
+ i18n>Create Namespace</cd-submit-button>
+ <cd-back-button [back]="modalRef.hide"
+ name="Close"
+ i18n-name>
+ </cd-back-button>
+ </div>
+ </div>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 class="modal-title float-left"
- i18n="form title|Example: Create rbdSnapshot@@formTitle">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="modalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form name="snapshotForm"
- #formDir="ngForm"
- [formGroup]="snapshotForm"
- novalidate>
- <div class="modal-body">
+<cd-modal [modalRef]="modalRef">
+ <ng-container i18n="form title|Example: Create rbdSnapshot@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
- <!-- Name -->
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="snapshotName"
- i18n>Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Snapshot name..."
- id="snapshotName"
- name="snapshotName"
- formControlName="snapshotName"
- autofocus>
- <span class="invalid-feedback"
- *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
- i18n>This field is required.</span>
+ <ng-container class="modal-content">
+ <form name="snapshotForm"
+ #formDir="ngForm"
+ [formGroup]="snapshotForm"
+ novalidate>
+ <div class="modal-body">
+ <!-- Name -->
+ <div class="form-group row">
+ <label class="cd-col-form-label required"
+ for="snapshotName"
+ i18n>Name</label>
+ <div class="cd-col-form-input">
+ <input class="form-control"
+ type="text"
+ placeholder="Snapshot name..."
+ id="snapshotName"
+ name="snapshotName"
+ formControlName="snapshotName"
+ autofocus>
+ <span class="invalid-feedback"
+ *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
+ i18n>This field is required.</span>
+ </div>
+ </div>
</div>
- </div>
- </div>
-
- <div class="modal-footer">
- <div class="button-group text-right">
- <cd-submit-button [form]="snapshotForm"
- (submitAction)="submit()"
- i18n="form action button|Example: Create rbdSnapshot@@formActionButton">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
- <cd-back-button [back]="modalRef.hide"
- name="Close"
- i18n-name>
- </cd-back-button>
- </div>
- </div>
-</form>
+ <div class="modal-footer">
+ <div class="button-group text-right">
+ <cd-submit-button [form]="snapshotForm"
+ i18n="form action button|Example: Create rbdSnapshot@@formActionButton"
+ (submitAction)="submit()">{{ action | titlecase }}
+ {{ resource | upperFirst }}</cd-submit-button>
+ <cd-back-button [back]="modalRef.hide"
+ name="Close"
+ i18n-name>
+ </cd-back-button>
+ </div>
+ </div>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 class="modal-title pull-left"
- i18n>Matcher</h4>
- <button type="button"
- class="close pull-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container class="modal-title"
+ i18n>Matcher</ng-container>
-<form class="form"
- #formDir="ngForm"
- [formGroup]="form"
- novalidate>
- <div class="modal-body">
- <!-- Name -->
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="name"
- i18n>Name</label>
- <div class="cd-col-form-input">
- <select class="form-control"
- id="name"
- formControlName="name"
- name="name">
- <option [ngValue]="null"
- i18n>-- Select an attribute to match against --</option>
- <option *ngFor="let attribute of nameAttributes"
- [value]="attribute">
- {{ attribute }}
- </option>
- </select>
- <span class="help-block"
- *ngIf="form.showError('name', formDir, 'required')"
- i18n>This field is required!</span>
- </div>
- </div>
+ <ng-container class="modal-content">
+ <form class="form"
+ #formDir="ngForm"
+ [formGroup]="form"
+ novalidate>
+ <div class="modal-body">
+ <!-- Name -->
+ <div class="form-group row">
+ <label class="cd-col-form-label required"
+ for="name"
+ i18n>Name</label>
+ <div class="cd-col-form-input">
+ <select class="form-control"
+ id="name"
+ formControlName="name"
+ name="name">
+ <option [ngValue]="null"
+ i18n>-- Select an attribute to match against --</option>
+ <option *ngFor="let attribute of nameAttributes"
+ [value]="attribute">
+ {{ attribute }}
+ </option>
+ </select>
+ <span class="help-block"
+ *ngIf="form.showError('name', formDir, 'required')"
+ i18n>This field is required!</span>
+ </div>
+ </div>
- <!-- Value -->
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="value"
- i18n>Value</label>
- <div class="cd-col-form-input">
- <input id="value"
- class="form-control"
- type="text"
- [typeahead]="possibleValues"
- [typeaheadMinLength]="0"
- formControlName="value">
- <span *ngIf="form.showError('value', formDir, 'required')"
- class="help-block"
- i18n>This field is required!</span>
- </div>
- <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
- class="cd-col-form-offset {{matcherMatch.cssClass}}"
- id="match-state">
- <span class="text-muted {{matcherMatch.cssClass}}">
- {{matcherMatch.status}}
- </span>
- </div>
- </div>
+ <!-- Value -->
+
<div class="form-group row">
+ <label class="cd-col-form-label required"
+ for="value"
+ i18n>Value</label>
+
<div class="cd-col-form-input">
+ <input id="value"
+ class="form-control"
+ type="text"
+ [typeahead]="possibleValues"
+ [typeaheadMinLength]="0"
+ formControlName="value">
+ <span *ngIf="form.showError('value', formDir, 'required')"
+ class="help-block"
+ i18n>This field is required!</span>
+ </div>
+
<div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
+ class="cd-col-form-offset {{matcherMatch.cssClass}}"
+ id="match-state">
+ <span class="text-muted {{matcherMatch.cssClass}}">
+ {{matcherMatch.status}}
+ </span>
+ </div>
+ </div>
- <!-- isRegex -->
- <div class="form-group row">
- <div class="cd-col-form-offset">
- <div class="custom-control custom-checkbox">
- <input type="checkbox"
- class="custom-control-input"
- formControlName="isRegex"
- name="is-regex"
- id="is-regex">
- <label for="is-regex"
- class="custom-control-label"
- i18n>Use regular expression</label>
+ <!-- isRegex -->
+ <div class="form-group row">
+ <div class="cd-col-form-offset">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox"
+ class="custom-control-input"
+ formControlName="isRegex"
+ name="is-regex"
+ id="is-regex">
+ <label for="is-regex"
+ class="custom-control-label"
+ i18n>Use regular expression</label>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div class="modal-footer">
- <cd-submit-button (submitAction)="onSubmit()"
- [form]="form">
- <ng-container i18n>{editMode, select, 1 {Update} other {Add}}</ng-container>
- </cd-submit-button>
- <cd-back-button [back]="bsModalRef.hide"
- name="Close"
- i18n-name>
- </cd-back-button>
- </div>
-</form>
+ <div class="modal-footer">
+ <cd-submit-button (submitAction)="onSubmit()"
+ [form]="form">
+ <ng-container i18n>{editMode, select, 1 {Update} other {Add}}</ng-container>
+ </cd-submit-button>
+ <cd-back-button [back]="bsModalRef.hide"
+ name="Close"
+ i18n-name>
+ </cd-back-button>
+ </div>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container i18n="form title|Example: Create Pool@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+ <ng-container class="modal-content">
+ <form #frm="ngForm"
+ [formGroup]="form"
+ novalidate>
+ <div class="modal-body">
+ <div class="form-group row">
+ <label class="cd-col-form-label"
+ for="name"
+ i18n>Name</label>
+ <div class="cd-col-form-input">
+ <input type="text"
+ id="name"
+ name="name"
+ class="form-control"
+ placeholder="Name..."
+ formControlName="name"
+ autofocus>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('name', frm, 'required')"
+ i18n>This field is required!</span>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('name', frm, 'pattern')"
+ i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('name', frm, 'uniqueName')"
+ i18n>The chosen erasure code profile name is already in use.</span>
+ </div>
+ </div>
-<form #frm="ngForm"
- [formGroup]="form"
- novalidate>
- <div class="modal-body">
- <div class="form-group row">
- <label class="cd-col-form-label"
- for="name"
- i18n>Name</label>
- <div class="cd-col-form-input">
- <input type="text"
- id="name"
- name="name"
- class="form-control"
- placeholder="Name..."
- formControlName="name"
- autofocus>
- <span class="invalid-feedback"
- *ngIf="form.showError('name', frm, 'required')"
- i18n>This field is required!</span>
- <span class="invalid-feedback"
- *ngIf="form.showError('name', frm, 'pattern')"
- i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
- <span class="invalid-feedback"
- *ngIf="form.showError('name', frm, 'uniqueName')"
- i18n>The chosen erasure code profile name is already in use.</span>
- </div>
- </div>
+ <div class="form-group row">
+ <label for="plugin"
+ class="cd-col-form-label">
+ <span class="required"
+ i18n>Plugin</span>
+ <cd-helper [html]="tooltips.plugins[plugin].description">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <select class="form-control custom-select"
+ id="plugin"
+ name="plugin"
+ formControlName="plugin">
+ <option *ngIf="!plugins"
+ ngValue=""
+ i18n>Loading...</option>
+ <option *ngFor="let plugin of plugins"
+ [ngValue]="plugin">
+ {{ plugin }}
+ </option>
+ </select>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('name', frm, 'required')"
+ i18n>This field is required!</span>
+ </div>
+ </div>
- <div class="form-group row">
- <label for="plugin"
- class="cd-col-form-label">
- <span class="required"
- i18n>Plugin</span>
- <cd-helper [html]="tooltips.plugins[plugin].description">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <select class="form-control custom-select"
- id="plugin"
- name="plugin"
- formControlName="plugin">
- <option *ngIf="!plugins"
- ngValue=""
- i18n>Loading...</option>
- <option *ngFor="let plugin of plugins"
- [ngValue]="plugin">
- {{ plugin }}
- </option>
- </select>
- <span class="invalid-feedback"
- *ngIf="form.showError('name', frm, 'required')"
- i18n>This field is required!</span>
- </div>
- </div>
+ <div class="form-group row">
+ <label for="k"
+ class="cd-col-form-label">
+ <span [ngClass]="{'required': requiredControls.includes('k')}"
+ i18n>Data chunks (k)</span>
+ <cd-helper [html]="tooltips.k">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="number"
+ id="k"
+ name="k"
+ class="form-control"
+ ng-model="$ctrl.erasureCodeProfile.k"
+ placeholder="Data chunks..."
+ formControlName="k">
+ <span class="invalid-feedback"
+ *ngIf="form.showError('k', frm, 'required')"
+ i18n>This field is required!</span>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('k', frm, 'min')"
+ i18n>Must be equal to or greater than 2.</span>
+ </div>
+ </div>
- <div class="form-group row">
- <label for="k"
- class="cd-col-form-label">
- <span [ngClass]="{'required': requiredControls.includes('k')}"
- i18n>Data chunks (k)</span>
- <cd-helper [html]="tooltips.k">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="number"
- id="k"
- name="k"
- class="form-control"
- ng-model="$ctrl.erasureCodeProfile.k"
- placeholder="Data chunks..."
- formControlName="k">
- <span class="invalid-feedback"
- *ngIf="form.showError('k', frm, 'required')"
- i18n>This field is required!</span>
- <span class="invalid-feedback"
- *ngIf="form.showError('k', frm, 'min')"
- i18n>Must be equal to or greater than 2.</span>
- </div>
- </div>
+ <div class="form-group row">
+ <label for="m"
+ class="cd-col-form-label">
+ <span [ngClass]="{'required': requiredControls.includes('m')}"
+ i18n>Coding chunks (m)</span>
+ <cd-helper [html]="tooltips.m">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="number"
+ id="m"
+ name="m"
+ class="form-control"
+ placeholder="Coding chunks..."
+ formControlName="m">
+ <span class="invalid-feedback"
+ *ngIf="form.showError('m', frm, 'required')"
+ i18n>This field is required!</span>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('m', frm, 'min')"
+ i18n>Must be equal to or greater than 1.</span>
+ </div>
+ </div>
- <div class="form-group row">
- <label for="m"
- class="cd-col-form-label">
- <span [ngClass]="{'required': requiredControls.includes('m')}"
- i18n>Coding chunks (m)</span>
- <cd-helper [html]="tooltips.m">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="number"
- id="m"
- name="m"
- class="form-control"
- placeholder="Coding chunks..."
- formControlName="m">
- <span class="invalid-feedback"
- *ngIf="form.showError('m', frm, 'required')"
- i18n>This field is required!</span>
- <span class="invalid-feedback"
- *ngIf="form.showError('m', frm, 'min')"
- i18n>Must be equal to or greater than 1.</span>
- </div>
- </div>
+ <div class="form-group row"
+ *ngIf="plugin === 'shec'">
+ <label for="c"
+ class="cd-col-form-label">
+ <ng-container i18n>Durability estimator (c)</ng-container>
+ <cd-helper [html]="tooltips.plugins.shec.c">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="number"
+ id="c"
+ name="c"
+ class="form-control"
+ placeholder="Coding chunks..."
+ formControlName="c">
+ <span class="invalid-feedback"
+ *ngIf="form.showError('c', frm, 'min')"
+ i18n>Must be equal to or greater than 1.</span>
+ </div>
+ </div>
- <div class="form-group row"
- *ngIf="plugin === 'shec'">
- <label for="c"
- class="cd-col-form-label">
- <ng-container i18n>Durability estimator (c)</ng-container>
- <cd-helper [html]="tooltips.plugins.shec.c">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="number"
- id="c"
- name="c"
- class="form-control"
- placeholder="Coding chunks..."
- formControlName="c">
- <span class="invalid-feedback"
- *ngIf="form.showError('c', frm, 'min')"
- i18n>Must be equal to or greater than 1.</span>
- </div>
- </div>
+ <div class="form-group row"
+ *ngIf="plugin === PLUGIN.LRC">
+ <label class="cd-col-form-label"
+ for="l">
+ <span class="required"
+ i18n>Locality (l)</span>
+ <cd-helper [html]="tooltips.plugins.lrc.l">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="number"
+ id="l"
+ name="l"
+ class="form-control"
+ placeholder="Coding chunks..."
+ formControlName="l">
+ <span class="invalid-feedback"
+ *ngIf="form.showError('l', frm, 'required')"
+ i18n>This field is required!</span>
+ <span class="invalid-feedback"
+ *ngIf="form.showError('l', frm, 'min')"
+ i18n>Must be equal to or greater than 1.</span>
+ </div>
+ </div>
- <div class="form-group row"
- *ngIf="plugin === PLUGIN.LRC">
- <label class="cd-col-form-label"
- for="l">
- <span class="required"
- i18n>Locality (l)</span>
- <cd-helper [html]="tooltips.plugins.lrc.l">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="number"
- id="l"
- name="l"
- class="form-control"
- placeholder="Coding chunks..."
- formControlName="l">
- <span class="invalid-feedback"
- *ngIf="form.showError('l', frm, 'required')"
- i18n>This field is required!</span>
- <span class="invalid-feedback"
- *ngIf="form.showError('l', frm, 'min')"
- i18n>Must be equal to or greater than 1.</span>
- </div>
- </div>
+ <div class="form-group row">
+ <label for="crushFailureDomain"
+ class="cd-col-form-label">
+ <ng-container i18n>Crush failure domain</ng-container>
+ <cd-helper [html]="tooltips.crushFailureDomain">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <select class="form-control custom-select"
+ id="crushFailureDomain"
+ name="crushFailureDomain"
+ formControlName="crushFailureDomain">
+ <option *ngIf="!failureDomains"
+ ngValue=""
+ i18n>Loading...</option>
+ <option *ngFor="let domain of failureDomains"
+ [ngValue]="domain">
+ {{ domain }}
+ </option>
+ </select>
+ </div>
+ </div>
- <div class="form-group row">
- <label for="crushFailureDomain"
- class="cd-col-form-label">
- <ng-container i18n>Crush failure domain</ng-container>
- <cd-helper [html]="tooltips.crushFailureDomain">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <select class="form-control custom-select"
- id="crushFailureDomain"
- name="crushFailureDomain"
- formControlName="crushFailureDomain">
- <option *ngIf="!failureDomains"
- ngValue=""
- i18n>Loading...</option>
- <option *ngFor="let domain of failureDomains"
- [ngValue]="domain">
- {{ domain }}
- </option>
- </select>
- </div>
- </div>
+ <div class="form-group row"
+ *ngIf="plugin === PLUGIN.LRC">
+ <label for="crushLocality"
+ class="cd-col-form-label">
+ <ng-container i18n>Crush Locality</ng-container>
+ <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <select class="form-control custom-select"
+ id="crushLocality"
+ name="crushLocality"
+ formControlName="crushLocality">
+ <option *ngIf="!failureDomains"
+ ngValue=""
+ i18n>Loading...</option>
+ <option *ngIf="failureDomains && failureDomains.length > 0"
+ ngValue=""
+ i18n>None</option>
+ <option *ngFor="let domain of failureDomains"
+ [ngValue]="domain">
+ {{ domain }}
+ </option>
+ </select>
+ </div>
+ </div>
- <div class="form-group row"
- *ngIf="plugin === PLUGIN.LRC">
- <label for="crushLocality"
- class="cd-col-form-label">
- <ng-container i18n>Crush Locality</ng-container>
- <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <select class="form-control custom-select"
- id="crushLocality"
- name="crushLocality"
- formControlName="crushLocality">
- <option *ngIf="!failureDomains"
- ngValue=""
- i18n>Loading...</option>
- <option *ngIf="failureDomains && failureDomains.length > 0"
- ngValue=""
- i18n>None</option>
- <option *ngFor="let domain of failureDomains"
- [ngValue]="domain">
- {{ domain }}
- </option>
- </select>
- </div>
- </div>
+ <div class="form-group row"
+ *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
+ <label for="technique"
+ class="cd-col-form-label">
+ <ng-container i18n>Technique</ng-container>
+ <cd-helper [html]="tooltips.plugins[plugin].technique">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <select class="form-control custom-select"
+ id="technique"
+ name="technique"
+ formControlName="technique">
+ <option *ngFor="let technique of techniques"
+ [ngValue]="technique">
+ {{ technique }}
+ </option>
+ </select>
+ </div>
+ </div>
- <div class="form-group row"
- *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
- <label for="technique"
- class="cd-col-form-label">
- <ng-container i18n>Technique</ng-container>
- <cd-helper [html]="tooltips.plugins[plugin].technique">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <select class="form-control custom-select"
- id="technique"
- name="technique"
- formControlName="technique">
- <option *ngFor="let technique of techniques"
- [ngValue]="technique">
- {{ technique }}
- </option>
- </select>
- </div>
- </div>
+
<div class="form-group row"
+ *ngIf="plugin === PLUGIN.JERASURE">
+ <label for="packetSize"
+ class="cd-col-form-label">
+ <ng-container i18n>Packetsize</ng-container>
+ <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
+ </cd-helper>
+ </label>
+
<div class="cd-col-form-input">
+ <input type="number"
+ id="packetSize"
+ name="packetSize"
+ class="form-control"
+ placeholder="Packetsize..."
+ formControlName="packetSize">
+ <span class="invalid-feedback"
+ *ngIf="form.showError('packetSize', frm, 'min')"
+ i18n>Must be equal to or greater than 1.</span>
+ </div>
+ </div>
- <div class="form-group row"
- *ngIf="plugin === PLUGIN.JERASURE">
- <label for="packetSize"
- class="cd-col-form-label">
- <ng-container i18n>Packetsize</ng-container>
- <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="number"
- id="packetSize"
- name="packetSize"
- class="form-control"
- placeholder="Packetsize..."
- formControlName="packetSize">
- <span class="invalid-feedback"
- *ngIf="form.showError('packetSize', frm, 'min')"
- i18n>Must be equal to or greater than 1.</span>
- </div>
- </div>
+ <div class="form-group row">
+ <label for="crushRoot"
+ class="cd-col-form-label">
+ <ng-container i18n>Crush root</ng-container>
+ <cd-helper [html]="tooltips.crushRoot">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="text"
+ id="crushRoot"
+ name="crushRoot"
+ class="form-control"
+ placeholder="root..."
+ formControlName="crushRoot">
+ </div>
+ </div>
- <div class="form-group row">
- <label for="crushRoot"
- class="cd-col-form-label">
- <ng-container i18n>Crush root</ng-container>
- <cd-helper [html]="tooltips.crushRoot">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="text"
- id="crushRoot"
- name="crushRoot"
- class="form-control"
- placeholder="root..."
- formControlName="crushRoot">
- </div>
- </div>
+ <div class="form-group row">
+ <label for="crushDeviceClass"
+ class="cd-col-form-label">
+ <ng-container i18n>Crush device class</ng-container>
+ <cd-helper [html]="tooltips.crushDeviceClass">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <select class="form-control custom-select"
+ id="crushDeviceClass"
+ name="crushDeviceClass"
+ formControlName="crushDeviceClass">
+ <option ngValue=""
+ i18n>any</option>
+ <option *ngFor="let deviceClass of devices"
+ [ngValue]="deviceClass">
+ {{ deviceClass }}
+ </option>
+ </select>
+ </div>
+ </div>
- <div class="form-group row">
- <label for="crushDeviceClass"
- class="cd-col-form-label">
- <ng-container i18n>Crush device class</ng-container>
- <cd-helper [html]="tooltips.crushDeviceClass">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <select class="form-control custom-select"
- id="crushDeviceClass"
- name="crushDeviceClass"
- formControlName="crushDeviceClass">
- <option ngValue=""
- i18n>any</option>
- <option *ngFor="let deviceClass of devices"
- [ngValue]="deviceClass">
- {{ deviceClass }}
- </option>
- </select>
+ <div class="form-group row">
+ <label for="directory"
+ class="cd-col-form-label">
+ <ng-container i18n>Directory</ng-container>
+ <cd-helper [html]="tooltips.directory">
+ </cd-helper>
+ </label>
+ <div class="cd-col-form-input">
+ <input type="text"
+ id="directory"
+ name="directory"
+ class="form-control"
+ placeholder="Path..."
+ formControlName="directory">
+ </div>
+ </div>
</div>
- </div>
- <div class="form-group row">
- <label for="directory"
- class="cd-col-form-label">
- <ng-container i18n>Directory</ng-container>
- <cd-helper [html]="tooltips.directory">
- </cd-helper>
- </label>
- <div class="cd-col-form-input">
- <input type="text"
- id="directory"
- name="directory"
- class="form-control"
- placeholder="Path..."
- formControlName="directory">
+ <div class="modal-footer">
+ <cd-submit-button (submitAction)="onSubmit()"
+ i18n="form action button|Example: Create Pool@@formActionButton"
+ [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+ <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
</div>
- </div>
- </div>
-
- <div class="modal-footer">
- <cd-submit-button (submitAction)="onSubmit()"
- i18n="form action button|Example: Create Pool@@formActionButton"
- [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
- <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
- </div>
-</form>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container i18n="form title|Example: Create Pool@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form #frm="ngForm"
- [formGroup]="formGroup"
- novalidate>
- <div class="modal-body">
+ <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 custom-select"
+ 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>
- <!-- 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 custom-select"
- 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>
+ <!-- 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 custom-select"
+ 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>
- <!-- 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 custom-select"
- 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 class="modal-footer">
+ <cd-submit-button (submitAction)="onSubmit()"
+ i18n="form action button|Example: Create Pool@@formActionButton"
+ [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+ <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
</div>
- </div>
-
- </div>
- <div class="modal-footer">
- <cd-submit-button (submitAction)="onSubmit()"
- i18n="form action button|Example: Create Pool@@formActionButton"
- [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
- <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
- </div>
-</form>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container i18n="form title|Example: Create Pool@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form #frm="ngForm"
- [formGroup]="formGroup"
- novalidate>
- <div class="modal-body">
+ <ng-container class="modal-content">
+ <form #frm="ngForm"
+ [formGroup]="formGroup"
+ novalidate>
+ <div class="modal-body">
- <!-- Username -->
- <div class="form-group row">
- <label class="cd-col-form-label"
- [ngClass]="{'required': !viewing}"
- for="user"
- i18n>Username</label>
- <div class="cd-col-form-input">
- <input id="user"
- class="form-control"
- type="text"
- *ngIf="viewing"
- [readonly]="true"
- formControlName="user">
- <select id="user"
- class="form-control custom-select"
- formControlName="user"
- *ngIf="!viewing"
- autofocus>
- <option i18n
- *ngIf="userCandidates !== null"
- [ngValue]="null">-- Select a username --</option>
- <option *ngFor="let userCandidate of userCandidates"
- [value]="userCandidate">{{ userCandidate }}</option>
- </select>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('user', frm, 'required')"
- i18n>This field is required.</span>
- </div>
- </div>
+ <!-- Username -->
+
<div class="form-group row">
+ <label class="cd-col-form-label"
+ [ngClass]="{'required': !viewing}"
+ for="user"
+ i18n>Username</label>
+
<div class="cd-col-form-input">
+ <input id="user"
+ class="form-control"
+ type="text"
+ *ngIf="viewing"
+ [readonly]="true"
+ formControlName="user">
+ <select id="user"
+ class="form-control custom-select"
+ formControlName="user"
+ *ngIf="!viewing"
+ autofocus>
+ <option i18n
+ *ngIf="userCandidates !== null"
+ [ngValue]="null">-- Select a username --</option>
+ <option *ngFor="let userCandidate of userCandidates"
+ [value]="userCandidate">{{ userCandidate }}</option>
+ </select>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('user', frm, 'required')"
+ i18n>This field is required.</span>
+ </div>
+ </div>
- <!-- Auto-generate key -->
- <div class="form-group row"
- *ngIf="!viewing">
- <div class="cd-col-form-offset">
- <div class="custom-control custom-checkbox">
- <input class="custom-control-input"
- id="generate_key"
- type="checkbox"
- formControlName="generate_key">
- <label class="custom-control-label"
- for="generate_key"
- i18n>Auto-generate key</label>
+ <!-- Auto-generate key -->
+ <div class="form-group row"
+ *ngIf="!viewing">
+ <div class="cd-col-form-offset">
+ <div class="custom-control custom-checkbox">
+ <input class="custom-control-input"
+ id="generate_key"
+ type="checkbox"
+ formControlName="generate_key">
+ <label class="custom-control-label"
+ for="generate_key"
+ i18n>Auto-generate key</label>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <!-- Access key -->
- <div class="form-group row"
- *ngIf="!formGroup.getValue('generate_key')">
- <label class="cd-col-form-label"
- [ngClass]="{'required': !viewing}"
- for="access_key"
- i18n>Access key</label>
- <div class="cd-col-form-input">
- <div class="input-group">
- <input id="access_key"
- class="form-control"
- type="password"
- [readonly]="viewing"
- formControlName="access_key">
- <span class="input-group-append">
- <button type="button"
- class="btn btn-light"
- cdPasswordButton="access_key">
- </button>
- <button type="button"
- class="btn btn-light"
- cdCopy2ClipboardButton="access_key">
- </button>
- </span>
+ <!-- Access key -->
+ <div class="form-group row"
+ *ngIf="!formGroup.getValue('generate_key')">
+ <label class="cd-col-form-label"
+ [ngClass]="{'required': !viewing}"
+ for="access_key"
+ i18n>Access key</label>
+ <div class="cd-col-form-input">
+ <div class="input-group">
+ <input id="access_key"
+ class="form-control"
+ type="password"
+ [readonly]="viewing"
+ formControlName="access_key">
+ <span class="input-group-append">
+ <button type="button"
+ class="btn btn-light"
+ cdPasswordButton="access_key">
+ </button>
+ <button type="button"
+ class="btn btn-light"
+ cdCopy2ClipboardButton="access_key">
+ </button>
+ </span>
+ </div>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('access_key', frm, 'required')"
+ i18n>This field is required.</span>
+ </div>
</div>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('access_key', frm, 'required')"
- i18n>This field is required.</span>
- </div>
- </div>
- <!-- Secret key -->
- <div class="form-group row"
- *ngIf="!formGroup.getValue('generate_key')">
- <label class="cd-col-form-label"
- [ngClass]="{'required': !viewing}"
- for="secret_key"
- i18n>Secret key</label>
- <div class="cd-col-form-input">
- <div class="input-group">
- <input id="secret_key"
- class="form-control"
- type="password"
- [readonly]="viewing"
- formControlName="secret_key">
- <span class="input-group-append">
- <button type="button"
- class="btn btn-light"
- cdPasswordButton="secret_key">
- </button>
- <button type="button"
- class="btn btn-light"
- cdCopy2ClipboardButton="secret_key">
- </button>
- </span>
+ <!-- Secret key -->
+ <div class="form-group row"
+ *ngIf="!formGroup.getValue('generate_key')">
+ <label class="cd-col-form-label"
+ [ngClass]="{'required': !viewing}"
+ for="secret_key"
+ i18n>Secret key</label>
+ <div class="cd-col-form-input">
+ <div class="input-group">
+ <input id="secret_key"
+ class="form-control"
+ type="password"
+ [readonly]="viewing"
+ formControlName="secret_key">
+ <span class="input-group-append">
+ <button type="button"
+ class="btn btn-light"
+ cdPasswordButton="secret_key">
+ </button>
+ <button type="button"
+ class="btn btn-light"
+ cdCopy2ClipboardButton="secret_key">
+ </button>
+ </span>
+ </div>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('secret_key', frm, 'required')"
+ i18n>This field is required.</span>
+ </div>
</div>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('secret_key', frm, 'required')"
- i18n>This field is required.</span>
+
</div>
- </div>
- </div>
- <div class="modal-footer">
- <cd-submit-button *ngIf="!viewing"
- (submitAction)="onSubmit()"
- i18n="form action button|Example: Create Pool@@formActionButton"
- [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
- <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
- </div>
-</form>
+ <div class="modal-footer">
+ <cd-submit-button *ngIf="!viewing"
+ (submitAction)="onSubmit()"
+ i18n="form action button|Example: Create Pool@@formActionButton"
+ [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+ <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+ </div>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form #frm="ngForm"
- [formGroup]="formGroup"
- novalidate>
- <div class="modal-body">
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container i18n="form title|Example: Create Pool@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
- <!-- Username -->
- <div class="form-group row">
- <label class="cd-col-form-label"
- for="uid"
- i18n>Username</label>
- <div class="cd-col-form-input">
- <input id="uid"
- class="form-control"
- type="text"
- formControlName="uid"
- [readonly]="true">
- </div>
- </div>
-
- <!-- Subuser -->
- <div class="form-group row">
- <label class="cd-col-form-label"
- [ngClass]="{'required': !editing}"
- for="subuid"
- i18n>Subuser</label>
- <div class="cd-col-form-input">
- <input id="subuid"
- class="form-control"
- type="text"
- formControlName="subuid"
- [readonly]="editing"
- autofocus>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('subuid', frm, 'required')"
- i18n>This field is required.</span>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
- i18n>The chosen subuser ID is already in use.</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 custom-select"
- formControlName="perm">
- <option i18n
- [ngValue]="null">-- Select a permission --</option>
- <option *ngFor="let perm of ['read', 'write']"
- [value]="perm">
- {{ perm }}
- </option>
- <option i18n
- value="read-write">read, write</option>
- <option i18n
- value="full-control">full</option>
- </select>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('perm', frm, 'required')"
- i18n>This field is required.</span>
- </div>
- </div>
+ <ng-container class="modal-content">
+ <form #frm="ngForm"
+ [formGroup]="formGroup"
+ novalidate>
+ <div class="modal-body">
- <!-- Swift key -->
- <fieldset *ngIf="!editing">
- <legend i18n>Swift key</legend>
-
- <!-- Auto-generate key -->
- <div class="form-group row">
- <div class="cd-col-form-offset">
- <div class="custom-control custom-checkbox">
- <input class="custom-control-input"
- id="generate_secret"
- type="checkbox"
- formControlName="generate_secret">
- <label class="custom-control-label"
- for="generate_secret"
- i18n>Auto-generate secret</label>
+ <!-- Username -->
+ <div class="form-group row">
+ <label class="cd-col-form-label"
+ for="uid"
+ i18n>Username</label>
+ <div class="cd-col-form-input">
+ <input id="uid"
+ class="form-control"
+ type="text"
+ formControlName="uid"
+ [readonly]="true">
</div>
</div>
- </div>
- <!-- Secret key -->
- <div class="form-group row"
- *ngIf="!editing && !formGroup.getValue('generate_secret')">
- <label class="cd-col-form-label required"
- for="secret_key"
- i18n>Secret key</label>
- <div class="cd-col-form-input">
- <div class="input-group">
- <input id="secret_key"
+ <!-- Subuser -->
+ <div class="form-group row">
+ <label class="cd-col-form-label"
+ [ngClass]="{'required': !editing}"
+ for="subuid"
+ i18n>Subuser</label>
+ <div class="cd-col-form-input">
+ <input id="subuid"
class="form-control"
- type="password"
- formControlName="secret_key">
- <span class="input-group-append">
- <button type="button"
- class="btn btn-light"
- cdPasswordButton="secret_key">
- </button>
- <button type="button"
- class="btn btn-light"
- cdCopy2ClipboardButton="secret_key">
- </button>
- </span>
+ type="text"
+ formControlName="subuid"
+ [readonly]="editing"
+ autofocus>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('subuid', frm, 'required')"
+ i18n>This field is required.</span>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
+ i18n>The chosen subuser ID is already in use.</span>
</div>
- <span class="invalid-feedback"
- *ngIf="formGroup.showError('secret_key', frm, 'required')"
- i18n>This field is required.</span>
</div>
- </div>
- </fieldset>
+ <!-- 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 custom-select"
+ formControlName="perm">
+ <option i18n
+ [ngValue]="null">-- Select a permission --</option>
+ <option *ngFor="let perm of ['read', 'write']"
+ [value]="perm">
+ {{ perm }}
+ </option>
+ <option i18n
+ value="read-write">read, write</option>
+ <option i18n
+ value="full-control">full</option>
+ </select>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('perm', frm, 'required')"
+ i18n>This field is required.</span>
+ </div>
+ </div>
+
+ <!-- Swift key -->
+ <fieldset *ngIf="!editing">
+ <legend i18n>Swift key</legend>
- </div>
- <div class="modal-footer">
- <cd-submit-button (submitAction)="onSubmit()"
- i18n="form action button|Example: Create Pool@@formActionButton"
- [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
- <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
- </div>
-</form>
+ <!-- Auto-generate key -->
+ <div class="form-group row">
+ <div class="cd-col-form-offset">
+ <div class="custom-control custom-checkbox">
+ <input class="custom-control-input"
+ id="generate_secret"
+ type="checkbox"
+ formControlName="generate_secret">
+ <label class="custom-control-label"
+ for="generate_secret"
+ i18n>Auto-generate secret</label>
+ </div>
+ </div>
+ </div>
+
+ <!-- Secret key -->
+ <div class="form-group row"
+ *ngIf="!editing && !formGroup.getValue('generate_secret')">
+ <label class="cd-col-form-label required"
+ for="secret_key"
+ i18n>Secret key</label>
+ <div class="cd-col-form-input">
+ <div class="input-group">
+ <input id="secret_key"
+ class="form-control"
+ type="password"
+ formControlName="secret_key">
+ <span class="input-group-append">
+ <button type="button"
+ class="btn btn-light"
+ cdPasswordButton="secret_key">
+ </button>
+ <button type="button"
+ class="btn btn-light"
+ cdCopy2ClipboardButton="secret_key">
+ </button>
+ </span>
+ </div>
+ <span class="invalid-feedback"
+ *ngIf="formGroup.showError('secret_key', frm, 'required')"
+ i18n>This field is required.</span>
+ </div>
+ </div>
+
+ </fieldset>
+
+ </div>
+ <div class="modal-footer">
+ <cd-submit-button (submitAction)="onSubmit()"
+ i18n="form action button|Example: Create Pool@@formActionButton"
+ [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+ <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+ </div>
+ </form>
+ </ng-container>
+</cd-modal>
-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+ <ng-container i18n="form title|Example: Create Pool@@formTitle"
+ class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}
+ </ng-container>
- <button type="button"
- class="close float-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<div class="modal-body">
- <form novalidate>
-
- <!-- Username -->
- <div class="form-group row">
- <label class="cd-col-form-label"
- for="user"
- i18n>Username</label>
- <div class="cd-col-form-inpu">
- <input id="user"
- name="user"
- class="form-control"
- type="text"
- [readonly]="true"
- [(ngModel)]="user">
- </div>
- </div>
+ <ng-container class="modal-content">
+ <div class="modal-body">
+ <form novalidate>
+ <!-- Username -->
+ <div class="form-group row">
+ <label class="cd-col-form-label"
+ for="user"
+ i18n>Username</label>
+ <div class="cd-col-form-inpu">
+ <input id="user"
+ name="user"
+ class="form-control"
+ type="text"
+ [readonly]="true"
+ [(ngModel)]="user">
+ </div>
+ </div>
- <!-- Secret key -->
- <div class="form-group row">
- <label class="cd-col-form-label"
- for="secret_key"
- i18n>Secret key</label>
- <div class="cd-col-form-inpu">
- <div class="input-group">
- <input id="secret_key"
- name="secret_key"
- class="form-control"
- type="password"
- [(ngModel)]="secret_key"
- [readonly]="true">
- <span class="input-group-append">
- <button type="button"
- class="btn btn-light"
- cdPasswordButton="secret_key">
- </button>
- <button type="button"
- class="btn btn-light"
- cdCopy2ClipboardButton="secret_key">
- </button>
- </span>
+ <!-- Secret key -->
+ <div class="form-group row">
+ <label class="cd-col-form-label"
+ for="secret_key"
+ i18n>Secret key</label>
+ <div class="cd-col-form-inpu">
+ <div class="input-group">
+ <input id="secret_key"
+ name="secret_key"
+ class="form-control"
+ type="password"
+ [(ngModel)]="secret_key"
+ [readonly]="true">
+ <span class="input-group-append">
+ <button type="button"
+ class="btn btn-light"
+ cdPasswordButton="secret_key">
+ </button>
+ <button type="button"
+ class="btn btn-light"
+ cdCopy2ClipboardButton="secret_key">
+ </button>
+ </span>
+ </div>
+ </div>
</div>
- </div>
+ </form>
</div>
- </form>
-</div>
-<div class="modal-footer">
- <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-</div>
+ <div class="modal-footer">
+ <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+ </div>
+ </ng-container>
+</cd-modal>
.cd-col-form-input {
@extend .col-lg-8;
}
+
+ .cd-col-form-offset {
+ @extend .offset-lg-4;
+ }
}
/* Card */
projects / ceph.git / commitdiff