From a8cbd4efb7434a0424ad845ceaf880db6fc47609 Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Sun, 14 Nov 2021 03:39:24 +0100
Subject: [PATCH] correction pages: register, myProfil-user, search,
 myPlaylists

---
 .../page-user-list.component.html             |   2 +-
 .../popup-create-user.component.ts            |   4 +
 .../navbar-advertiser.component.html          |   9 +-
 src/app/app.module.ts                         |   2 -
 .../page-register.component.html              |  99 +++-------------
 .../page-register/page-register.component.ts  |  28 +++--
 .../popup-confirmation.component.scss         |   7 ++
 .../page-my-playlists.component.html          |  11 +-
 .../page-my-playlists.component.scss          |   9 +-
 .../playlist-list.component.html              |  15 +--
 .../playlist-list.component.scss              |  34 +++---
 .../playlist-list/playlist-list.component.ts  |   3 +-
 .../video-list/video-list.component.html      |   8 +-
 .../video-list/video-list.component.scss      |  23 ++--
 .../page-profil-user.component.html           | 110 +++++++++++-------
 .../page-profil-user.component.scss           |  21 +++-
 .../popup-update-user.component.ts            |   4 +
 .../page-search/page-search.component.html    |   6 +-
 .../page-search/page-search.component.scss    |   7 +-
 .../page-search/page-search.component.ts      |   3 +-
 .../video-cell/video-cell.component.html      |  11 --
 .../video-cell/video-cell.component.scss      |  18 ---
 .../video-cell/video-cell.component.spec.ts   |  25 ----
 .../search/video-cell/video-cell.component.ts |  44 -------
 .../video-grid/video-grid.component.html      |  39 +++++--
 .../video-grid/video-grid.component.scss      |  44 +++++--
 .../search/video-grid/video-grid.component.ts |  44 +++----
 27 files changed, 278 insertions(+), 352 deletions(-)
 delete mode 100644 src/app/user/search/video-cell/video-cell.component.html
 delete mode 100644 src/app/user/search/video-cell/video-cell.component.scss
 delete mode 100644 src/app/user/search/video-cell/video-cell.component.spec.ts
 delete mode 100644 src/app/user/search/video-cell/video-cell.component.ts

diff --git a/src/app/admin/userList/page-user-list/page-user-list.component.html b/src/app/admin/userList/page-user-list/page-user-list.component.html
index 3d1016b..8aa68fe 100644
--- a/src/app/admin/userList/page-user-list/page-user-list.component.html
+++ b/src/app/admin/userList/page-user-list/page-user-list.component.html
@@ -8,7 +8,7 @@
 
         <!-- Filtre -->
         <div style="text-align: center">
-            <input (keyup)="applyFilter($event)" placeholder="Filtre: saisir la valeur d'une colonne">
+            <input (keyup)="applyFilter($event)" placeholder="Filtre...">
         </div>
 
 
diff --git a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
index a13368c..890baec 100644
--- a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
+++ b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
@@ -72,6 +72,10 @@ export class PopupCreateUserComponent implements OnInit
             this.errorMessage = "Veuillez remplir le champ 'email'.";
             this.hasError = true;
         }
