OwenKelvin/Angular-School-Management-System

<main class="main">
  <mat-card>
    <header>
      <mat-card-title>
        <span class="material-icons">school</span> Furaha School App Login
      </mat-card-title>
    </header>
    <mat-card-content>
      <form [formGroup]="loginForm" (ngSubmit)="submit()">
        <p>
          <mat-form-field>
            <label hidden for="username">Username</label>
            <span class="material-icons" matPrefix>person</span>
            <input (blur)="validateUsername()" id="username" type="text" placeholder="Username"
              formControlName="username" matInput>
            <mat-error *ngIf="errors.username">
              {{ errors.username }}
            </mat-error>
          </mat-form-field>
        </p>

        <p>
          <mat-form-field>
            <label hidden for="password">Password</label>
            <span class="material-icons" matPrefix>lock</span>
            <input type="password" placeholder="Password" formControlName="password" matInput>
            <mat-error
              *ngIf="(loginForm.get('password').dirty || loginForm.get('password').touched) && !loginForm.get('password').valid"
              class="error">
              Password is required!
            </mat-error>
          </mat-form-field>
        </p>
        <p>
          <label for="remember_me-input">
            <mat-checkbox type="checkbox" id="remember_me" formControlName="rememberMe"></mat-checkbox>
            Remember me
          </label>

        </p>

        <div class="button">
          <button type="submit" mat-flat-button color="primary" [disabled]="!loginForm.valid || loading">
            Login
          </button>
          <mat-icon *ngIf="loading">
            <mat-spinner color="primary" diameter="25"></mat-spinner>
          </mat-icon>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</main>