organizee-front/src/app/pages/page-add-member/page-add-member.component.html
Sana EL HIRI 3326b48eab coms
2022-03-13 18:45:28 +01:00

165 lines
6 KiB
HTML

<app-header></app-header>
<app-side-bar [backgroundColor]="'#7879F1'"></app-side-bar>
<div class="container-fluid">
<div class="row">
<div class="col-9 offset-2" id="main">
<h1 class="d-flex justify-content-center">Ajouter un nouveau membre à {{currentTeam.nom}}</h1>
<div class="form-addMember">
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
<div class="form-floating input">
<input
type="color"
class="form-control"
id="floatingInputcouleur"
placeholder=""
name="couleur"
formControlName="couleurFc"
/>
</div>
<label for="floatingInputcouleur" class="d-flex justify-content-center" >Choisissez une couleur</label>
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingInputlastName"
placeholder=""
name="lastName"
formControlName="lastNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['lastNameFc'].touched &&
addMemberForm.controls['lastNameFc'].valid,
'is-invalid':
addMemberForm.controls['lastNameFc'].touched &&
!addMemberForm.controls['lastNameFc'].valid
}"
/>
<label for="floatingInputlastName">Nom</label>
</div>
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingInputfirstName"
placeholder=""
name="firstName"
formControlName="firstNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['firstNameFc'].touched &&
addMemberForm.controls['firstNameFc'].valid,
'is-invalid':
addMemberForm.controls['firstNameFc'].touched &&
!addMemberForm.controls['firstNameFc'].valid
}"
/>
<label for="floatingInputfirstName">Prénom</label>
</div>
<div class="form-floating ">
<input
type="date"
class="form-control"
id="floatingInputdateNaissance"
placeholder=""
name="dateNaissance"
formControlName="dateNaissanceFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['dateNaissanceFc'].touched &&
addMemberForm.controls['dateNaissanceFc'].valid,
'is-invalid':
addMemberForm.controls['dateNaissanceFc'].touched &&
!addMemberForm.controls['dateNaissanceFc'].valid
}"
/>
<label for="floatingInputdateNaissance"
>Date de naissance</label
>
</div>
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInputemail"
placeholder=""
name="email"
formControlName="emailFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['emailFc'].touched &&
addMemberForm.controls['emailFc'].valid,
'is-invalid':
addMemberForm.controls['emailFc'].touched &&
!addMemberForm.controls['emailFc'].valid
}"
/>
<label for="floatingInputemail">Email</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder=""
name="password"
formControlName="passwordFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordFc'].touched &&
addMemberForm.controls['passwordFc'].valid,
'is-invalid':
addMemberForm.controls['passwordFc'].touched &&
!addMemberForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">Mot de passe</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
name="passwordConfirm"
formControlName="passwordConfirmFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordConfirmFc'].touched &&
addMemberForm.controls['passwordConfirmFc'].valid,
'is-invalid':
addMemberForm.controls['passwordConfirmFc'].touched &&
!addMemberForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPasswordConfirm"
>Confirmez le mot de passe</label
>
</div>
<div class="form-floating select">
<select
class="form-control"
id="floatingInputRole"
placeholder=""
name="Role"
formControlName="roleFc"
>
<option value="ROLE_PARENT">Adulte</option>
<option value="ROLE_ENFANT">Enfant</option>
</select>
<label value="ROLE_PARENT">Sélectionnez un profil</label>
</div>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="addMemberForm.invalid"
>
Ajouter le membre
</button>
</form>
<app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
</div>
</div>
</div>
</div>
<app-footer></app-footer>