restructuration des fichiers (pour pouvoir passer plus facilement plusieurs fronts)

src/app/admin/navbar-admin/navbar-admin.component.html

@@ -0,0 +1,32 @@
+<nav class="navbar navbar-expand-lg">
+
+    <!-- PolyNotFound -->
+    <a class="navbar-brand" routerLink="/admin/userList"> 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>
+
+    <!-- [UserList] [Mes AdList] [Historique] -->
+    <div class="collapse navbar-collapse">
+        <ul class="navbar-nav">
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
+            </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
+            </li>
+        </ul>
+    </div>
+
+    <!-- Mon profil -->
+    <img [src]=urlImage
+         onerror="this.onerror=null; this.src='assets/profil.png'"
+         routerLink="/admin/myProfil"
+         alt="">
+
+    <!-- Deconnexion -->
+    <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
+        Deconnexion
+    </button>
+
+</nav>

src/app/admin/navbar-admin/navbar-admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarAdminComponent } from './navbar-admin.component';
+
+describe('NavbarAdminComponent', () => {
+  let component: NavbarAdminComponent;
+  let fixture: ComponentFixture<NavbarAdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarAdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarAdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/navbar-admin/navbar-admin.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {ThemeService} from "../../utils/services/theme/theme.service";
+
+@Component({
+  selector: 'app-navbar-admin',
+  templateUrl: './navbar-admin.component.html',
+  styleUrls: ['./navbar-admin.component.scss']
+})
+export class NavbarAdminComponent
+{
+    urlImage: string = "" ;
+
+    constructor( public themeService: ThemeService ) { }
+
+    onDeconnexion(): void {
+
+    }
+}

src/app/advertiser/manageAds/drag-and-drop/drag-and-drop.component.html

@@ -1,15 +1,17 @@
 <div title="bobo" class="container" appDragAndDrop (fileDropped)="onFileDropped($event)">
     <input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
     <h3>Images</h3>
-    <img src="/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
+    <img src="/src/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
     <div style="font-style: italic; margin-top: 10px">Glisser déposer</div>
     <div style="font-style: italic">ou</div>
     <div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>
 </div>
+
 <mat-icon [title]=info_image>info</mat-icon>
+
 <div class="files-list">
     <div class="single-file" *ngFor="let file of files; let i = index">
-        <img src="assets/uploadFile.png" width="45px" alt="file">
+        <img src="/assets/uploadFile.png" width="45px" alt="file">
         <div class="info">
             <h4 class="name">
                 {{ file?.name }}

src/app/advertiser/manageAds/input-tags/input-tags.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BarTagsComponent } from './bar-tags.component';
+import { InputTagsComponent } from './input-tags.component';
 
 describe('BarTagsComponent', () => {
-  let component: BarTagsComponent;
+  let component: InputTagsComponent;
-  let fixture: ComponentFixture<BarTagsComponent>;
+  let fixture: ComponentFixture<InputTagsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ BarTagsComponent ]
+      declarations: [ InputTagsComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BarTagsComponent);
+    fixture = TestBed.createComponent(InputTagsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/manageAds/input-tags/input-tags.component.ts

@@ -5,17 +5,17 @@ import {Observable} from "rxjs";
 import {map, startWith} from "rxjs/operators";
 import {MatChipInputEvent} from "@angular/material/chips";
 import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
-import {FictitiousDatasService} from "../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
-import {MessageService} from "../../utils/services/message/message.service";
+import {MessageService} from "../../../utils/services/message/message.service";
 
 
 
 @Component({
-    selector: 'app-bar-tags',
+    selector: 'app-input-tags',
-    templateUrl: './bar-tags.component.html',
+    templateUrl: './input-tags.component.html',
-    styleUrls: ['./bar-tags.component.scss']
+    styleUrls: ['./input-tags.component.scss']
 })
-export class BarTagsComponent implements OnInit
+export class InputTagsComponent implements OnInit
 {
     selectable = true;
     removable = true;
@@ -41,31 +41,20 @@ export class BarTagsComponent implements OnInit
         // --- FAUX CODE ---
         this.allTags = this.fictitiousDatasService.getTags();
         this.allTags.sort();
-
-        // --- VRAI CODE ---
-        /*
-        this.messageService
-            .sendMessage("advertiser/get/tags", null)
-            .subscribe( retour => {
-
-                if(retour.status === "error") console.log(retour);
-                else {
-                    this.allTags = retour.data.tags;
-                    this.allTags.sort();
-                }
-            });
-        */
     }
 
 
     add(event: MatChipInputEvent): void
     {
         const value = (event.value || '').trim();
-        if (value) this.myTags.push(value); // Add our fruit
+        if (value && (this.allTags.indexOf(value) !== -1))
-        event.chipInput!.clear(); // Clear the input value
+        {
+            this.myTags.push(value);
+            event.chipInput!.clear();
             this.formControl.setValue(null);
             this.eventEmitter.emit(this.myTags);
         }
+    }
 
 
     remove(tag: string): void

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.html

@@ -2,7 +2,7 @@
     <div class="myContainer">
 
 
-        <app-nav-bar pour="advertiser"></app-nav-bar><br><br>
+        <app-navbar-advertiser></app-navbar-advertiser><br><br>
 
         <!-- ---------------------------------------------------------------------------------- -->
 

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.ts

@@ -1,9 +1,9 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatSort} from "@angular/material/sort";
-import {ThemeService} from "../../utils/services/theme/theme.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
-import {FictitiousDatasService} from "../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
 import {MatTableDataSource} from "@angular/material/table";
-import {Advert} from "../../utils/interfaces/advert";
+import {Advert} from "../../../utils/interfaces/advert";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-or-update-ad.component";
 import {MatSnackBar} from "@angular/material/snack-bar";

src/app/advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component.html

@@ -18,7 +18,7 @@
         <app-drag-and-drop></app-drag-and-drop>
 
         <!-- Tags -->
-        <app-bar-tags [myTags]="advert.tags" (eventEmitter)="onEventBarTags($event)"></app-bar-tags>
+        <app-input-tags [myTags]="advert.tags" (eventEmitter)="onEventInputTags($event)"></app-input-tags>
 
         <!-- Comments -->
         <mat-form-field class="commentContainer" appearance="fill">

src/app/advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component.ts

@@ -1,8 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {Advert} from "../../utils/interfaces/advert";
+import {Advert} from "../../../utils/interfaces/advert";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {MessageService} from "../../utils/services/message/message.service";
+import {MessageService} from "../../../utils/services/message/message.service";
-import {ThemeService} from "../../utils/services/theme/theme.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 
 const ADVERT_VIDE = {
@@ -82,7 +82,7 @@ export class PopupAddOrUpdateAdComponent implements OnInit
     }
 
 
-    onEventBarTags(myTags: string[]): void
+    onEventInputTags(myTags: string[]): void
     {
         this.advert.tags = myTags;
     }

src/app/advertiser/manageAds/popup-delete-ad/popup-delete-ad.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {MessageService} from "../../utils/services/message/message.service";
+import {MessageService} from "../../../utils/services/message/message.service";
-import {Advert} from "../../utils/interfaces/advert";
+import {Advert} from "../../../utils/interfaces/advert";
 
 
 

src/app/advertiser/manageAds/popup-visualize-ad/popup-visualize-ad.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {ThemeService} from "../../utils/services/theme/theme.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
-import {Advert} from "../../utils/interfaces/advert";
+import {Advert} from "../../../utils/interfaces/advert";
 import {PopupVisualizeImagesComponent} from "../popup-visualize-images/popup-visualize-images.component";
 
 @Component({

src/app/advertiser/manageAds/popup-visualize-images/popup-visualize-images.component.ts

@@ -1,6 +1,6 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
-import {ThemeService} from "../../utils/services/theme/theme.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 @Component({
     selector: 'app-popup-visualize-images',

src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html

@@ -0,0 +1 @@
+<p>page-profil-advertiser works!</p>

src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageProfilAdvertiserComponent } from './page-profil-advertiser.component';
+
+describe('PageProfilAdvertiserComponent', () => {
+  let component: PageProfilAdvertiserComponent;
+  let fixture: ComponentFixture<PageProfilAdvertiserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageProfilAdvertiserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageProfilAdvertiserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-profil-advertiser',
+  templateUrl: './page-profil-advertiser.component.html',
+  styleUrls: ['./page-profil-advertiser.component.scss']
+})
+export class PageProfilAdvertiserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html

@@ -0,0 +1 @@
+<p>popup-update-advertiser works!</p>

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupUpdateAdvertiserComponent } from './popup-update-advertiser.component';
+
+describe('PopupUpdateAdvertiserComponent', () => {
+  let component: PopupUpdateAdvertiserComponent;
+  let fixture: ComponentFixture<PopupUpdateAdvertiserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupUpdateAdvertiserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupUpdateAdvertiserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-popup-update-advertiser',
+  templateUrl: './popup-update-advertiser.component.html',
+  styleUrls: ['./popup-update-advertiser.component.scss']
+})
+export class PopupUpdateAdvertiserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html

@@ -0,0 +1,23 @@
+<nav class="navbar navbar-expand-lg">
+
+    <!-- PolyNotFound -->
+    <a class="navbar-brand" routerLink="/advertiser"> 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 -->
+    <div class="collapse navbar-collapse"></div>
+
+    <!-- Mon profil -->
+    <img [src]=urlImage
+         onerror="this.onerror=null; this.src='assets/profil.png'"
+         routerLink="/advertiser/myProfil"
+         alt="">
+
+    <!-- Deconnexion -->
+    <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
+        Deconnexion
+    </button>
+
+</nav>

src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss

@@ -0,0 +1,80 @@
+.navbar {
+  background-color: black;
+  height: 75px;
+  font-size: x-large;
+  color: white;
+}
+
+
+.navbar-expand-lg {
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
+}
+
+
+// PolyNotFound
+.navbar-brand {
+  font-family: cursive;
+  font-weight: bold;
+  //font-style: oblique 90deg;
+  font-size: xxx-large;
+  margin-left: 30px;
+  color: white;
+}
+
+
+// Recherche, Mes Playlists, Historique
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: grey;
+}
+
+
+// Bonton deconnexion
+.btnDeconnexion {
+  font-size: x-large;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
+
+
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
+img {
+  border: solid 2px white;
+  border-radius: 50px;
+  margin: 0px 10px 0px 15px;
+  width: 50px;
+  height: 50px;
+}
+img:hover {
+  cursor: pointer;
+}
+
+
+// --------------------------------------------------------------------
+
+
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: #c8c8c8;
+}
+
+::ng-deep .mat-slide-toggle-bar {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #646464;
+}

src/app/advertiser/navbar-advertiser/navbar-advertiser.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarAdvertiserComponent } from './navbar-advertiser.component';
+
+describe('NavbarAdvertiserComponent', () => {
+  let component: NavbarAdvertiserComponent;
+  let fixture: ComponentFixture<NavbarAdvertiserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarAdvertiserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarAdvertiserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/advertiser/navbar-advertiser/navbar-advertiser.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import {ThemeService} from "../../utils/services/theme/theme.service";
+
+@Component({
+  selector: 'app-navbar-advertiser',
+  templateUrl: './navbar-advertiser.component.html',
+  styleUrls: ['./navbar-advertiser.component.scss']
+})
+export class NavbarAdvertiserComponent
+{
+    urlImage: string = "" ;
+
+    constructor( public themeService: ThemeService ) { }
+
+    onDeconnexion(): void {}
+
+}

src/app/app-routing.module.ts

@@ -1,33 +1,34 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {PageConnexionComponent} from './pourLes3Roles/page-connexion/page-connexion.component';
+import {PageLoginComponent} from './beforeConnexion/login/page-login/page-login.component';
-import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page-register.component';
+import {PageRegisterComponent} from "./beforeConnexion/register/page-register/page-register.component";
 import {PageSearchComponent} from "./user/search/page-search/page-search.component";
 import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
 import {PageHistoryUserComponent} from "./user/history/page-history-user/page-history-user.component";
-import {PageMyProfilComponent} from "./utils/components/myProfil/page-my-profil/page-my-profil.component";
+import {PageAdvertiserComponent} from "./advertiser/manageAds/page-advertiser/page-advertiser.component";
-import {PageAdvertiserComponent} from "./advertiser/page-advertiser/page-advertiser.component";
+import {PageProfilUserComponent} from "./user/myProfil/page-profil-user/page-profil-user.component";
+import {PageProfilAdvertiserComponent} from "./advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component";
 
 
 const routes: Routes = [
-    { path: '', component: PageConnexionComponent },
+    { path: '', component: PageLoginComponent },
-    { path: 'login', component: PageConnexionComponent },
+    { path: 'login', component: PageLoginComponent },
     { path: 'register', component: PageRegisterComponent },
 
     { path: 'user', component: PageSearchComponent },
     { path: 'user/search', component: PageSearchComponent },
     { path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
     { path: 'user/history', component: PageHistoryUserComponent },
-    { path: 'user/myProfil', component: PageMyProfilComponent },
+    { path: 'user/myProfil', component:  PageProfilUserComponent },
 
     { path: 'advertiser', component: PageAdvertiserComponent },
-    { path: 'advertiser/myProfil', component: PageMyProfilComponent },
+    { path: 'advertiser/myProfil', component: PageProfilAdvertiserComponent },
 
     /*
-    { path: 'admin/userList', component: PageConnexionComponent },
+    { path: 'admin/userList', component: PageLoginComponent },
-    { path: 'admin/addUser', component: PageConnexionComponent },
+    { path: 'admin/addUser', component: PageLoginComponent },
-    { path: 'admin/adList', component: PageConnexionComponent },
+    { path: 'admin/adList', component: PageLoginComponent },
-    { path: 'admin/myProfil', component: PageMyProfilComponent }
+    { path: 'admin/myProfil', component: PageProfilAdminComponent }
     */
 ];
 

src/app/app.module.ts

@@ -3,15 +3,14 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { PageConnexionComponent } from './pourLes3Roles/page-connexion/page-connexion.component';
+import { PageLoginComponent } from './beforeConnexion/login/page-login/page-login.component';
-import { PageRegisterComponent } from './pourLes3Roles/register/page-register/page-register.component';
+import { PageRegisterComponent } from './beforeConnexion/register/page-register/page-register.component';
-import { NavBarComponent } from './utils/components/nav-bar/nav-bar.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { PageSearchComponent } from './user/search/page-search/page-search.component';
 import {HttpClientModule} from "@angular/common/http";
-import { PopupConfirmationComponent } from './pourLes3Roles/register/popup-confirmation/popup-confirmation.component';
+import { PopupConfirmationComponent } from './beforeConnexion/register/popup-confirmation/popup-confirmation.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from "@angular/material/button";
 import { AdvertComponent } from './utils/components/advert/advert.component';
@@ -36,26 +35,35 @@ import { PageMyProfilComponent } from './utils/components/myProfil/page-my-profi
 import { PopupPictureProfilUrlComponent } from './utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {MatSortModule} from "@angular/material/sort";
-import { PageAdvertiserComponent } from './advertiser/page-advertiser/page-advertiser.component';
+import { PageAdvertiserComponent } from './advertiser/manageAds/page-advertiser/page-advertiser.component';
-import { PopupDeleteAdComponent } from './advertiser/popup-delete-ad/popup-delete-ad.component';
+import { PopupDeleteAdComponent } from './advertiser/manageAds/popup-delete-ad/popup-delete-ad.component';
-import { PopupAddOrUpdateAdComponent } from './advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component';
+import { PopupAddOrUpdateAdComponent } from './advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component';
-import { PopupVisualizeAdComponent } from './advertiser/popup-visualize-ad/popup-visualize-ad.component';
+import { PopupVisualizeAdComponent } from './advertiser/manageAds/popup-visualize-ad/popup-visualize-ad.component';
-import { BarTagsComponent } from './advertiser/bar-tags/bar-tags.component';
+import { InputTagsComponent } from './advertiser/manageAds/input-tags/input-tags.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatSelectModule} from "@angular/material/select";
-import { PopupVisualizeImagesComponent } from './advertiser/popup-visualize-images/popup-visualize-images.component';
+import { PopupVisualizeImagesComponent } from './advertiser/manageAds/popup-visualize-images/popup-visualize-images.component';
 import {IvyCarouselModule} from "angular-responsive-carousel";
-import { DragAndDropComponent } from './advertiser/drag-and-drop/drag-and-drop.component';
+import { DragAndDropComponent } from './advertiser/manageAds/drag-and-drop/drag-and-drop.component';
 import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive';
+import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component';
+import { NavbarUserComponent } from './user/navbar-user/navbar-user.component';
+import { NavbarAdvertiserComponent } from './advertiser/navbar-advertiser/navbar-advertiser.component';
+import { NavbarAdminComponent } from './admin/navbar-admin/navbar-admin.component';
+import { PageProfilAdvertiserComponent } from './advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component';
+import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component';
+import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component';
+import { NavbarBeforeConnexionComponent } from './beforeConnexion/navbar-before-connexion/navbar-before-connexion.component';
+import {MatRadioModule} from "@angular/material/radio";
+import { InputInterestsComponent } from './user/myProfil/input-interests/input-interests.component';
 
 
 @NgModule({
     declarations: [
         AppComponent,
-        PageConnexionComponent,
+        PageLoginComponent,
         PageRegisterComponent,
-        NavBarComponent,
         PageSearchComponent,
         PopupConfirmationComponent,
         AdvertComponent,
@@ -75,10 +83,19 @@ import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-dr
         PopupDeleteAdComponent,
         PopupAddOrUpdateAdComponent,
         PopupVisualizeAdComponent,
-        BarTagsComponent,
+        InputTagsComponent,
         PopupVisualizeImagesComponent,
         DragAndDropComponent,
         DragAndDropDirective,
+        PageProfilUserComponent,
+        NavbarUserComponent,
+        NavbarAdvertiserComponent,
+        NavbarAdminComponent,
+        PageProfilAdvertiserComponent,
+        PopupUpdateAdvertiserComponent,
+        PopupUpdateUserComponent,
+        NavbarBeforeConnexionComponent,
+        InputInterestsComponent,
     ],
     imports: [
         BrowserModule,
@@ -103,7 +120,8 @@ import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-dr
         ReactiveFormsModule,
         MatAutocompleteModule,
         MatSelectModule,
-        IvyCarouselModule
+        IvyCarouselModule,
+        MatRadioModule
     ],
   providers: [],
   bootstrap: [AppComponent]

src/app/beforeConnexion/login/page-login/page-login.component.html

@@ -3,7 +3,7 @@
         <div class="bg">
 
 
-            <app-nav-bar pour="login"></app-nav-bar>
+            <app-navbar-before-connexion pour="login"></app-navbar-before-connexion>
 
 
             <div class="wrapper fadeInDown">
@@ -12,7 +12,7 @@
                     <!-- Icon -->
                     <div class="fadeIn first">
                         <h1 style="font-family: cursive; font-size: 45px; margin-top: 60px; margin-bottom: 20px">StreamNotFound</h1>
-                        <img src="assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
+                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
                     </div>
 
                     <!-- Login Form -->

src/app/beforeConnexion/login/page-login/page-login.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageConnexionComponent } from './page-connexion.component';
+import { PageLoginComponent } from './page-login.component';
 
 describe('PageConnexionComponent', () => {
-  let component: PageConnexionComponent;
+  let component: PageLoginComponent;
-  let fixture: ComponentFixture<PageConnexionComponent>;
+  let fixture: ComponentFixture<PageLoginComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PageConnexionComponent ]
+      declarations: [ PageLoginComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PageConnexionComponent);
+    fixture = TestBed.createComponent(PageLoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/beforeConnexion/login/page-login/page-login.component.ts

@@ -1,16 +1,16 @@
 import {Component, OnInit} from '@angular/core';
-import {MessageService} from "../../utils/services/message/message.service";
+import {MessageService} from "../../../utils/services/message/message.service";
 import {Router} from "@angular/router";
-import {ThemeService} from "../../utils/services/theme/theme.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 
 
 @Component({
-    selector: 'app-page-connexion',
+    selector: 'app-page-login',
-    templateUrl: './page-connexion.component.html',
+    templateUrl: './page-login.component.html',
-    styleUrls: ['./page-connexion.component.scss']
+    styleUrls: ['./page-login.component.scss']
 })
-export class PageConnexionComponent implements OnInit
+export class PageLoginComponent implements OnInit
 {
     pseudo: string = "" ;
     password: string = "" ;

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.html

@@ -0,0 +1,40 @@
+<!-- Login -->
+<div *ngIf="pour === 'login'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- PolyNotFound -->
+        <a class="navbar-brand" routerLink=""> 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>
+
+        <!-- Rien -->
+        <div class="collapse navbar-collapse"></div>
+
+        <!-- S'inscrire -->
+        <button mat-button class="btnDeconnexion" routerLink="/register">
+            S'inscrire
+        </button>
+
+    </nav>
+</div>
+
+
+<!-- --------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Register -->
+<div *ngIf="pour === 'register'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- PolyNotFound -->
+        <a class="navbar-brand" routerLink=""> 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>
+
+        <!-- Rien -->
+        <div class="collapse navbar-collapse"></div>
+
+    </nav>
+</div>

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss

@@ -0,0 +1,80 @@
+.navbar {
+  background-color: black;
+  height: 75px;
+  font-size: x-large;
+  color: white;
+}
+
+
+.navbar-expand-lg {
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
+}
+
+
+// PolyNotFound
+.navbar-brand {
+  font-family: cursive;
+  font-weight: bold;
+  //font-style: oblique 90deg;
+  font-size: xxx-large;
+  margin-left: 30px;
+  color: white;
+}
+
+
+// Recherche, Mes Playlists, Historique
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: grey;
+}
+
+
+// Bonton deconnexion
+.btnDeconnexion {
+  font-size: x-large;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
+
+
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
+img {
+  border: solid 2px white;
+  border-radius: 50px;
+  margin: 0px 10px 0px 15px;
+  width: 50px;
+  height: 50px;
+}
+img:hover {
+  cursor: pointer;
+}
+
+
+// --------------------------------------------------------------------
+
+
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: #c8c8c8;
+}
+
+::ng-deep .mat-slide-toggle-bar {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #646464;
+}

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarBeforeConnexionComponent } from './navbar-before-connexion.component';
+
+describe('NavbarBeforeConnexionComponent', () => {
+  let component: NavbarBeforeConnexionComponent;
+  let fixture: ComponentFixture<NavbarBeforeConnexionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarBeforeConnexionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarBeforeConnexionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+
+
+@Component({
+  selector: 'app-navbar-before-connexion',
+  templateUrl: './navbar-before-connexion.component.html',
+  styleUrls: ['./navbar-before-connexion.component.scss']
+})
+export class NavbarBeforeConnexionComponent
+{
+    @Input() pour = "login";
+}

src/app/beforeConnexion/register/page-register/page-register.component.html

@@ -3,7 +3,6 @@
         <div class="bg">
 
 
-            <app-nav-bar pour="register"></app-nav-bar>
 
 
             <div class="wrapper">
@@ -11,7 +10,7 @@
 
                     <!-- Icon -->
                     <div style="margin: 10px 0px 20px 0px">
-                        <img src="assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
+                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
                     </div>
 
                     <!-- Login Form -->

src/app/user/history/page-history-user/page-history-user.component.html

@@ -2,7 +2,7 @@
     <div class="myContainer">
 
 
-        <app-nav-bar pour="user"></app-nav-bar><br><br>
+        <app-navbar-user></app-navbar-user><br><br>
 
         <!-- ---------------------------------------------------------------------------------- -->
 

src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html

@@ -3,7 +3,7 @@
 
         <!-- Navbar -->
         <div style="margin-bottom: 50px">
-            <app-nav-bar pour="user"></app-nav-bar>
+            <app-navbar-user></app-navbar-user>
         </div>
 
         <!-- --------------------------------------------------------------------- -->

src/app/user/myProfil/input-interests/input-interests.component.html

@@ -0,0 +1,43 @@
+<mat-form-field class="example-chip-list" appearance="fill">
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-label>Tags</mat-label>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-chip-list #chipList aria-label="Fruit selection">
+
+        <mat-chip
+                *ngFor="let interest of myInterests"
+                [selectable]="selectable"
+                [removable]="removable"
+                (removed)="remove(interest)">
+            {{interest}}
+            <button matChipRemove *ngIf="removable">
+                <mat-icon>cancel</mat-icon>
+            </button>
+        </mat-chip>
+
+        <input
+                placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
+                #tagInput
+                [formControl]="formControl"
+                [matAutocomplete]="auto"
+                [matChipInputFor]="chipList"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                (matChipInputTokenEnd)="add($event)">
+
+    </mat-chip-list>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+        <mat-option *ngFor="let interest of filteredInterests | async" [value]="interest">
+            {{interest}}
+        </mat-option>
+    </mat-autocomplete>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+</mat-form-field>

src/app/user/myProfil/input-interests/input-interests.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/app/user/myProfil/input-interests/input-interests.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputInterestsComponent } from './input-interests.component';
+
+describe('InputInterestsComponent', () => {
+  let component: InputInterestsComponent;
+  let fixture: ComponentFixture<InputInterestsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputInterestsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputInterestsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/myProfil/input-interests/input-interests.component.ts

@@ -0,0 +1,82 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {COMMA, ENTER} from "@angular/cdk/keycodes";
+import {FormControl} from "@angular/forms";
+import {Observable} from "rxjs";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {MessageService} from "../../../utils/services/message/message.service";
+import {map, startWith} from "rxjs/operators";
+import {MatChipInputEvent} from "@angular/material/chips";
+import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
+
+
+@Component({
+  selector: 'app-input-interests',
+  templateUrl: './input-interests.component.html',
+  styleUrls: ['./input-interests.component.scss']
+})
+export class InputInterestsComponent implements OnInit
+{
+    selectable = true;
+    removable = true;
+    separatorKeysCodes: number[] = [ENTER, COMMA];
+    formControl = new FormControl();
+    filteredInterests: Observable<string[]>;
+    @Input() myInterests: string[] = [];
+    allInterests: string[] = [];
+    @Output() eventEmitter = new EventEmitter<string[]>();
+    @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
+
+
+    constructor( private fictitiousDatasService: FictitiousDatasService,
+                 private messageService: MessageService ) {}
+
+
+    ngOnInit(): void
+    {
+        this.filteredInterests = this.formControl.valueChanges.pipe(
+            startWith(null),
+            map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
+
+        // --- FAUX CODE ---
+        this.allInterests = this.fictitiousDatasService.getTags();
+        this.allInterests.sort();
+    }
+
+
+    add(event: MatChipInputEvent): void
+    {
+        const value = (event.value || '').trim();
+        if (value && (this.allInterests.indexOf(value) !== -1))
+        {
+            this.myInterests.push(value);
+            event.chipInput!.clear();
+            this.formControl.setValue(null);
+            this.eventEmitter.emit(this.myInterests);
+        }
+    }
+
+
+    remove(tag: string): void
+    {
+        const index = this.myInterests.indexOf(tag);
+        if (index >= 0) this.myInterests.splice(index, 1);
+        this.eventEmitter.emit(this.myInterests);
+    }
+
+
+    selected(event: MatAutocompleteSelectedEvent): void
+    {
+        this.myInterests.push(event.option.viewValue);
+        this.tagInput.nativeElement.value = '';
+        this.formControl.setValue(null);
+        this.eventEmitter.emit(this.myInterests);
+    }
+
+
+    private _filter(value: string): string[]
+    {
+        const filterValue = value.toLowerCase();
+        return this.allInterests.filter(fruit => fruit.toLowerCase().includes(filterValue));
+    }
+
+}

src/app/user/myProfil/page-profil-user/page-profil-user.component.html

@@ -0,0 +1,70 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <!-- NavBar -->
+        <app-navbar-user></app-navbar-user>
+
+        <!-- Boite -->
+        <div class="boite">
+
+            <!-- Photo de profil -->
+            <div style="text-align: center">
+                <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 à HH:mm:ss' }}
+                </div>
+            </div>
+
+            <!-- Modifier profil -->
+            <div class="btnContainer">
+                <button mat-button class="myBtn" (click)="onModifier()">Modifier profil</button>
+            </div>
+
+        </div>
+
+
+    </div>
+</div>

src/app/user/myProfil/page-profil-user/page-profil-user.component.scss

@@ -0,0 +1,61 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+
+.boite {
+  margin-left: auto;
+  margin-right: auto;
+  width: 25%;
+  margin-top: 10vh;
+  border: solid 3px;
+  border-radius: 10px;
+  padding: 20px 40px 20px 40px;
+  background-color: #ffffff;
+  text-align: center;
+  box-shadow: 10px 5px 5px black;
+}
+.lightTheme .boite {
+  border-color: black;
+}
+.darkTheme .boite {
+  border-color: white;
+}
+
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+
+.myRow {
+  margin: 15px 0px 15px 0px;
+}
+.myLabel {
+  text-align: right;
+  padding: 0px 5px 0px 0px;
+  margin: 0px;
+  font-weight: bold;
+}
+.myValue {
+  text-align: left;
+  padding: 0px 0px 0px 5px;
+  margin: 0px;
+}
+
+
+.btnContainer {
+  text-align: center;
+  margin-top: 40px;
+}
+.myBtn {
+  border: solid 1px black;
+  background-color: white;
+}

src/app/user/myProfil/page-profil-user/page-profil-user.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageProfilUserComponent } from './page-profil-user.component';
+
+describe('PageProfilUserComponent', () => {
+  let component: PageProfilUserComponent;
+  let fixture: ComponentFixture<PageProfilUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageProfilUserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageProfilUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/myProfil/page-profil-user/page-profil-user.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {User} from "../../../utils/interfaces/user";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupUpdateUserComponent} from "../popup-update-user/popup-update-user.component";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-page-profil-user',
+  templateUrl: './page-profil-user.component.html',
+  styleUrls: ['./page-profil-user.component.scss']
+})
+export class PageProfilUserComponent implements OnInit
+{
+    user: User;
+
+
+    constructor( public themeService: ThemeService,
+                 private fictitiousDatasService: FictitiousDatasService,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar ) { }
+
+
+    ngOnInit(): void
+    {
+        this.user = this.fictitiousDatasService.getUser();
+    }
+
+
+    onModifier()
+    {
+        const config = {
+            width: '25%',
+            data: { user: this.user }
+        };
+        this.dialog
+            .open(PopupUpdateUserComponent, config)
+            .afterClosed()
+            .subscribe(retour => {
+
+                if((retour === null) || (retour === undefined))
+                {
+                    const config = { duration: 1000, panelClass: "custom-class" };
+                    this.snackBar.open( "Opération annulé", "", config);
+                }
+                else
+                {
+                    this.user = retour;
+                }
+            });
+    }
+}

src/app/user/myProfil/popup-update-user/popup-update-user.component.html

@@ -0,0 +1,81 @@
+<div class="myContainer">
+
+
+    <div class="boite">
+
+        <!-- profil login mail dateOfBirth gender interets -->
+
+        <!-- photo de profil -->
+        <div style="text-align: center">
+            <img [src]="userCopy.profilePictureUrl"
+                 onerror="this.onerror=null; this.src='assets/profil.png'">
+            <br>
+            <input matInput type="text" [(ngModel)]="userCopy.profilePictureUrl">
+        </div>
+        <br>
+
+        <!-- login -->
+        <mat-form-field appearance="fill">
+            <mat-label>Pseudo</mat-label>
+            <input matInput type="text" [(ngModel)]="userCopy.login">
+        </mat-form-field>
+        <br>
+
+        <!-- email -->
+        <mat-form-field appearance="fill">
+            <mat-label>Email</mat-label>
+            <input matInput type="text" [(ngModel)]="userCopy.mail">
+        </mat-form-field>
+        <br>
+
+        <!-- dateOfBirth -->
+        <mat-form-field appearance="fill">
+            <mat-label>Date de naissance</mat-label>
+            <input matInput type="date" [(ngModel)]="userCopy.mail">
+        </mat-form-field>
+        <br>
+
+        <!-- gender -->
+        <mat-radio-group [(ngModel)]="userCopy.gender">
+            <mat-radio-button value="man"> Homme </mat-radio-button>
+            <mat-radio-button value="woman"> Femme </mat-radio-button>
+        </mat-radio-group>
+
+
+        <!-- interets -->
+        <app-input-interests [myInterests]="userCopy.interests" (eventEmitter)="onEventInputInterests($event)"></app-input-interests>
+
+
+        <!-- Modifier mot de passe -->
+        Modifier mot de passe:
+        <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
+        <br>
+
+        <!-- Nouveau mot de passe -->
+        <div *ngIf="changePassword">
+            <!-- Nouveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="newPassword">
+            </mat-form-field>
+            <br>
+            <!-- Confirmation npuveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Confirmation nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="confirmNewPassword">
+            </mat-form-field>
+        </div>
+        <br>
+
+        <!-- Bouton valider -->
+        <div style="width: 100%; text-align: center">
+            <button mat-button (click)="onValider()"> Enregistrer </button>
+        </div>
+
+        <!-- Message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
+            <span class="mat-error"> {{errorMessage}} </span>
+        </div>
+
+    </div>
+</div>

src/app/user/myProfil/popup-update-user/popup-update-user.component.scss

@@ -0,0 +1,8 @@
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}

src/app/user/myProfil/popup-update-user/popup-update-user.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupUpdateUserComponent } from './popup-update-user.component';
+
+describe('PopupUpdateUserComponent', () => {
+  let component: PopupUpdateUserComponent;
+  let fixture: ComponentFixture<PopupUpdateUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupUpdateUserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupUpdateUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/myProfil/popup-update-user/popup-update-user.component.ts

@@ -0,0 +1,106 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {User} from "../../../utils/interfaces/user";
+
+
+
+@Component({
+    selector: 'app-popup-update-user',
+    templateUrl: './popup-update-user.component.html',
+    styleUrls: ['./popup-update-user.component.scss']
+})
+export class PopupUpdateUserComponent implements OnInit
+{
+    userCopy: User;
+    newPassword: string;
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupUpdateUserComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data) { }
+
+
+    ngOnInit(): void
+    {
+        const user0 = this.data.user;
+        this.userCopy = {
+            _id: user0._id,
+            login: user0.login,
+            hashPass: user0.hashPass,
+            mail: user0.mail,
+            role: {
+                name: user0.role.name,
+                permission: user0.role.permission,
+            },
+            profilePictureUrl: user0.profilePictureUrl,
+            dateOfBirth: user0.dateOfBirth,
+            gender: user0.gender,
+            interests: [],
+            isActive: user0.isActive,
+            createdAt: user0.createdAt,
+            updatedAt: user0.updatedAt,
+        };
+        for(let interest of user0.interests) this.userCopy.interests.push(interest);
+    }
+
+
+    onValider()
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            const retour = {
+                user: this.userCopy,
+                newPassword: this.newPassword
+            };
+            this.dialogRef.close(retour);
+        }
+    }
+
+
+    checkField()
+    {
+        if(this.userCopy.login.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'login'" ;
+            this.hasError = true;
+        }
+        else if(this.userCopy.mail.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'" ;
+            this.hasError = true;
+        }
+        else if(!this.isValidEmail(this.userCopy.mail)) {
+            this.errorMessage = "Email invalide" ;
+            this.hasError = true;
+        }
+        else if(this.changePassword) {
+            if (this.newPassword.length === 0) {
+                this.errorMessage = "Veuillez remplir le champ 'mot de passe'" ;
+                this.hasError = true;
+            } else if (this.newPassword !== this.confirmNewPassword) {
+                this.errorMessage = "Le mot de passe est différent de sa confirmation" ;
+                this.hasError = true;
+            }
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+
+    isValidEmail(email)
+    {
+        let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(email);
+    }
+
+
+    onEventInputInterests(myInterets: string[])
+    {
+        this.userCopy.interests = myInterets;
+    }
+
+}

src/app/user/navbar-user/navbar-user.component.html

@@ -0,0 +1,35 @@
+<nav class="navbar navbar-expand-lg">
+
+    <!-- PolyNotFound -->
+    <a class="navbar-brand" routerLink="/user/search"> 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>
+
+    <!-- [Recherche] [Mes Playlists] [Historique] -->
+    <div class="collapse navbar-collapse">
+        <ul class="navbar-nav">
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/search"> Rechercher </a>
+            </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
+            </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/user/history"> Historique </a>
+            </li>
+        </ul>
+    </div>
+
+    <!-- Mon profil -->
+    <img [src]=urlImage
+         onerror="this.onerror=null; this.src='assets/profil.png'"
+         routerLink="/user/myProfil"
+         alt="">
+
+    <!-- Deconnexion -->
+    <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
+        Deconnexion
+    </button>
+
+</nav>

src/app/user/navbar-user/navbar-user.component.scss

@@ -0,0 +1,80 @@
+.navbar {
+  background-color: black;
+  height: 75px;
+  font-size: x-large;
+  color: white;
+}
+
+
+.navbar-expand-lg {
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
+}
+
+
+// PolyNotFound
+.navbar-brand {
+  font-family: cursive;
+  font-weight: bold;
+  //font-style: oblique 90deg;
+  font-size: xxx-large;
+  margin-left: 30px;
+  color: white;
+}
+
+
+// Recherche, Mes Playlists, Historique
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: grey;
+}
+
+
+// Bonton deconnexion
+.btnDeconnexion {
+  font-size: x-large;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
+
+
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
+img {
+  border: solid 2px white;
+  border-radius: 50px;
+  margin: 0px 10px 0px 15px;
+  width: 50px;
+  height: 50px;
+}
+img:hover {
+  cursor: pointer;
+}
+
+
+// --------------------------------------------------------------------
+
+
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: #c8c8c8;
+}
+
+::ng-deep .mat-slide-toggle-bar {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #ffffff;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #646464;
+}

src/app/user/navbar-user/navbar-user.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavBarComponent } from './nav-bar.component';
+import { NavbarUserComponent } from './navbar-user.component';
 
-describe('NavBarComponent', () => {
+describe('NavbarUserComponent', () => {
-  let component: NavBarComponent;
+  let component: NavbarUserComponent;
-  let fixture: ComponentFixture<NavBarComponent>;
+  let fixture: ComponentFixture<NavbarUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NavBarComponent ]
+      declarations: [ NavbarUserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NavBarComponent);
+    fixture = TestBed.createComponent(NavbarUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/user/navbar-user/navbar-user.component.ts

@@ -0,0 +1,35 @@
+import {Component, OnInit} from '@angular/core';
+import {ThemeService} from "../../utils/services/theme/theme.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-navbar-user',
+  templateUrl: './navbar-user.component.html',
+  styleUrls: ['./navbar-user.component.scss']
+})
+export class NavbarUserComponent implements OnInit
+{
+    urlImage: string = "" ;
+
+    constructor( public themeService: ThemeService,
+                 private router: Router) { }
+
+
+    ngOnInit(): void
+    {
+        if(this.router.url.startsWith("/user")) {
+            this.urlImage = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg";
+        }
+        else if(this.router.url.startsWith("/advertiser")) {
+            this.urlImage = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
+        }
+        else if(this.router.url.startsWith("/admin")) {
+            this.urlImage = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530" ;
+        }
+    }
+
+    onDeconnexion(): void {
+
+    }
+
+}

src/app/user/search/page-search/page-search.component.html

@@ -3,7 +3,7 @@
 
         <!-- Navbar -->
         <div style="margin-bottom: 50px">
-            <app-nav-bar pour="user"></app-nav-bar>
+            <app-navbar-user></app-navbar-user>
         </div>
 
 

src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html

@@ -1,7 +1,6 @@
 <div [class]="themeService.getClassTheme()">
     <div class="myContainer">
 
-        <app-nav-bar [pour]="forNavbar"></app-nav-bar><br><br>
 
         <div class="boite">
 

src/app/utils/components/nav-bar/nav-bar.component.html

@@ -1,178 +0,0 @@
-<!-- --------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Login -->
-<div *ngIf="pour === 'login'">
-    <nav class="navbar navbar-expand-lg">
-
-        <!-- PolyNotFound -->
-        <a class="navbar-brand" routerLink=""> 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>
-
-        <!-- Rien -->
-        <div class="collapse navbar-collapse"></div>
-
-        <!-- Slide -->
-        <mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 50px 0px 10px;"></mat-slide-toggle>
-
-        <!-- S'inscrire -->
-        <button mat-button class="btnDeconnexion" routerLink="/register">
-            S'inscrire
-        </button>
-
-    </nav>
-</div>
-
-
-<!-- --------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Register -->
-<div *ngIf="pour === 'register'">
-    <nav class="navbar navbar-expand-lg">
-
-        <!-- PolyNotFound -->
-        <a class="navbar-brand" routerLink=""> 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>
-
-        <!-- Rien -->
-        <div class="collapse navbar-collapse"></div>
-
-        <!-- Slide -->
-        <mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 50px 0px 10px;"></mat-slide-toggle>
-
-    </nav>
-</div>
-
-
-<!-- --------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- User -->
-<div *ngIf="pour === 'user'">
-    <nav class="navbar navbar-expand-lg">
-
-        <!-- PolyNotFound -->
-        <a class="navbar-brand" routerLink="/user/search"> 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>
-
-        <!-- [Recherche] [Mes Playlists] [Historique] -->
-        <div class="collapse navbar-collapse">
-            <ul class="navbar-nav">
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/user/search"> Rechercher </a>
-                </li>
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
-                </li>
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/user/history"> Historique </a>
-                </li>
-            </ul>
-        </div>
-
-        <!-- Slide -->
-        <mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
-
-        <!-- Mon profil -->
-        <img [src]=urlImage
-             onerror="this.onerror=null; this.src='assets/profil.png'"
-             routerLink="/user/myProfil"
-             alt="">
-
-        <!-- Deconnexion -->
-        <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
-            Deconnexion
-        </button>
-
-    </nav>
-</div>
-
-
-<!-- --------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Advertiser -->
-<div *ngIf="pour === 'advertiser'">
-    <nav class="navbar navbar-expand-lg">
-
-        <!-- PolyNotFound -->
-        <a class="navbar-brand" routerLink="/advertiser"> 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 -->
-        <div class="collapse navbar-collapse"></div>
-
-        <!-- Slide -->
-        <mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
-
-        <!-- Mon profil -->
-        <img [src]=urlImage
-             onerror="this.onerror=null; this.src='assets/profil.png'"
-             routerLink="/advertiser/myProfil"
-             alt="">
-
-        <!-- Deconnexion -->
-        <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
-            Deconnexion
-        </button>
-
-    </nav>
-</div>
-
-
-<!-- --------------------------------------------------------------------------------------------------------- -->
-
-
-<!-- Admin -->
-<div *ngIf="pour === 'admin'">
-    <nav class="navbar navbar-expand-lg">
-
-        <!-- PolyNotFound -->
-        <a class="navbar-brand" routerLink="/admin/userList"> 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>
-
-        <!-- [Recherche] [Mes Playlists] [Historique] -->
-        <div class="collapse navbar-collapse">
-            <ul class="navbar-nav">
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
-                </li>
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/admin/addUser"> Ajouter un utilisateur </a>
-                </li>
-                <li class="nav-item active monLi">
-                    <a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
-                </li>
-            </ul>
-        </div>
-
-        <!-- Slide -->
-        <mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
-
-        <!-- Mon profil -->
-        <img [src]=urlImage
-             onerror="this.onerror=null; this.src='assets/profil.png'"
-             routerLink="/admin/myProfil"
-             alt="">
-
-        <!-- Deconnexion -->
-        <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
-            Deconnexion
-        </button>
-
-    </nav>
-</div>
-
-
-<!-- --------------------------------------------------------------------------------------------------------- -->

src/app/utils/components/nav-bar/nav-bar.component.ts

@@ -1,49 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {ThemeService} from "../../services/theme/theme.service";
-
-
-
-@Component({
-  selector: 'app-nav-bar',
-  templateUrl: './nav-bar.component.html',
-  styleUrls: ['./nav-bar.component.scss']
-})
-export class NavBarComponent implements OnInit
-{
-    @Input() pour = "login";
-    urlImage: string = "" ;
-
-    
-    constructor( public themeService: ThemeService ) { }
-
-
-    ngOnInit(): void
-    {
-        // --- FAUX CODE ---
-        switch (this.pour)
-        {
-            case "user":
-                this.urlImage = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
-                break;
-            case "advertiser":
-                this.urlImage = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
-                break;
-            case "admin":
-                this.urlImage = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg" ;
-                break;
-        }
-    }
-
-
-    onClick(): void
-    {
-        this.themeService.isLightTheme = !this.themeService.isLightTheme;
-    }
-
-
-    onDeconnexion(): void
-    {
-
-    }
-
-}

src/app/utils/interfaces/user.ts

@@ -1,9 +1,18 @@
 export interface User
 {
     _id: string,
-    login: string
+    login: string,
-    hashPass: string
+    hashPass: string,
-    mail: string
+    mail: string,
-    role: any,
+    role: {
-    profilePictureUrl: string
+        name: string,
+        permission: number,
+    },
+    profilePictureUrl: string,
+    dateOfBirth: Date,
+    gender: string,
+    interests: string[],
+    isActive: boolean,
+    createdAt: Date,
+    updatedAt: Date,
 }

src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts

@@ -226,8 +226,17 @@ export class FictitiousDatasService
             login: "Riri",
             hashPass: "agourgroou",
             mail: "riri@gmail.com",
-            role: "user",
+            role: {
-            profilePictureUrl: "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg"
+                name: "user",
+                permission: 0,
+            },
+            profilePictureUrl: "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg",
+            dateOfBirth: new Date(),
+            gender: "man",
+            interests: ["foot", "jeux-vidéo"],
+            isActive: true,
+            createdAt: new Date(),
+            updatedAt: new Date(),
         }
     }
 
@@ -238,8 +247,17 @@ export class FictitiousDatasService
             login: "Fifi",
             hashPass: "agourgroou",
             mail: "fifi@gmail.com",
-            role: "advertiser",
+            role: {
-            profilePictureUrl: "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg"
+                name: "advertiser",
+                permission: 5,
+            },
+            profilePictureUrl: "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg",
+            dateOfBirth: new Date(),
+            gender: "man",
+            interests: ["cuisine", "jeux-vidéo"],
+            isActive: true,
+            createdAt: new Date(),
+            updatedAt: new Date(),
         }
     }
 
@@ -250,8 +268,17 @@ export class FictitiousDatasService
             login: "Loulou",
             hashPass: "agourgroou",
             mail: "loulou@gmail.com",
-            role: "advertiser",
+            role: {
-            profilePictureUrl: "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530"
+                name: "admin",
+                permission: 5,
+            },
+            profilePictureUrl: "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530",
+            dateOfBirth: new Date(),
+            gender: "man",
+            interests: ["musique", "jeux-vidéo"],
+            isActive: true,
+            createdAt: new Date(),
+            updatedAt: new Date(),
         }
     }