22< br >
33< br >
44< br >
5- < div class ="container-fluid mt--7 ">
6- < div class =" col-xl-12 order-xl-1 " >
7- < div class =" card bg-secondary shadow " >
8- < div class =" card-header bg-white border-0 " >
9- < div class =" row align-items-center " >
10- < div class =" col-8 " >
11- < h3 class =" mb-0 " > Créer un compte</ h3 >
5+ < div class ="container-fluid mt--7 " style =" background-color: white; " >
6+ < div >
7+ < div >
8+ < div >
9+ < div >
10+ < div >
11+ < h3 style =" color: chocolate; " > < b > Créer un compte</ b > </ h3 >
1212 </ div >
1313 </ div >
1414 </ div >
1515 < div class ="card-body ">
1616 < form (ngSubmit) ="saveUtilisateur() ">
17- < h6 class ="heading-small text-muted mb-4 "> Informations des utilisateurs</ h6 >
17+ < h4 class ="heading-small text-muted mb-4 "> < b > Informations des utilisateurs</ b >
18+ </ h4 >
1819 < div class ="pl-lg-4 ">
1920 < div class ="row ">
2021 < div class ="col-lg-6 ">
21- < div class ="form-group ">
22- < label class ="form-control-label " for ="input-first-name "> Nom</ label >
22+ < div class ="form-group " style ="border: 5px; border-color: chocolate; ">
23+ < label class ="form-control-label " for ="input-first-name "
24+ style =" color: black; "> Nom</ label >
2325 < input type ="text " [(ngModel)] ="utilisateur.nomUtilisateur " name ="nomUtilisateur "
2426 id ="input-first-name " class ="form-control form-control-alternative "
2527 placeholder ="Nom " value ="Lucky ">
2628 </ div >
2729 </ div >
2830 < div class ="col-lg-6 ">
29- < div class ="form-group "> < label class ="form-control-label "
30- for =" input-last-name "> Prénom</ label > < input type ="text "
31+ < div class ="form-group "> < label class ="form-control-label " for =" input-last-name "
32+ style =" color: black; "> Prénom</ label > < input type ="text "
3133 [(ngModel)] ="utilisateur.prenomUtilisateur " name ="prenomUtilisateur "
3234 id ="input-last-name " class ="form-control form-control-alternative "
3335 placeholder ="Prénom " value ="Luck "> </ div >
3436 </ div >
3537 </ div >
3638 < div class ="col-lg-6 ">
37- < div class ="form-group "> < label class ="form-control-label " for ="input-email "> Email
39+ < div class ="form-group "> < label class ="form-control-label " for ="input-email "
40+ style =" color: black; "> Email
3841 address</ label > < input type ="email " [(ngModel)] ="utilisateur.emailUtilisateur "
3942 name ="emailUtilisateur " id ="input-email "
40- class ="form-control form-control-alternative " placeholder ="mail@example .com ">
43+ class ="form-control form-control-alternative " placeholder ="ex : jean.yves@oui .com ">
4144 </ div >
4245 </ div >
4346 < div class ="col-lg-6 ">
44- < div class ="form-group "> < label class ="form-control-label " for ="input-date "> Date de
47+ < div class ="form-group "> < label class ="form-control-label " for ="input-date "
48+ style =" color: black; "> Date de
4549 naissance</ label > < input type ="date "
4650 [(ngModel)] ="utilisateur.dateNaissanceUtilisateur " name ="dateNaissanceUtilisateur "
4751 id ="input-date " class ="form-control form-control-alternative "> </ div >
4852 </ div >
4953 </ div >
5054 < div class ="row ">
5155 < div class ="col-lg-6 ">
52- < div class ="form-group "> < label class ="form-control-label "
53- for =" input-username " > Username </ label > < input type ="text "
56+ < div class ="form-group "> < label class ="form-control-label " for =" input-username "
57+ style =" color: black; " > Nom d'utilisateur </ label > < input type ="text "
5458 [(ngModel)] ="utilisateur.username " name ="username " id ="input-username "
55- class ="form-control form-control-alternative " placeholder ="Username "
59+ class ="form-control form-control-alternative " placeholder ="Nom d'utilisateur "
5660 value ="Username "> </ div >
5761 </ div >
5862 < div class ="col-lg-6 ">
59- < div class ="form-group "> < label class ="form-control-label "
60- for =" input-password " > Password </ label > < input type ="text "
63+ < div class ="form-group "> < label class ="form-control-label " for =" input-password "
64+ style =" color: black; " > Mot de passe </ label > < input type ="text "
6165 [(ngModel)] ="utilisateur.password " name ="password " id ="input-password "
62- class ="form-control form-control-alternative " placeholder ="your password ">
66+ class ="form-control form-control-alternative " placeholder ="mot de passe ">
6367 </ div >
6468 </ div >
6569 </ div >
6670 < div class ="row ">
6771 < div class ="col-lg-6 ">
68- < div class ="form-group "> < label class ="form-control-label " for ="input-password "> Role</ label >
72+ < div class ="form-group "> < label class ="form-control-label " for ="input-password "
73+ style =" color: black; "> Role</ label >
6974 < select class ="form-control form-control-alternative " multiple name ="roles "
7075 [(ngModel)] ="utilisateur.roles ">
7176 < option *ngFor ="let r of roles " [ngValue] ="r "> {{r.libelle}}</ option >
7277 </ select >
7378 </ div >
7479 </ div >
7580 </ div >
76- < div > < button class ="btn btn-danger "> Ajouter</ button > </ div >
81+ < div > < button class ="btn btn-danger " style =" background-color: chocolate; " > Ajouter</ button > </ div >
7782 </ form >
7883 </ div >
7984 </ div >
@@ -86,33 +91,35 @@ <h6 class="heading-small text-muted mb-4">Informations des utilisateurs</h6>
8691 < div class ="col ">
8792 < div class ="card shadow ">
8893 < div class ="card-header border-0 ">
89- < h3 class =" mb-0 " > Users list </ h3 >
94+ < h3 style =" color: chocolate; " > < b > Liste des utilisateurs </ b > </ h3 >
9095 </ div >
9196 < div class ="table-responsive ">
9297 < table class ="table align-items-center table-flush ">
9398 < thead class ="thead-light ">
9499 < tr >
95- < th scope ="col "> Firstname </ th >
96- < th scope ="col "> Last name </ th >
97- < th scope ="col "> Username </ th >
98- < th scope ="col "> Password </ th >
99- < th scope ="col "> Date of birth </ th >
100- < th scope ="col "> Rule </ th >
101- < th style ="text-align: center; " scope ="col "> Action</ th >
100+ < th scope ="col " style =" color: black; " > < b > Nom </ b > </ th >
101+ < th scope ="col " style =" color: black; " > < b > Prénom </ b > </ th >
102+ < th scope ="col " style =" color: black; " > < b > Nom d'utilisateur </ b > </ th >
103+ < th scope ="col " style =" color: black; " > < b > Mot de passe (crypté) </ b > </ th >
104+ < th scope ="col " style =" color: black; " > < b > Date de naissance </ b > </ th >
105+ < th scope ="col " style =" color: black; " > < b > Role </ b > </ th >
106+ < th style ="text-align: center; " scope ="col " style =" color: black; " > < b > Action</ b > </ th >
102107 </ tr >
103108 </ thead >
104109 < tbody >
105110 < tr *ngFor ="let u of users ">
106- < td > {{u.nomUitlisateur }}</ td >
111+ < td > {{u.nomUtilisateur }}</ td >
107112 < td > {{u.prenomUtilisateur}}</ td >
108113 < td > {{u.username}}</ td >
109114 < td > {{u.password}}</ td >
110- < td > {{u.dateNaissance }}</ td >
115+ < td > {{u.dateNaissanceUtilisateur }}</ td >
111116 < td >
112117 < p style ="margin: 0px; " *ngFor ="let r of u.roles "> {{r.libelle}}</ p >
113118 </ td >
114- < td > < button (click) ="deleteUtilisateur(u.idUtilisateur) "> Delete</ button >
115- < button (click) ="editUtilisateur(u) "> Edit</ button >
119+ < td > < button (click) ="deleteUtilisateur(u.idUtilisateur) "
120+ style ="background-color: chocolate; color: white; "> Delete</ button >
121+ < button (click) ="editUtilisateur(u) "
122+ style ="background-color: chocolate; color: white; "> Edit</ button >
116123 </ td >
117124 </ tbody >
118125 </ table >
0 commit comments