avancées sur update member/ page account ok / add Member ok

2022-03-03 21:59:06 +01:00 · 2022-03-03 21:59:06 +01:00 · f2f790211c
commit f2f790211c
parent 11e4d7321e
16 changed files with 383 additions and 72 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -40,7 +40,7 @@ const routes: Routes = [
  { path: 'creation-compte', component: PageSignupComponent },
  { path: 'page-support', component: PageSupportComponent},
  { path: 'to-do-list', canActivate: [AuthGuard], component: PageToDoListComponent },
-  { path: 'modifier-membre', canActivate: [AuthGuard], component: PageUpdateMemberComponent },
+  { path: 'modifier-membre/:id', canActivate: [AuthGuard], component: PageUpdateMemberComponent },
  { path: 'modifier-compte', canActivate: [AuthGuard], component: PageUpdateAccountComponent },
  { path: 'ajouter-contact', canActivate: [AuthGuard], component: PageAjoutContactComponent },
  { path: 'creation-team', canActivate: [AuthGuard], component: PageCreationTeamComponent },
--- a/src/app/components/card-member/card-member.component.html
+++ b/src/app/components/card-member/card-member.component.html
@ -7,7 +7,7 @@
            <div class="text-center mt-3">
              <h3 class="mt-2 mb-0">{{membre.prenom }}  {{membre.nom }}</h3>
              <div class="buttons text-center"><button button type="button" class="btn btn-outline-primary px-4"
-                        routerLink="../modifier-membre"
+                        routerLink="../modifier-membre/{{membre.id}}"
                        routerLinkActive="active-custom">
                        Modifier
                </button><button button type="button" class="btn btn-primary px-4"
--- a/src/app/components/signin/signin.component.ts
+++ b/src/app/components/signin/signin.component.ts
@ -1,12 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
+

@Component({
  selector: 'app-signin',
--- a/src/app/models/membre.ts
+++ b/src/app/models/membre.ts
@ -1,4 +1,5 @@
 export interface Membre {
+  id: string;
  nom: string;
  prenom: string;
  email: string;
--- a/src/app/pages/page-account/page-account.component.html
+++ b/src/app/pages/page-account/page-account.component.html
@ -3,8 +3,9 @@
 <div class="container-fluid">
  <div class="row">
    <div class="col-9 offset-2" id="main">
-      <h1>{{currentTeam.nom}}</h1>
-      <div class="row">
+      <h1 class="col-md-auto">{{currentTeam.nom}}</h1>
+      <div>
+        <!-- Pour récupérer le membre connecté-->
        <div class="d-flex justify-content-center">
          <app-card-member [membre]="currentUser"> </app-card-member>
        </div>
@ -20,8 +21,11 @@
        </div>
      </div>
      <div class="row">
-
+        <!-- Pour exclure le membre connecté de la liste car il est récupéré plus haut-->
+        <!-- ng-container pour gérer l'espace vide que laissé le membre exclu à cause du dom -->
+        <!-- cf. : https://angular.io/guide/built-in-directives#hosting-a-directive-without-a-dom-element-->
        <ng-container *ngFor="let membreData of listMembres">
+          <!-- Condition dans ngIf mais une div à la place du ng-container pour le style-->
          <div class="col"  *ngIf= "membreData.id != currentUser.id" >
            <app-card-member [membre]="membreData"> </app-card-member>
          </div>
--- 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,12 +1,12 @@
 <app-header></app-header>
-
+<app-side-bar></app-side-bar>
 <div class="container-fluid">
  <div class="row">
-    <app-side-bar></app-side-bar>
    <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">
+          <div class="form-floating input">
            <input
              type="color"
              class="form-control"
@ -16,6 +16,7 @@
              formControlName="couleurFc"
            />
          </div>
+          <label for="floatingInputcouleur" class="d-flex justify-content-center" >Choisissez une couleur</label>
          <div class="form-floating">
            <input
              type="text"
@ -33,7 +34,7 @@
                  !addMemberForm.controls['lastNameFc'].valid
              }"
            />
-            <label for="floatingInputlastName">VOTRE NOM</label>
+            <label for="floatingInputlastName">Nom</label>
          </div>
          <div class="form-floating">
            <input
@ -52,7 +53,7 @@
                  !addMemberForm.controls['firstNameFc'].valid
              }"
            />
-            <label for="floatingInputfirstName">VOTRE PRENOM</label>
+            <label for="floatingInputfirstName">Prénom</label>
          </div>
          <div class="form-floating ">
            <input
@ -72,7 +73,7 @@
              }"
            />
            <label for="floatingInputdateNaissance"
-              >VOTRE DATE DE NAISSANCE</label
+              >Date de naissance</label
            >
          </div>
          <div class="form-floating">
@ -92,20 +93,7 @@
                  !addMemberForm.controls['emailFc'].valid
              }"
            />
