Merge pull request #107 from AlineRinquin/dev

Dev verssion au 14/03/22 version 1.3
2022-03-14 09:55:11 +01:00 · 2022-03-14 09:55:11 +01:00 · 5d4dd47a96
commit 5d4dd47a96
parent 9b67d21485 c807c00176
34 changed files with 219 additions and 99 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -77,7 +77,7 @@ registerLocaleData(localeFr)
    DeconnexionComponent,
    HumeurComponent,
    AlertComponent,
-    PageAjoutEvenementsComponent, 
+    PageAjoutEvenementsComponent,
    PageSupportComponent
  ],
  imports: [
--- a/src/app/components/card-avatar/card-avatar.component.html
+++ b/src/app/components/card-avatar/card-avatar.component.html
@ -1,7 +1,8 @@
 <div class="card m-1 p-1 avatar bg-light">

  <div class="card-img-top">
-    <div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur">
+    <div class="rounded-circle" id="couleur" [style.background-color]="membre.couleur">
+      <img *ngIf="membre.smiley" class="rounded-circle humeur" src="{{membre.smiley}}">
    </div>
  </div>

--- a/src/app/components/card-avatar/card-avatar.component.scss
+++ b/src/app/components/card-avatar/card-avatar.component.scss
@ -13,4 +13,10 @@
  width: 150px;
  height: 170px;
  border-radius: 20px;
+}
+
+.humeur{
+  width: 60px;
+  height: 60px;
+  margin: 0 auto;
 }
--- a/src/app/components/card-member/card-member.component.html
+++ b/src/app/components/card-member/card-member.component.html
@ -6,6 +6,7 @@
            <div class="text-center"><div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur"></div></div>
            <div class="text-center mt-3">
              <h3 class="mt-2 mb-0">{{membre.prenom }}  {{membre.nom }}</h3>
+               <!-- [hidden] pour cacher le bouton si le membre a un profil enfant-->
              <div class="buttons text-center"><button button type="button" class="btn btn-outline-primary px-4"
                        routerLink="../modifier-membre/{{membre.id}}"
                        routerLinkActive="active-custom"
