<!-- <div style="text-align:center">
    <h1>
        Login
    </h1>
</div>

  <input #username type='text' placeholder='username'>
  <input #password type='password' placeholder='password'>
  <button (click)="login(username.value, password.value)">login</button>
  <p>{{ error?.message }}</p>
  <p *ngIf="error">{{ error?.error | json }}</p> -->


  <!-- Default form login -->
<div class="main-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
    <mat-card-header>
      <mat-card-title>Sign In</mat-card-title>
    </mat-card-header>
    <form class="example-form">
      <!-- Email -->
      <mat-card-content>
      <mat-form-field class="example-full-width">
        <mat-label>Enter your email</mat-label>
        <input matInput placeholder="pat@example.com" [formControl]="email" required>
        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
      
      <!-- Password -->
    
      <mat-form-field aclass="example-full-width">
        <mat-label>Enter your password</mat-label>
        <input matInput [type]="hide ? 'password' : 'text'" [formControl]="password" required>
      </mat-form-field>
    </mat-card-content>
    <!-- Sign in button -->
    <button mat-stroked-button color="primary" class="btn-block" type="submit" (click)="login(email.value, password.value)" >Log in</button>
    <!-- Register -->
    <p>Not a member?
      <a href="#">Register</a>
    </p>
  </form>
</mat-card>
</div>
  <!-- Default form login -->