git.apps.os.sepia.ceph.com Git - ceph-ci.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
   5   <button type="button"
   6           class="close float-right"
   7           aria-label="Close"
   8           (click)="bsModalRef.hide()">
   9     <span aria-hidden="true">&times;</span>
  10   </button>
  11 </div>
  12 <form #frm="ngForm"
  13       [formGroup]="formGroup"
  14       novalidate>
  15   <div class="modal-body">
  16
  17     <!-- Username -->
  18     <div class="form-group row">
  19       <label class="col-form-label col-sm-3"
  20              for="user">
  21         <ng-container i18n>Username</ng-container>
  22         <span class="required"
  23               *ngIf="!viewing">
  24         </span>
  25       </label>
  26       <div class="col-sm-9">
  27         <input id="user"
  28                class="form-control"
  29                type="text"
  30                *ngIf="viewing"
  31                [readonly]="true"
  32                formControlName="user">
  33         <select id="user"
  34                 class="form-control"
  35                 formControlName="user"
  36                 *ngIf="!viewing"
  37                 autofocus>
  38           <option i18n
  39                   *ngIf="userCandidates !== null"
  40                   [ngValue]="null">-- Select a username --</option>
  41           <option *ngFor="let userCandidate of userCandidates"
  42                   [value]="userCandidate">{{ userCandidate }}</option>
  43         </select>
  44         <span class="invalid-feedback"
  45               *ngIf="formGroup.showError('user', frm, 'required')"
  46               i18n>This field is required.</span>
  47       </div>
  48     </div>
  49
  50     <!-- Auto-generate key -->
  51     <div class="form-group row"
  52          *ngIf="!viewing">
  53       <div class="offset-sm-3 col-sm-9">
  54         <div class="custom-control custom-checkbox">
  55           <input class="custom-control-input"
  56                  id="generate_key"
  57                  type="checkbox"
  58                  formControlName="generate_key">
  59           <label class="custom-control-label"
  60                  for="generate_key"
  61                  i18n>Auto-generate key</label>
  62         </div>
  63       </div>
  64     </div>
  65
  66     <!-- Access key -->
  67     <div class="form-group row"
  68          *ngIf="!formGroup.getValue('generate_key')">
  69       <label class="col-form-label col-sm-3"
  70              for="access_key">
  71         <ng-container i18n>Access key</ng-container>
  72         <span class="required"
  73               *ngIf="!viewing">
  74         </span>
  75       </label>
  76       <div class="col-sm-9">
  77         <div class="input-group">
  78           <input id="access_key"
  79                  class="form-control"
  80                  type="password"
  81                  [readonly]="viewing"
  82                  formControlName="access_key">
  83           <span class="input-group-append">
  84             <button type="button"
  85                     class="btn btn-light"
  86                     cdPasswordButton="access_key">
  87             </button>
  88             <button type="button"
  89                     class="btn btn-light"
  90                     cdCopy2ClipboardButton="access_key">
  91             </button>
  92           </span>
  93         </div>
  94         <span class="invalid-feedback"
  95               *ngIf="formGroup.showError('access_key', frm, 'required')"
  96               i18n>This field is required.</span>
  97       </div>
  98     </div>
  99
 100     <!-- Secret key -->
 101     <div class="form-group row"
 102          *ngIf="!formGroup.getValue('generate_key')">
 103       <label class="col-form-label col-sm-3"
 104              for="secret_key">
 105         <ng-container i18n>Secret key</ng-container>
 106         <span class="required"
 107               *ngIf="!viewing">
 108         </span>
 109       </label>
 110       <div class="col-sm-9">
 111         <div class="input-group">
 112           <input id="secret_key"
 113                  class="form-control"
 114                  type="password"
 115                  [readonly]="viewing"
 116                  formControlName="secret_key">
 117           <span class="input-group-append">
 118             <button type="button"
 119                     class="btn btn-light"
 120                     cdPasswordButton="secret_key">
 121             </button>
 122             <button type="button"
 123                     class="btn btn-light"
 124                     cdCopy2ClipboardButton="secret_key">
 125             </button>
 126           </span>
 127         </div>
 128         <span class="invalid-feedback"
 129               *ngIf="formGroup.showError('secret_key', frm, 'required')"
 130               i18n>This field is required.</span>
 131       </div>
 132     </div>
 133
 134   </div>
 135   <div class="modal-footer">
 136     <cd-submit-button *ngIf="!viewing"
 137                       (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>