--- a/src/app/components/card-member/card-member.component.ts
+++ b/src/app/components/card-member/card-member.component.ts
@ -16,15 +16,13 @@ export class CardMemberComponent implements OnInit {

  ngOnInit(): void {
    /** Récupérer le rôle de l'uilisateur connecté pour lui imposer des limitations s'il a un ROLE_ENFANT **/
-    /** Il s'agit de cacher les boutons qui permettent de modifier et supprimer les profils (html)**/
+    /** Il s'agit de cacher les boutons qui permettent de modifier et supprimer les profils ([hidden] dans html)**/
    const userRole = this.tokenService.getRole();
    if(userRole == "ROLE_PARENT"){
      this.parent = true;
-      console.log('Rôle : ' + userRole);
    }
    else if(userRole== "ROLE_ENFANT"){
      this.parent = false;
-      console.log('Rôle : ' + userRole);
    }
  }

--- a/src/app/components/fiche-contact/fiche-contact.component.ts
+++ b/src/app/components/fiche-contact/fiche-contact.component.ts
@ -19,6 +19,7 @@ export class FicheContactComponent implements OnInit {
  ngOnInit(): void {
    const roleUser = this.tokenService.getRole();

+    //gestion du role parent ou non pour mettre en "disable" les boutons pour les roles enfants
    if(roleUser == "ROLE_PARENT"){
      this.parent = true;
    }
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@ -1,12 +1,14 @@
 <div class="footer text-center" >
 <h3>Plan du site</h3>
 <div class="liens">
-<a routerLink="../tableau-de-bord" routerLinkActive="active-custom" class="nav-link">Tableau de bord</a>
-<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
+
+<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>  
+<a routerLink="../tableau-de-bord" routerLinkActive="active-custom" class="nav-link">Dashboard</a>
 <a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
 <a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
-<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
 <a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
+<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
 <a routerLink="../page-support" routerLinkActive="active-custom" class="nav-link">Nous contacter</a>
 </div>
 </div>
+<!-- juste une suite de liens pour faire un plan du site et un accès direct -->
--- a/src/app/components/humeur/humeur.component.html
+++ b/src/app/components/humeur/humeur.component.html
@ -3,6 +3,7 @@

    <h2>Mon humeur :</h2>

+  <!-- envoie une alerte sur le header au clic du changement d'humeur-->
  <app-alert
  *ngIf="isShow"
  [alert]="alert"
@ -10,12 +11,13 @@
 ></app-alert>
    
    
-    
+    <!--affichage de l'humeur sur laquelle on a cliqué-->
    <p><img src="{{monHumeurLien}}"  alt="{{monHumeurTitle}}" *ngIf="monHumeurLien" ></p> 
    
    <p>Je modifie mon avatar :</p>
    
-    
+    <!--Directive structurelle *ngFor pour afficher tous les éléments du tableau-->
+    <!-- puis récupération au click de l'indice de l'humeur choisie-->
    <div class="humeur" *ngFor="let humor of tabHumeur; let i=index">
        <img src="{{humor.lien}}" alt="{{humor.title}}"  (click)="onChoixHumeur(i)">
    </div> 
--- a/src/app/components/humeur/humeur.component.ts
+++ b/src/app/components/humeur/humeur.component.ts
@ -13,7 +13,7 @@ monHumeurTitle! : string[] ;
 isShow: boolean;
 alert: any;

-
+// tableau des humeurs, lien vers les images et titre pour meilleure accesibilité
  tabHumeur= [
      { title : "Je vais bien", lien : "assets/images/emoticon-heureux.png"},
      { title : "Je pleure", lien : "assets/images/emoticon-pleurer.png"},
@ -21,27 +21,32 @@ alert: any;
      { title : "Je suis en colère", lien : "assets/images/emoticon-insulter.png"},
      { title : "Je suis en joie", lien : "assets/images/emoticon-feter.png"}  ]

+
  constructor(private membreService: MembreService, private tokenService: TokenService) { 
    this.isShow= false;
    this.alert="";
-    
     }

+// récupère l'id du membre connecté (stocké dans token.service), 
  ngOnInit(): void { 
    const userId = this.tokenService.getCurrentMembreId();
    this.membreService.getMembreId(userId).subscribe({
      next: result => {
-    //this.monHumeurTitle= [this.tabHumeur[result.smiley].title];
    this.monHumeurLien= result.smiley;
-     //  console.log("resultat smiley ", result.smiley);
      }
    })
   }

+// méthode pour récupérer l'indice de l'humeur sur laquelle on a cliqué
 onChoixHumeur(numero: any){
 this.monHumeurTitle= [this.tabHumeur[numero].title];
 this.monHumeurLien= [this.tabHumeur[numero].lien];

+
+
+ // Permet de faire la mise à jour des caractéristiques du membre
+ // Subscribe exécute l'observable, dont le rôle est de suivre le changement d'humeur
+ // et en deuxième ligne de chaque paramètre, affecte l'alerte du header
 this.membreService.updateHumeur(this.tabHumeur[numero].lien)?.subscribe(
  {
    next: result => {
@ -56,11 +61,13 @@ onChoixHumeur(numero: any){
  }
 );

+
 console.log("humeur titre est : ", this.monHumeurTitle);
 console.log("humeur lien est : ", this.monHumeurLien);
 console.log("index humeur est : ", numero);
 }

+// méthode pur afficher
 onClickCloseAlert(){
 this.isShow=!this.isShow;
 }
--- a/src/app/components/signin/signin.component.html
+++ b/src/app/components/signin/signin.component.html
@ -2,38 +2,27 @@
  <main class="form-signin">
    <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
      <div class="connexion">
-      <div class="form-floating">
-        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
-          [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
-                                    'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
-        <label for="floatingInput">Adresse email</label>
+        <div class="form-floating">
+          <input type="email" class="form-control" id="floatingInput" placeholder=""
+                name="email" ngModel required
+                [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
+                'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
+          <label for="floatingInput">Adresse email</label>
+        </div>
+        <div class="form-floating">
+          <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
+                required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
+                'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
+          <label for="floatingPassword">Mot de passe</label>
+        </div>
+        <button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
+        connecter
+        </button>
      </div>
-      <div class="form-floating">
-        <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
-          required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
-                                    'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
-        <label for="floatingPassword">Mot de passe</label>
-      </div>
-
-      <button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
-        connecter</button>
-</div>
-
      <button class="w-100 btn btn-lg btn-outline-success" routerLink="../creation-compte"
-        routerLinkActive="active-custom">S'inscrire</button>
-
+              routerLinkActive="active-custom">S'inscrire</button>
    </form>
    <a routerLink="/password-oublie" routerLinkActive="active-custom" class="nav-link">password perdu ?</a>
-    <!-- <div *ngIf="errorForm">
-      <p class="text-danger">Il manque des informations dans le formulaire...</p>
-    </div> -->
-    
    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
-    
-    <!-- <div *ngIf="isShow">
-      <div class="alert alert-{{alert.type}}" role="alert">
-        {{alert.content}}
-      </div>
-    </div> -->
  </main>
 </div>
--- a/src/app/components/to-do-list/to-do-list.component.ts
+++ b/src/app/components/to-do-list/to-do-list.component.ts
@ -110,8 +110,6 @@ export class ToDoListComponent implements OnInit {
    tache.editing = false;
  }

-
-
  //supprimer la tache
  deleteTache(id: number) {
    this.TodoService.deleteTacheById(id).subscribe((resp) => {
--- a/src/app/pages/page-add-member/page-add-member.component.html
+++ b/src/app/pages/page-add-member/page-add-member.component.html
@ -157,6 +157,7 @@
            Ajouter le membre
          </button>
        </form>
+        <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
      </div>
    </div>
  </div>
--- a/src/app/pages/page-add-member/page-add-member.component.ts
+++ b/src/app/pages/page-add-member/page-add-member.component.ts
@ -28,6 +28,7 @@ export class PageAddMemberComponent implements OnInit {
    private fb: FormBuilder
  ) {
    this.addMemberForm = new FormGroup({});
+    this.isShow = false;
  }

  ngOnInit(): void {
@ -130,4 +131,10 @@ export class PageAddMemberComponent implements OnInit {
      }
    };
  }
+
+   //fermeture du message d'alerte
+   onClickCloseAlert(){
+    console.log('fermeture');
+    this.isShow = ! this.isShow;
+  }
 }
--- a/src/app/pages/page-agenda/page-agenda.component.html
+++ b/src/app/pages/page-agenda/page-agenda.component.html
@ -41,21 +41,21 @@
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigatePrevious($event)"
-            >Previous</a
+            >Semaine précedente</a
          >
          <a
            href="#"
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigateToday($event)"
-            >Today</a
+            >Aujourd'hui</a
          >
          <a
            href="#"
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigateNext($event)"
-            >Next</a
+            >Semaine suivante</a
          >

          <!-- DEBUT : Pour le debugage -->
--- a/src/app/pages/page-agenda/page-agenda.component.scss
+++ b/src/app/pages/page-agenda/page-agenda.component.scss
@ -55,6 +55,7 @@
 .btn {
  background-color: rgb(241,120,182);
  color : white;
-  border-radius: 12px;
+  border-radius: 6px;
  border-color: white;
+  font-weight: bold;
 }
--- a/src/app/pages/page-agenda/page-agenda.component.ts
+++ b/src/app/pages/page-agenda/page-agenda.component.ts
@ -234,16 +234,19 @@ export class PageAgendaComponent implements AfterViewInit {
    });
  }

+  // bouton pour afficher la semaine precedente
  navigatePrevious(event: MouseEvent): void {
    event.preventDefault();
    this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(-7);
  }

+  // bouton pour afficher la semaine suivante
  navigateNext(event: MouseEvent): void {
    event.preventDefault();
    this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(7);
  }

+  // bouton pour afficher la semaine en cours
  navigateToday(event: MouseEvent): void {
    event.preventDefault();
    this.config.startDate = DayPilot.Date.today();
--- a/src/app/pages/page-dashboard/page-dashboard.component.html
+++ b/src/app/pages/page-dashboard/page-dashboard.component.html
@ -24,7 +24,7 @@

    </div>

-      <div class="row d-flex flex-wrap my-2 p-1">
+      <div class="row d-flex flex-wrap my-2 p-1 d-flex">
        <ul class="list-inline">
          <li class="list-inline-item" *ngFor="let membreData of listMembres">
            <app-card-avatar class="avatar" [membre]="membreData"> </app-card-avatar>
--- a/src/app/pages/page-dashboard/page-dashboard.component.scss
+++ b/src/app/pages/page-dashboard/page-dashboard.component.scss
@ -24,5 +24,5 @@ h3{
 }

 .avatar{
-  margin:O;
+  margin:10px;
 }
--- a/src/app/pages/page-forgot-password/page-forgot-password.component.html
+++ b/src/app/pages/page-forgot-password/page-forgot-password.component.html
@ -12,11 +12,16 @@
      <!-- <button class="w-100 btn btn-lg btn-success"  type="submit" [disabled]="forgotForm.invalid" routerLink="../reinitialisation-password"
        routerLinkActive="active-custom">Ré-initialiser mon mot de passe</button> -->

-        <button
+        <button 
        class="w-100 btn btn-lg btn-outline-success"
        type="submit"
        [disabled]="forgotForm.invalid">
        Ré-initialiser mon mot de passe
+        <div class="text-center" *ngIf="isLoading">
+          <div class="spinner-border" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
      </button>
    </form>
    <br/> <br/>
@ -25,11 +30,6 @@
        {{alert.content}}
      </div>
    </div>
-<!--
-    <div *ngIf="errorForm">
-      <p class="text-danger">Il manque des informations dans le formulaire...</p>
-    </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
@ -15,10 +15,12 @@ export class PageForgotPasswordComponent implements OnInit {

  alert : any;
  isShow : boolean;
+  isLoading : boolean;

  constructor(private authService: AuthService, private router: Router, private mailService: MailService,) {
    this.alert = "";
    this.isShow = false;
+    this.isLoading = false;
  }

  ngOnInit(): void {}
@ -36,26 +38,36 @@ export class PageForgotPasswordComponent implements OnInit {
        passwordConfirm: ""
      };

-    console.log(membre);
+    //console.log(membre);


    this.authService.forgotPassword(membre).subscribe(
      {
        next: result => {
-          this.alert={"type":"success", "content":"Un mail à été envoyé !"};
-          this.isShow = true;
          const mail: Mail = {
            recipient: submittedForm.form.value.email,
            subject: "Votre mot de passe Organizee",
-            //message: 'Votre mot de passe'
            message: `
            Bonjour!\n
            Vous avez fait une demande de ré-initialisation de mot de passe. \n
            Cliquez sur le lien pour définir un nouveau mot de passe: \n
-            Lien  : http://192.168.1.16:4200/reinitialisation-password/${result}`
+            Lien  : http://localhost:4200/reinitialisation-password/${result}`
          };
-          this.mailService.envoiMailText(mail)?.subscribe((respMail) =>{
-            console.log("Mail envoyé");
+          this.isLoading = true;
+          this.mailService.envoiMailText(mail).subscribe(
+            {
+              next: respMail => {
+                //console.log("Mail envoyé");
+                this.alert={"type":"success", "content":"Le mail à été envoyé !"};
+                this.isShow = true;  
+                this.isLoading = false;            
+              },
+              error: err => {
+                this.alert={"type":"danger", "content":"Echec lors de l'envoi de mail"};
+                this.isShow = true;
+                this.isLoading = false;            
+              },
+              complete: () => console.log('DONE!')
          })
        },
        error: err => {
--- a/src/app/pages/page-not-found/page-not-found.component.html
+++ b/src/app/pages/page-not-found/page-not-found.component.html
@ -6,7 +6,11 @@
 <div class="text-center">
 

+<!--App-rooting.ts indique que si aucun url ne correspond, on arrive sur cette page-->
+<!-- { path: '**', component: PageNotFoundComponent },-->

+
+<!--Lien pour nous renvoyer à la racine du localhost-->
      <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
      <p></p>
      
--- a/src/app/pages/page-not-found/page-not-found.component.scss
+++ b/src/app/pages/page-not-found/page-not-found.component.scss
@ -11,8 +11,6 @@ p{

 .min-vh-100  {
    font-weight: bold;
-    //background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
-    //max-width: max-content;
 }

 img {justify-content: center;
--- a/src/app/pages/page-repertoire/page-repertoire.component.ts
+++ b/src/app/pages/page-repertoire/page-repertoire.component.ts
@ -33,6 +33,7 @@ export class PageRepertoireComponent implements OnInit {
  ngOnInit(): void {
    const roleUser = this.tokenService.getRole();

+    //gestion du role parent ou non pour mettre en "disable" les boutons pour les roles enfants
    if(roleUser == "ROLE_PARENT"){
      this.parent = true;
    }
--- a/src/app/pages/page-reset-password/page-reset-password.component.html
+++ b/src/app/pages/page-reset-password/page-reset-password.component.html
@ -2,7 +2,7 @@
 <div class="reset-form text-center">
  <main class="form-reset">
    <form (ngSubmit)="onSubmit()" [formGroup]="resetForm">
-      <h3>Entrez ici votre email et votre nouveau mot de passe</h3>
+      <h3>Entrez ici votre nouveau mot de passe</h3>
      <div class="form-floating">
        <input
          type="password"
--- a/src/app/pages/page-signup/page-signup.component.html
+++ b/src/app/pages/page-signup/page-signup.component.html
@ -83,7 +83,7 @@
              !signupForm.controls['dateNaissanceFc'].valid
          }"
        />
-        <label for="floatingInputdateNaissance">Votr date de naissance</label>
+        <label for="floatingInputdateNaissance">Votre date de naissance</label>
      </div>
      <div class="form-floating">
        <input
@ -149,7 +149,7 @@
        [disabled]="signupForm.invalid">
        CREER MON COMPTE
      </button>
-
    </form>
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
  </main>
 </div>
--- a/src/app/pages/page-signup/page-signup.component.ts
+++ b/src/app/pages/page-signup/page-signup.component.ts
@ -18,6 +18,8 @@ import { AuthService } from '../../services/auth.service';
 })
 export class PageSignupComponent implements OnInit {
  public signupForm: FormGroup;
+  alert: any;
+  isShow!: boolean;

  constructor(
    private authService: AuthService,
@ -26,10 +28,11 @@ export class PageSignupComponent implements OnInit {
    private fb: FormBuilder
  ) {
    this.signupForm = new FormGroup({});
+    this.isShow = false;
  }

  ngOnInit(): void {
-    // *********************************pensser a changer group car déprécié********************************
+    // ********************************* Pour V2 : changer group car déprécié********************************
    this.signupForm = this.fb.group(
      {
        teamNameFc: new FormControl('', [Validators.required]),
@ -101,7 +104,8 @@ export class PageSignupComponent implements OnInit {

      });
    } else {
-      // affichage erreur
+      this.alert={"type":"danger", "content":"Votre profil n'a pas été créé"};
+      this.isShow = true;
    }
  }
  /** Méthode pour compare le mot de passe et la confirmation de mot de passe **/
@ -122,4 +126,10 @@ export class PageSignupComponent implements OnInit {
      }
    };
  }
+
+   //fermeture du message d'alerte
+   onClickCloseAlert(){
+    console.log('fermeture');
+    this.isShow = ! this.isShow;
+  }
 }
--- a/src/app/pages/page-support/page-support.component.html
+++ b/src/app/pages/page-support/page-support.component.html
@ -1,32 +1,38 @@
-<!--  <div>
-<app-header></app-header>
-<app-side-bar></app-side-bar>
-</div>   -->
+<div>
+    <app-header></app-header>
+    <app-side-bar></app-side-bar>
+</div>
+<app-side-bar [backgroundColor]="'rgb(184, 202, 235)'"></app-side-bar>


 <div>
-    <h2>Demande support</h2>
-    <form action="/demande_support" method="post">
+
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert()"></app-alert>
+    <h2>Nous contacter</h2>
+    <form (ngSubmit)="onSubmit()" [formGroup]="contactForm">
+

        <label for="name">Nom :</label>
        <div>
-            <input type="text" id="name" value="Votre nom" name="user_name">
+            <input type="text" id="floatingInputlastName" [(ngModel)]="expName" placeholder="{{expName}}"   name="lastName" formControlName="lastNameFc" />
        </div>

        <label for="mail">E-mail :</label>
        <div>
-            <input type="email" id="mail" name="user_mail" value="Votre adresse mail">
+            <input type="email" id="floatingInputemail" placeholder="{{expMail}}" [(ngModel)]="expMail" name="email" formControlName="emailFc" />
        </div>
-        <label for="msg">Message :</label>
-        <div>

-            <textarea id="msg" name="user_message">Formulez votre demande ici</textarea>
-        </div>
+        <label for="msg">Message :</label>
+        <textarea formControlName="messageFc" id="msg" name="message" placeholder="Formulez votre demande ici"
+            required></textarea>
+
        <div class="button">
-            
-            <button class="btn btn-primary">Envoyez votre message</button>
-            <button type="button" class="btn btn-danger">Effacer</button>
+            <button type="submit" [disabled]="contactForm.invalid" class="btn btn-primary">Envoyez votre
+                message</button>
+            <button type="button" class="btn btn-danger" (click)="onDeleteMail()">Effacer</button>
        </div>
+
    </form>
 </div>
+
 <app-footer></app-footer>
--- a/src/app/pages/page-support/page-support.component.scss
+++ b/src/app/pages/page-support/page-support.component.scss
@ -1,9 +1,12 @@
+
+
+
 form {
  background-color: rgb(184, 202, 235);
  width: 600px;
-  border: 3px solid blue;
+  border: 1px solid blue;
  margin: 0 auto;
-  border-radius: 1em;
+  border-radius: 2em;
  padding:3em;
  }

--- a/src/app/pages/page-support/page-support.component.ts
+++ b/src/app/pages/page-support/page-support.component.ts
@ -1,19 +1,83 @@
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MembreService } from 'src/app/services/membre.service';
+import { TokenService } from 'src/app/services/token.service';
+import { MailService } from 'src/app/services/mail.service';
 import { Component, OnInit } from '@angular/core';
+import { Mail } from 'src/app/models/mail';

-//DRIVEN FORM
@Component({
  selector: 'app-page-support',
  templateUrl: './page-support.component.html',
  styleUrls: ['./page-support.component.scss']
 })
 export class PageSupportComponent implements OnInit {
+  public contactForm: FormGroup;
+  memberName: any;
+  alert: any;
+  isShow: boolean;
+expName: any;
+expMail: any;

-  constructor() { }
+
+  constructor(private membreService: MembreService,
+    private tokenService: TokenService,
+    private fb: FormBuilder,
+    private mailService: MailService,
+  ) {
+    this.contactForm = new FormGroup({});
+    this.alert = "";
+    this.isShow = false;
+  }

  ngOnInit(): void {
+    this.contactForm = this.fb.group(
+      {
+        lastNameFc: new FormControl('', [Validators.required]),
+        emailFc: new FormControl('', [Validators.required]),
+        messageFc: new FormControl('', [Validators.required]),
+      }
+    );
+    this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((result) => {
+      this.memberName = result;
+      this.expName = this.memberName.nom;
+      this.expMail = this.memberName.email;
+    })
+  }
+
+  public onSubmit(): void {
+    const nomValue = this.contactForm.value['lastNameFc'];
+    const emailValue = this.contactForm.value['emailFc'];
+    const messageValue = this.contactForm.value['messageFc'];
+    console.log(this.contactForm);
+
+
+    const mail: Mail = {
+      recipient: "organizee.contact@gmail.com",
+      subject: "Demande de support",
+      message: `
+      Bonjour!\n
+      Nouveau message d'un utilisateur du site\n
+      Nom : ${nomValue} \n
+      Email : ${emailValue} \n
+      Message : ${messageValue} \n `
+    };
+    this.mailService.envoiMailText(mail)?.subscribe((respMail) => {
+      console.log("Mail envoyé");
+      this.alert = { "type": "success", "content": "Votre message a été envoyé" };
+      this.isShow = true;
+    })
+  }
+
+  onDeleteMail() {
+    console.log("Formulaire effacé");
+    location.reload();
+    this.alert = { "type": "danger", "content": "Réinitialisation en cours" };
+    this.isShow = true;
+  }
+
+  onClickCloseAlert() {
+    this.isShow = !this.isShow;
  }


-}
-
-
+}
--- 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,7 +1,7 @@
 <app-header></app-header>
 <app-side-bar [backgroundColor]="'#4E9E7B'"></app-side-bar>
 <h2 class="titre">To-Do-List</h2>
-<div class="row ">
+<div class="row">
  <div class="col menu text-center">
    <div class="d-flex align-items-stretch"></div>
    <input
--- 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
@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { ToDoList } from 'src/app/models/to-do-list';
 import { TodoService } from 'src/app/services/todo.service';

-
@Component({
  selector: 'app-page-to-do-list',
  templateUrl: './page-to-do-list.component.html',
@ -42,8 +41,8 @@ export class PageToDoListComponent implements OnInit {
        console.log(todoList);
        window.location.reload(); //rafraîchit l'aperçu
      });
-    }else{
-    window.alert('Il faut saisir du texte'); // sinon msg d'erreur
+    } else {
+      window.alert('Il faut saisir du texte'); // sinon msg d'erreur
    }
  }
 }
--- a/src/app/services/mail.service.ts
+++ b/src/app/services/mail.service.ts
@ -18,7 +18,7 @@ export class MailService {
    this.tokenKey = environment.tokenKey;
  }

-  envoiMailText(mail: Mail): Observable<any> | void{
+  envoiMailText(mail: Mail): Observable<any>{
    return this.http.post(`${this.apiUrl}/sendmail/text`, mail, {
      responseType: "text"
    });
--- a/src/app/services/membre.service.ts
+++ b/src/app/services/membre.service.ts
@ -58,6 +58,8 @@ export class MembreService {
    }
 }

+//récupère l'identifiant du membre, ainsi que le lien de son humeur
+//"numero" est l'indice de l'humeur dans le tableau des humeurs
 updateHumeur(numero : any) : Observable<any> | void {
  const userId = this.tokenService.getCurrentMembreId();
  if (userId){
@ -67,6 +69,10 @@ updateHumeur(numero : any) : Observable<any> | void {
  }
 }

+
+
+
+
 }


--- a/src/app/services/todo.service.ts
+++ b/src/app/services/todo.service.ts
@ -43,10 +43,10 @@ export class TodoService {
    return this.http.put(`${this.apiUrl}/taches/update/1`, tache);
  }

-  //ajoute ne todoList sur une team (par son id) via le token
+  //ajoute une todoList sur une team (par son id) via le token
  addTodoByTeamId(newtodoList: TodoList): Observable<any> {
    const teamId = this.tokenService.getCurrentTeamId();
-    console.log(newtodoList + 'newtodoList');
+    console.log(newtodoList);
    return this.http.post(`${this.apiUrl}/todolist/add/${teamId}`, newtodoList);
  }