<div class="flex column fill middle">
  <form [formGroup]="passwordForm" (ngSubmit)="setPassword()">
    <mat-card>
      <mat-card-content>
        <mat-card-title>{{'password' | i18n}}</mat-card-title>
        <mat-form-field>
          <mat-label>{{'password.old' | i18n}}</mat-label>
          <input matInput formControlName="old" type="password">
          <mat-error *ngFor="let error of passwordForm.get('old').errors | keyvalue">
            {{'password.error.' + error.key | i18n}}
        </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password.new' | i18n}}</mat-label>
          <input matInput formControlName="password" type="password">
          <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
            {{'password.error.' + error.key | i18n}}
        </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password.repeat' | i18n}}</mat-label>
          <input matInput formControlName="password2" type="password">
          <mat-error *ngFor="let error of passwordForm.get('password2').errors | keyvalue">
            {{'password.error.' + error.key | i18n}}
        </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
          {{'password.update' | i18n}}
        </button>
        <a *ngIf="passwordSuccess" mat-button color="primary">{{'password.success' | i18n}}</a>
      </mat-card-actions>
    </mat-card>
  </form>
</div>