<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
    <mat-card class="box" *ngIf="!isLoading">
      <mat-card-header>
        <mat-card-title>Log in</mat-card-title>
      </mat-card-header>
      <form class="form" [formGroup]="loginFormGroup">
        <mat-card-content>
          <mat-form-field class="full-width">
            <mat-label>Username</mat-label>
            <input matInput placeholder="Enter the User's Email address" formControlName="emailaddress">
          </mat-form-field>
          <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input matInput type="password" placeholder="Enter the User's Password" formControlName="password">
          </mat-form-field>
        </mat-card-content>
        <button mat-stroked-button color="primary" class="btn-block" (click)="LoginUser()">Log in</button>
        <div>Don't have an account? Register <a [routerLink]="['../register']">here</a></div>
      </form>
    </mat-card>
    <mat-progress-spinner mode="indeterminate" value="50" *ngIf="isLoading">
    </mat-progress-spinner>
  </div>