Merge branch 'dev' into cecile

2022-02-18 10:39:22 +01:00 · 2022-02-18 10:39:22 +01:00 · 6504d28c4b
commit 6504d28c4b
parent 6d917a62ad 74e28d14f4
82 changed files with 3557 additions and 2862 deletions
--- a/src/app/pages/page-account/page-account.component.html
+++ b/src/app/pages/page-account/page-account.component.html
@ -1,7 +1,31 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
-<div class="d-flex justify-content-center">
-  <button button type="button" class="btn btn-primary btn-lg"
-          routerLink="../creation-team"
-          routerLinkActive="active-custom">Créer ma team</button>
+<div class="container-fluid">
+  <div class="row">
+    <app-side-bar></app-side-bar>
+    <div class="col-9 offset-2" id="main">
+          <h1>Ma team</h1>
+          <div class="d-flex justify-content-center">
+            <button button type="button" class="btn btn-primary btn-lg"
+                    routerLink="../modifier-compte"
+                    routerLinkActive="active-custom">Modifier mon compte</button>
+          </div>
+          <div class="d-flex justify-content-center">
+            <button button type="button" class="btn btn-primary btn-lg"
+                    routerLink="../supprimer-compte"
+                    routerLinkActive="active-custom">Supprimer mon compte</button>
+          </div>
+          <div class="d-flex justify-content-center">
+            <button button type="button" class="btn btn-primary btn-lg"
+                    routerLink="../ajout-membre"
+                    routerLinkActive="active-custom">Ajouter un membre</button>
+          </div>
+          <div class="row">
+            <div class="col" *ngFor="let membreData of listMembres">
+                <app-card-member [membre]="membreData">
+                </app-card-member>
+            </div>
+          </div>
+      </div>
+  </div>
 </div>
+
--- a/src/app/pages/page-account/page-account.component.scss
+++ b/src/app/pages/page-account/page-account.component.scss
@ -0,0 +1,3 @@
+button{
+  margin-bottom: 5px;
+}
--- a/src/app/pages/page-account/page-account.component.ts
+++ b/src/app/pages/page-account/page-account.component.ts
@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { MembreService } from 'src/app/services/membre.service';
+import { TeamService } from 'src/app/services/team.service';

@Component({
  selector: 'app-page-account',
@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./page-account.component.scss']
 })
 export class PageAccountComponent implements OnInit {
+  public listMembres: any[];

-  constructor() { }
+  constructor(private teamService: TeamService, private membreService: MembreService) {
+    this.listMembres = [];
+   }

  ngOnInit(): void {
+    this.membreService.getMembres().subscribe((membres: any[]) => {
+      this.listMembres = membres;
+    });
  }

 }
--- a/src/app/pages/page-accueil/page-accueil.component.html
+++ b/src/app/pages/page-accueil/page-accueil.component.html
@ -1,5 +1,6 @@
 <app-header></app-header>
 <body>
+  <div class="container">
 <div class="bienvenue">
  <h2 class="titre">BIENVENUE</h2>
 <p>
@ -13,6 +14,7 @@ lu, nous sommes là pour vous aider !</p>
 <div class="connexion">
 <app-signin></app-signin>
 </div>
+</div>
 <div class="pub">
  <img src="../../../assets/images/menu.png" />
  <img src="../../../assets/images/repertoire.png" />
--- a/src/app/pages/page-accueil/page-accueil.component.scss
+++ b/src/app/pages/page-accueil/page-accueil.component.scss
@ -1,10 +1,15 @@
+.container {
+  display: flex;
+}
+
 .bienvenue {
  float: left;
-  display: inline;
+  // display: inline-block;
+  // height: 300px;
  border: 4px solid #5d5fef;
  border-radius: 10px;
  margin-top: 50px;
-  margin-left: 200px;
+  // margin-left: 200px;
  padding-right: 10px;
  padding-left: 10px;
 }
@ -18,17 +23,20 @@ p {
  line-height: 2em;
 }
 .connexion {
-  float: right;
+  // float: right;
+  height: 350px;
  display: inline;
  margin-top: -40px;
-  margin-right: 200px;
+  margin-left: 10px;
+  // margin-right: 200px;
 }

 .pub {
-  padding-top: 100px;
-  padding-right: 100px;
-  padding-left: 200px;
  display: flex;
+  flex-wrap: wrap;
+  padding-top: 100px;
+  padding-right: 200px;
+  padding-left: 200px;
  justify-content: space-between;
 }

