<mat-card>
    <h1 class="card-header">Login</h1>
    <div class="card-body container">
        <p>Enter your credentials here to log into the website.</p>
        <form [formGroup]="form">
            <mat-form-field>
                <mat-label>Username</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput autocomplete="off" formControlName="username">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Password</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput type="password" placeholder="12345" autocomplete="off" formControlName="password">
            </mat-form-field>
            <button mat-raised-button color="primary" (click)="onSubmit()">Log in</button>
            <p *ngIf="!valid" class="error">Something went wrong while authenticating you. Make sure both the username and password fields are filled and are correct.</p>
            <p *ngIf="connectionError" class="error">Could not connect to the API at {{environment.apiURL}}</p>
        </form>
    </div>
</mat-card>