<div class="signin-form text-center">
  <main class="form-signin d-inline-flex">
      <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
      <img src="../../../assets/images-header/logo.png"><br>
      <br>Le bon plan pour manger<br>
          <div class="form-floating">
              <input type="email"
                      class="form-control"
                      id="floatingInput"
                      placeholder=""
                      name="email"
                      ngModel
                      required
                      [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
                                  'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
              <label for="floatingInput">Adresse email</label>
          </div>
          <div class="form-floating">
              <input type="password"
                      class="form-control"
                      id="floatingPassword"
                      placeholder=""
                      name="password"
                      ngModel
                      required
                      [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
                                  'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
              <label for="floatingPassword">Mot de passe</label>
          </div>

          <button class="w-100 btn btn-lg btn-danger"
                  type="submit"
                  [disabled]="signinForm.invalid">Je me connecte !</button>
                  <!--<p>
                      Form is dirty : {{ signinForm.form.dirty }}
                  </p>
                  <p>
                      Form is touched : {{ signinForm.form.touched }}
                  </p>-->
      </form>

      <div *ngIf="errorForm">
          <p class="text-danger">Il manque des informations dans le formulaire...</p>
      </div>
  </main>
</div>
