From f2f790211c53862e4abdfd8f4f9d2163169d8b50 Mon Sep 17 00:00:00 2001 From: Sana EL HIRI Date: Thu, 3 Mar 2022 21:59:06 +0100 Subject: [PATCH] =?UTF-8?q?avanc=C3=A9es=20sur=20update=20member/=20page?= =?UTF-8?q?=20account=20ok=20/=20add=20Member=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 2 +- .../card-member/card-member.component.html | 2 +- src/app/components/signin/signin.component.ts | 7 +- src/app/models/membre.ts | 1 + .../page-account/page-account.component.html | 10 +- .../page-add-member.component.html | 47 ++++---- .../page-add-member.component.scss | 5 + .../page-add-member.component.ts | 31 +++-- .../page-forgot-password.component.ts | 8 +- .../page-reset-password.component.ts | 1 + .../page-signup/page-signup.component.html | 40 +++++-- .../page-signup/page-signup.component.ts | 7 +- .../page-update-member.component.html | 99 +++++++++++++-- .../page-update-member.component.scss | 80 +++++++++++++ .../page-update-member.component.ts | 113 +++++++++++++++++- src/app/services/membre.service.ts | 2 +- 16 files changed, 383 insertions(+), 72 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d43e8ef..2a8b141 100644 --- 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 }, diff --git a/src/app/components/card-member/card-member.component.html b/src/app/components/card-member/card-member.component.html index f5c02f7..d6eb7af 100644 --- a/src/app/components/card-member/card-member.component.html +++ b/src/app/components/card-member/card-member.component.html @@ -7,7 +7,7 @@

{{membre.prenom }} {{membre.nom }}

+ +
+
diff --git a/src/app/pages/page-update-member/page-update-member.component.scss b/src/app/pages/page-update-member/page-update-member.component.scss index e69de29..b66b171 100644 --- 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; +} diff --git a/src/app/pages/page-update-member/page-update-member.component.ts b/src/app/pages/page-update-member/page-update-member.component.ts index be0f66e..555f450 100644 --- 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); + } + }; + } } diff --git a/src/app/services/membre.service.ts b/src/app/services/membre.service.ts index 98d19a0..d721522 100644 --- 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 { 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 { return this.http.put(`${this.apiUrl}/membres/update/1`, membre); }