<form [formGroup]="loginForm" (ngSubmit)="submit()">

  {{loginForm.value|json}}

  <!-- Champs nom d'utilisateur -->
  <mdb-form-control [ngClass]="{ 'mb-5': isUsernameInvalid, 'mb-4': !isUsernameInvalid}">
    <input mdbValidate mdbInput type="text" class="form-control" formControlName="username" name="username"
      autocomplete="username">
    <label mdbLabel class="form-label">Nom d'utilisateur</label>
    <mdb-error *ngIf="isUsernameInvalid">Champs requis, entre 5 et 30 caractères</mdb-error>
  </mdb-form-control>

  <!-- Champs mot de passe -->
  <mdb-form-control [ngClass]="{ 'mb-5': isPasswordInvalid, 'mb-4': !isPasswordInvalid}">
    <input mdbValidate mdbInput type="password" class="form-control" formControlName="password" name="password"
      autocomplete="current-password">
    <label mdbLabel class="form-label">Mot de passe</label>
    <mdb-error *ngIf="isPasswordInvalid">Champs requis, entre 3 et 30 caractères</mdb-error>
  </mdb-form-control>

  <!-- Bouton de validation du formulaire -->
  <button class="btn btn-primary" [disabled]="!loginForm.valid || (isLoading$ | async)" type="submit">
    <div class="d-flex justify-content-center">

      <ng-container *ngIf="isLoading$ | async; else notLoading;">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="ms-2">PATIENTEZ</span>
      </ng-container>

      <ng-template #notLoading>
        <span>SE CONNECTER</span>
      </ng-template>

    </div>
  </button>
</form>