<div>
  <h2 i18n>Please set a new password.</h2>
  <h4 i18n>You will be redirected to the login page afterwards.</h4>
  <form #frm="ngForm"
        [formGroup]="userForm"
        novalidate>

    <!-- Old password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               placeholder="Old password..."
               id="oldpassword"
               formControlName="oldpassword"
               autocomplete="new-password"
               autofocus>
        <button class="btn btn-outline-light btn-password"
                cdPasswordButton="oldpassword">
        </button>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('oldpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
            i18n>The old and new passwords must be different.</span>
    </div>

    <!-- New password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               placeholder="New password..."
               id="newpassword"
               autocomplete="new-password"
               formControlName="newpassword">
        <button type="button"
                class="btn btn-outline-light btn-password"
                cdPasswordButton="newpassword">
        </button>
      </div>
      <div class="password-strength-level">
        <div class="{{ passwordStrengthLevelClass }}"
             data-toggle="tooltip"
             title="{{ passwordValuation }}">
        </div>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
            i18n>The old and new passwords must be different.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
        {{ passwordValuation }}
      </span>
    </div>

    <!-- Confirm new password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               autocomplete="new-password"
               placeholder="Confirm new password..."
               id="confirmnewpassword"
               formControlName="confirmnewpassword">
        <button class="btn btn-outline-light btn-password"
                cdPasswordButton="confirmnewpassword">
        </button>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
            i18n>Password confirmation doesn't match the new password.</span>
    </div>
    <cd-form-button-panel (submitActionEvent)="onSubmit()"
                          (backActionEvent)="onCancel()"
                          [form]="userForm"
                          [disabled]="userForm.invalid"
                          [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                          wrappingClass="text-right"></cd-form-button-panel>
  </form>
</div>
