<form [formGroup]="passwordForm" (ngSubmit)="changePassword()" #passwordFormDirective="ngForm">
    <mat-card>
        <mat-card-content>
            <h2>{{'password.change' | i18n}}</h2>
            <mat-hint *ngIf="success">
                {{'password.changed' | i18n}}
            </mat-hint>
            <mat-form-field>
                <input matInput type="password" placeholder="{{'password.current' | i18n}}"
                    formControlName="oldPassword" [(ngModel)]="model.old">
                <mat-error *ngFor="let error of passwordForm.get('oldPassword').errors | keyvalue">
                    {{error.key}}
                </mat-error>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
                    [(ngModel)]="model.password">
                <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
                    {{error.key}}
                </mat-error>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="password" length="6" placeholder="{{'password.confirm' | i18n}}"
                    formControlName="password2" [(ngModel)]="model.password2">
                <mat-error>
                    {{'password.not-match' | i18n}}
                </mat-error>
            </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
                {{'password.change' | i18n}}
            </button>
        </mat-card-actions>
    </mat-card>
</form>

<mat-card>
    <mat-card-content>
        <h2>{{'security.2fa' | i18n}}</h2>
        <p>{{'security.2fa.info' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
        <button *ngIf="!totp" (click)="createTotp()" mat-raised-button color="accent">{{'security.2fa.totp.create' | i18n}}</button>
        <button *ngIf="totp" (click)="removeTotp()" mat-raised-button color="warn">{{'security.2fa.totp.remove' | i18n}}</button>
    </mat-card-actions>
</mat-card>