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

   1 <div class="cd-col-form">
   2   <form #frm="ngForm"
   3         [formGroup]="userForm"
   4         novalidate>
   5     <div class="card">
   6       <div i18n="form title|Example: Create Pool@@formTitle"
   7            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
   8
   9       <div class="card-body">
  10         <!-- Old password -->
  11         <div class="form-group row">
  12           <label class="cd-col-form-label required"
  13                  for="oldpassword"
  14                  i18n>Old password</label>
  15           <div class="cd-col-form-input">
  16             <div class="input-group">
  17               <input class="form-control"
  18                      type="password"
  19                      placeholder="Old password..."
  20                      id="oldpassword"
  21                      formControlName="oldpassword"
  22                      autocomplete="off"
  23                      autofocus>
  24               <span class="input-group-append">
  25                 <button class="btn btn-light"
  26                         cdPasswordButton="oldpassword">
  27                 </button>
  28               </span>
  29             </div>
  30             <span class="invalid-feedback"
  31                   *ngIf="userForm.showError('oldpassword', frm, 'required')"
  32                   i18n>This field is required.</span>
  33             <span class="invalid-feedback"
  34                   *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
  35                   i18n>The old and new passwords must be different.</span>
  36           </div>
  37         </div>
  38
  39         <!-- New password -->
  40         <div class="form-group row">
  41           <label class="cd-col-form-label"
  42                  for="newpassword">
  43             <span class="required"
  44                   i18n>New password</span>
  45             <cd-helper class="text-pre"
  46                        html="{{ passwordPolicyHelpText }}">
  47             </cd-helper>
  48           </label>
  49           <div class="cd-col-form-input">
  50             <div class="input-group">
  51               <input class="form-control"
  52                      type="password"
  53                      placeholder="Password..."
  54                      id="newpassword"
  55                      autocomplete="new-password"
  56                      formControlName="newpassword">
  57               <span class="input-group-append">
  58                 <button type="button"
  59                         class="btn btn-light"
  60                         cdPasswordButton="newpassword">
  61                 </button>
  62               </span>
  63             </div>
  64             <div class="password-strength-level">
  65               <div class="{{ passwordStrengthLevelClass }}"
  66                    data-toggle="tooltip"
  67                    title="{{ passwordValuation }}">
  68               </div>
  69             </div>
  70             <span class="invalid-feedback"
  71                   *ngIf="userForm.showError('newpassword', frm, 'required')"
  72                   i18n>This field is required.</span>
  73             <span class="invalid-feedback"
  74                   *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
  75                   i18n>The old and new passwords must be different.</span>
  76             <span class="invalid-feedback"
  77                   *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
  78               {{ passwordValuation }}
  79             </span>
  80           </div>
  81         </div>
  82
  83         <!-- Confirm new password -->
  84         <div class="form-group row">
  85           <label class="cd-col-form-label required"
  86                  for="confirmnewpassword"
  87                  i18n>Confirm new password</label>
  88           <div class="cd-col-form-input">
  89             <div class="input-group">
  90               <input class="form-control"
  91                      type="password"
  92                      autocomplete="off"
  93                      placeholder="Confirm new password..."
  94                      id="confirmnewpassword"
  95                      formControlName="confirmnewpassword">
  96               <span class="input-group-append">
  97                 <button class="btn btn-light"
  98                         cdPasswordButton="confirmnewpassword">
  99                 </button>
 100               </span>
 101             </div>
 102             <span class="invalid-feedback"
 103                   *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
 104                   i18n>This field is required.</span>
 105             <span class="invalid-feedback"
 106                   *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
 107                   i18n>Password confirmation doesn't match the new password.</span>
 108           </div>
 109         </div>
 110       </div>
 111
 112       <div class="card-footer">
 113         <div class="button-group text-right">
 114           <cd-submit-button (submitAction)="onSubmit()"
 115                             [form]="userForm"
 116                             i18n="form action button|Example: Create Pool@@formActionButton">
 117             {{ action | titlecase }} {{ resource | upperFirst }}
 118           </cd-submit-button>
 119         </div>
 120       </div>
 121     </div>
 122   </form>
 123 </div>