aConnect-UX/src/app/user-management/reset-password-modal/reset-password-modal.component.html

<div class="modal fade" id="resetPasswordModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
          {{ 'resetPassword' | translate }}
        </h5>
        <button type="button" class="btn-close" (click)="closeModal()"></button>
      </div>

      <div class="modal-body">
        <form [formGroup]="resetPasswordForm">

          <div class="mb-3">
            <label class="form-label">{{ 'userID' | translate }}</label>
            <input [readonly]="true" class="form-control" formControlName="userId" />
          </div>

          <div class="mb-3">
            <label class="form-label">{{ 'enterNewPassword' | translate }}</label>
          
            <div class="password-wrapper">
              <input class="form-control" formControlName="newPassword"  placeholder="{{'enterNewPassword' | translate}}" [type]="newPasswordType" autocomplete="off" appNoWhitespaces />
          
              <app-password-hide-show #newPasswordPsh class="password-eye align-items-stretch" [showPassword]="true"
                (onEyeClick)="togglePasswordType()">
              </app-password-hide-show>
            </div>
            <div class="text-danger" *ngIf="resetPasswordForm.get('newPassword')?.touched ">
              <div *ngIf="resetPasswordForm.get('newPassword')?.hasError('required')">
                {{ 'fieldRequired' | translate }}
              </div>
              <div *ngIf="resetPasswordForm.get('newPassword')?.hasError('pattern')">
                {{ 'passwordPattern' | translate }}
              </div>
            
            </div>
          </div>


          <div class="mb-3">
            <label class="form-label">{{ 'confirmPassword' | translate }}</label>
          
            <div class="password-wrapper">
              <input class="form-control" formControlName="confirmPassword" placeholder="{{'confirmPassword' | translate}}" [type]="confirmPasswordType" autocomplete="off" appNoWhitespaces />
          
              <app-password-hide-show #confirmPasswordPsh class="password-eye align-items-stretch" [showPassword]="true"
                (onEyeClick)="toggleConfirmPasswordType()">
              </app-password-hide-show>
            </div>
            <div class="text-danger" *ngIf="resetPasswordForm.get('confirmPassword')?.touched ">
              <div *ngIf="resetPasswordForm.get('confirmPassword')?.hasError('required')">
                {{ 'fieldRequired' | translate }}
              </div>
              <div *ngIf="resetPasswordForm.hasError('passwordMismatch')">
                {{ 'passwordsDoNotMatch' | translate }}
              </div>
            </div>
          </div>

        </form>
      </div>

    <div class="modal-footer d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-outline-secondary btn-sm px-4" (click)="closeModal()">
            {{ 'cancel' | translate }}
        </button>
    
        <button type="button" class="btn btn-primary btn-sm px-4" [disabled]="resetPasswordForm.invalid" (click)="submit()">
            {{ 'save' | translate }}
        </button>
    </div>


    </div>
  </div>
</div>