<div class="card wow fadeInRightBig">
  <div class="well">
        <p class="h5 text-center mb-4">Connexion</p>
        <form (keydown)="keyDownFunction($event)">
          <!--<div> ID: {{ (user | async)?.uid }} </div>
          <div> Email: {{ (user | async)?.email }} </div>-->

          <div class="md-form">
            <i class="fa fa-envelope prefix grey-text"></i>
            <input type="email" [(ngModel)]="email" placeholder="Email" name="mail" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #mail="ngModel">
            <div *ngIf="mail.errors && mail.errors.pattern && (mail.dirty || mail.touched)"  class="alert alert-danger">
              Votre <strong>email</strong> est requis et doit avoir ce format : <strong><i>john@gmail.fr</i></strong>.
            </div>
          </div>

          <div class="md-form">
            <i class="fa fa-lock prefix grey-text"></i>
            <input type="password" [(ngModel)]="password" placeholder="Password" name="pass" #pass= "ngModel" required minlength="5">
            <div *ngIf="pass.errors && (pass.dirty || pass.touched)" class="alert alert-danger">
              Votre <strong>mot de passe</strong> doit avoir 5 caractères au minimum.
            </div>
          </div>

          <div class="text-center" style="margin-top:5%">
            <button type="submit" class="btn btn-dark-green" [disabled]="mail.errors || pass.errors" (click)="login()"><i class="fa fa-sign-in" aria-hidden="true"></i>Se connecter</button>
            <!--<button class="btn btn-cyan" (click)="loadHomeComponent()">Back</button>-->
          </div>
          <div class="text-center" style="margin-top:5%">
            <a (click)="loadResetPasswordComponent()" class="blue-text">Mot de passe oublié ?</a>
          </div>
          <div *ngIf="echecLogin"  class="alert alert-danger">
            Erreur: votre <strong>email/mot de passe n'est pas correct !</strong>.
          </div>
          <div *ngIf="echecLoginEmailNotVerifed"  class="alert alert-danger">
            Erreur: vous <strong> n'avez pas validé votre adresse email !</strong>.
          </div>
        </form>
  </div>
</div>
