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         <button class="btn btn-outline-light btn-password"
  19                 cdPasswordButton="oldpassword">
  20         </button>
  21       </div>
  22       <span class="invalid-feedback"
  23             *ngIf="userForm.showError('oldpassword', frm, 'required')"
  24             i18n>This field is required.</span>
  25       <span class="invalid-feedback"
  26             *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
  27             i18n>The old and new passwords must be different.</span>
  28     </div>
  29
  30     <!-- New password -->
  31     <div class="form-group has-feedback">
  32       <div class="input-group">
  33         <input class="form-control"
  34                type="password"
  35                placeholder="New password..."
  36                id="newpassword"
  37                autocomplete="new-password"
  38                formControlName="newpassword">
  39         <button type="button"
  40                 class="btn btn-outline-light btn-password"
  41                 cdPasswordButton="newpassword">
  42         </button>
  43       </div>
  44       <div class="password-strength-level">
  45         <div class="{{ passwordStrengthLevelClass }}"
  46              data-toggle="tooltip"
  47              title="{{ passwordValuation }}">
  48         </div>
  49       </div>
  50       <span class="invalid-feedback"
  51             *ngIf="userForm.showError('newpassword', frm, 'required')"
  52             i18n>This field is required.</span>
  53       <span class="invalid-feedback"
  54             *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
  55             i18n>The old and new passwords must be different.</span>
  56       <span class="invalid-feedback"
  57             *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
  58         {{ passwordValuation }}
  59       </span>
  60     </div>
  61
  62     <!-- Confirm new password -->
  63     <div class="form-group has-feedback">
  64       <div class="input-group">
  65         <input class="form-control"
  66                type="password"
  67                autocomplete="new-password"
  68                placeholder="Confirm new password..."
  69                id="confirmnewpassword"
  70                formControlName="confirmnewpassword">
  71         <button class="btn btn-outline-light btn-password"
  72                 cdPasswordButton="confirmnewpassword">
  73         </button>
  74       </div>
  75       <span class="invalid-feedback"
  76             *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
  77             i18n>This field is required.</span>
  78       <span class="invalid-feedback"
  79             *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
  80             i18n>Password confirmation doesn't match the new password.</span>
  81     </div>
  82     <cd-form-button-panel (submitActionEvent)="onSubmit()"
  83                           (backActionEvent)="onCancel()"
  84                           [form]="userForm"
  85                           [disabled]="userForm.invalid"
  86                           [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
  87                           wrappingClass="text-right"></cd-form-button-panel>
  88   </form>
  89 </div>