<app-grid>
    <mat-card>
        <h1>Hello {{account.username}}!</h1>
        <h2>Welcome to the admin panel</h2>
    </mat-card>
    <mat-card class="wide-2">
        <h3>Change password</h3>
        <form [formGroup]="passwordForm">
            <mat-form-field class="full-width">
                <mat-label>New password</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput type="password" formControlName="password">
            </mat-form-field>
            <mat-form-field class="full-width">
                <mat-label>Retype new password</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput type="password" formControlName="password_repeat">
            </mat-form-field>
            <div class="mat-error" *ngIf="passwordError">
                please type your new password the same way twice.
            </div>
            <button mat-raised-button color="primary" (click)="onPasswordSubmit()">Change password</button>
        </form>
    </mat-card>
</app-grid>