simpleat/src/app/pages/signin/signin.component.html
2022-02-16 17:37:58 +01:00

47 lines
2 KiB
HTML

<div class="signin-form text-center">
<main class="form-signin d-inline-flex">
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
<h5>Merci de vous connecter</h5>
<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>