+        if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
+            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
+            this.hasError = true;
+        }
         else if(!this.isValidEmail(this.user.mail)) {
             this.errorMessage = "Email invalide";
             this.hasError = true;
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
index b388a0f..8c6d946 100644
--- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
+++ b/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
@@ -1,20 +1,19 @@
 <nav class="navbar navbar-expand-lg">
 
     <!-- PolyNotFound -->
-    <a class="navbar-brand" routerLink="/advertiser/manageAds"> StreamNotFound </a>
+    <a class="navbar-brand" routerLink="/advertiser/adList"> StreamNotFound </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <!-- Vide -->
-    <!-- [Recherche] [Mes Playlists] [Historique] -->
+    <!-- [adList] [viewsAd]-->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/manageAds"> Gestion des annonces </a>
+                <a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/manageAds"> Popularité des annonces </a>
+                <a class="nav-link" routerLink="/advertiser/adList"> Popularité des annonces </a>
             </li>
         </ul>
     </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 30ffeb8..e2a2e7a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,7 +14,6 @@ import { PopupConfirmationComponent } from './beforeConnexion/register/popup-con
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from "@angular/material/button";
 import { AdvertComponent } from './utils/components/advert/advert.component';
-import { VideoCellComponent } from './user/search/video-cell/video-cell.component';
 import { VideoGridComponent } from './user/search/video-grid/video-grid.component';
 import {MatIconModule} from "@angular/material/icon";
 import { PopupAddVideoToPlaylistsComponent } from './utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component';
@@ -79,7 +78,6 @@ import { InputInterestsAdminComponent } from './admin/userList/input-interests-a
         PageSearchComponent,
         PopupConfirmationComponent,
         AdvertComponent,
-        VideoCellComponent,
         VideoGridComponent,
         PopupAddVideoToPlaylistsComponent,
         IframeTrackerDirective,
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.html b/src/app/beforeConnexion/register/page-register/page-register.component.html
index 23866d2..b7f8c0d 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.html
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.html
@@ -8,48 +8,43 @@
         <mat-stepper [linear]=true>
 
             <!-- Choix du role -->
-            <mat-step>
-                <ng-template matStepLabel>Type de compte</ng-template>
+            <mat-step label="Type de compte">
                 <form style="margin-top: 10px">
-                    <mat-radio-group [(ngModel)]="roleName">
+                    <!-- Choix du rôle -->
+                    <mat-radio-group [(ngModel)]="user.role.name">
                         <mat-radio-button value="user">Utilisateur standard</mat-radio-button>&nbsp; &nbsp;
                         <mat-radio-button value="advertiser">Annonceur</mat-radio-button>
                     </mat-radio-group>
+
+                    <!-- Bouton suivant -->
                     <div style="text-align: right;">
                         <button mat-button matStepperNext>Suivant</button>
                     </div>
                 </form>
             </mat-step>
 
+
             <!-- Infos personelles -->
-            <mat-step>
-                <ng-template matStepLabel>Compte & Informations personelles</ng-template>
+            <mat-step label="Compte & Informations personelles">
                 <form style="margin-top: 10px">
-                    <ng-template *ngIf="roleName==='user'; then userBlock else advertiserBlock"></ng-template>
+                    <!-- Redirection vers le bon bloc -->
+                    <ng-template *ngIf="user.role.name==='user'; then userBlock else advertiserBlock"></ng-template>
+
+                    <!-- Message d'erreur -->
+                    <div *ngIf="hasError">
+                        <mat-error>{{errorMessage}}</mat-error>
+                    </div>
+
+                    <!-- Boutons-->
                     <div style="text-align: right;">
                         <button mat-button matStepperPrevious>Précédent</button>
-                        <button mat-button matStepperNext (click)="checkField()">Suivant</button>
+                        <button mat-button (click)="onEnregistrer()">Enregistrer</button>
                     </div>
                 </form>
             </mat-step>
 
-            <!-- Derniere étape -->
-            <mat-step>
-                <!-- label -->
-                <ng-template matStepLabel>
-                    <span (click)="checkField()">Dernière étape</span>
-                </ng-template>
-                <!-- texte affiché -->
-                <ng-template *ngIf="!hasError ; then derniereEtapeCorrecte else derniereEtapeErronee"></ng-template>
-                <!-- boutons -->
-                <div style="text-align: right;">
-                    <button mat-button matStepperPrevious>Précédent</button>
-                    <button *ngIf="hasError" mat-button (click)="onValider()" disabled>Valider</button>
-                    <button *ngIf="!hasError" mat-button (click)="onValider()">Valider</button>
-                </div>
-            </mat-step>
-
         </mat-stepper>
+
     </div>
 </div>
 
@@ -157,61 +152,3 @@
     </mat-form-field>
 
 </ng-template>
-
-
-<!-- -------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Dernière étape correcte -->
-<ng-template #derniereEtapeCorrecte>
-
-    <!-- pour advertiser -->
-    <div *ngIf="roleName === 'advertiser'">
-        Cliquer sur valider pour soumettre l'inscription.
-    </div>
-
-    <!-- pour user -->
-    <div *ngIf="roleName === 'user'">
-        <br>
-        <!-- login -->
-        <div class="row myRow">
-            <div class="col-2 myLabel">Login:</div>
-            <div class="col-10 myValue"> {{user.login}} </div>
-        </div>
-        <!-- mail -->
-        <div class="row myRow">
-            <div class="col-2 myLabel">Mail:</div>
-            <div class="col-10 myValue"> {{user.mail}} </div>
-        </div>
-        <!-- dateOfBirth -->
-        <div class="row myRow">
-            <div class="col-2 myLabel">Date de naissance:</div>
-            <div class="col-10 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
-        </div>
-        <!-- gender -->
-        <div class="row myRow">
-            <div class="col-2 myLabel">Sexe:</div>
-            <div class="col-10 myValue">
-                <span *ngIf="user.gender==='man'"> Homme </span>
-                <span *ngIf="user.gender==='woman'"> Femme </span>
-            </div>
-        </div>
-        <!-- interets -->
-        <div class="row myRow">
-            <div class="col-2 myLabel">Centres d'intérêt:</div>
-            <div class="col-10 myValue" style="border-left: solid 1px #e6e6e6">
-                <div *ngFor="let interest of user.interests">• {{interest}}</div>
-            </div>
-        </div>
-    </div>
-
-</ng-template>
-
-
-<!-- -------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Dernière étape érronée -->
-<ng-template #derniereEtapeErronee>
-    <mat-error>{{errorMessage}}</mat-error>
-</ng-template>
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.ts b/src/app/beforeConnexion/register/page-register/page-register.component.ts
index d6f2782..2e04702 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.ts
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.ts
@@ -9,13 +9,12 @@ import {User} from "../../../utils/interfaces/user";
 
 
 @Component({
-  selector: 'app-page-register',
-  templateUrl: './page-register.component.html',
-  styleUrls: ['./page-register.component.scss']
+    selector: 'app-page-register',
+    templateUrl: './page-register.component.html',
+    styleUrls: ['./page-register.component.scss']
 })
 export class PageRegisterComponent
 {
-    roleName: string = "user";
     password: string = "";
     confirmPassword: string = "";
     hasError: boolean = false;
@@ -30,14 +29,14 @@ export class PageRegisterComponent
             permission: 0,
         },
         profilePictureUrl: "",
-        dateOfBirth: new Date(),
+        dateOfBirth: null,
         gender: "man",
         interests: [],
         isActive: false,
         isAccepted: false,
         createdAt: new Date(),
         updatedAt: new Date(),
-        lastConnexion: new Date()
+        lastConnexion: null
     };
 
 
