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          [ngClass]="{':invalid': formGroup.showError('user', frm)}">
  20       <label class="col-form-label col-sm-3"
  21              for="user">
  22         <ng-container i18n>Username</ng-container>
  23         <span class="required"
  24               *ngIf="!viewing">
  25         </span>
  26       </label>
  27       <div class="col-sm-9">
  28         <input id="user"
  29                class="form-control"
  30                type="text"
  31                *ngIf="viewing"
  32                [readonly]="true"
  33                formControlName="user">
  34         <select id="user"
  35                 class="form-control"
  36                 formControlName="user"
  37                 *ngIf="!viewing"
  38                 autofocus>
  39           <option i18n
  40                   *ngIf="userCandidates !== null"
  41                   [ngValue]="null">-- Select a username --</option>
  42           <option *ngFor="let userCandidate of userCandidates"
  43                   [value]="userCandidate">{{ userCandidate }}</option>
  44         </select>
  45         <span class="form-text text-muted"
  46               *ngIf="formGroup.showError('user', frm, 'required')"
  47               i18n>This field is required.</span>
  48       </div>
  49     </div>
  50
  51     <!-- Auto-generate key -->
  52     <div class="form-group row"
  53          *ngIf="!viewing">
  54       <div class="offset-sm-3 col-sm-9">
  55         <div class="custom-control custom-checkbox">
  56           <input class="custom-control-input"
  57                  id="generate_key"
  58                  type="checkbox"
  59                  formControlName="generate_key">
  60           <label class="custom-control-label"
  61                  for="generate_key"
  62                  i18n>Auto-generate key</label>
  63         </div>
  64       </div>
  65     </div>
  66
  67     <!-- Access key -->
  68     <div class="form-group row"
  69          [ngClass]="{':invalid': formGroup.showError('access_key', frm)}"
  70          *ngIf="!formGroup.getValue('generate_key')">
  71       <label class="col-form-label col-sm-3"
  72              for="access_key">
  73         <ng-container i18n>Access key</ng-container>
  74         <span class="required"
  75               *ngIf="!viewing">
  76         </span>
  77       </label>
  78       <div class="col-sm-9">
  79         <div class="input-group">
  80           <input id="access_key"
  81                  class="form-control"
  82                  type="password"
  83                  [readonly]="viewing"
  84                  formControlName="access_key">
  85           <span class="input-group-append">
  86             <button type="button"
  87                     class="btn btn-light"
  88                     cdPasswordButton="access_key">
  89             </button>
  90             <button type="button"
  91                     class="btn btn-light"
  92                     cdCopy2ClipboardButton="access_key">
  93             </button>
  94           </span>
  95         </div>
  96         <span class="form-text text-muted"
  97               *ngIf="formGroup.showError('access_key', frm, 'required')"
  98               i18n>This field is required.</span>
  99       </div>
 100     </div>
 101
 102     <!-- Secret key -->
 103     <div class="form-group row"
 104          [ngClass]="{':invalid': formGroup.showError('secret_key', frm)}"
 105          *ngIf="!formGroup.getValue('generate_key')">
 106       <label class="col-form-label col-sm-3"
 107              for="secret_key">
 108         <ng-container i18n>Secret key</ng-container>
 109         <span class="required"
 110               *ngIf="!viewing">
 111         </span>
 112       </label>
 113       <div class="col-sm-9">
 114         <div class="input-group">
 115           <input id="secret_key"
 116                  class="form-control"
 117                  type="password"
 118                  [readonly]="viewing"
 119                  formControlName="secret_key">
 120           <span class="input-group-append">
 121             <button type="button"
 122                     class="btn btn-light"
 123                     cdPasswordButton="secret_key">
 124             </button>
 125             <button type="button"
 126                     class="btn btn-light"
 127                     cdCopy2ClipboardButton="secret_key">
 128             </button>
 129           </span>
 130         </div>
 131         <span class="form-text text-muted"
 132               *ngIf="formGroup.showError('secret_key', frm, 'required')"
 133               i18n>This field is required.</span>
 134       </div>
 135     </div>
 136
 137   </div>
 138   <div class="modal-footer">
 139     <cd-submit-button *ngIf="!viewing"
 140                       (submitAction)="onSubmit()"
 141                       i18n="form action button|Example: Create Pool@@formActionButton"
 142                       [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 143     <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
 144   </div>
 145 </form>