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