<form [formGroup]="form" (ngSubmit)="login()">
    <mat-card>
        <mat-card-content>
            <h2>{{'login' | i18n}}</h2>
            <mat-error *ngIf="loginInvalid">
                {{'login.invalid' | i18n}}
            </mat-error>
            <mat-form-field>
                <input id="username" name="username" matInput placeholder="{{'username' | i18n}}"
                    formControlName="username" required>
                <mat-error>
                    {{'username.missing' | i18n}}
                </mat-error>
            </mat-form-field>
            <mat-form-field>
                <input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
                    formControlName="password" required>
                <mat-error>
                    {{'password.invalid.hint' | i18n}}
                </mat-error>
            </mat-form-field>
            <mat-slide-toggle id="keep" name="keep" formControlName="keep">
                {{'login.keepSession' | i18n}}
            </mat-slide-toggle>
        </mat-card-content>
        <mat-card-actions>
            <button type="submit" mat-raised-button color="primary"
                [disabled]="form.invalid">{{'login' | i18n}}</button>
            <a routerLink="/password" mat-raised-button color="warn">{{'password.forgot' | i18n}}</a>
        </mat-card-actions>
    </mat-card>
</form>