--- a/src/app/pages/page-add-member/page-add-member.component.html
+++ b/src/app/pages/page-add-member/page-add-member.component.html
@ -1,101 +1,141 @@
 <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="container-fluid">
+  <div class="row">
+    <app-side-bar></app-side-bar>
+    <div class="col-9 offset-2" id="main">
+      <div 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">
-                  <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>
+            <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="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>
+            <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="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>
+            <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="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>
+            <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="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>
+            <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>

-          <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>
+          <button
+            class="w-100 btn btn-lg btn-outline-success"
+            type="submit"
+            [disabled]="addMemberForm.invalid"
+          >Ajouter le membre</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

-      </form>
-  </main>
--- a/src/app/pages/page-add-member/page-add-member.component.scss
+++ b/src/app/pages/page-add-member/page-add-member.component.scss
@ -4,29 +4,72 @@
  background-color: #f5f5f5;
 }

-.form-signup {
+.form-addMember {
  width: 100%;
  max-width: 330px;
  padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #ef5da8;
 }

-.form-signup .checkbox {
+.form-addMember .checkbox {
  font-weight: 400;
 }

-.form-signup .form-floating:focus-within {
+.form-addMember .form-floating:focus-within {
  z-index: 2;
 }

-.form-signup input[type="email"] {
-  margin-bottom: -1px;
+.form-addMember input[type="email"] {
+  margin-bottom: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
 }

-.form-signup input[type="password"] {
+.form-addMember input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-addMember input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-addMember input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-addMember input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-addMember input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
 }
+
+.btn-outline-success {
+  margin-top: 10px;
+  background-color: #ffff;
+  color: #ef5da8 !important;
+  border-color: #ef5da8 !important;
+}
--- a/src/app/pages/page-add-member/page-add-member.component.ts
+++ b/src/app/pages/page-add-member/page-add-member.component.ts
@ -3,6 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { Router } from '@angular/router';
 import { Membre } from 'src/app/models/membre';
 import { AuthService } from 'src/app/services/auth.service';
+import { MembreService } from 'src/app/services/membre.service';

@Component({
  selector: 'app-page-add-member',
@ -13,6 +14,7 @@ export class PageAddMemberComponent implements OnInit {

  public addMemberForm: FormGroup;
  constructor(
+    private membreService: MembreService,
    private authService: AuthService,
    private router: Router,
    private fb: FormBuilder
@ -27,7 +29,7 @@ export class PageAddMemberComponent implements OnInit {
        firstNameFc: new FormControl('', [Validators.required]),
        lastNameFc: new FormControl('', [Validators.required]),
        dateNaissanceFc: new FormControl('', [Validators.required]),
-        couleurFc: new FormControl('', [Validators.required]),
+        couleurFc: new FormControl('', []),
        emailFc: new FormControl('', [
          Validators.email,
          Validators.required,
@ -73,8 +75,8 @@ export class PageAddMemberComponent implements OnInit {


    if (membre.email !== '' && membre.password !== '') {
-      this.authService.signup(membre).subscribe((resp) => {
-        this.router.navigate(['account/signin']);
+      this.membreService.addMembre(membre).subscribe((resp) => {
+        this.router.navigate(['compte']);
      });
    } else {
      // affichage erreur
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.html
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.html
@ -3,10 +3,14 @@
    <app-side-bar></app-side-bar>
 </div>
 <div class="ajoutContact-form text-center">
+    <h1>Ajouter un contact</h1>
    <main class="form-ajoutContact">
        <form  (ngSubmit)="onSubmit()" [formGroup]="ajoutContactForm">
-            <h1>Ajouter un contact</h1>
-
+            
+            <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" 
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
@ -1,14 +1,20 @@
 .login-form {
  height: 100vh;
  padding-top: 40px;
-  background-color: #f5f5f5;
+  background-color: #e286d3;
 }

 .form-ajoutContact {
  width: 100%;
  max-width: 330px;
  padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #81164d;
 }

 .form-ajoutContact .checkbox {
@ -20,12 +26,45 @@
 }

 .form-ajoutContact input[type="email"] {
-  margin-bottom: -1px;
+  margin-bottom: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
 }

+.form-ajoutContact input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-ajoutContact input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-ajoutContact input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-ajoutContact input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+
 .btn-secondary {
-  color: #fff;
+  margin-top: 10px;
+  background-color: #ffff;
+  color: rgb(255, 255, 255);
  background-color: #5a1e63 !important;
 }
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
@ -6,6 +6,7 @@ import {
  Validators,
 } from '@angular/forms';
 import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
 import { Contact } from '../../models/contact';
 import { RepertoireService } from '../../services/repertoire.service';

@ -19,6 +20,7 @@ export class PageAjoutContactComponent implements OnInit {

  constructor(
    private repertoireService: RepertoireService,
+    private tokenService: TokenService,
    private router: Router,
    private fb: FormBuilder
  ) {
@ -28,6 +30,7 @@ export class PageAjoutContactComponent implements OnInit {
  ngOnInit(): void {
    // *********************************pensser à changer group car déprécié********************************
    this.ajoutContactForm = this.fb.group({
+      couleurFc: new FormControl('', [Validators.required]),
      lastNameFc: new FormControl('', [Validators.required]),
      firstNameFc: new FormControl('', [Validators.required]),
      telephoneFc: new FormControl('', [Validators.required]),
@ -42,24 +45,25 @@ export class PageAjoutContactComponent implements OnInit {
  }

  public onSubmit(): void {
-    console.log('value : ', this.ajoutContactForm.value);
-    console.log('form : ', this.ajoutContactForm);
+    const couleurValue = this.ajoutContactForm.value['couleurFc'];
    const firstNameValue = this.ajoutContactForm.value['firstNameFc'];
    const lastNameValue = this.ajoutContactForm.value['lastNameFc'];
    const telephoneValue = this.ajoutContactForm.value['telephoneFc'];
    const emailValue = this.ajoutContactForm.value['emailFc'];
    const dateNaissanceValue = this.ajoutContactForm.value['dateNaissanceFc'];
    const adresseValue = this.ajoutContactForm.value['adresseFc'];
+    const teamId = this.tokenService.getCurrentTeamId()

    const contact: Contact = {
      id: '',
+      couleur: couleurValue,
      nom: lastNameValue,
      prenom: firstNameValue,
      telephone: telephoneValue,
      email: emailValue,
      dateNaissance: dateNaissanceValue,
      adresse: adresseValue,
-      team: { id: '1' }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
+      team: { id: teamId }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
    };

    if (contact.nom !== '') {
@ -67,7 +71,7 @@ export class PageAjoutContactComponent implements OnInit {
        this.router.navigate(['repertoire/']);
      });
    } else {
-      // affichage erreur
+      window.alert("Le contact ne peut pas être ajouté!")
    }
  }
 }
--- a/src/app/pages/page-creation-team/page-creation-team.component.html
+++ b/src/app/pages/page-creation-team/page-creation-team.component.html
@ -1,30 +1,27 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
-<div class="signup-form text-center">
-    <main class="form-signup">
-        <form  (ngSubmit)="onSubmit()" [formGroup]="teamForm">
-            <h1>Créer votre team!</h1>
-            <div class="form-floating">
-                <input type="text"
-                        class="form-control"
-                        id="floatingInputName"
-                        placeholder=""
-                        name="name"
-                        formControlName="nameFc"
-                        [ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
-                                    'is-invalid':  teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
-                <label for="floatingInputName">Nom</label>
-            </div>
-            <button class="w-100 btn btn-lg btn-success"
-                    type="submit"
-                    [disabled]="teamForm.invalid">Je crée ma team</button>
-            <p>
-                Value : {{ teamForm.value | json }}
-            </p>
-            <p>
-                Form valid : {{ teamForm.valid }}
-            </p>
-
-        </form>
-    </main>
-</div>
+  <div class="row">
+    <div class="col-md-auto">
+      <app-side-bar></app-side-bar>
+    </div>
+    <div class=" col team-form text-center">
+      <h1>Créer votre team</h1>
+      <main class="form-team">
+          <form  (ngSubmit)="onSubmit()" [formGroup]="teamForm">
+              <div class="form-floating">
+                  <input type="text"
+                          class="form-control"
+                          id="floatingInputName"
+                          placeholder=""
+                          name="name"
+                          formControlName="nameFc"
+                          [ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
+                                      'is-invalid':  teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
+                  <label for="floatingInputName">Nom</label>
+              </div>
+              <button class="w-100 btn btn-lg btn-success"
+                      type="submit"
+                      [disabled]="teamForm.invalid">Je crée ma team</button>
+          </form>
+      </main>
+    </div>
+  </div>
--- a/src/app/pages/page-creation-team/page-creation-team.component.scss
+++ b/src/app/pages/page-creation-team/page-creation-team.component.scss
@ -1,31 +1,40 @@
+.team-form{
+  margin-top: 20px;
+  align-content: center;
+
+}
+
+button{
+  margin-top: 10px;
+}
 .login-form {
  height: 100vh;
  padding-top: 40px;
  background-color: #f5f5f5;
 }

-.form-signup {
+.form-team {
  width: 100%;
-  max-width: 330px;
+  max-width: 500px;
  padding: 15px;
  margin: auto;
 }

-.form-signup .checkbox {
+.form-team .checkbox {
  font-weight: 400;
 }

-.form-signup .form-floating:focus-within {
+.form-team .form-floating:focus-within {
  z-index: 2;
 }

-.form-signup input[type="email"] {
+.form-team input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
 }

-.form-signup input[type="password"] {
+.form-team input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
--- a/src/app/pages/page-creation-team/page-creation-team.component.ts
+++ b/src/app/pages/page-creation-team/page-creation-team.component.ts
@ -7,7 +7,7 @@ import {
 } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Team } from 'src/app/models/team';
-import { AuthService } from '../../services/auth.service';
+import { TeamService } from 'src/app/services/team.service';

@Component({
  selector: 'app-page-creation-team',
@ -17,7 +17,7 @@ import { AuthService } from '../../services/auth.service';
 export class PageCreationTeamComponent implements OnInit {
  public teamForm: FormGroup;
  constructor(
-    private authService: AuthService,
+    private teamService: TeamService,
    private router: Router,
    private fb: FormBuilder
  ) {
@ -43,7 +43,7 @@ export class PageCreationTeamComponent implements OnInit {


    if (team.nom !== '' ) {
-      this.authService.creationTeam(team).subscribe((resp) => {
+      this.teamService.addTeam(team).subscribe((resp) => {
        this.router.navigate(['compte']);
      });
    } else {
--- a/src/app/pages/page-dashboard/page-dashboard.component.html
+++ b/src/app/pages/page-dashboard/page-dashboard.component.html
@ -2,3 +2,8 @@
 <app-side-bar></app-side-bar>
 <app-meteo></app-meteo>

+
+<div class="d-flex justify-content-center">
+  <button button type="button" class="btn btn-primary btn-lg" routerLink="../creation-team"
+    routerLinkActive="active-custom">Créer ma team</button>
+</div>
--- a/src/app/pages/page-dashboard/page-dashboard.component.scss
+++ b/src/app/pages/page-dashboard/page-dashboard.component.scss
@ -0,0 +1,5 @@
+.meteo {
+  display: flex;
+  margin-left: 300px;
+  margin-top: -60px;
+}
--- a/src/app/pages/page-delete-account/page-delete-account.component.html
+++ b/src/app/pages/page-delete-account/page-delete-account.component.html
@ -0,0 +1,12 @@
+<app-header></app-header>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class=" col compte text-center">
+    <h1>Supprimer votre compte</h1>
+    <main class="contenu-compte">
+
+    </main>
+  </div>
+</div>
--- a/src/app/pages/page-delete-account/page-delete-account.component.scss
+++ b/src/app/pages/page-delete-account/page-delete-account.component.scss
--- a/src/app/pages/page-delete-account/page-delete-account.component.spec.ts
+++ b/src/app/pages/page-delete-account/page-delete-account.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageDeleteAccountComponent } from './page-delete-account.component';
+
+describe('PageDeleteAccountComponent', () => {
+  let component: PageDeleteAccountComponent;
+  let fixture: ComponentFixture<PageDeleteAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageDeleteAccountComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageDeleteAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/page-delete-account/page-delete-account.component.ts
+++ b/src/app/pages/page-delete-account/page-delete-account.component.ts
@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-delete-account',
+  templateUrl: './page-delete-account.component.html',
+  styleUrls: ['./page-delete-account.component.scss']
+})
+export class PageDeleteAccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/src/app/pages/page-delete-member/page-delete-member.component.html
+++ b/src/app/pages/page-delete-member/page-delete-member.component.html
@ -1 +1,12 @@
 <app-header></app-header>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class=" col compte text-center">
+    <h1>Supprimer ce membre</h1>
+    <main class="contenu-compte">
+
+    </main>
+  </div>
+</div>
--- a/src/app/pages/page-forgot-password/page-forgot-password.component.html
+++ b/src/app/pages/page-forgot-password/page-forgot-password.component.html
@ -13,10 +13,10 @@
        routerLinkActive="active-custom">Ré-initialiser mon mot de passe</button>

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

--- a/src/app/pages/page-forgot-password/page-forgot-password.component.ts
+++ b/src/app/pages/page-forgot-password/page-forgot-password.component.ts
@ -14,25 +14,20 @@ import {
  styleUrls: ['./page-forgot-password.component.scss']
 })
 export class PageForgotPasswordComponent implements OnInit {
-public errorForm: boolean;
  constructor(private authService: AuthService, private router: Router) {
-     this.errorForm = false;
+
  }

  ngOnInit(): void {}
-  public onSubmit(submittedForm: any): void {
+
+    public onSubmit(submittedForm: any): void {
    console.log(submittedForm.form.value);
-    const email = submittedForm.form.value['email'];
-    if (email !== '') {
-      this.authService.forgotPassword(email).subscribe((resp) => {
-        console.log('Component : PageForgotPassword ', resp);
-        this.router.navigate(['reinitialisation-password']);
-      });
-    } else {
-      // afficher une erreur à l'utilisateur
-      this.errorForm = true;
-    }
+
+    // const email = submittedForm.form.value['email'];
+    // console.log(email);
+      window.alert("Vous allez recevoir un email pour re-initialiser votre mot de passe !")
+      // this.router.navigate(['reinitialisation-password']);
+
+  }
  }

-
-}
--- a/src/app/pages/page-menu-semaine/page-menu-semaine.component.html
+++ b/src/app/pages/page-menu-semaine/page-menu-semaine.component.html
@ -1,2 +1,29 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class=" col compte text-center">
+    <h1>Menu de la semaine</h1>
+    <main class="contenu-compte">
+      <app-card-menu></app-card-menu>
+      <div class="d-flex justify-content-center">
+
+      </div>
+      <div class="d-flex justify-content-center">
+
+      </div>
+      <div class="d-flex justify-content-center">
+
+      </div>
+      <div class="d-flex justify-content-center">
+
+      </div>
+      <div class="d-flex justify-content-center">
+
+      </div>
+      <div class="d-flex justify-content-center">
+
+      </div>
+    </main>
+  </div>
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
@ -4,10 +4,14 @@
 </div>

 <div class="modifContact-form text-center">
+    <h1>Modifier ce contact</h1>
    <main class="form-modifContact">
        <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
-            <h1>Modifier ce contact</h1>
-
+            
+            <div class="form-floating">
+            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+            formControlName="couleurFc" value= "{{ listContactInfo.couleur }}">
+            </div>

            <div class="form-floating">
                <input type="text" 
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
@ -8,7 +8,13 @@
  width: 100%;
  max-width: 330px;
  padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #81164d;
 }

 .form-modifContact .checkbox {
@ -25,7 +31,40 @@
  border-bottom-left-radius: 0;
 }

+.form-modifContact input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-modifContact input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-modifContact input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-modifContact input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+
 .btn-secondary {
-  color: #fff;
+  margin-top: 10px;
+  background-color: #ffff;
+  color: rgb(255, 255, 255);
  background-color: #5a1e63 !important;
 }
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
@ -44,6 +44,7 @@ export class PageModifierContactComponent implements OnInit {

    // *********************************pensser à changer group car déprécié********************************
    this.modifContactForm = this.fb.group({
+      couleurFc: new FormControl('', [Validators.required]),
      lastNameFc: new FormControl('', [Validators.required]),
      firstNameFc: new FormControl('', [Validators.required]),
      telephoneFc: new FormControl('', [Validators.required]),
@ -71,8 +72,7 @@ export class PageModifierContactComponent implements OnInit {

  //Méthode qui envoie les champs modifiés pour mise à jour
  public onSubmit(): void {
-    console.log('value : ', this.modifContactForm.value);
-    console.log('form : ', this.modifContactForm);
+    const couleurValue = this.modifContactForm.value['couleurFc'];
    const firstNameValue = this.modifContactForm.value['firstNameFc'];
    const lastNameValue = this.modifContactForm.value['lastNameFc'];
    const telephoneValue = this.modifContactForm.value['telephoneFc'];
@ -82,6 +82,7 @@ export class PageModifierContactComponent implements OnInit {

    const contact: Contact = {
      id: this.personneid,
+      couleur: couleurValue,
      nom: lastNameValue,
      prenom: firstNameValue,
      telephone: telephoneValue,
--- a/src/app/pages/page-not-found/page-not-found.component.html
+++ b/src/app/pages/page-not-found/page-not-found.component.html
@ -1,5 +1,5 @@
 <app-header></app-header>
-
+<app-side-bar></app-side-bar>
 <div>

  <div class="ctn-link min-vh-100">
--- a/src/app/pages/page-repertoire/page-repertoire.component.html
+++ b/src/app/pages/page-repertoire/page-repertoire.component.html
@ -1,31 +1,41 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<div class="row">
+    <div class="col-md-auto">
+        <app-side-bar></app-side-bar>
+    </div>

-<div>
-    <button class="w-100 btn btn-lg btn-secondary " 
-        type="submit">Tous les contacts
-    </button>
+    <div class=" col compte text-center py-3 border">
+        <div>
+            <button class="btn btn-sm btn-rounded btn-secondary m-3" type="submit">Tous les contacts
+            </button>
+            <button routerLink="/ajouter-contact" class="btn btn-sm btn-rounded btn-secondary m-3">
+                Ajouter un contact
+            </button>

-    <button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
-        Ajouter un contact
-    </button>
+            <div class="input-group mb-3 d-flex justify-content-center">
+                <input type="text" class="form-control" placeholder="Rechercher un contact"
+                    aria-label="Rechercher un contact" aria-describedby="basic-addon2" #word
+                    (keyup)="onSearchChange(word.value)">

-    <div class="input-group mb-3">
-        <input type="text" class="form-control" 
-            placeholder="Rechercher un contact" 
-            aria-label="Rechercher un contact" 
-            aria-describedby="basic-addon2"
-            #word
-            (keyup)="onSearchChange(word.value)">
-            
-        <div class="input-group-append">
+                <div class="input-group-append"></div>
+            </div>
+            <div>
+                <h4>Liste des Contacts</h4>
+            </div>
+            <div class="row justify-content-evenly">
+                <div class="col-4">
+                    <div class="row my-3 d-flex justify-content-center flex-row" *ngFor="let personne of listContact"
+                        (click)="onClick(personne)">
+                        <div class="couleur col-4" [style.background-color]="personne.couleur"></div>
+                        <span class="fiche-contact col-7">{{ personne.prenom }} {{ personne.nom }}</span>
+                    </div>
+                </div>
+
+                <div class="col-4" *ngIf="openDetails">
+                    <app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)">
+                    </app-fiche-contact>
+                </div>
+            </div>
        </div>
    </div>
-
-    <div *ngFor="let personne of listContact" (click)="onClick(personne)" >
-        <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
-        <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
-    </div>
-<div *ngIf="openDetails"><app-fiche-contact [personne]="openDetails"></app-fiche-contact></div>
-    
-</div>
+</div>
--- a/src/app/pages/page-repertoire/page-repertoire.component.scss
+++ b/src/app/pages/page-repertoire/page-repertoire.component.scss
@ -2,14 +2,33 @@
  color: #fff;
  background-color: #5a1e63 !important;
  width: 100%;
-  max-width: 330px;
+  max-width: 230px;
  padding: 15px;
  margin: auto;
+  min-width: 100px;
+  border-radius: 55px;
+  font-weight: bold;
 }

-.input-group mb-3 {
-  width: 100%;
+.input-group.mb-3 {
+  width: 50%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
+  display: flex;
+  flex-direction: row;
 }
+
+.couleur{
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 60px;
+  height: 60px;
+  flex-direction: row;
+}
+
+.h4 {
+  color: black;
+  font-weight: bold;
+}
--- a/src/app/pages/page-repertoire/page-repertoire.component.ts
+++ b/src/app/pages/page-repertoire/page-repertoire.component.ts
@ -33,16 +33,6 @@ export class PageRepertoireComponent implements OnInit {
      this.listContact = listContact;
      this.listFull = listContact;
    });
-
-    this.personneid = this.route.snapshot.paramMap.get('id');
-    console.log(this.personneid);
-
-    this.repertoireService
-      .getContactById(this.personneid)
-      .subscribe((listContactInfo: any) => {
-        console.log(listContactInfo);
-        this.listContactInfo = listContactInfo;
-      });
  }

  // Méthode pour récuper ce qui est saisi dans l'input
@ -63,13 +53,21 @@ export class PageRepertoireComponent implements OnInit {
    this.listContact = prenom;
  }

-  // Méthode qui au click va ouvrir les détails d'un contat
+  // Méthode qui au click va ouvrir les détails d'un contact
  onClick(personne: any) {
    console.log(personne);
    this.openDetails = personne;
  }

-  // this.repertoireService.deleteContact(contact).subscribe((resp) => {
-  //   this.router.navigate(['repertoire/']);
-  // });
+  // Méthode qui au click va supprimer un contact
+  onClickDelete(contactId: number){
+    this.repertoireService.deleteContact(contactId).subscribe((resp) => {
+      if(contactId) {
+        this.listContact.forEach(contactId => console.log(contactId))
+      }else{
+        window.alert("Le contact ne peut pas être supprimé!")
+      }
+      this.router.navigate(['repertoire/']);
+    });
+  }
 }
--- a/src/app/pages/page-signup/page-signup.component.html
+++ b/src/app/pages/page-signup/page-signup.component.html
@ -1,12 +1,12 @@
 <app-header></app-header>
 <div class="signup-form text-center">
    <h1>Inscrivez-vous !</h1>
+    <label for="floatingInputcouleur">Choisissez une couleur</label>
  <main class="form-signup">
    <form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
          <div class="form-floating">
            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
              formControlName="couleurFc">
-
          </div>
      <div class="form-floating">
        <input
@ -126,10 +126,10 @@
      <button
        class="w-100 btn btn-lg btn-outline-success"
        type="submit"
-        [disabled]="signupForm.invalid"
-      >
+        [disabled]="signupForm.invalid">
        CREER MON COMPTE
      </button>
+
    </form>
  </main>
 </div>
--- a/src/app/pages/page-to-do-list/page-to-do-list.component.html
+++ b/src/app/pages/page-to-do-list/page-to-do-list.component.html
@ -1,5 +1,9 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
-<div class="container">
-  <app-to-do-list></app-to-do-list>
+<div class="d-flex align-items-stretch">
+  <div class="row">
+    <div class="col" *ngFor="let todos of result">
+      <app-to-do-list [todo]="todos"> </app-to-do-list>
+    </div>
+  </div>
 </div>
--- a/src/app/pages/page-to-do-list/page-to-do-list.component.ts
+++ b/src/app/pages/page-to-do-list/page-to-do-list.component.ts
@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { TodoService } from 'src/app/services/todo.service';
+
+

@Component({
  selector: 'app-page-to-do-list',
@ -6,10 +9,18 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./page-to-do-list.component.scss']
 })
 export class PageToDoListComponent implements OnInit {
+  public result : any;

-  constructor() { }
+  constructor(private TodoService : TodoService) { }

  ngOnInit(): void {
+    this.TodoService.getToDoListByTeamId().subscribe((data :any)=>{
+
+      this.result = data;
+      console.log(data);
+    });
+
+
  }

 }
--- a/src/app/pages/page-update-account/page-update-account.component.html
+++ b/src/app/pages/page-update-account/page-update-account.component.html
@ -0,0 +1,12 @@
+<app-header></app-header>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class=" col compte text-center">
+    <h1>Modifier votre compte</h1>
+    <main class="contenu-compte">
+
+    </main>
+  </div>
+</div>
--- a/src/app/pages/page-update-account/page-update-account.component.scss
+++ b/src/app/pages/page-update-account/page-update-account.component.scss
--- a/src/app/pages/page-update-account/page-update-account.component.spec.ts
+++ b/src/app/pages/page-update-account/page-update-account.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageUpdateAccountComponent } from './page-update-account.component';
+
+describe('PageUpdateAccountComponent', () => {
+  let component: PageUpdateAccountComponent;
+  let fixture: ComponentFixture<PageUpdateAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageUpdateAccountComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageUpdateAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/page-update-account/page-update-account.component.ts
+++ b/src/app/pages/page-update-account/page-update-account.component.ts
@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-update-account',
+  templateUrl: './page-update-account.component.html',
+  styleUrls: ['./page-update-account.component.scss']
+})
+export class PageUpdateAccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/src/app/pages/page-update-member/page-update-member.component.html
+++ b/src/app/pages/page-update-member/page-update-member.component.html
@ -1 +1,12 @@
 <app-header></app-header>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class=" col compte text-center">
+    <h1>Modifier ce membre</h1>
+    <main class="contenu-compte">
+
+    </main>
+  </div>
+</div>