git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <div class="modal-header">
   2   <h4 i18n="form title|Example: Create Pool@@formTitle"
   3       class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
   4   <button type="button"
   5           class="close float-right"
   6           aria-label="Close"
   7           (click)="bsModalRef.hide()">
   8     <span aria-hidden="true">&times;</span>
   9   </button>
  10 </div>
  11 <form #frm="ngForm"
  12       [formGroup]="formGroup"
  13       novalidate>
  14   <div class="modal-body">
  15
  16     <!-- Username -->
  17     <div class="form-group row">
  18       <label class="cd-col-form-label"
  19              for="uid"
  20              i18n>Username</label>
  21       <div class="cd-col-form-input">
  22         <input id="uid"
  23                class="form-control"
  24                type="text"
  25                formControlName="uid"
  26                [readonly]="true">
  27       </div>
  28     </div>
  29
  30     <!-- Subuser -->
  31     <div class="form-group row">
  32       <label class="cd-col-form-label"
  33              for="subuid">
  34         <ng-container i18n>Subuser</ng-container>
  35         <span class="required"
  36               *ngIf="!editing">
  37         </span>
  38       </label>
  39       <div class="cd-col-form-input">
  40         <input id="subuid"
  41                class="form-control"
  42                type="text"
  43                formControlName="subuid"
  44                [readonly]="editing"
  45                autofocus>
  46         <span class="invalid-feedback"
  47               *ngIf="formGroup.showError('subuid', frm, 'required')"
  48               i18n>This field is required.</span>
  49         <span class="invalid-feedback"
  50               *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
  51               i18n>The chosen subuser ID is already in use.</span>
  52       </div>
  53     </div>
  54
  55     <!-- Permission -->
  56     <div class="form-group row">
  57       <label class="cd-col-form-label"
  58              for="perm">
  59         <ng-container i18n>Permission</ng-container>
  60         <span class="required"></span>
  61       </label>
  62       <div class="cd-col-form-input">
  63         <select id="perm"
  64                 class="form-control custom-select"
  65                 formControlName="perm">
  66           <option i18n
  67                   [ngValue]="null">-- Select a permission --</option>
  68           <option *ngFor="let perm of ['read', 'write']"
  69                   [value]="perm">
  70             {{ perm }}
  71           </option>
  72           <option i18n
  73                   value="read-write">read, write</option>
  74           <option i18n
  75                   value="full-control">full</option>
  76         </select>
  77         <span class="invalid-feedback"
  78               *ngIf="formGroup.showError('perm', frm, 'required')"
  79               i18n>This field is required.</span>
  80       </div>
  81     </div>
  82
  83     <!-- Swift key -->
  84     <fieldset *ngIf="!editing">
  85       <legend i18n>Swift key</legend>
  86
  87       <!-- Auto-generate key -->
  88       <div class="form-group row">
  89         <div class="cd-col-form-offset">
  90           <div class="custom-control custom-checkbox">
  91             <input class="custom-control-input"
  92                    id="generate_secret"
  93                    type="checkbox"
  94                    formControlName="generate_secret">
  95             <label class="custom-control-label"
  96                    for="generate_secret"
  97                    i18n>Auto-generate secret</label>
  98           </div>
  99         </div>
 100       </div>
 101
 102       <!-- Secret key -->
 103       <div class="form-group row"
 104            *ngIf="!editing && !formGroup.getValue('generate_secret')">
 105         <label class="cd-col-form-label"
 106                for="secret_key">
 107           <ng-container i18n>Secret key</ng-container>
 108           <span class="required"></span>
 109         </label>
 110         <div class="cd-col-form-input">
 111           <div class="input-group">
 112             <input id="secret_key"
 113                    class="form-control"
 114                    type="password"
 115                    formControlName="secret_key">
 116             <span class="input-group-append">
 117               <button type="button"
 118                       class="btn btn-light"
 119                       cdPasswordButton="secret_key">
 120               </button>
 121               <button type="button"
 122                       class="btn btn-light"
 123                       cdCopy2ClipboardButton="secret_key">
 124               </button>
 125             </span>
 126           </div>
 127           <span class="invalid-feedback"
 128                 *ngIf="formGroup.showError('secret_key', frm, 'required')"
 129                 i18n>This field is required.</span>
 130         </div>
 131       </div>
 132
 133     </fieldset>
 134
 135   </div>
 136   <div class="modal-footer">
 137     <cd-submit-button (submitAction)="onSubmit()"
 138                       i18n="form action button|Example: Create Pool@@formActionButton"
 139                       [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 140     <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
 141   </div>
 142 </form>