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

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