ceph/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html

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