<form [formGroup]="form">
  <p>Use the form below to change your password.</p>

  <div fxLayout="row">

    <div fxFlex="40%" fxFlex.md="60%" fxFlex.sm="50%" fxFlex.xs="100%">

      <mat-form-field class="full-width">
        <input matInput placeholder="Current Password" formControlName="currentPassword" [type]="hideCurrentPassword ? 'password' : 'text'"
          autocomplete="current-password">
        <mat-icon matSuffix (click)="hideCurrentPassword = !hideCurrentPassword">
          {{hideCurrentPassword ? 'visibility' : 'visibility_off'}}
        </mat-icon>

        <mat-error *ngIf="form.controls['currentPassword'].hasError('required')">
          Please enter a your current password
        </mat-error>
      </mat-form-field>

      <mat-form-field class="full-width">
        <input matInput placeholder="New Password" formControlName="newPassword" [type]="hideNewPassword ? 'password' : 'text'" autocomplete="new-password">
        <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword">
          {{hideNewPassword ? 'visibility' : 'visibility_off'}}
        </mat-icon>

        <mat-error *ngIf="form.controls['newPassword'].hasError('required')">
          Please enter a new password
        </mat-error>
      </mat-form-field>

      <mat-form-field class="full-width">
        <input matInput placeholder="Confirm New Password" formControlName="newPasswordConfirm" [type]="hideNewPassword ? 'password' : 'text'"
          autocomplete="new-password">
        <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword">
          {{hideNewPassword ? 'visibility' : 'visibility_off'}}
        </mat-icon>

        <mat-error *ngIf="form.controls['newPasswordConfirm'].hasError('required')">
          Please confirm your new password
        </mat-error>
      </mat-form-field>

      <button mat-raised-button color="primary" [disabled]="form.invalid || disableSubmit" (click)="changePassword()">Save</button>

    </div>

  </div>

</form>

<!-- <div class="password-rules" fxFlex="65%" fxFlex.sm="90%" fxFlex.xs="95%">
    Password rules:
    <mat-list>
      <mat-list-item>
        Must be at least 6 characters
      </mat-list-item>

      <mat-list-item>
        Must contain at least one non alphanumeric character
      </mat-list-item>

      <mat-list-item>
        Must contain at least one lowercase ('a'-'z')
      </mat-list-item>

      <mat-list-item>
        Must contain at least one uppercase ('A'-'Z')
      </mat-list-item>
    </mat-list>
  </div> -->