Ontica/Empiria.Land.Intranet

<form [formGroup]="form" empNgFormKeyDownEnter autocomplete="off" class="form-section"
  [class.text-white]="isRequiredAction"
  [empNgSpinnerHost]="spinner">

  <emp-ng-spinner #spinner [visible]="submitted && !isRequiredAction">

  </emp-ng-spinner>

  <div class="fx-column-container" [ngClass]="isRequiredAction ? 'fx-gap' : 'fx-gap-half'"
  [class.label-no-padding]="!isRequiredAction">

    <div class="fx-item">
      <label for="userID">Cuenta de acceso:</label>
      <input type="text" id="userID" name="userID" autocomplete="off" class="text-box"
        formControlName="userID"
        [class.invalid-control]="formHelper.isControlInvalid(form.controls.userID)">
    </div>

    <div class="fx-item">
      <label for="currentPassword">Contraseña actual:</label>
      <input [type]="showPassword ? 'text' : 'password'"
        id="current-password" name="current-password" autocomplete="current-password" class="text-box"
        formControlName="currentPassword"
        [class.invalid-control]="formHelper.isControlInvalid(form.controls.currentPassword)">
    </div>

    <mat-divider class="horizontal-slim"
      [class.white]="isRequiredAction"
      [style.margin-top.px]="4">

    </mat-divider>

    <div class="fx-item">
      <label for="new-password">Nueva contraseña:</label>
      <input [type]="showPassword ? 'text' : 'password'"
        id="new-password" name="newPassword" autocomplete="new-password" class="text-box"
        formControlName="newPassword"
        [class.invalid-control]="formHelper.isControlInvalid(form.controls.newPassword)">
    </div>

    <div class="fx-item">
      <label for="confirmNewPassword">
        Confirmar nueva contraseña:
        <span class="warning-text" *ngIf="form.errors?.matchOther && !isRequiredAction">
          (Las contraseñas no coinciden)
        </span>
      </label>
      <input [type]="showPassword ? 'text' : 'password'"
        id="confirmNewPassword" name="confirmNewPassword" autocomplete="new-password" class="text-box"
        formControlName="confirmNewPassword"
        [class.invalid-control]="formHelper.isControlInvalid(form.controls.confirmNewPassword) ||
                                 form.errors?.matchOther">
    </div>

    <div class="fx-item" *ngIf="!isRequiredAction">

      <mat-checkbox
        [checked]="showPassword"
        (click)="$event.stopPropagation"
        (change)="showPassword = !showPassword"
        [color]="isRequiredAction ? 'warn' : 'primary'">
        Mostrar contraseñas
      </mat-checkbox>

    </div>


    <ng-container *ngIf="!isRequiredAction">

      <ng-container *ngTemplateOutlet="authenticationError">

      </ng-container>

      <mat-divider class="horizontal-slim"
        [style.margin-bottom.px]="0">

      </mat-divider>

    </ng-container>


    <div class="fx-row-container fx-space-between fx-items-center"
      [style.margin]="isRequiredAction ? '0.5rem 0' : null">

      <div class="fx-item-none">

        <mat-checkbox *ngIf="isRequiredAction"
          [checked]="showPassword"
          (click)="$event.stopPropagation"
          (change)="showPassword = !showPassword"
          [color]="isRequiredAction ? 'warn' : 'primary'">
          Mostrar contraseñas
        </mat-checkbox>

      </div>

      <div class="fx-item-none">

        <button type="submit"
          [class.btn]="!formHelper.isFormReady(form)"
          [class.btn-action]="formHelper.isFormReady(form) && !isRequiredAction"
          [class.btn-warning]="formHelper.isFormReady(form) && isRequiredAction"
          [class.spinner]="submitted && isRequiredAction"
          (click)="onUpdateCredentialsClicked()">
          Cambiar contraseña
        </button>

      </div>

    </div>

    <ng-container *ngIf="isRequiredAction">

      <ng-container *ngTemplateOutlet="authenticationError">

      </ng-container>

    </ng-container>

  </div>

</form>


<ng-template #authenticationError>

  <div [ngClass]="isRequiredAction ? 'authentication-error' : null">

    <ng-container *ngIf="form.controls.newPassword.errors ||
                         (isRequiredAction && form.errors?.matchOther)">

      <div [ngClass]="isRequiredAction ? 'inline-warning' : 'inline-info'"
        [innerHTML]="newPasswordErrorsText"
        [style.margin-bottom.px]="0">

      </div>

    </ng-container>

  </div>

</ng-template>