Side bar css ok avancées sur ticket page account et page membreetc
This commit is contained in:
Sana EL HIRI
parent
e53a9a062d
commit
026ac42818
14 changed files with 402 additions and 157 deletions
|
|
@ -1,101 +1,142 @@
|
|||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
||||
<div class="signup-form text-center">
|
||||
<main class="form-signup">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
|
||||
<h1>J'inscris un nouveau membre</h1>
|
||||
<div class="form-floating">
|
||||
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
|
||||
formControlName="couleurFc">
|
||||
<label for="floatingInputcouleur">Choisissez une couleur !</label>
|
||||
</div>
|
||||
<!-- <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">Avatar</label>
|
||||
</div> -->
|
||||
<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="floatingInputfirstName">Date de naissance</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
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="floatingInput">Adresse 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="passwordConfirm"
|
||||
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="floatingPassword">Confirmer mot de passe</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<app-side-bar></app-side-bar>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-success"
|
||||
type="submit"
|
||||
[disabled]="addMemberForm.invalid">Je confirme l'ajout de ce membre à ma team !</button>
|
||||
<p>
|
||||
Value : {{ addMemberForm.value | json }}
|
||||
</p>
|
||||
<p>
|
||||
Form valid : {{ addMemberForm.valid }}
|
||||
</p>
|
||||
<div class=" col addMember-form text-center">
|
||||
<h1>Ajouter un membre</h1>
|
||||
<main class="form-addMember">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
|
||||
<div class="form-floating">
|
||||
<input type="color"
|
||||
class="form-control"
|
||||
id="floatingInputcouleur"
|
||||
placeholder=""
|
||||
name="couleur"
|
||||
formControlName="couleurFc">
|
||||
</div>
|
||||
<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">VOTRE 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">VOTRE PRENOM</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">VOTRE 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">VOTRE 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 VOTRE MOT DE PASSE</label>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="addMemberForm.invalid"
|
||||
>Ajouter le membre</button>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue