Merge branch 'dev' into page404

.vscode/settings.json

@@ -1,5 +1,2 @@
 {
-    "workbench.colorCustomizations": {
-        "titleBar.activeBackground": "#4950a1"
-    }
 }

package.json

@@ -20,6 +20,7 @@
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
     "jwt-decode": "^3.1.2",
+    "ngx-autofocus-fix": "^1.0.4",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.co
 import { PageDeleteMemberComponent } from './pages/page-delete-member/page-delete-member.component';
 import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
 import { PageMenuSemaineComponent } from './pages/page-menu-semaine/page-menu-semaine.component';
+import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { PageRepertoireComponent } from './pages/page-repertoire/page-repertoire.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
@@ -19,6 +20,7 @@ import { PageUpdateMemberComponent } from './pages/page-update-member/page-updat
 
 const routes: Routes = [
   { path: '', redirectTo: 'accueil', pathMatch: 'full' },
+  { path: 'modifier-contact/:id', component: PageModifierContactComponent },
   { path: 'compte', component: PageAccountComponent },
   { path: 'accueil', component: PageAccueilComponent },
   { path: 'ajout-membre', component: PageAddMemberComponent },
@@ -33,8 +35,7 @@ const routes: Routes = [
   { path: 'to-do-list', component: PageToDoListComponent },
   { path: 'modifier-membre', component: PageUpdateMemberComponent },
   { path: 'ajouter-contact', component: PageAjoutContactComponent },
-  { path: 'modifier-contact', component: PageAjoutContactComponent },
+  { path: 'creation-team', component: PageCreationTeamComponent },
-  { path: 'creation-team', component : PageCreationTeamComponent},
   { path: '**', component: PageNotFoundComponent },
 ];
 

src/app/app.module.ts

@@ -36,7 +36,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout-contact.component';
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
-import { EmoticonComponent } from './emoticon/emoticon.component';
+import { AutofocusFixModule  } from 'ngx-autofocus-fix';
+
+
 
 @NgModule({
   declarations: [
@@ -72,7 +74,6 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
-    EmoticonComponent,
   ],
   imports: [
     BrowserModule,
@@ -80,6 +81,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     ReactiveFormsModule,
     HttpClientModule,
     FormsModule,
+    AutofocusFixModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/components/fiche-contact/fiche-contact.component.html

@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-sm">  
-            <button class="w-100 btn btn-lg btn-rounded btn-secondary">
+            <button routerLink="../modifier-contact/{{personne.id}}"  class="w-100 btn btn-lg btn-rounded btn-secondary">
                 Modifier
             </button>
         </div>

src/app/components/header/header.component.html

@@ -2,7 +2,7 @@
     <div class="container-fluid">
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
-                <img routerLink="accueil" routerLinkActive="active-custom" class="nav-link" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-organizee.png"/>
+                <img id="img" routerLink="accueil" routerLinkActive="active-custom" src="../../../assets/images/logo-organizee.png"/>
             </div>
         </div>
         <a class="navbar-brand" href="#">Organizee</a>

src/app/components/header/header.component.scss

@@ -1,4 +1,33 @@
 .navbar-brand {
   position: absolute;
-  margin-left: 10%;
+  margin-left: 12%;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 3rem;
+  color: #5d5fef;
+}
+
+a:visited {
+  color: #5d5fef;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #a5a6f6;
+}
+
+a:hover {
+  color: #7879f1;
+}
+
+a:active {
+  color: #5d5fef;
+}
+
+.navbar-nav {
+  height: 6rem;
+}
+
+#img {
+  margin-left: 50%;
 }

src/app/components/meteo/meteo.component.html

@@ -1 +1,7 @@
-<p>meteo works!</p>
+<div class="meteo">
+  <input type="text" id="ville">
+  <label for="ville">Entrez votre code postal</label>
+  <button id="meteo-button">Ok !</button>
+  <iframe id="widget_autocomplete_preview" width="150" height="300" frameborder="0"
+    src="https://meteofrance.com/widget/prevision/751010"> </iframe>
+</div>

src/app/components/signin/signin.component.html

@@ -1,40 +1,26 @@
-
 <div class="signin-form text-center">
   <main class="form-signin">
     <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+      <div class="connexion">
       <div class="form-floating">
-                <input type="email" 
+        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
-                        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" 
+        <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
-                        class="form-control" 
+          required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
-                        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-success" 
+      <button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
-                    type="submit"
+        connecter</button>
-                    [disabled]="signinForm.invalid">Se connecter</button>
+</div>
 
-
+      <button class="w-100 btn btn-lg btn-outline-success" routerLink="../creation-compte"
-            <button class="w-100 btn btn-lg btn-success" 
+        routerLinkActive="active-custom">S'inscrire</button>
-            routerLink="../creation-compte" routerLinkActive="active-custom"
-            >S'inscrire</button>
 
     </form>
 

src/app/components/signin/signin.component.scss

@@ -1,31 +1,46 @@
 .signin-form {
   height: 100vh;
   padding-top: 40px;
-  background-color: #f5f5f5;
+  background-color: #fff;
 }
 
 .form-signin {
   width: 100%;
   max-width: 330px;
-  padding: 15px;
+  margin-top: 50px;
-  margin: auto;
+  margin-left: auto;
-  .checkbox {
+  margin-right: auto;
-    font-weight: 400;
+}
-  }
 
-  .form-floating:focus-within {
+.connexion {
+  border: solid 4px;
+  border-radius: 10px;
+  background-color: #ffff;
+  border-color: #5d5fef;
+}
+
+.form-floating:focus-within {
   z-index: 2;
-  }
+}
 
-  input[type="email"] {
+input[type="email"] {
   margin-bottom: -1px;
+  margin-right: 50px;
+  padding-right: 10px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
-  }
+}
 
-  input[type="password"] {
+input[type="password"] {
+  padding-right: 10px;
   margin-bottom: 10px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  }
+}
+.btn-outline-success {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  background-color: #ffff;
+  color: #5d5fef !important;
+  border-color: #5d5fef !important;
 }

src/app/components/to-do-list/to-do-list.component.html

@@ -1 +1,72 @@
-<p>to-do-list works!</p>
+<input
+  type="text"
+  class="todo-input"
+  placeholder="Ajoute une nouvelle Tâche"
+  [(ngModel)]="todoTitle"
+  (keyup.enter)="addTitle()"
+/>
+
+<div class="element" *ngFor="let todo of todosFilter()">
+  <div class="element-gauche">
+    <input
+      type="checkbox"
+      [(ngModel)]="todo.completed"
+      (change)="doneEdit(todo)"
+    />
+    <div
+      *ngIf="!todo.editing; else editingTodo"
+      class="nomTache"
+      [ngClass]="{ completed: todo.completed }"
+      (dblclick)="modifier(todo)"
+    >
+      {{ todo.title }}
+    </div>
+    <ng-template #editingTodo>
+      <input
+        type="text"
+        class="modifier-element"
+        [(ngModel)]="todo.title"
+        (blur)="doneEdit(todo)"
+        (keyup.enter)="doneEdit(todo)"
+        (keyup.esc)="cancelEdit(todo)"
+        autofocus
+      />
+    </ng-template>
+  </div>
+  <div class="deleteTache" (click)="deleteTodo(todo.id)">&times;</div>
+</div>
+<div class="extra-container">
+  <div>
+    <label
+      ><input
+        type="checkbox"
+        (change)="cocherAllTodoList()"
+        [(ngModel)]="masterSelected"
+      />Selectionner toutes les tâches</label
+    >
+  </div>
+  <div>{{ toDoRest() }} tâches</div>
+</div>
+<div class="extra-container">
+  <div>
+    <button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
+      Toutes la To Do List
+    </button>
+    <button
+      [ngClass]="{ active: filter === 'active' }"
+      (click)="filter = 'active'"
+    >
+      A Faire
+    </button>
+    <button
+      [ngClass]="{ active: filter === 'complete' }"
+      (click)="filter = 'complete'"
+    >
+      Terminées
+    </button>
+  </div>
+
+  <div>
+    <button (click)="effacerList()">Effacer la To Do List</button>
+  </div>
+</div>

src/app/components/to-do-list/to-do-list.component.scss

@@ -0,0 +1,86 @@
+.todo-input {
+  width: 100%;
+  padding: 10px 18px;
+  font-size: 18px;
+  margin-bottom: 16px;
+  &:focus {
+    outline: 0;
+  }
+}
+.element {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  animation-duration: 0.3s;
+}
+
+.deleteTache {
+  cursor: pointer;
+  margin-left: 14px;
+  &:hover {
+    color: black;
+  }
+}
+
+.element-gauche { // later
+  display: flex;
+  align-items: center;
+}
+
+.nomTache{
+  padding: 10px;
+  border: 1px solid white;
+  margin-left: 12px;
+}
+
+.modifier-element {
+  font-size: 24px;
+  color: #2c3e50;
+  margin-left: 12px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc; //override defaults
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}
+
+.extra-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  border-top: 1px solid lightgrey;
+  padding-top: 14px;
+  margin-bottom: 14px;
+}
+
+button {
+  font-size: 14px;
+  background-color: white;
+  appearance: none;
+
+  &:hover {
+    background: lightgreen;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.active {
+  background: lightgreen;
+}
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}

src/app/components/to-do-list/to-do-list.component.ts

@@ -1,15 +1,138 @@
 import { Component, OnInit } from '@angular/core';
+import { Todo } from 'src/app/interfaces/todo';
 
 @Component({
   selector: 'app-to-do-list',
   templateUrl: './to-do-list.component.html',
-  styleUrls: ['./to-do-list.component.scss']
+  styleUrls: ['./to-do-list.component.scss'],
 })
 export class ToDoListComponent implements OnInit {
+  public beforeEditCache: string;
+  public todos: Todo[];
+  public todoTitle: string;
+  public idTodo: number;
+  public filter : string;
+  public casesRestantes : boolean;
+  public masterSelected: boolean;
 
-  constructor() { }
+  constructor() {
-
+    this.beforeEditCache = '';
-  ngOnInit(): void {
+    this.todos = [];
+    this.todoTitle = '';
+    this.idTodo = 0;
+    this.filter ='';
+    this.casesRestantes=true;
+    this.masterSelected= false;
   }
 
-}
+  ngOnInit(): void {
+    this.beforeEditCache = '';
+    this.casesRestantes=true;
+    this.filter='tous';
+    this.idTodo = 4;
+    this.todoTitle = '';
+    this.todos = [
+      {
+        id: 1,
+        title: 'Finish Angular Screencast',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 2,
+        title: 'Take over world',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 3,
+        title: 'One more thing',
+        completed: false,
+        editing: false,
+      },
+    ];
+  }
+  //ajouter tache
+  addTitle(): void {
+    if (this.todoTitle.trim().length === 0) {
+      return;
+    }
+
+    this.todos.push({
+      id: this.idTodo,
+      title: this.todoTitle,
+      completed: false,
+      editing: false,
+    });
+    this.todoTitle = '';
+    this.idTodo++;
+  }
+
+  //modifier la tâche
+  modifier(todo: Todo): void {
+    this.beforeEditCache = todo.title;
+    todo.editing = true;
+  }
+
+  // modifier l'apparence focus
+  doneEdit(todo: Todo): void {
+    if (todo.title.trim().length === 0) {
+      todo.title = this.beforeEditCache;
+    }
+    this.casesRestantes= this.casesQuiRestes();
+    todo.editing = false;
+  }
+
+  // annuler la modification
+  cancelEdit(todo: Todo): void {
+    todo.title = this.beforeEditCache;
+    todo.editing = false;
+  }
+
+  //supprimer la tache
+  deleteTodo(id: number): void {
+    this.todos = this.todos.filter((todo) => todo.id !== id);
+  }
+
+  //nombre de tâches restantes
+  toDoRest(): number{
+    return this.todos.filter(todo=> !todo.completed).length;
+  }
+
+  //Cocher toutes les tâches de la liste
+  listComplete(): boolean {
+    return this.todos.filter(todo=> todo.completed).length>0;
+  }
+
+  //Effacer la to do list
+
+  effacerList(): void {
+    this.todos = [];
+  }
+
+  //cocher toutes les cases de la todoList
+  cocherAllTodoList(): void {
+    for (var i = 0; i < this.todos.length; i++) {
+      this.todos[i].completed = this.masterSelected;
+    }
+    this.cocherAllTodoList();
+  }
+
+  casesQuiRestes(): boolean {
+    return this.toDoRest() !== 0;
+  }
+
+  //barre de filtre des tâches
+  todosFilter(): Todo[] {
+    if(this.filter === 'tous'){
+      return this.todos
+    }else if (this.filter === 'active'){
+      return this.todos.filter(todo=> !todo.completed)
+    }else if (this.filter === 'complete'){
+      return this.todos.filter(todo=>todo.completed)
+    }
+    return this.todos
+    }
+  }
+
+

src/app/interfaces/todo.ts

@@ -0,0 +1,7 @@
+export interface Todo {
+  id : number,
+  title : string,
+  completed: boolean,
+  editing: boolean
+}
+

src/app/models/contact.ts

@@ -1,8 +1,10 @@
 export interface Contact {
+  id: string;
   nom: string;
   prenom: string;
   telephone: string;
   email: string;
   adresse: string;
   dateNaissance: Date;
+  team: any;
 }

src/app/models/membre.ts

@@ -4,6 +4,7 @@ export interface Membre {
   email: string;
   password: string;
   dateNaissance: Date;
+  couleur: string;
   passwordConfirm: string;
   roleList: string[];
 }

src/app/pages/page-accueil/page-accueil.component.html

@@ -1,2 +1,22 @@
 <app-header></app-header>
+<body>
+<div class="bienvenue">
+  <h2 class="titre">BIENVENUE</h2>
+<p>
+Notre service vous offre des outils et des fonctionnalités pour vous aider à gérer la charge mentale de votre foyer.
+<p>Réunis à un seul endroit pour toute la famille, vous pourrez faire des suggestions de menus, gérer un répertoire de
+contacts utiles et établir des to-dot-list communes.</p>
+<p>Plus de conflit, plus d’excuse de pas avoir su ou de ne pas avoir
+lu, nous sommes là pour vous aider !</p>
+
+</div>
+<div class="connexion">
 <app-signin></app-signin>
+</div>
+<div class="pub">
+  <img src="../../../assets/images/menu.png" />
+  <img src="../../../assets/images/repertoire.png" />
+  <img src="../../../assets/images/todo.png" />
+  </div>
+
+</body>

src/app/pages/page-accueil/page-accueil.component.scss

@@ -0,0 +1,39 @@
+.bienvenue {
+  float: left;
+  display: inline;
+  border: 4px solid #5d5fef;
+  border-radius: 10px;
+  margin-top: 50px;
+  margin-left: 200px;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.titre {
+  text-align: center;
+}
+
+p {
+  font-size: 1em;
+  line-height: 2em;
+}
+.connexion {
+  float: right;
+  display: inline;
+  margin-top: -40px;
+  margin-right: 200px;
+}
+
+.pub {
+  padding-top: 100px;
+  padding-right: 100px;
+  padding-left: 200px;
+  display: flex;
+  justify-content: space-between;
+}
+
+img {
+  border: 1px solid #d3d3d3;
+  border-radius: 10px;
+  box-shadow: 6px 6px #d3d3d3;
+}

src/app/pages/page-add-member/page-add-member.component.html

@@ -5,6 +5,11 @@
       <form  (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
           <h1>J'inscris un nouveau membre</h1>
           <div class="form-floating">
+            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+                    formControlName="couleurFc">
+                  <label for="floatingInputcouleur">Choisissez une couleur !</label>
+                  </div>
+          <!-- <div class="form-floating">
             <input type="text"
                     class="form-control"
                     id="floatingInputlastName"
@@ -14,7 +19,7 @@
                     [ngClass]="{'is-valid' : addMemberForm.controls['lastNameFc'].touched && addMemberForm.controls['lastNameFc'].valid,
                                 'is-invalid':  addMemberForm.controls['lastNameFc'].touched && !addMemberForm.controls['lastNameFc'].valid}">
             <label for="floatingInputlastName">Avatar</label>
-        </div>
+        </div> -->
           <div class="form-floating">
               <input type="text"
                       class="form-control"
@@ -48,19 +53,6 @@
                                   'is-invalid':  addMemberForm.controls['dateNaissanceFc'].touched && !addMemberForm.controls['dateNaissanceFc'].valid}">
               <label for="floatingInputfirstName">Date de naissance</label>
           </div>
-          <div class="form-floating">
-              <select type="text"
-                      class="form-control"
-                      id="floatingInputprofil"
-                      name="profil"
-                      formControlName="profilFc"
-                      [ngClass]="{'is-valid' : addMemberForm.controls['profilFc'].touched && addMemberForm.controls['profilFc'].valid,
-                                  'is-invalid':  addMemberForm.controls['profilFc'].touched && !addMemberForm.controls['profilFc'].valid}">
-                              <option>Adulte</option>
-                              <option>Enfant</option>
-              </select>
-              <label for="floatingInputfirstName">Profil</label>
-          </div>
              <div class="form-floating">
               <input type="email"
                       class="form-control"

src/app/pages/page-add-member/page-add-member.component.ts

@@ -27,7 +27,7 @@ export class PageAddMemberComponent implements OnInit {
         firstNameFc: new FormControl('', [Validators.required]),
         lastNameFc: new FormControl('', [Validators.required]),
         dateNaissanceFc: new FormControl('', [Validators.required]),
-        profilFc: new FormControl('', [Validators.required]),
+        couleurFc: new FormControl('', [Validators.required]),
         emailFc: new FormControl('', [
           Validators.email,
           Validators.required,
@@ -56,16 +56,16 @@ export class PageAddMemberComponent implements OnInit {
     const emailValue = this.addMemberForm.value['emailFc'];
     const passwordValue = this.addMemberForm.value['passwordFc'];
     const dateNaissanceValue = this.addMemberForm.value['dateNaissanceFc'];
-    const teamNameValue = this.addMemberForm.value['teamNameFc'];
+    const couleurValue = this.addMemberForm.value['couleurFc'];
-    const profilValue = this.addMemberForm.value['profilFc'];
     const passwordConfirmValue = this.addMemberForm.value['passwordConfirmFc'];
-    const teamValue = [''];
+
 
     const membre: Membre = {
       nom: firstNameValue,
       prenom: lastNameValue,
       email: emailValue,
       password: passwordValue,
+      couleur: couleurValue,
       dateNaissance: dateNaissanceValue,
       passwordConfirm: passwordConfirmValue,
       roleList: ["ROLE_PARENT"]

src/app/pages/page-ajout-contact/page-ajout-contact.component.html

@@ -73,7 +73,7 @@
                 <label for="floatingInputfirstName">Adresse</label>
             </div>
 
-            <button class="w-100 btn btn-lg btn-success" 
+            <button class="w-100 btn btn-lg btn-secondary" 
                     type="submit" 
                     [disabled]="ajoutContactForm.invalid">Valider</button>
 

src/app/pages/page-ajout-contact/page-ajout-contact.component.scss

@@ -24,3 +24,8 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+.btn-secondary {
+  color: #fff;
+  background-color: #5a1e63 !important;
+}

src/app/pages/page-ajout-contact/page-ajout-contact.component.ts

@@ -26,7 +26,7 @@ export class PageAjoutContactComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    // *********************************pensser a changer group car déprécié********************************
+    // *********************************pensser à changer group car déprécié********************************
     this.ajoutContactForm = this.fb.group({
       lastNameFc: new FormControl('', [Validators.required]),
       firstNameFc: new FormControl('', [Validators.required]),
@@ -52,12 +52,14 @@ export class PageAjoutContactComponent implements OnInit {
     const adresseValue = this.ajoutContactForm.value['adresseFc'];
 
     const contact: Contact = {
+      id: '',
       nom: lastNameValue,
       prenom: firstNameValue,
       telephone: telephoneValue,
       email: emailValue,
       dateNaissance: dateNaissanceValue,
       adresse: adresseValue,
+      team: { id: '1' }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
     };
 
     if (contact.nom !== '') {

src/app/pages/page-dashboard/page-dashboard.component.html

@@ -1,2 +1,4 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
+<app-meteo></app-meteo>
+

src/app/pages/page-modifier-contact/page-modifier-contact.component.html

@@ -1 +1,83 @@
-<p>page-modifier-contact works!</p>
+<div>
+    <app-header></app-header>
+    <app-side-bar></app-side-bar>
+</div>
+
+<div class="modifContact-form text-center">
+    <main class="form-modifContact">
+        <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
+            <h1>Modifier ce contact</h1>
+
+
+            <div class="form-floating">
+                <input type="text" 
+                        class="form-control" 
+                        id="floatingInputlastName" 
+                        placeholder="" 
+                        name="lastName" 
+                        formControlName="lastNameFc" value= "{{ listContactInfo.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= "{{ listContactInfo.prenom }}">
+                <label for="floatingInputfirstName">Prénom</label>
+
+
+            </div>
+            <div class="form-floating">
+                <input type="text" 
+                        class="form-control" 
+                        id="floatingInputTelephone" 
+                        placeholder="" 
+                        name="telephone" 
+                        formControlName="telephoneFc" value= "{{ listContactInfo.telephone }}">
+                <label for="floatingInputfirstName">Téléphone</label>
+
+
+            </div>
+            <div class="form-floating">
+                <input type="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        name="email" 
+                        formControlName="emailFc" value= "{{ listContactInfo.email }}">
+                <label for="floatingInput">Adresse email</label>
+            </div>
+
+
+            <div class="form-floating">
+                <input type="date" 
+                        class="form-control" 
+                        id="floatingInputdateNaissance" 
+                        placeholder="" 
+                        name="dateNaissance" 
+                        formControlName="dateNaissanceFc" value= "{{ listContactInfo.dateNaissance }}">
+                <label for="floatingInputfirstName">Date de naissance</label>
+            </div>
+
+
+            <div class="form-floating">
+                <input type="text" 
+                        class="form-control" 
+                        id="floatingInputAdresse" 
+                        placeholder="" 
+                        name="adresse" 
+                        formControlName="adresseFc" value= "{{ listContactInfo.adresse }}">
+                <label for="floatingInputfirstName">Adresse</label>
+            </div>
+
+            <button class="w-100 btn btn-lg btn-secondary" 
+                    type="submit" 
+                    [disabled]="modifContactForm.invalid">Valider</button>
+
+        </form>
+    </main>
+</div> 

src/app/pages/page-modifier-contact/page-modifier-contact.component.scss

@@ -0,0 +1,31 @@
+.login-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-modifContact {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}
+
+.form-modifContact .checkbox {
+  font-weight: 400;
+}
+
+.form-modifContact .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-modifContact input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #5a1e63 !important;
+}

src/app/pages/page-modifier-contact/page-modifier-contact.component.ts

@@ -1,15 +1,98 @@
 import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Contact } from '../../models/contact';
+import { RepertoireService } from '../../services/repertoire.service';
 
 @Component({
   selector: 'app-page-modifier-contact',
   templateUrl: './page-modifier-contact.component.html',
-  styleUrls: ['./page-modifier-contact.component.scss']
+  styleUrls: ['./page-modifier-contact.component.scss'],
 })
 export class PageModifierContactComponent implements OnInit {
+  public modifContactForm: FormGroup;
+  public contactInfo: FormGroup;
+  public listContactInfo: any;
+  public personneid: any;
 
-  constructor() { }
+  constructor(
-
+    private repertoireService: RepertoireService,
-  ngOnInit(): void {
+    private router: Router,
+    private fb: FormBuilder,
+    private route: ActivatedRoute
+  ) {
+    this.modifContactForm = new FormGroup({});
+    this.contactInfo = this.initForm();
+    this.listContactInfo = '';
   }
 
+  ngOnInit(): void {
+    this.personneid = this.route.snapshot.paramMap.get('id'); // récupère l'id du contact à modifier
+    console.log(this.personneid);
+
+    this.repertoireService
+      .getContactById(this.personneid)
+      .subscribe((listContactInfo: any) => {
+        console.log(listContactInfo);
+        this.listContactInfo = listContactInfo;
+      });
+
+    // *********************************pensser à changer group car déprécié********************************
+    this.modifContactForm = this.fb.group({
+      lastNameFc: new FormControl('', [Validators.required]),
+      firstNameFc: new FormControl('', [Validators.required]),
+      telephoneFc: new FormControl('', [Validators.required]),
+      emailFc: new FormControl('', [
+        Validators.email,
+        Validators.required,
+        Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
+      ]), // chercher une meilleure regex
+      dateNaissanceFc: new FormControl('', [Validators.required]),
+      adresseFc: new FormControl('', [Validators.required]),
+    });
+  }
+
+  //Méthode qui initialise les champs du formulaire avec les infos de la BDD
+  private initForm(contact?: Contact): FormGroup {
+    return this.fb.group({
+      firstName: [contact ? contact.nom : ''],
+      lastName: [contact ? contact.prenom : ''],
+      telephone: [contact ? contact.telephone : ''],
+      email: [contact ? contact.email : ''],
+      dateNaissance: [contact ? contact.dateNaissance : ''],
+      adresse: [contact ? contact.adresse : ''],
+    });
+  }
+
+  //Méthode qui envoie les champs modifiés pour mise à jour
+  public onSubmit(): void {
+    console.log('value : ', this.modifContactForm.value);
+    console.log('form : ', this.modifContactForm);
+    const firstNameValue = this.modifContactForm.value['firstNameFc'];
+    const lastNameValue = this.modifContactForm.value['lastNameFc'];
+    const telephoneValue = this.modifContactForm.value['telephoneFc'];
+    const emailValue = this.modifContactForm.value['emailFc'];
+    const dateNaissanceValue = this.modifContactForm.value['dateNaissanceFc'];
+    const adresseValue = this.modifContactForm.value['adresseFc'];
+
+    const contact: Contact = {
+      id: this.personneid,
+      nom: lastNameValue,
+      prenom: firstNameValue,
+      telephone: telephoneValue,
+      email: emailValue,
+      dateNaissance: dateNaissanceValue,
+      adresse: adresseValue,
+      team: { id: this.listContactInfo.team.id },
+    };
+
+    this.repertoireService.updateContact(contact).subscribe((resp) => {
+      this.router.navigate(['repertoire/']);
+    });
+  }
 }

src/app/pages/page-not-found/page-not-found.component.html

@@ -1,14 +1,7 @@
 <app-header></app-header>
 
-
- 
-
-
-
 <div>
 
-
-
   <div class="ctn-link min-vh-100">
  <div class="text-center">
  <p> Page introuvable</p>

src/app/pages/page-not-found/page-not-found.component.scss

@@ -13,8 +13,4 @@ p{
     font-weight: bold;
     background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
     //max-width: max-content;
-  
-
-
 }
-

src/app/pages/page-repertoire/page-repertoire.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Contact } from 'src/app/models/contact';
 import { RepertoireService } from 'src/app/services/repertoire.service';
 
 @Component({
@@ -9,20 +11,38 @@ import { RepertoireService } from 'src/app/services/repertoire.service';
 export class PageRepertoireComponent implements OnInit {
   public listContact: any[];
   public listFull: any[];
+  public listContactInfo: any;
+  public personneid: any;
   keyword: any;
   openDetails: any;
 
-  constructor(private repertoireService: RepertoireService) {
+  constructor(
+    private repertoireService: RepertoireService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
     this.listContact = [];
     this.listFull = [];
+    this.listContactInfo = '';
   }
 
   ngOnInit(): void {
+    //récupère tout les contact et leurs info
     this.repertoireService.getContact().subscribe((listContact: any[]) => {
       console.log(listContact);
       this.listContact = listContact;
       this.listFull = listContact;
     });
+
+    this.personneid = this.route.snapshot.paramMap.get('id');
+    console.log(this.personneid);
+
+    this.repertoireService
+      .getContactById(this.personneid)
+      .subscribe((listContactInfo: any) => {
+        console.log(listContactInfo);
+        this.listContactInfo = listContactInfo;
+      });
   }
 
   // Méthode pour récuper ce qui est saisi dans l'input
@@ -43,8 +63,13 @@ export class PageRepertoireComponent implements OnInit {
     this.listContact = prenom;
   }
 
+  // Méthode qui au click va ouvrir les détails d'un contat
   onClick(personne: any) {
     console.log(personne);
     this.openDetails = personne;
   }
+
+  // this.repertoireService.deleteContact(contact).subscribe((resp) => {
+  //   this.router.navigate(['repertoire/']);
+  // });
 }

src/app/pages/page-reset-password/page-reset-password.component.html

@@ -1,7 +1,8 @@
 <app-header></app-header>
-<div class="signin-form text-center">
+<div class="reset-form text-center">
-  <main class="form-signin">
+  <main class="form-reset">
     <form (ngSubmit)="onSubmit(resetForm)" #resetForm="ngForm">
+      <h3>Entrez ici votre email et votre nouveau mot de passe</h3>
       <div class="form-floating">
         <input type="email" class="form-control" id="floatingEmail" placeholder="" name="email" ngModel required
           [ngClass]="{'is-valid': resetForm.form.touched && resetForm.form.value['email'] != '' ,
@@ -14,9 +15,7 @@
                                     'is-invalid': resetForm.form.touched && resetForm.form.value['password'] == ''}">
         <label for="floatingPassword">Mot de passe</label>
       </div>
-
+    <button class="w-100 btn btn-outline-success" type="submit" [disabled]="resetForm.invalid">Enregistrer</button>
-      <button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="resetForm.invalid">Se connecter</button>
-
 
     </form>
 

src/app/pages/page-reset-password/page-reset-password.component.scss

@@ -0,0 +1,42 @@
+.reset-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #ffff;
+}
+
+.form-reset {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #ef5da8;
+}
+
+.form-reset .checkbox {
+  font-weight: 400;
+}
+
+.form-reset .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-reset input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-reset input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-outline-success {
+  background-color: #ffff;
+  color: #ef5da8 !important;
+  border-color: #ef5da8 !important;
+}

src/app/pages/page-reset-password/page-reset-password.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
+
 
 @Component({
   selector: 'app-page-reset-password',
@@ -6,12 +9,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-reset-password.component.scss']
 })
 export class PageResetPasswordComponent implements OnInit {
-  authService: any;
-  router: any;
 
-  constructor() { }
+  constructor(private authService: AuthService, private router: Router,) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   public onSubmit(submittedForm: any): void {
     console.log(submittedForm.form.value);
@@ -19,8 +20,9 @@ export class PageResetPasswordComponent implements OnInit {
     const email = submittedForm.form.value['email'];
     console.log(email);
     this.authService.resetPassword(email, password).subscribe((resp: any) => {
-        this.router.navigate(['tableau-de-bord']);
+      window.alert("Votre mot de passe est bien ré-initialisé !")
+      this.router.navigate(['accueil']);
 
     });
-}
+  }
 }

src/app/pages/page-signup/page-signup.component.html

@@ -1,8 +1,13 @@
 <app-header></app-header>
 <div class="signup-form text-center">
+    <h1>Inscrivez-vous !</h1>
   <main class="form-signup">
     <form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
-      <h1>Inscrivez-vous !</h1>
+          <div class="form-floating">
+            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+              formControlName="couleurFc">
+
+          </div>
       <div class="form-floating">
         <input
           type="text"
@@ -20,7 +25,7 @@
               !signupForm.controls['lastNameFc'].valid
           }"
         />
-        <label for="floatingInputlastName">Nom</label>
+        <label for="floatingInputlastName">VOTRE NOM</label>
       </div>
       <div class="form-floating">
         <input
@@ -39,7 +44,7 @@
               !signupForm.controls['firstNameFc'].valid
           }"
         />
-        <label for="floatingInputfirstName">Prénom</label>
+        <label for="floatingInputfirstName">VOTRE PRENOM</label>
       </div>
       <div class="form-floating">
         <input
@@ -58,13 +63,13 @@
               !signupForm.controls['dateNaissanceFc'].valid
           }"
         />
-        <label for="floatingInputfirstName">Date de naissance</label>
+        <label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
       </div>
       <div class="form-floating">
         <input
           type="email"
           class="form-control"
-          id="floatingInput"
+          id="floatingInputemail"
           placeholder=""
           name="email"
           formControlName="emailFc"
@@ -77,7 +82,7 @@
               !signupForm.controls['emailFc'].valid
           }"
         />
-        <label for="floatingInput">Adresse email</label>
+        <label for="floatingInputemail">VOTRE EMAIL</label>
       </div>
       <div class="form-floating">
         <input
@@ -96,11 +101,11 @@
               !signupForm.controls['passwordFc'].valid
           }"
         />
-        <label for="floatingPassword">Mot de passe</label>
+        <label for="floatingPassword">MOT DE PASSE</label>
       </div>
       <div class="form-floating">
         <input
-          type="passwordConfirm"
+          type="password"
           class="form-control"
           id="floatingpasswordConfirm"
           placeholder=""
@@ -115,15 +120,15 @@
               !signupForm.controls['passwordConfirmFc'].valid
           }"
         />
-        <label for="floatingPassword">Confirmer mot de passe</label>
+        <label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
       </div>
 
       <button
-        class="w-100 btn btn-lg btn-success"
+        class="w-100 btn btn-lg btn-outline-success"
         type="submit"
         [disabled]="signupForm.invalid"
       >
-        Je m'inscris !
+        CREER MON COMPTE
       </button>
     </form>
   </main>

src/app/pages/page-signup/page-signup.component.scss

@@ -8,7 +8,13 @@
   width: 100%;
   max-width: 330px;
   padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #ef5da8;
 }
 
 .form-signup .checkbox {
@@ -20,7 +26,37 @@
 }
 
 .form-signup input[type="email"] {
-  margin-bottom: -1px;
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signup input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-signup input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-signup input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signup input[type="date"] {
+  margin-bottom: 10px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -30,3 +66,10 @@
   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;
+}

src/app/pages/page-signup/page-signup.component.ts

@@ -32,6 +32,7 @@ export class PageSignupComponent implements OnInit {
         lastNameFc: new FormControl('', [Validators.required]),
         dateNaissanceFc: new FormControl('', [Validators.required]),
         roleFc: new FormControl(''),
+        couleurFc: new FormControl('', Validators.required),
         emailFc: new FormControl('', [
           Validators.email,
           Validators.required,
@@ -61,6 +62,7 @@ export class PageSignupComponent implements OnInit {
     const passwordValue = this.signupForm.value['passwordFc'];
     const dateNaissanceValue = this.signupForm.value['dateNaissanceFc'];
     const passwordConfirmValue = this.signupForm.value['passwordConfirmFc'];
+    const couleurValue = this.signupForm.value['couleurFc'];
     const roleValue = ['ROLE_PARENT'];
 
     const membre: Membre = {
@@ -68,6 +70,7 @@ export class PageSignupComponent implements OnInit {
       prenom: prenomValue,
       email: emailValue,
       password: passwordValue,
+      couleur: couleurValue,
       dateNaissance: dateNaissanceValue,
       passwordConfirm: passwordConfirmValue,
       roleList: roleValue,

src/app/pages/page-to-do-list/page-to-do-list.component.html

@@ -1,2 +1,5 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
+<div class="container">
+  <app-to-do-list></app-to-do-list>
+</div>

src/app/services/auth.service.ts

@@ -53,13 +53,13 @@ export class AuthService {
     const body = {
       email: email,
     };
-    return this.http.post(`${this.apiUrl}/membres/forgot-password`, body);
+    return this.http.get(`${this.apiUrl}/membres/forgot-password`);
   }
 
     resetPassword(email: string, password: string): Observable<any> {
     const body = password;
      console.log(password);
-   return this.http.post(`${this.apiUrl}/membres/reset-password/${email}`, body);
+   return this.http.put(`${this.apiUrl}/membres/reset-password/${email}`, body);
   }
 
   creationTeam(team: Team): Observable<any> {

src/app/services/repertoire.service.ts

@@ -21,17 +21,21 @@ export class RepertoireService {
     return this.http.get(`${this.apiUrl}/contacts/team/1`);
   }
 
+  getContactById(id: any): Observable<any> {
+    return this.http.get(`${this.apiUrl}/contacts/` + id);
+  }
+
   addContact(contact: Contact): Observable<any> {
     console.log(contact);
 
     return this.http.post(`${this.apiUrl}/contacts/add`, contact);
   }
 
-  deleteContact() {
+  deleteContact(contact: Contact): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/contacts/delete`);
+    return this.http.delete(`${this.apiUrl}/contacts/delete/1`);
   }
 
-  // updateContact(){
+  updateContact(contact: Contact): Observable<any> {
-  //   return this.http.put(`${this.apiUrl}/contacts/update/1`);
+    return this.http.put(`${this.apiUrl}/contacts/update/1`, contact);
-  // }
+  }
 }

src/app/services/todo-service.service.ts

@@ -0,0 +1,43 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TodoServiceService {
+  private toDoList: any;
+  private apiUrl: string;
+
+
+  constructor(private http: HttpClient) {
+    this.apiUrl = environment.apiUrl;
+  }
+
+  //consulter toDoList
+  getToDoList(){
+    this.toDoList = this.http.get(`${this.apiUrl}/todolist/team/{team_id}`);
+    return this.toDoList;
+    console.log(this.toDoList)
+}
+
+//ajouter une tache
+  addTitle(title:string){
+    this.toDoList.push({
+      title:title,
+      isChecked: false
+    });
+  }
+// cocher et décocher la checkbox
+  checkOrUnCheckTitle($key: string,flag: boolean){
+    this.toDoList.update($key,{isChecked:flag});
+  }
+
+//supprimer la tache
+removeTitle($key : string){
+  this.toDoList.remove($key);
+}
+
+
+
+}