<h1 mat-dialog-title>{{'CHANGE_PASSWORD' | translate}}</h1>
<div mat-dialog-content>
  <form [formGroup]="changePasswordForm">
    <div class="col-md-12 m-b-10">
      <label class="form-label">{{'EMAIL' | translate}}</label>
      <input formControlName="email" class="form-control" type="email">
    </div>
    <div class="col-md-12 m-b-10">
      <label class="form-label">{{'CURRENT_PASSWORD' | translate}}</label>
      <input autocomplete="new-password" formControlName="oldPasswordPassword" class="form-control" type="password">
      <div
        *ngIf="changePasswordForm.get('oldPasswordPassword').touched && changePasswordForm.get('oldPasswordPassword').errors">
        <div class="text-danger" *ngIf="changePasswordForm.get('oldPasswordPassword').errors?.['required']">
          {{'CURRENT_PASSWORD_IS_REQUIRED' | translate}}
        </div>
      </div>
    </div>
    <div class="col-md-12 m-b-10">
      <label class="form-label">{{'NEW_PASSWORD' | translate}}</label>
      <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
      <div *ngIf="changePasswordForm.get('password').touched && changePasswordForm.get('password').errors">
        <div class="text-danger" *ngIf="changePasswordForm.get('password').errors?.['required']">
          {{'PASSWORD_IS_REQUIRED' | translate}}
        </div>
        <div class="text-danger" *ngIf="changePasswordForm.get('password').errors?.['minlength']">
          {{'YOU_HAVE_TO_ENTER_AT_LEAST_DIGIT' | translate}}
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <label class="form-label">{{'CONFIRM_PASSWORD' | translate}}</label>
      <input autocomplete="new-password" formControlName="confirmPassword" class="form-control" type="password">
      <div
        *ngIf="changePasswordForm.get('confirmPassword').touched && changePasswordForm.get('confirmPassword').errors">
        <div class="text-danger" *ngIf="changePasswordForm.get('confirmPassword').errors?.['required']">
          {{'CONFIRM_PASSWORD_IS_REQUIRED' | translate}}
        </div>
      </div>
      <div class="text-danger"
        *ngIf="changePasswordForm.get('confirmPassword').touched && changePasswordForm.hasError('notSame')">
        {{'PASSWORDS_DO_NOT_MATCH' | translate}}
      </div>
    </div>
  </form>
</div>
<div mat-dialog-actions>
  <button class="btn btn-success btn-sm m-r-10" (click)="changePassword()" cdkFocusInitial>
    <i-feather name="save" class="small-icon"></i-feather>
    {{'SAVE' | translate}}</button>
  <button class="btn btn-danger btn-sm" (click)="onNoClick()"><i-feather name="x-circle" class="small-icon"></i-feather>
    {{'CANCEL' | translate}}</button>
</div>