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

   1 <div>
   2   <h2 i18n>Please set a new password.</h2>
   3   <h4 i18n>You will be redirected to the login page afterwards.</h4>
   4   <form #frm="ngForm"
   5         [formGroup]="userForm"
   6         novalidate>
   7
   8     <!-- Old password -->
   9     <div class="form-group has-feedback">
  10       <div class="input-group">
  11         <input class="form-control"
  12                type="password"
  13                placeholder="Old password..."
  14                id="oldpassword"
  15                formControlName="oldpassword"
  16                autocomplete="new-password"
  17                autofocus>
  18         <span class="input-group-append">
  19           <button class="btn btn-outline-light btn-password"
  20                   cdPasswordButton="oldpassword">
  21           </button>
  22         </span>
  23       </div>
  24       <span class="invalid-feedback"
  25             *ngIf="userForm.showError('oldpassword', frm, 'required')"
  26             i18n>This field is required.</span>
  27       <span class="invalid-feedback"
  28             *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
  29             i18n>The old and new passwords must be different.</span>
  30     </div>
  31
  32     <!-- New password -->
  33     <div class="form-group has-feedback">
  34       <div class="input-group">
  35         <input class="form-control"
  36                type="password"
  37                placeholder="New password..."
  38                id="newpassword"
  39                autocomplete="new-password"
  40                formControlName="newpassword">
  41         <span class="input-group-append">
  42           <button type="button"
  43                   class="btn btn-outline-light btn-password"
  44                   cdPasswordButton="newpassword">
  45           </button>
  46         </span>
  47       </div>
  48       <div class="password-strength-level">
  49         <div class="{{ passwordStrengthLevelClass }}"
  50              data-toggle="tooltip"
  51              title="{{ passwordValuation }}">
  52         </div>
  53       </div>
  54       <span class="invalid-feedback"
  55             *ngIf="userForm.showError('newpassword', frm, 'required')"
  56             i18n>This field is required.</span>
  57       <span class="invalid-feedback"
  58             *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
  59             i18n>The old and new passwords must be different.</span>
  60       <span class="invalid-feedback"
  61             *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
  62         {{ passwordValuation }}
  63       </span>
  64     </div>
  65
  66     <!-- Confirm new password -->
  67     <div class="form-group has-feedback">
  68       <div class="input-group">
  69         <input class="form-control"
  70                type="password"
  71                autocomplete="new-password"
  72                placeholder="Confirm new password..."
  73                id="confirmnewpassword"
  74                formControlName="confirmnewpassword">
  75         <span class="input-group-append">
  76           <button class="btn btn-outline-light btn-password"
  77                   cdPasswordButton="confirmnewpassword">
  78           </button>
  79         </span>
  80       </div>
  81       <span class="invalid-feedback"
  82             *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
  83             i18n>This field is required.</span>
  84       <span class="invalid-feedback"
  85             *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
  86             i18n>Password confirmation doesn't match the new password.</span>
  87     </div>
  88   </form>
  89   <div class="form-footer">
  90     <cd-submit-button class="full-width"
  91                       btnClass="btn-block"
  92                       (submitAction)="onSubmit()"
  93                       [form]="userForm"
  94                       i18n="form action button|Example: Create Pool@@formActionButton">
  95       {{ action | titlecase }} {{ resource | upperFirst }}
  96     </cd-submit-button>
  97     <button class="btn btn-light"
  98             (click)="onCancel()">
  99       <ng-container i18n>Cancel</ng-container>
 100     </button>
 101   </div>
 102 </div>