@@ -48,13 +47,13 @@ export class PageRegisterComponent
 
 
     // Envoie de l'utilisateur au backend
-    onValider(): void
+    onEnregistrer(): void
     {
         this.checkField();
         if(!this.hasError)
         {
-            if(this.roleName === "advertiser") this.user.role = { name: "advertiser", permission: 5 };
-            else this.user.role = { name: "user", permission: 0 };
+            if(this.user.role.name === "user") this.user.role.permission = 0;
+            else this.user.role.permission = 5;
             this.user.hashPass = this.hashage(this.password);
 
             // FAUX CODE
@@ -80,7 +79,10 @@ export class PageRegisterComponent
         }
         else
         {
-            const config = { width: '25%', data: { roleName: this.roleName} };
+            const config = {
+                width: '25%',
+                data: {roleName: this.user.role.name}
+            };
             this.dialog
                 .open(PopupConfirmationComponent, config)
                 .afterClosed()
@@ -101,7 +103,7 @@ export class PageRegisterComponent
             this.hasError = true;
         }
         else if(!this.isValidEmail(this.user.mail)) {
-            this.errorMessage = "Email invalide";
+            this.errorMessage = "Email invalide.";
             this.hasError = true;
         }
         else if(this.password.length === 0) {
@@ -112,6 +114,10 @@ export class PageRegisterComponent
             this.errorMessage = "Le mot de passe est différent de sa confirmation.";
             this.hasError = true;
         }
+        if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
+            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
+            this.hasError = true;
+        }
         else {
             this.errorMessage = "" ;
             this.hasError = false;
diff --git a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.scss b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.scss
index e69de29..85730e0 100644
--- a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.scss
+++ b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.scss
@@ -0,0 +1,7 @@
+p {
+  font-size: small;
+}
+
+div {
+  font-size: small;
+}
diff --git a/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html b/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html
index fd0adce..21eadcc 100644
--- a/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html
+++ b/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html
@@ -2,9 +2,10 @@
     <div class="myContainer">
 
         <!-- Navbar -->
-        <div style="margin-bottom: 50px">
+        <div>
             <app-navbar-user></app-navbar-user>
         </div>
+        <br>
 
         <!-- --------------------------------------------------------------------- -->
 
@@ -13,16 +14,12 @@
 
             <!-- liste des videos -->
             <mat-grid-tile colspan="4" rowspan="1" class="celluleListeVideo">
-                <div class="videoListContainer">
-                    <app-video-list [playlist]="playlist"></app-video-list>
-                </div>
+                <app-video-list [playlist]="playlist"></app-video-list>
             </mat-grid-tile>
 
             <!-- liste des playlist -->
             <mat-grid-tile colspan="4" rowspan="1" class="celluleListePlaylist">
-                <div class="playlistListContainer">
-                    <app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
-                </div>
+                <app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
             </mat-grid-tile>
 
             <!-- pub -->
diff --git a/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss b/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss
index 1164e15..fad665f 100644
--- a/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss
+++ b/src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss
@@ -14,16 +14,13 @@
 // Liste des vidéos -------------------------------------------------
 
 .celluleListeVideo {
-  margin: 0px;
+  margin: 0px 0px 0px 0px;
 }
 
 // Liste des playlists ---------------------------------------------
 
 .celluleListePlaylist {
-  margin: 0px;
-}
-
-.playlistListContainer {
+  margin: 0px 0px 0px 0px;
 }
 
 // Pub -------------------------------------------------------------
@@ -36,7 +33,7 @@
 }
 
 .conteneurPub {
-  height: 85vh;
+  //height: 85vh;
   text-align: center;
   justify-content: center;
   vertical-align: middle;
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.html b/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
index 68169b8..3ccf848 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
@@ -2,12 +2,9 @@
     <div class="myContainer">
 
         <!-- Search bar -->
-        <div class="row" style="margin: 0px">
-            <div class="searchBarContainer">
-                <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()"> &nbsp;
-                <!--
-                <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
-                -->
+        <div class="row searchBarContainer">
+            <div style="text-align: center">
+                <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()">
             </div>
         </div>
 
@@ -26,10 +23,8 @@
 
 
         <!-- Bouton creer playlist-->
-        <div class="row" style="margin: 0px">
-            <div class="btnCreerPlaylistContainer">
-                <button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
-            </div>
+        <div class="row btnCreerPlaylistContainer" >
+            <button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
         </div>
 
     </div>
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
index 0a457d6..451a75f 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
@@ -2,8 +2,7 @@
   background-color: white ;
   text-align: center;
   width: 35vw;
-  height: 79vh;
-  margin: 3vh 0vh 3vh 0vh;
+  margin: 1vh 0vh 3vh 0vh;
   padding: 0px;
   border: solid 2px black;
 }