-            <label for="floatingInputemail">Votre Email</label>
-          </div>
-          <div class="form-floating">
-            <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électionner un profil</label>
+            <label for="floatingInputemail">Email</label>
          </div>
          <div class="form-floating">
            <input
@ -124,7 +112,7 @@
                  !addMemberForm.controls['passwordFc'].valid
              }"
            />
-            <label for="floatingPassword">MOT DE PASSE</label>
+            <label for="floatingPassword">Mot de passe</label>
          </div>
          <div class="form-floating">
            <input
@ -144,9 +132,22 @@
              }"
            />
            <label for="floatingPasswordConfirm"
-              >CONFIRMEZ VOTRE MOT DE PASSE</label
+              >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"
--- a/src/app/pages/page-add-member/page-add-member.component.scss
+++ b/src/app/pages/page-add-member/page-add-member.component.scss
@ -3,6 +3,11 @@
  padding-top: 40px;
  background-color: #f5f5f5;
 }
+ h1{
+   color: rgba(0, 0, 0, 0.658);
+   font-size: 34px;
+   margin-top: 20px;
+ }

 .form-addMember {
  width: 100%;
--- 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,9 +3,9 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { Router } from '@angular/router';
 import { Mail } from 'src/app/models/mail';
 import { Membre } from 'src/app/models/membre';
-import { AuthService } from 'src/app/services/auth.service';
 import { MailService } from 'src/app/services/mail.service';
 import { MembreService } from 'src/app/services/membre.service';
+import { TeamService } from 'src/app/services/team.service';

@Component({
  selector: 'app-page-add-member',
@ -13,12 +13,17 @@ import { MembreService } from 'src/app/services/membre.service';
  styleUrls: ['./page-add-member.component.scss']
 })
 export class PageAddMemberComponent implements OnInit {
-
  public addMemberForm: FormGroup;
+  alert: any;
+  isShow!: boolean;
+  currentTeam: any;
+
+
+
  constructor(
    private membreService: MembreService,
+    private teamService: TeamService,
    private mailService: MailService,
-    private authService: AuthService,
    private router: Router,
    private fb: FormBuilder
  ) {
@ -26,7 +31,11 @@ export class PageAddMemberComponent implements OnInit {
  }

  ngOnInit(): void {
-    // *********************************pensser a changer group car déprécié********************************
+    /** Récuperer la team du membre connecté **/
+    this.teamService.getTeamById()?.subscribe((team) => {
+      this.currentTeam = team;
+    });
+    /** group est déprécié mais pas d'autres solutions sinon revoir la fonction confirmeValidator **/
    this.addMemberForm = this.fb.group(
      {
        firstNameFc: new FormControl('', [Validators.required]),
@ -38,7 +47,7 @@ export class PageAddMemberComponent implements OnInit {
          Validators.email,
          Validators.required,
          Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
-        ]), // chercher une meilleure regex
+        ]),
        passwordFc: new FormControl('', [
          Validators.minLength(8),
          Validators.required,
@ -55,8 +64,7 @@ export class PageAddMemberComponent implements OnInit {
  }

  public onSubmit(): void {
-    console.log('value : ', this.addMemberForm.value);
-    console.log('form : ', this.addMemberForm);
+    const idValue = this.addMemberForm.value[''];
    const lastNameValue = this.addMemberForm.value['lastNameFc'];
    const firstNameValue = this.addMemberForm.value['firstNameFc'];
    const emailValue = this.addMemberForm.value['emailFc'];
@ -68,6 +76,7 @@ export class PageAddMemberComponent implements OnInit {


    const membre: Membre = {
+      id: idValue,
      nom: lastNameValue,
      prenom: firstNameValue,
      email: emailValue,
@ -89,17 +98,19 @@ export class PageAddMemberComponent implements OnInit {


    if (membre.email !== '' && membre.password !== '') {
-      this.membreService.addMembre(membre)?.subscribe((resp) => {
+      this.membreService.addMembre(membre)?.subscribe((_resp) => {
        this.mailService.envoiMailText(mail)?.subscribe((respMail) =>{
-          console.log("Mail envoyé");
+          return respMail
        })
        this.router.navigate(['compte']);
      });
    } else {
-      // affichage erreur
+      this.alert={"type":"danger", "content":"Le membre n'a pas été rajouté"};
+      this.isShow = true;
    }
  }

+  /** Méthode pour compare le mot de passe et la confirmation de mot de passe **/
  ConfirmedValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
--- a/src/app/pages/page-forgot-password/page-forgot-password.component.ts
+++ b/src/app/pages/page-forgot-password/page-forgot-password.component.ts
@ -1,16 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
 import { Membre } from 'src/app/models/membre';
 import { MailService } from 'src/app/services/mail.service';
 import { Mail } from 'src/app/models/mail';

+
@Component({
  selector: 'app-page-forgot-password',
  templateUrl: './page-forgot-password.component.html',
@ -30,6 +25,7 @@ export class PageForgotPasswordComponent implements OnInit {

    public onSubmit(submittedForm: any): void {
      const membre: Membre = {
+        id: "",
        nom: "",
        prenom: "",
        dateNaissance: new Date(),
--- a/src/app/pages/page-reset-password/page-reset-password.component.ts
+++ b/src/app/pages/page-reset-password/page-reset-password.component.ts
@ -44,6 +44,7 @@ export class PageResetPasswordComponent implements OnInit {
    const passwordConfirmValue = this.resetForm.value['passwordConfirmFc'];

    const membre: Membre = {
+      id: "",
      nom: "",
      prenom: "",
      dateNaissance: new Date(),
--- a/src/app/pages/page-signup/page-signup.component.html
+++ b/src/app/pages/page-signup/page-signup.component.html
@ -5,9 +5,29 @@
  <main class="form-signup">
    <form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
      <div class="form-floating">
-            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+        <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="floatingInputteamName"
+          placeholder=""
+          name="teamName"
+          formControlName="teamNameFc"
+          [ngClass]="{
+            'is-valid':
+              signupForm.controls['teamNameFc'].touched &&
+              signupForm.controls['teamNameFc'].valid,
+            'is-invalid':
+              signupForm.controls['teamNameFc'].touched &&
+              !signupForm.controls['teamNameFc'].valid
+          }"
+        />
+        <label for="floatingInputlastName">Le nom de votre team</label>
+      </div>
      <div class="form-floating">
        <input
          type="text"
@ -25,7 +45,7 @@
              !signupForm.controls['lastNameFc'].valid
          }"
        />
-        <label for="floatingInputlastName">VOTRE NOM</label>
+        <label for="floatingInputlastName">Votre nom</label>
      </div>
      <div class="form-floating">
        <input
@ -44,7 +64,7 @@
              !signupForm.controls['firstNameFc'].valid
          }"
        />
-        <label for="floatingInputfirstName">VOTRE PRENOM</label>
+        <label for="floatingInputfirstName">Votre prénom</label>
      </div>
      <div class="form-floating">
        <input
@ -63,7 +83,7 @@
              !signupForm.controls['dateNaissanceFc'].valid
          }"
        />
-        <label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
+        <label for="floatingInputdateNaissance">Votr date de naissance</label>
      </div>
      <div class="form-floating">
        <input
@ -82,7 +102,7 @@
              !signupForm.controls['emailFc'].valid
          }"
        />
-        <label for="floatingInputemail">VOTRE EMAIL</label>
+        <label for="floatingInputemail">Votre adresse mail</label>
      </div>
      <div class="form-floating">
        <input
@ -101,7 +121,7 @@
              !signupForm.controls['passwordFc'].valid
          }"
        />
-        <label for="floatingPassword">MOT DE PASSE</label>
+        <label for="floatingPassword">Votre mot de passe</label>
      </div>
      <div class="form-floating">
        <input
@ -120,7 +140,7 @@
              !signupForm.controls['passwordConfirmFc'].valid
          }"
        />
-        <label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
+        <label for="floatingPasswordConfirm">Confirmez votre mot de passe</label>
      </div>

      <button
--- a/src/app/pages/page-signup/page-signup.component.ts
+++ b/src/app/pages/page-signup/page-signup.component.ts
@ -16,6 +16,7 @@ import { AuthService } from '../../services/auth.service';
 })
 export class PageSignupComponent implements OnInit {
  public signupForm: FormGroup;
+
  constructor(
    private authService: AuthService,
    private router: Router,
@ -54,8 +55,7 @@ export class PageSignupComponent implements OnInit {
  }

  public onSubmit(): void {
-    console.log('value : ', this.signupForm.value);
-    console.log('form : ', this.signupForm);
+    const idValue = this.signupForm.value[''];
    const prenomValue = this.signupForm.value['firstNameFc'];
    const nomValue = this.signupForm.value['lastNameFc'];
    const emailValue = this.signupForm.value['emailFc'];
@ -66,6 +66,7 @@ export class PageSignupComponent implements OnInit {
    const roleValue = ['ROLE_PARENT'];

    const membre: Membre = {
+      id: idValue,
      nom: nomValue,
      prenom: prenomValue,
      email: emailValue,
@ -84,7 +85,7 @@ export class PageSignupComponent implements OnInit {
      // affichage erreur
    }
  }
-
+  /** Méthode pour compare le mot de passe et la confirmation de mot de passe **/
  ConfirmedValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
--- 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,11 +1,96 @@
 <app-header></app-header>
-
-<div class="row">
-  <div class="col-md-auto">
 <app-side-bar></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">Modifier profil</h1>
+      <div class="form-updateMember">
+        <form (ngSubmit)="onSubmit()" [formGroup]="updateMembreForm">
+          <div class="form-floating input">
+            <input
+              type="color"
+              class="form-control"
+              id="floatingInputcouleur"
+              placeholder=""
+              name="couleur"
+              formControlName="couleurFc"
+              value="{{membreInfos.couleur}}"
+            />
+          </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"
+              value="{{membreInfos.nom}}"
+              />
+            <label for="floatingInputlastName">Nom</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="text"
+              class="form-control"
+              id="floatingInputfirstName"
+              placeholder=""
+              name="firstName"
+              formControlName="firstNameFc"
+              value="{{membreInfos.prenom}}"
+            />
+            <label for="floatingInputfirstName">Prénom</label>
+          </div>
+          <div class="form-floating ">
+            <input
+              type="date"
+              class="form-control"
+              id="floatingInputdateNaissance"
+              placeholder=""
+              name="dateNaissance"
+              formControlName="dateNaissanceFc"
+              value="{{membreInfos.dateNaissance}}"
+            />
+            <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"
+              value="{{membreInfos.email}}"
+            />
+            <label for="floatingInputemail">Email</label>
+          </div>
+          <div class="form-floating select">
+            <select
+              class="form-control"
+              id="floatingInputRole"
+              placeholder=""
+              name="Role"
+              formControlName="roleFc"
+              value="{{membreInfos.roleList}}"
+            >
+              <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"
+
+          >Valider
+          </button>
+        </form>
+      </div>
    </div>
-  <div class="col compte text-center">
-    <h1>Modifier ce membre</h1>
-    <main class="contenu-compte"></main>
  </div>
 </div>
--- a/src/app/pages/page-update-member/page-update-member.component.scss
+++ b/src/app/pages/page-update-member/page-update-member.component.scss
@ -0,0 +1,80 @@
+.login-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+ h1{
+   color: rgba(0, 0, 0, 0.658);
+   font-size: 34px;
+   margin-top: 20px;
+ }
+
+.form-updateMember {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #ef5da8;
+}
+
+.form-updateMember .checkbox {
+  font-weight: 400;
+}
+
+.form-updateMember .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-updateMember input[type="email"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-updateMember input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-updateMember input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-updateMember input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-updateMember input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-updateMember 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-update-member/page-update-member.component.ts
+++ b/src/app/pages/page-update-member/page-update-member.component.ts
@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Membre } from 'src/app/models/membre';
+import { MembreService } from 'src/app/services/membre.service';

@Component({
  selector: 'app-page-update-member',
@ -6,10 +10,117 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./page-update-member.component.scss']
 })
 export class PageUpdateMemberComponent implements OnInit {
+  public updateMembreForm: FormGroup;
+  public membreData: FormGroup;
+  public membreInfos: any;
+  public membreId: any;

-  constructor() { }
+
+  constructor(private membreService: MembreService,
+    private router: Router,
+    private fb: FormBuilder,
+    private route: ActivatedRoute) {
+    this.updateMembreForm = new FormGroup({});
+    this.membreData = this.initForm();
+    this.membreInfos = '';
+   }

  ngOnInit(): void {
+    /** Pour récuperer l'id du membre à modifier **/
+    this.membreId = this.route.snapshot.paramMap.get('id');
+
+    /** Appel Api **/
+    this.membreService
+      .getMembreId(this.membreId)
+      .subscribe((membreInfos: any) => {
+        this.membreInfos = membreInfos;
+      });
+
+    /** group est déprécié mais pas d'autres solutions sinon revoir la fonction confirmeValidator **/
+    this.updateMembreForm = this.fb.group(
+      {
+        firstNameFc: new FormControl('', [Validators.required]),
+        lastNameFc: new FormControl('', [Validators.required]),
+        dateNaissanceFc: new FormControl('', [Validators.required]),
+        roleFc: new FormControl('', []),
+        couleurFc: new FormControl('', []),
+        emailFc: new FormControl('', [
+          Validators.email,
+          Validators.required,
+          Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
+        ]),
+        passwordFc: new FormControl('', [
+          Validators.minLength(8),
+        ]),
+        passwordConfirmFc: new FormControl('', [
+          Validators.minLength(8),
+        ]),
+      },
+      {
+        validator: this.ConfirmedValidator('passwordFc', 'passwordConfirmFc'),
+      }
+    )};
+
+  /** Méthode qui initialise les champs du formulaire avec les infos de la BDD **/
+  private initForm(membre?: Membre): FormGroup {
+    return this.fb.group({
+      nom:[membre ? membre.nom : ''],
+      prenom: [membre ? membre.prenom : ''],
+      email: [membre ? membre.email : ''],
+      password: [membre ? membre.password : ''],
+      couleur: [membre ? membre.couleur : ''],
+      dateNaissance: [membre ? membre.dateNaissance : ''],
+      passwordConfirm: [membre ? membre.passwordConfirm : ''],
+      roleList: [membre ? membre.roleList : ['']],
+    });
  }

+  /** Méthode qui envoie les champs modifiés pour mise à jour **/
+  public onSubmit(): void {
+    const firstNameValue = this.updateMembreForm.value['firstNameFc'];
+    const lastNameValue = this.updateMembreForm.value['lastNameFc'];
+    const emailValue = this.updateMembreForm.value['emailFc'];
+    const passwordValue = this.updateMembreForm.value['passwordFc'];
+    const dateNaissanceValue = this.updateMembreForm.value['dateNaissanceFc'];
+    const couleurValue = this.updateMembreForm.value['couleurFc'];
+    const passwordConfirmValue = this.updateMembreForm.value['passwordConfirmFc'];
+    const roleValue = this.updateMembreForm.value['roleFc'];
+
+    const membre: Membre = {
+      id: this.membreId,
+      nom: lastNameValue,
+      prenom: firstNameValue,
+      email: emailValue,
+      password: passwordValue,
+      dateNaissance: dateNaissanceValue,
+      couleur: couleurValue,
+      passwordConfirm: passwordConfirmValue,
+      roleList: [roleValue]
+    };
+
+    this.membreService.updateMembre(membre).subscribe((resp) => {
+      this.router.navigate(['compte']);
+    });
+  }
+
+
+
+  /** Méthode pour compare le mot de passe et la confirmation de mot de passe **/
+  ConfirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (
+        matchingControl.errors &&
+        !matchingControl.errors['confirmedValidator']
+      ) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
 }
--- a/src/app/services/membre.service.ts
+++ b/src/app/services/membre.service.ts
@ -48,7 +48,7 @@ export class MembreService {
  deleteMembre(membre: Membre): Observable<any> {
    return this.http.delete(`${this.apiUrl}/membres/delete/1`);
  }
-
+  //modifier pour récupérer id et pas mettre un id par défaut
  updateMembre(membre: Membre): Observable<any> {
    return this.http.put(`${this.apiUrl}/membres/update/1`, membre);
  }