-<div class="modal-header">
- <h4 i18n="form title|Example: Create Pool@@formTitle"
- class="modal-title pull-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
- <button type="button"
- class="close pull-right"
- aria-label="Close"
- (click)="bsModalRef.hide()">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<form class="form-horizontal"
- #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"
- [ngClass]="{'has-error': formGroup.showError('uid', frm)}">
- <label class="control-label col-sm-3"
- for="uid"
- i18n>Username</label>
- <div class="col-sm-9">
- <input id="uid"
- class="form-control"
- type="text"
- formControlName="uid"
- [readonly]="true">
- </div>
- </div>
-
- <!-- Subuser -->
- <div class="form-group"
- [ngClass]="{'has-error': formGroup.showError('subuid', frm)}">
- <label class="control-label col-sm-3"
- for="subuid">
- <ng-container i18n>Subuser</ng-container>
- <span class="required"
- *ngIf="!editing">
- </span>
- </label>
- <div class="col-sm-9">
- <input id="subuid"
- class="form-control"
- type="text"
- formControlName="subuid"
- [readonly]="editing"
- autofocus>
- <span class="help-block"
- *ngIf="formGroup.showError('subuid', frm, 'required')"
- i18n>This field is required.</span>
- <span class="help-block"
- *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
- i18n>The chosen subuser ID is already in use.</span>
- </div>
- </div>
-
- <!-- Permission -->
- <div class="form-group"
- [ngClass]="{'has-error': formGroup.showError('perm', frm)}">
- <label class="control-label col-sm-3"
- for="perm">
- <ng-container i18n>Permission</ng-container>
- <span class="required"></span>
- </label>
- <div class="col-sm-9">
- <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>
- <option i18n
- value="read-write">read, write</option>
- <option i18n
- value="full-control">full</option>
- </select>
- <span class="help-block"
- *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">
- <div class="col-sm-offset-3 col-sm-9">
- <div class="checkbox checkbox-primary">
- <input id="generate_secret"
- type="checkbox"
- formControlName="generate_secret">
- <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"
- [ngClass]="{'has-error': formGroup.showError('secret_key', frm)}"
- *ngIf="!editing && !formGroup.getValue('generate_secret')">
- <label class="control-label col-sm-3"
- for="secret_key">
- <ng-container i18n>Secret key</ng-container>
- <span class="required"></span>
- </label>
- <div class="col-sm-9">
- <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-btn">
- <button type="button"
- class="btn btn-default"
- cdPasswordButton="secret_key">
- </button>
- <button type="button"
- class="btn btn-default"
- 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="help-block"
- *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>
projects / ceph.git / blobdiff