@@ -11,14 +10,16 @@
 // SearchBar -----------------------------------------------------------
 
 .searchBarContainer {
+  text-align: center;
+  margin: 0px 0px 0px 0px;
+  padding: 10px 0px 10px 0px;
   background-color: #dcdcdc;
-  border-bottom: solid 2px black;
-  height: 5vh;
-  padding: 15px;
+  font-size: large;
+  border-bottom: solid 1px black;
 }
 
 .inputSearchBar {
-  width: 50%;
+  width: 70%;
 }
 .btnRechercher {
   border: solid black 1px;
@@ -29,7 +30,7 @@
 
 .playlistListContainer {
   max-width: 100%;
-  height: 70vh;
+  height: 60vh;
   overflow-y: scroll;
   padding: 0px;
 }
@@ -42,7 +43,7 @@
 .btnPlaylist {
   background-color: white;
   padding: 20px;
-  border-bottom: solid 2px black;
+  border-bottom: solid 1px black;
   width: 100%;
 }
 .btnPlaylist:hover {
@@ -57,19 +58,12 @@
 // Bouton creer playlist -------------------------------------------------
 
 .btnCreerPlaylistContainer {
-  height: 4vh;
-  margin: 0px;
-  padding: 0px;
+  margin: 0px 0px 0px 0px;
+  background-color: #dcdcdc;
+  font-size: large;
+  border-top: solid 1px black;
 }
 
 .btnCreerPlaylist {
-  background-color: #dcdcdc;
-  border-top: solid 2px black;
-  border-bottom: solid 2px black;
-  height: 100%;
-  width: 100%;
-  padding: 10px;
-}
-.btnCreerPlaylist:hover {
-  background-color: #969696;
+  margin: 0px 0px 0px 0px;
 }
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
index cead58e..bb48030 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
@@ -3,7 +3,6 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {Playlist} from "../../../utils/interfaces/playlist";
 import {MessageService} from "../../../utils/services/message/message.service";
 import {MatDialog} from "@angular/material/dialog";
-import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-create-playlist/popup-create-playlist.component";
 
@@ -46,7 +45,7 @@ export class PlaylistListComponent implements OnInit
 
     onCreatePlaylist(): void
     {
-        const config = { width: '15%', data: this.tabPlaylist };
+        const config = { width: '30%', data: this.tabPlaylist };
         this.dialog
             .open(PopupCreatePlaylistComponent, config )
             .afterClosed()
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.html b/src/app/user/myPlaylists/video-list/video-list.component.html
index dd8cb32..7c4ff5f 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.html
+++ b/src/app/user/myPlaylists/video-list/video-list.component.html
@@ -2,8 +2,7 @@
     <div class="myContainer">
 
         <!-- Bordure haute -->
-        <div class="row" style="margin: 0px; padding: 0px">
-            <div class="topBorder">
+        <div class="row topBorder">
 
                 <!-- Playlist existe ? -->
                 <div *ngIf="(playlist !== null) && (playlist !== undefined); then ok1 else nope1"></div>
@@ -18,7 +17,6 @@
                     <span class="spanPlayListTitle"> Aucune playlist selectionnée </span>
                 </ng-template>
 
-            </div>
         </div>
 
 
@@ -66,8 +64,8 @@
 
 
         <!-- Bordure basse -->
-        <div class="row" style="margin: 0px; padding: 0px">
-            <div class="bottomBorder"></div>
+        <div class="row bottomBorder">
+            <div style="visibility: hidden">a</div>
         </div>
 
     </div>
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.scss b/src/app/user/myPlaylists/video-list/video-list.component.scss
index 71cbfa7..205f6f1 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.scss
+++ b/src/app/user/myPlaylists/video-list/video-list.component.scss
@@ -2,51 +2,46 @@
   background-color: white ;
   text-align: center;
   width: 35vw;
-  height: 79vh;
-  margin: 3vh 0vh 3vh 0vh;
+  margin: 1vh 0vh 3vh 0vh;
   padding: 0px;
-  border: solid 1px black;
+  border: solid 2px black;
 }
 
 // TopBorder --------------------------------------------------------
 
 .topBorder {
-  height: 4vh;
+  margin: 0px 0px 0px 0px;
   background-color: #dcdcdc;
   text-align: left;
-  padding: 7px;
-  display: inline-block;
+  padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
 }
 
 .spanPlayListTitle {
-  height: 100%;
-  padding: 0px;
-  font-size: x-large;
+  font-size: large;
   font-weight: bold;
 }
 
-
-
 // Liste des videos ------------------------------------------------
 
 .listVideoContainer {
-  height: 73vh;
+  height: 65vh;
   background-color: white;
   padding: 0px;
   overflow-y: scroll;
 }
 
 .videoContainer {
-  border-bottom: solid 2px black;
+  border-bottom: solid 1px black;
   padding: 25px;
 }
 
 // BottomBorder --------------------------------------------------------
 
 .bottomBorder {
-  height: 2vh;
+  margin: 0px 0px 0px 0px;
   background-color: #dcdcdc;
   border-top: solid 1px black;
   border-bottom: solid 1px black;
+  font-size: large;
 }
diff --git a/src/app/user/myProfil/page-profil-user/page-profil-user.component.html b/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
index ac1e6be..0fdbc78 100644
--- a/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
+++ b/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
@@ -9,49 +9,13 @@
 
             <!-- Photo de profil -->
             <div style="text-align: center">
-                <img [src]="user.profilePictureUrl"
-                     onerror="this.onerror=null; this.src='assets/profil.png'">
+                <img [src]="user.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'">
             </div>
 
-            <!-- login -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Login:</div>
-                <div class="col-6 myValue"> {{user.login}} </div>
-            </div>
-
-            <!-- mail -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Mail:</div>
-                <div class="col-6 myValue"> {{user.mail}} </div>
-            </div>
-
-            <!-- dateOfBirth -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Date de naissance:</div>
-                <div class="col-6 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
-            </div>
-
-            <!-- gender -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Sexe:</div>
-                <div class="col-6 myValue">
-                    <span *ngIf="user.gender==='man'"> Homme </span>
-                    <span *ngIf="user.gender==='woman'"> Femme </span>
-                </div>
-            </div>
-
-            <!-- interets -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Centres d'intérêt:</div>
-                <div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
-                    <div *ngFor="let interest of user.interests">• {{interest}}</div>
-                </div>
-            </div>
-
-            <!-- createdAt -->
-            <div class="row myRow">
-                <div class="col-6 myLabel">Date de création:</div>
-                <div class="col-6 myValue">{{ user.createdAt | date:'dd/LL/YYYY' }}</div>
+            <!-- Col gauche & droite -->
+            <div class="row">
+                <ng-template *ngIf="true; then leftCol"></ng-template>
+                <ng-template *ngIf="true; then rightCol"></ng-template>
             </div>
 
             <!-- Modifier profil -->
@@ -61,6 +25,68 @@
 
         </div>
 
-
     </div>
 </div>
+
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+
+<ng-template #leftCol>
+    <div class="col-6">
+
+        <!-- login -->
+        <div class="row myRow">
+            <div class="col-8 myLabel">Login:</div>
+            <div class="col-4 myValue"> {{user.login}} </div>
+        </div>
+
+        <!-- mail -->
+        <div class="row myRow">
+            <div class="col-8 myLabel">Mail:</div>
+            <div class="col-4 myValue"> {{user.mail}} </div>
+        </div>
+
+        <!-- gender -->
+        <div class="row myRow">
+            <div class="col-8 myLabel">Sexe:</div>
+            <div class="col-4 myValue">
+                <span *ngIf="user.gender==='man'"> Homme </span>
+                <span *ngIf="user.gender==='woman'"> Femme </span>
+            </div>
+        </div>
+
+        <!-- createdAt -->
+        <div class="row myRow">
+            <div class="col-8 myLabel">Date de création:</div>
+            <div class="col-4 myValue">{{ user.createdAt | date:'dd/LL/YYYY' }}</div>
+        </div>
+
+    </div>
+</ng-template>
+
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+
+<ng-template #rightCol>
+    <div class="col-6" style="border-left: solid 1px #e6e6e6">
+
+        <!-- dateOfBirth -->
+        <div class="row myRow">
+            <div class="col-4 myLabel">Date de naissance:</div>
+            <div class="col-8 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
+        </div>
+
+        <!-- interets -->
+        <div class="row myRow">
+            <div class="col-4 myLabel">Centres d'intérêt:</div>
+            <div class="col-8 myValue">
+                <div class="interestsContainer">
+                    <div *ngFor="let interest of user.interests" class="interest"> {{interest}} </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</ng-template>
diff --git a/src/app/user/myProfil/page-profil-user/page-profil-user.component.scss b/src/app/user/myProfil/page-profil-user/page-profil-user.component.scss
index 966c9a2..ae34d41 100644
--- a/src/app/user/myProfil/page-profil-user/page-profil-user.component.scss
+++ b/src/app/user/myProfil/page-profil-user/page-profil-user.component.scss
@@ -8,7 +8,7 @@
 .boite {
   margin-left: auto;
   margin-right: auto;
-  width: 25%;
+  width: 70%;
   margin-top: 10vh;
   border: solid 3px;
   border-radius: 10px;
@@ -24,6 +24,7 @@
   border-color: white;
 }
 
+// --------------------------------------------------------------------------------------------
 
 img {
   margin: 0px 0px 10px 0px;
@@ -34,6 +35,7 @@ img {
   font-size: xxx-large;
 }
 
+// --------------------------------------------------------------------------------------------
 
 .myRow {
   margin: 15px 0px 15px 0px;
@@ -50,6 +52,21 @@ img {
   margin: 0px;
 }
 
+// --------------------------------------------------------------------------------------------
+
+.interestsContainer {
+  width: 70%;
+  height: 15vh;
+  overflow-y: scroll;
+  border: 1px solid black;
+}
+
+.interest {
+  border-bottom: 1px solid #dcdcdc;
+  padding: 5px 5px 5px 5px;
+}
+
+// --------------------------------------------------------------------------------------------
 
 .btnContainer {
   text-align: center;
@@ -59,3 +76,5 @@ img {
   border: solid 1px black;
   background-color: white;
 }
+
+
diff --git a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
index ac0911d..38980e9 100644
--- a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
+++ b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
@@ -78,6 +78,10 @@ export class PopupUpdateUserComponent implements OnInit
             this.errorMessage = "Email invalide" ;
             this.hasError = true;
         }
+        else if((this.userCopy.dateOfBirth === undefined) || (this.userCopy.dateOfBirth === null)) {
+            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
+            this.hasError = true;
+        }
         else if(this.changePassword) {
             if (this.newPassword.length === 0) {
                 this.errorMessage = "Veuillez remplir le champ 'mot de passe'" ;
diff --git a/src/app/user/search/page-search/page-search.component.html b/src/app/user/search/page-search/page-search.component.html
index 5caaee0..0fefb07 100644
--- a/src/app/user/search/page-search/page-search.component.html
+++ b/src/app/user/search/page-search/page-search.component.html
@@ -2,7 +2,7 @@
     <div class="myContainer">
 
         <!-- Navbar -->
-        <div style="margin-bottom: 50px">
+        <div style="margin-bottom: 30px">
             <app-navbar-user></app-navbar-user>
         </div>
 
@@ -13,7 +13,7 @@
         <!-- [Search bar] + [Site de streaming] -->
         <div class="row">
             <div class="col-2"></div>
-            <div class="col-8" style="margin-bottom: 20px">
+            <div class="col-8" style="margin-bottom: 10px">
 
                 <!-- Search bar -->
                 <div class="row" style="margin-bottom: 10px">
@@ -44,7 +44,6 @@
         <!-- --------------------------------------------------------------------- -->
 
 
-
         <!-- [pub gauche] + [Grilles des videos] + [pub droite] -->
         <mat-grid-list cols="11" rowHeight="75vh">
 
@@ -70,6 +69,7 @@
             </mat-grid-tile>
 
         </mat-grid-list>
+        <br><br>
 
     </div>
 </div>
diff --git a/src/app/user/search/page-search/page-search.component.scss b/src/app/user/search/page-search/page-search.component.scss
index 7e94add..524f35d 100644
--- a/src/app/user/search/page-search/page-search.component.scss
+++ b/src/app/user/search/page-search/page-search.component.scss
@@ -11,22 +11,23 @@
   max-width: 100vw;
   height: 100vh;
   overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 
 .inputSearchBar {
   width: 50%;
-  font-size: x-large;
+  font-size: large;
 }
 .btnRechercher {
   border: solid black 1px;
   border-radius: 5px;
-  font-size: x-large;
+  font-size: large;
 }
 
 
 .celluleGrilleVideo {
-  border: solid 4px;
+  border: solid 2px;
   border-radius: 5px;
   width: 100%;
 }
diff --git a/src/app/user/search/page-search/page-search.component.ts b/src/app/user/search/page-search/page-search.component.ts
index 234bf18..c6eca80 100644
--- a/src/app/user/search/page-search/page-search.component.ts
+++ b/src/app/user/search/page-search/page-search.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {MessageService} from "../../../utils/services/message/message.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
-import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
 import {Advert} from "../../../utils/interfaces/advert";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
@@ -37,7 +36,7 @@ export class PageSearchComponent implements OnInit
     ngOnInit(): void
     {
         // --- FAUX CODE ---
-        this.tabVideo = this.fictitiousDatasService.getTabVideo(5);
+        this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
         this.ad1 = this.fictitiousDatasService.getAdvert();
         this.ad2 = this.fictitiousDatasService.getAdvert();
 
diff --git a/src/app/user/search/video-cell/video-cell.component.html b/src/app/user/search/video-cell/video-cell.component.html
deleted file mode 100644
index 009fbff..0000000
--- a/src/app/user/search/video-cell/video-cell.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-<div [class]="themeService.getClassTheme()">
-    <div class="conteneur">
-        <iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick()"></iframe><br/>
-        <span>{{video.title}}</span>
-        <button mat-icon-button (click)="onAdd()">
-            <mat-icon > add_circle </mat-icon>
-        </button>
-    </div>
-</div>
diff --git a/src/app/user/search/video-cell/video-cell.component.scss b/src/app/user/search/video-cell/video-cell.component.scss
deleted file mode 100644
index 7d9013d..0000000
--- a/src/app/user/search/video-cell/video-cell.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.conteneur {
-  text-align: center;
-  border: solid 2px;
-  border-radius: 5px;
-  padding-top: 15px;
-}
-
-.lightTheme .conteneur {
-  background-color: #ffffff;
-  border-color: black;
-  font-color: black;
-}
-
-.darkTheme .conteneur {
-  background-color: #c8c8c8;
-  border-color: #ffffff;
-  font-color: white;
-}
diff --git a/src/app/user/search/video-cell/video-cell.component.spec.ts b/src/app/user/search/video-cell/video-cell.component.spec.ts
deleted file mode 100644
index c41f534..0000000
--- a/src/app/user/search/video-cell/video-cell.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { VideoCellComponent } from './video-cell.component';
-
-describe('RectangleVideoComponent', () => {
-  let component: VideoCellComponent;
-  let fixture: ComponentFixture<VideoCellComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ VideoCellComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(VideoCellComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/user/search/video-cell/video-cell.component.ts b/src/app/user/search/video-cell/video-cell.component.ts
deleted file mode 100644
index 2973699..0000000
--- a/src/app/user/search/video-cell/video-cell.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {Component, Input, OnInit } from '@angular/core';
-import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
-import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
-import {Video} from "../../../utils/interfaces/video";
-import {ThemeService} from "../../../utils/services/theme/theme.service";
-import {MessageService} from "../../../utils/services/message/message.service";
-import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
-
-
-
-@Component({
-    selector: 'app-video-cell',
-    templateUrl: './video-cell.component.html',
-    styleUrls: ['./video-cell.component.scss']
-})
-export class VideoCellComponent implements OnInit
-{
-    @Input() video: Video;
-    safeUrl;
-    tabVideoUrlClicked: string[] = [];
-
-    constructor( private videoUrlService: VideoUrlService,
-                 private addVideoToPlaylistsService: AddVideoToPlaylistsService,
-                 public themeService: ThemeService,
-                 private messageService: MessageService,
-                 private historiqueService: UserHistoryService ) {}
-
-    ngOnInit(): void
-    {
-        this.safeUrl = this.videoUrlService.safeUrl(this.video.url);
-    }
-
-    onAdd(): void
-    {
-        this.addVideoToPlaylistsService.run(this.video);
-    }
-
-    onIframeClick()
-    {
-        console.log("onIframeClick: " + this.video.title);
-        this.historiqueService.addVideoToHistoque(this.video);
-    }
-
-}
diff --git a/src/app/user/search/video-grid/video-grid.component.html b/src/app/user/search/video-grid/video-grid.component.html
index 66f11ef..b94e6f8 100644
--- a/src/app/user/search/video-grid/video-grid.component.html
+++ b/src/app/user/search/video-grid/video-grid.component.html
@@ -1,11 +1,30 @@
-<div class="conteneur">
-    <nav>
-        <ul>
-            <li class="row ligne" *ngFor="let triplet of tabTriplet">
-                <div class="col-4" *ngFor="let video of triplet">
-                    <app-video-cell [video]="video"></app-video-cell>
-                </div>
-            </li>
-        </ul>
-    </nav>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+
+<!-- Grille -->
+<div style="height: 93%">
+    <mat-grid-list cols="3" rowHeight="33%">
+        <mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
+            <div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
+
+                    <iframe appIframeTracker
+                            [src]=videoUrlService.safeUrl(tabVideo[indexPage+k].url)
+                            allowfullscreen
+                            (iframeClick)="onIframeClick(tabVideo[indexPage+k])"></iframe><br>
+
+                    <span> {{tronquage(tabVideo[indexPage+k].title)}} </span>
+                    <button mat-icon-button (click)="onAdd(tabVideo[indexPage+k])">
+                        <mat-icon> add_circle </mat-icon>
+                    </button>
+
+            </div>
+        </mat-grid-tile>
+    </mat-grid-list>
+</div>
+
+
+<!-- Paginator -->
+<div class="btnContainer">
+    <button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;
+    <button mat-button class="btnPaginator" [disabled]="indexPage+9>=tabVideo.length" (click)="indexPage=indexPage+9"> Suivant > </button>
 </div>
diff --git a/src/app/user/search/video-grid/video-grid.component.scss b/src/app/user/search/video-grid/video-grid.component.scss
index 8d2c9c1..5a4be0e 100644
--- a/src/app/user/search/video-grid/video-grid.component.scss
+++ b/src/app/user/search/video-grid/video-grid.component.scss
@@ -1,14 +1,40 @@
-.conteneur {
-  height: 100%;
+mat-grid-list {
+  margin: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
 }
 
-nav ul {
-  overflow: hidden;
-  overflow-y: scroll;
-  height: 75vh;
-  padding: 30px;
+mat-grid-tile {
+  margin: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
+  border: solid 1px black;
 }
 
-.ligne {
-  margin: 30px 0px 30px 0px;
+
+// ---------------------------------------------------------------------------------------------
+
+
+.myCell {
+  margin: 0px 0px 0px 0px;
+  padding: 15px 0px 0px 0px;
+}
+
+iframe {
+  padding: 0px 0px 0px 0px;
+  width: 85%;
+  height: 15vh;
+}
+
+
+// ---------------------------------------------------------------------------------------------
+
+
+.btnContainer {
+  margin: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
+  text-align: center;
+}
+
+.btnPaginator {
+  margin: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
 }
diff --git a/src/app/user/search/video-grid/video-grid.component.ts b/src/app/user/search/video-grid/video-grid.component.ts
index 929d45c..8ebcdfb 100644
--- a/src/app/user/search/video-grid/video-grid.component.ts
+++ b/src/app/user/search/video-grid/video-grid.component.ts
@@ -1,6 +1,8 @@
-import {Component, Input, OnChanges} from '@angular/core';
+import {Component, Input, OnChanges } from '@angular/core';
 import {Video} from "../../../utils/interfaces/video";
 import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
+import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
+import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
 
 
 @Component({
@@ -11,31 +13,33 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
 export class VideoGridComponent implements OnChanges
 {
     @Input() tabVideo: Video[] = [];
-    tabTriplet = [];
+    indexPage: number = 0;
 
-
-    constructor(private historiqueService: UserHistoryService) {}
+    constructor( private historiqueService: UserHistoryService,
+                 private addVideoToPlaylistsService: AddVideoToPlaylistsService,
+                 private videoUrlService: VideoUrlService ) {}
 
 
     ngOnChanges(): void
     {
-        this.historiqueService.clearTabVideoUrlClicked();
+        //this.historiqueService.clearTabVideoUrlClicked();
+    }
 
-        this.tabTriplet = [];
-        let n = this.tabVideo.length;
-        let i = 0;
-        while(i < n)
-        {
-            let triplet = []
-            let compteur = 0;
-            while((compteur < 3) && (i < n))
-            {
-                triplet.push(this.tabVideo[i]);
-                i++ ;
-                compteur++ ;
-            }
-            this.tabTriplet.push(triplet)
-        }
+    onAdd(video: Video): void
+    {
+        this.addVideoToPlaylistsService.run(video);
+    }
+
+    onIframeClick(video: Video)
+    {
+        console.log("onIframeClick: " + video.title);
+        this.historiqueService.addVideoToHistoque(video);
+    }
+
+    tronquage(str: string)
+    {
+        if(str.length < 30) return str;
+        else return str.substring(0, 30) + "..." ;
     }
 
 }