From ab58fd0c6a93a94127ff11bf4dff469a50433a7d Mon Sep 17 00:00:00 2001
From: Sana EL HIRI <sanaze.elhiri@gmail.com>
Date: Wed, 2 Mar 2022 19:14:43 +0100
Subject: [PATCH 1/3] =?UTF-8?q?avanc=C3=A9es=20page=20account/=20modif=20s?=
=?UTF-8?q?ide=20bar/modif=20card-member?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../card-member/card-member.component.scss | 4 +-
.../side-bar/side-bar.component.scss | 2 +-
.../page-account/page-account.component.html | 60 +++++++------------
.../page-account/page-account.component.scss | 26 ++++++++
.../page-account/page-account.component.ts | 24 ++++++--
5 files changed, 73 insertions(+), 43 deletions(-)
diff --git a/src/app/components/card-member/card-member.component.scss b/src/app/components/card-member/card-member.component.scss
index 24db781..c779114 100644
--- a/src/app/components/card-member/card-member.component.scss
+++ b/src/app/components/card-member/card-member.component.scss
@@ -7,7 +7,7 @@
}
.card {
- min-height: 22rem;
+ min-height: 14rem;
border: none;
position: relative;
overflow: hidden;
@@ -22,6 +22,7 @@
.buttons button:nth-child(1) {
margin-top: 5px;
+ margin-right: 5px;
border: 1px solid #7879F1 !important;
color: #7879F1;
height: 40px;
@@ -30,6 +31,7 @@
.buttons button:nth-child(1):hover {
margin-top: 5px;
+ margin-right: 5px;
border: 1px solid #7879F1 !important;
color: #fff;
height: 40px;
diff --git a/src/app/components/side-bar/side-bar.component.scss b/src/app/components/side-bar/side-bar.component.scss
index 3bc4acc..b0cb2f5 100644
--- a/src/app/components/side-bar/side-bar.component.scss
+++ b/src/app/components/side-bar/side-bar.component.scss
@@ -5,7 +5,7 @@
width: auto;
height: 100%;
position: absolute;
- background-color: rgb(238, 238, 238);
+ background-color: #c3c3e7;
}
.nav{
margin-top: 20px;
diff --git a/src/app/pages/page-account/page-account.component.html b/src/app/pages/page-account/page-account.component.html
index 5fbe7e2..8542b99 100644
--- a/src/app/pages/page-account/page-account.component.html
+++ b/src/app/pages/page-account/page-account.component.html
@@ -1,47 +1,33 @@
<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>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>
+ <h1>{{currentTeam.nom}}</h1>
+ <div class="row">
+ <div class="d-flex justify-content-center">
+ <app-card-member [membre]="currentUser"> </app-card-member>
+ </div>
+ <div class="d-flex justify-content-center">
+ <button
+ id = "bouton-ajout"
+ type="button"
+ class="btn btn-primary btn-lg"
+ routerLink="../ajout-membre"
+ routerLinkActive="active-custom"
+ >Ajouter un membre
+ </button>
+ </div>
</div>
<div class="row">
- <div class="col" *ngFor="let membreData of listMembres">
- <app-card-member [membre]="membreData"> </app-card-member>
- </div>
+
+ <ng-container *ngFor="let membreData of listMembres">
+ <div class="col" *ngIf= "membreData.id != currentUser.id" >
+ <app-card-member [membre]="membreData"> </app-card-member>
+ </div>
+ </ng-container>
</div>
</div>
</div>
</div>
+<app-footer></app-footer>
diff --git a/src/app/pages/page-account/page-account.component.scss b/src/app/pages/page-account/page-account.component.scss
index d8b4580..790a2af 100644
--- a/src/app/pages/page-account/page-account.component.scss
+++ b/src/app/pages/page-account/page-account.component.scss
@@ -1,3 +1,29 @@
button{
margin-bottom: 5px;
}
+
+#main{
+ margin-top: 20px;
+}
+
+ng-container{
+ display: flex;
+}
+
+#bouton-ajout {
+ margin-top: 5px;
+ border: 1px solid #7879F1 !important;
+ background-color: #7879F1;
+ color: #fff;
+ height: 50px;
+ width: 250px;
+}
+
+#bouton-ajout:hover {
+ margin-top: 5px;
+ border: 1px solid #191933 !important;
+ background-color: #191933;
+ color: #fff;
+ height: 50px;
+ width: 250px;
+}
diff --git a/src/app/pages/page-account/page-account.component.ts b/src/app/pages/page-account/page-account.component.ts
index 19a8af8..0814759 100644
--- a/src/app/pages/page-account/page-account.component.ts
+++ b/src/app/pages/page-account/page-account.component.ts
@@ -1,5 +1,9 @@
import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
import { MembreService } from 'src/app/services/membre.service';
+import { TeamService } from 'src/app/services/team.service';
+import { TokenService } from 'src/app/services/token.service';
+
@Component({
@@ -9,16 +13,28 @@ import { MembreService } from 'src/app/services/membre.service';
})
export class PageAccountComponent implements OnInit {
public listMembres: any[];
+ currentUser: any;
+ currentTeam: any;
- constructor(private membreService: MembreService) {
+ constructor(private membreService: MembreService,
+ private teamService: TeamService,
+ private tokenService: TokenService,
+ private router: Router) {
this.listMembres = [];
}
ngOnInit(): void {
+ /** Récuperer la team du membre connecté **/
+ this.teamService.getTeamById()?.subscribe((team) => {
+ this.currentTeam = team;
+ });
+ /** Récuperer le membre connecté **/
+ this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((user) => {
+ this.currentUser = user;
+ });
+ /** Récuperer la liste des membres de la team **/
this.membreService.getMembresByTeamId()?.subscribe((membres: any[]) => {
- console.log(membres);
this.listMembres = membres;
-
- });
+ });
}
}
From f2f790211c53862e4abdfd8f4f9d2163169d8b50 Mon Sep 17 00:00:00 2001
From: Sana EL HIRI <sanaze.elhiri@gmail.com>
Date: Thu, 3 Mar 2022 21:59:06 +0100
Subject: [PATCH 2/3] =?UTF-8?q?avanc=C3=A9es=20sur=20update=20member/=20pa?=
=?UTF-8?q?ge=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 @@
<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"
diff --git a/src/app/components/signin/signin.component.ts b/src/app/components/signin/signin.component.ts
index b055fc5..f5461e6 100644
--- 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',
diff --git a/src/app/models/membre.ts b/src/app/models/membre.ts
index 3ebf4b5..8b21154 100644
--- 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;
diff --git a/src/app/pages/page-account/page-account.component.html b/src/app/pages/page-account/page-account.component.html
index 8542b99..14bd38e 100644
--- 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>
diff --git a/src/app/pages/page-add-member/page-add-member.component.html b/src/app/pages/page-add-member/page-add-member.component.html
index c7d87a6..5731f66 100644
--- 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,9 +53,9 @@
!addMemberForm.controls['firstNameFc'].valid
}"
/>
- <label for="floatingInputfirstName">VOTRE PRENOM</label>
+ <label for="floatingInputfirstName">Prénom</label>
</div>
- <div class="form-floating">
+ <div class="form-floating ">
<input
type="date"
class="form-control"
@@ -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"
diff --git a/src/app/pages/page-add-member/page-add-member.component.scss b/src/app/pages/page-add-member/page-add-member.component.scss
index 43a4849..55ab414 100644
--- 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%;
diff --git a/src/app/pages/page-add-member/page-add-member.component.ts b/src/app/pages/page-add-member/page-add-member.component.ts
index d685097..5867f19 100644
--- 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];
diff --git a/src/app/pages/page-forgot-password/page-forgot-password.component.ts b/src/app/pages/page-forgot-password/page-forgot-password.component.ts
index e10943a..24a7e7c 100644
--- 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(),
diff --git a/src/app/pages/page-reset-password/page-reset-password.component.ts b/src/app/pages/page-reset-password/page-reset-password.component.ts
index 53c6f28..6e31529 100644
--- 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(),
diff --git a/src/app/pages/page-signup/page-signup.component.html b/src/app/pages/page-signup/page-signup.component.html
index c41025d..7d2a6ca 100644
--- a/src/app/pages/page-signup/page-signup.component.html
+++ b/src/app/pages/page-signup/page-signup.component.html
@@ -4,10 +4,30 @@
<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 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
diff --git a/src/app/pages/page-signup/page-signup.component.ts b/src/app/pages/page-signup/page-signup.component.ts
index 9f28e40..fb27614 100644
--- 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];
diff --git a/src/app/pages/page-update-member/page-update-member.component.html b/src/app/pages/page-update-member/page-update-member.component.html
index 764bae0..7d94ef3 100644
--- 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>
+<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>
-<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>
+ <button
+ class="w-100 btn btn-lg btn-outline-success"
+ type="submit"
+
+ >Valider
+ </button>
+ </form>
+ </div>
+ </div>
</div>
</div>
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<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);
}
From 1191176e251f76d9d9c1104c8e9d69c64aa6785c Mon Sep 17 00:00:00 2001
From: Sana EL HIRI <sanaze.elhiri@gmail.com>
Date: Fri, 4 Mar 2022 15:50:51 +0100
Subject: [PATCH 3/3] =?UTF-8?q?avanc=C3=A9es=20=C3=A0=20merge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../side-bar/side-bar.component.html | 10 +++++-----
.../page-update-member.component.html | 20 +++++++++++++++++--
.../page-update-member.component.ts | 8 ++++++--
src/app/services/membre.service.ts | 13 ++++++++----
4 files changed, 38 insertions(+), 13 deletions(-)
diff --git a/src/app/components/side-bar/side-bar.component.html b/src/app/components/side-bar/side-bar.component.html
index 40e86e3..6e3baaf 100644
--- a/src/app/components/side-bar/side-bar.component.html
+++ b/src/app/components/side-bar/side-bar.component.html
@@ -1,12 +1,12 @@
<nav class="wrapper md-auto position-fixed ">
<ul class="nav flex-column" id="sticky-sidebar">
<li class="nav-item" ngbNavItem="maTeam" >
- <a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">
+ <a routerLink="/compte" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-people-fill"></i>
Ma Team</a>
</li>
<li class="nav-item" ngbNavItem="maTeam" >
- <a routerLink="../tableau-de-bord" routerLinkActive="active-custom" class="nav-link">
+ <a routerLink="/tableau-de-bord" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-clipboard-data"></i>
Dashboard</a>
</li>
@@ -16,17 +16,17 @@
Répertoire</a>
</li>
<li class="nav-item">
- <a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">
+ <a routerLink="/to-do-list" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-check2-square"></i>
To-Do-List</a>
</li>
<li class="nav-item">
- <a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">
+ <a routerLink="/menu" routerLinkActive="active-custom" class="nav-link">
<i class='fas fa-pizza-slice'></i>
Menus</a>
</li>
<li class="nav-item">
- <a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">
+ <a routerLink="/agenda" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-calendar-event"></i>
Agenda</a>
</li>
diff --git a/src/app/pages/page-update-member/page-update-member.component.html b/src/app/pages/page-update-member/page-update-member.component.html
index 7d94ef3..3d9a20b 100644
--- a/src/app/pages/page-update-member/page-update-member.component.html
+++ b/src/app/pages/page-update-member/page-update-member.component.html
@@ -15,6 +15,7 @@
name="couleur"
formControlName="couleurFc"
value="{{membreInfos.couleur}}"
+ [(ngModel)]="membreInfos.couleur"
/>
</div>
<label for="floatingInputcouleur" class="d-flex justify-content-center" >Choisissez une couleur</label>
@@ -27,6 +28,7 @@
name="lastName"
formControlName="lastNameFc"
value="{{membreInfos.nom}}"
+ [(ngModel)]="membreInfos.nom"
/>
<label for="floatingInputlastName">Nom</label>
</div>
@@ -39,6 +41,7 @@
name="firstName"
formControlName="firstNameFc"
value="{{membreInfos.prenom}}"
+ [(ngModel)]="membreInfos.prenom"
/>
<label for="floatingInputfirstName">Prénom</label>
</div>
@@ -51,6 +54,7 @@
name="dateNaissance"
formControlName="dateNaissanceFc"
value="{{membreInfos.dateNaissance}}"
+ [(ngModel)]="membreInfos.dateNaissance"
/>
<label for="floatingInputdateNaissance"
>Date de naissance</label
@@ -65,6 +69,7 @@
name="email"
formControlName="emailFc"
value="{{membreInfos.email}}"
+ [(ngModel)]="membreInfos.email"
/>
<label for="floatingInputemail">Email</label>
</div>
@@ -76,17 +81,28 @@
name="Role"
formControlName="roleFc"
value="{{membreInfos.roleList}}"
+ [(ngModel)]="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>
-
+ <div class="form-floating">
+ <input hidden
+ type="password"
+ class="form-control"
+ id="floatingPassword"
+ placeholder=""
+ name="password"
+ formControlName="passwordFc"
+ value="{{membreInfos.password}}"
+ [(ngModel)]="membreInfos.password"
+ />
+ </div>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
-
>Valider
</button>
</form>
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 555f450..e97f81a 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
@@ -63,6 +63,7 @@ export class PageUpdateMemberComponent implements OnInit {
/** 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 : ''],
@@ -75,6 +76,7 @@ export class PageUpdateMemberComponent implements OnInit {
});
}
+
/** Méthode qui envoie les champs modifiés pour mise à jour **/
public onSubmit(): void {
const firstNameValue = this.updateMembreForm.value['firstNameFc'];
@@ -98,8 +100,10 @@ export class PageUpdateMemberComponent implements OnInit {
roleList: [roleValue]
};
- this.membreService.updateMembre(membre).subscribe((resp) => {
- this.router.navigate(['compte']);
+ console.log(membre);
+
+ this.membreService.updateMembre(membre)?.subscribe((resp) => {
+ //this.router.navigate(['compte']);
});
}
diff --git a/src/app/services/membre.service.ts b/src/app/services/membre.service.ts
index d721522..38d2567 100644
--- a/src/app/services/membre.service.ts
+++ b/src/app/services/membre.service.ts
@@ -48,8 +48,13 @@ 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);
- }
+
+ updateMembre(membre: Membre): Observable<any> | void {
+ const teamId = this.tokenService.getCurrentTeamId();
+ if (teamId){
+ return this.http.put(`${this.apiUrl}/membres/update/${teamId}/${membre.id}`, membre);
+ }else {
+ this.router.navigate(['accueil']);
+ }
+}
}