change-password.component.html

<!--
  ~ Copyright (c) 2014-2023 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<div fxLayoutAlign="center">
  <mat-card class="mat-elevation-z6" style="margin-bottom: 20px;">

    <h1 translate>TITLE_CHANGE_PASSWORD</h1>

    <div class="confirmation"
         [hidden]="!(confirmation && !passwordControl.dirty && !newPasswordControl.dirty && !repeatNewPasswordControl.dirty)">
      {{ confirmation }}
    </div>

    <div class="error"
         [hidden]="!(error && !passwordControl.dirty && !newPasswordControl.dirty && !repeatNewPasswordControl.dirty)">
      {{ error }}
    </div>

    <div class="form-container" id="password-form">

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_CURRENT_PASSWORD</mat-label>
        <input id="currentPassword" [formControl]="passwordControl" type="password" matInput
               aria-label="Field to enter the current password"
               placeholder="{{'MANDATORY_CURRENT_PASSWORD' | translate }}">
        <mat-error *ngIf="passwordControl.invalid" translate>MANDATORY_CURRENT_PASSWORD</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_NEW_PASSWORD</mat-label>
        <input #password id="newPassword" [formControl]="newPasswordControl" type="password" matInput
               aria-label="Field for the new password">
        <mat-hint translate>
          <i class="fas fa-exclamation-circle"></i>
          <em style="margin-left:5px;" translate>{{ 'INVALID_PASSWORD_LENGTH' | translate: {length: '5-40'} }}</em>
        </mat-hint>
        <mat-hint align="end">{{password.value?.length || 0}}/40</mat-hint>
        <mat-error *ngIf="newPasswordControl?.invalid && newPasswordControl?.errors.required" translate>
          MANDATORY_NEW_PASSWORD
        </mat-error>
        <mat-error
          *ngIf="newPasswordControl?.invalid && (newPasswordControl?.errors.minlength || newPasswordControl?.errors.maxlength)"
          translate [translateParams]="{length: '5-40'}">INVALID_PASSWORD_LENGTH
        </mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_REPEAT_NEW_PASSWORD</mat-label>
        <input #passwordRepeat id="newPasswordRepeat" [formControl]="repeatNewPasswordControl" type="password" matInput
               aria-label="Field to repeat the new password">
        <mat-hint align="end">{{passwordRepeat.value?.length || 0}}/20</mat-hint>
        <mat-error *ngIf="repeatNewPasswordControl.invalid && repeatNewPasswordControl.errors.required" translate>MANDATORY_PASSWORD_REPEAT</mat-error>
        <mat-error *ngIf="repeatNewPasswordControl.invalid && repeatNewPasswordControl.errors.notSame" translate>
          PASSWORDS_NOT_MATCHING
        </mat-error>
      </mat-form-field>

    </div>

    <button type="submit" id="changeButton"
            [disabled]="passwordControl.invalid || newPasswordControl.invalid || repeatNewPasswordControl.invalid"
            mat-raised-button color="primary" (click)="changePassword()" aria-label="Button to confirm the change">
      <i class="far fa-edit fa-lg" aria-hidden="true"></i>
      {{'BTN_CHANGE' | translate}}
    </button>

  </mat-card>
</div>