realistion de la page Mon Profil

angular.json

@@ -32,7 +32,10 @@
               "src/styles.scss",
               "node_modules/bootstrap/scss/bootstrap.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/bootstrap/dist/js/bootstrap.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^12.2.11",
         "@angular/platform-browser-dynamic": "^12.2.11",
         "@angular/router": "^12.2.11",
+        "@ng-bootstrap/ng-bootstrap": "^10.0.0",
         "bootstrap": "^5.1.3",
         "jquery": "^3.6.0",
         "popper": "^1.0.1",
@@ -2401,6 +2402,21 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "node_modules/@ng-bootstrap/ng-bootstrap": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-10.0.0.tgz",
+      "integrity": "sha512-Sz+QaxjuyJYJ+zyUbf0TevgcgVesCPQiiFiggEzxKjzY5R+Hvq3YgryLdXf2r/ryePL+C3FXCcmmKpTM5bfczQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^12.0.0",
+        "@angular/core": "^12.0.0",
+        "@angular/forms": "^12.0.0",
+        "@angular/localize": "^12.0.0",
+        "rxjs": "^6.5.5"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "12.2.11",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.2.11.tgz",
@@ -2554,16 +2570,6 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@schematics/angular": {
       "version": "12.2.11",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.11.tgz",
@@ -22395,12 +22401,19 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-10.0.0.tgz",
+      "integrity": "sha512-Sz+QaxjuyJYJ+zyUbf0TevgcgVesCPQiiFiggEzxKjzY5R+Hvq3YgryLdXf2r/ryePL+C3FXCcmmKpTM5bfczQ==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "12.2.11",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.2.11.tgz",
       "integrity": "sha512-OgNClb9EhYR9lhVRR1RnWT1Xh75aI70IB4eQaDSiVOkBc6aymLzeskZ2WmkZWsDGlJBLOamnoB0XUPuU1GpmrQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -22511,12 +22524,6 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
-    "@popperjs/core": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
-      "peer": true
-    },
     "@schematics/angular": {
       "version": "12.2.11",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.11.tgz",
@@ -22912,8 +22919,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "acorn-jsx": {
       "version": "3.0.1",
@@ -23043,8 +23049,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "ajv-formats": {
       "version": "2.1.0",
@@ -23079,8 +23084,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -23755,8 +23759,7 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
-      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -24544,8 +24547,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
       "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "class-utils": {
       "version": "0.3.6",
@@ -24663,15 +24665,13 @@
           "version": "9.0.0",
           "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz",
           "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==",
-          "dev": true,
+          "dev": true
-          "requires": {}
         },
         "@angular/core": {
           "version": "9.0.0",
           "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
           "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==",
-          "dev": true,
+          "dev": true
-          "requires": {}
         },
         "source-map": {
           "version": "0.5.7",
@@ -25630,8 +25630,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
       "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -27914,8 +27913,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -28932,8 +28930,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -31334,29 +31331,25 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
       "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
       "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
       "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
       "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "1.0.0",
@@ -31830,8 +31823,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -31899,8 +31891,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
       "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.0.1",
@@ -35017,8 +35008,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
       "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "stylehacks": {
       "version": "5.0.1",
@@ -36700,8 +36690,7 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "xml2js": {
       "version": "0.4.23",

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^12.2.11",
     "@angular/platform-browser-dynamic": "^12.2.11",
     "@angular/router": "^12.2.11",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^5.1.3",
     "jquery": "^3.6.0",
     "popper": "^1.0.1",
@@ -47,4 +48,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"
   }
-}
+}

src/app/app-routing.module.ts

@@ -5,15 +5,28 @@ import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page
 import {PageSearchComponent} from "./user/search/page-search/page-search.component";
 import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
 import {PageHistoriqueComponent} from "./user/historique/page-historique/page-historique.component";
+import {PageMyProfilComponent} from "./user/myProfil/page-my-profil/page-my-profil.component";
 
 
 const routes: Routes = [
     { path: '', component: PageConnexionComponent },
     { path: 'connexion', component: PageConnexionComponent },
     { path: 'register', component: PageRegisterComponent },
-    { path: 'search', component: PageSearchComponent },
+
-    { path: 'myPlaylists', component: PageMyPlaylistsComponent },
+    { path: 'user/search', component: PageSearchComponent },
-    { path: 'historique', component: PageHistoriqueComponent }
+    { path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
+    { path: 'user/history', component: PageHistoriqueComponent },
+    { path: 'user/myProfil', component: PageMyProfilComponent },
+
+    { path: 'advertiser/addAd', component: PageConnexionComponent },
+    { path: 'advertiser/adList', component: PageConnexionComponent },
+    { path: 'advertiser/history', component: PageConnexionComponent },
+    { path: 'advertiser/myProfil', component: PageConnexionComponent },
+
+    { path: 'admin/userList', component: PageConnexionComponent },
+    { path: 'admin/addUser', component: PageConnexionComponent },
+    { path: 'admin/adList', component: PageConnexionComponent },
+    { path: 'admin/myProfil', component: PageConnexionComponent }
 ];
 
 

src/app/app.module.ts

@@ -32,6 +32,9 @@ import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.compo
 import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
 import { PageHistoriqueComponent } from './user/historique/page-historique/page-historique.component';
 import {MatTableModule} from '@angular/material/table';
+import { PageMyProfilComponent } from './user/myProfil/page-my-profil/page-my-profil.component';
+import { PopupPictureProfilUrlComponent } from './user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 
 @NgModule({
@@ -53,6 +56,8 @@ import {MatTableModule} from '@angular/material/table';
         VideoListComponent,
         PopupCreatePlaylistComponent,
         PageHistoriqueComponent,
+        PageMyProfilComponent,
+        PopupPictureProfilUrlComponent,
     ],
     imports: [
         BrowserModule,
@@ -70,7 +75,8 @@ import {MatTableModule} from '@angular/material/table';
         MatFormFieldModule,
         MatSnackBarModule,
         MatGridListModule,
-        MatTableModule
+        MatTableModule,
+        NgbModule
     ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,65 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <app-nav-bar pour="user"></app-nav-bar><br><br>
+
+        <div class="boite">
+
+            <h1> Mon profil </h1>
+
+            <!-- Photo de profil -->
+            <div style="text-align: center">
+                <img [src]="model.profilePictureUrl"
+                     onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
+                     routerLink="/advertiser/myProfil"
+                     alt="???">
+                <br>
+                <button (click)="onChangePP()"> Changer photo de profil</button>
+            </div>
+            <br>
+
+            <!-- Pseudo | Email | Role | Modifier mot de passe -->
+            <form>
+                <p>
+                    <label for="pseudo"> Pseudo: </label>
+                    <input id="pseudo" name="pseudo" type="text" [(ngModel)]="model.login">
+                </p>
+                <p>
+                    <label for="email"> Email: </label>
+                    <input id="email" name="email" type="email" [(ngModel)]="model.mail">
+                </p>
+                <p>
+                    <label for="role">Role: </label>
+                    <select id="role" name="role" [(ngModel)]="model.role">
+                        <option value="user"> Utilisateur </option>
+                        <option value="advertiser"> Annonceur </option>
+                    </select>
+                </p>
+                <p>
+                    <label for="demande"> Modifier mot de passe: </label>
+                    <input type="checkbox" id="demande" name="demande" [(ngModel)]="changePassword">
+                </p>
+                <p *ngIf="changePassword">
+                    <label for="newPassword"> Nouveau mot de passe: </label>
+                    <input type="password" id="newPassword" name="newPassword" [(ngModel)]="model.newPassword">
+                </p>
+                <p *ngIf="changePassword">
+                    <label for="confirmNewPassword"> Confirmation nouveau mot de passe: </label>
+                    <input type="password" id="confirmNewPassword" name="confirmNewPassword" [(ngModel)]="confirmNewPassword">
+                </p>
+            </form>
+            <br>
+
+            <!-- Bouton valider -->
+            <div style="width: 100%; text-align: center">
+                <button (click)="onEnregistrer()"> 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>
+</div>

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

@@ -0,0 +1,64 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+
+h1 {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.boite {
+  margin-left: auto;
+  margin-right: auto;
+  width: 40%;
+  margin-top: 50vh;
+  transform: translateY(-100%);
+  border: solid 3px;
+  border-radius: 10px;
+  padding: 20px 40px 20px 40px;
+  background-color: #dcdcdc;
+}
+.lightTheme .boite {
+  border-color: black;
+}
+.darkTheme .boite {
+  border-color: white;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px white;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+form {
+  display: table;
+  width: 100%;
+  margin: 0 auto;
+}
+
+p {
+  display: table-row;
+  margin: 0px;
+  padding: 0px;
+}
+
+label {
+  display: table-cell;
+  text-align: right;
+  margin: 0px;
+  padding: 10px 5px 10px 0px;
+}
+
+input {
+  display: table-cell;
+  text-align: left;
+  margin: 0px;
+  padding: 0px;
+}

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

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

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

@@ -0,0 +1,149 @@
+import { Component, OnInit } from '@angular/core';
+import {MessageService} from "../../../utils/services/message/message.service";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
+import {PopupPictureProfilUrlComponent} from "../popup-picture-profil-url/popup-picture-profil-url.component";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+
+
+@Component({
+  selector: 'app-page-my-profil',
+  templateUrl: './page-my-profil.component.html',
+  styleUrls: ['./page-my-profil.component.scss']
+})
+export class PageMyProfilComponent implements OnInit
+{
+    model = {
+        _id: "",
+        profilePictureUrl: "",
+        login: "",
+        mail: "",
+        role: "",
+        newPassword: ""
+    };
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = ""
+
+
+    constructor( private messageService: MessageService,
+                 public themeService: ThemeService,
+                 private fictitiousDatasService: FictitiousDatasService,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar ) { }
+
+
+    ngOnInit(): void
+    {
+        // --- FAUX CODE ---
+        const profil = this.fictitiousDatasService.getUser();
+        this.model._id = profil._id;
+        this.model.profilePictureUrl = profil.profilePictureUrl;
+        this.model.login = profil.login;
+        this.model.mail = profil.mail;
+        this.model.role = profil.role;
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage("user/get/profil", null)
+            .subscribe( retour => {
+
+                if(retour.status === "error") console.log(retour);
+                else {
+                    const profil = retour.data.profil;
+                    this.model._id = profil._id;
+                    this.model.profilePictureUrl = profil.profilePictureUrl;
+                    this.model.pseudo = profil.pseudo;
+                    this.model.email = profil.email;
+                    this.model.role = profil.role;
+                    this.model.newPassword = profil.newPassword;
+                }
+            });
+        */
+    }
+
+
+    onEnregistrer()
+    {
+        console.log(this.model);
+        this.checkField();
+
+        // --- VRAI CODE ---
+        /*
+        if(!this.hasError)
+        {
+            this.messageService
+                .sendMessage("user/set/profil", this.model)
+                .subscribe( retour => {} );
+        }
+        */
+    }
+
+
+    checkField()
+    {
+        if(this.model.login.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'"
+            this.hasError = true;
+        }
+        else if(this.model.mail.length === 0)
+        {
+            this.errorMessage = "Veuillez remplir le champ 'email'"
+            this.hasError = true;
+        }
+        else if(!this.isValidEmail(this.model.mail))
+        {
+            this.errorMessage = "Email invalide"
+            this.hasError = true;
+        }
+        else if(this.changePassword)
+        {
+            if (this.model.newPassword.length === 0) {
+                this.errorMessage = "Veuillez remplir le champ 'mot de passe'"
+                this.hasError = true;
+            } else if (this.model.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);
+    }
+
+
+    onChangePP()
+    {
+        const config = {
+            width: '25%',
+            data: { profilePictureUrl: this.model.profilePictureUrl }
+        };
+        this.dialog
+            .open(PopupPictureProfilUrlComponent, 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.model.profilePictureUrl = retour;
+                }
+            });
+    }
+
+}

src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html

@@ -0,0 +1,9 @@
+<div class="myContainer">
+    <img [src]="profilePictureUrl"
+         onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
+         routerLink="/advertiser/myProfil"
+         alt="???">
+    <br>
+    <input [(ngModel)]="profilePictureUrl" placeholder="url de l'image"><br>
+    <button mat-button (click)="onValider()"> Valider </button>
+</div>

src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss

@@ -0,0 +1,20 @@
+.myContainer {
+  margin: 0px;
+  padding: 0px;
+  text-align: center;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 10vw;
+  height: 10vw;
+  border: solid 2px white;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+input {
+  margin: 0px;
+  margin: 0px 0px 10px 0px;
+  width: 100%;
+}

src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts

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

src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+
+
+@Component({
+  selector: 'app-popup-picture-profil-url',
+  templateUrl: './popup-picture-profil-url.component.html',
+  styleUrls: ['./popup-picture-profil-url.component.scss']
+})
+export class PopupPictureProfilUrlComponent implements OnInit
+{
+    profilePictureUrl: string = "" ;
+
+    constructor( public dialogRef: MatDialogRef<PopupPictureProfilUrlComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data ) { }
+
+    ngOnInit(): void
+    {
+        this.profilePictureUrl = this.data.profilePictureUrl;
+    }
+
+    onValider()
+    {
+        this.dialogRef.close(this.profilePictureUrl);
+    }
+
+}

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

@@ -1,41 +1,162 @@
-<div [class]="themeService.getClassTheme()">
+<!-- --------------------------------------------------------------------------------------------------------- -->
 
-    <!-- pour les 3 roles -->
-    <div *ngIf="pour === '3roles'">
-        <ul>
-            <li>
-                <a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
-            </li>
-            <li style="float:right; margin-right: 20px;">
-                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
-            </li>
-        </ul>
-    </div>
 
-    <!-- pour User -->
+<!-- 3 Roles -->
-    <div *ngIf="pour === 'user'">
+<div *ngIf="pour === '3roles'">
-        <ul>
+    <nav class="navbar navbar-expand-lg">
-            <li>
-                <a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
-            </li>
-            <li class="cliquable">
-                <a routerLink="/search"> Rechercher </a>
-            </li>
-            <li class="cliquable">
-                <a routerLink="/myPlaylists"> Mes playlists </a>
-            </li>
-            <li class="cliquable">
-                <a routerLink="/historique"> Historique </a>
-            </li>
-            <li style="float:right; margin-right: 20px;">
-                <a routerLink="/search">
-                    <mat-icon>settings</mat-icon>
-                </a>
-            </li>
-            <li style="float:right; margin-right: 20px;">
-                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
-            </li>
-        </ul>
-    </div>
 
+        <!-- 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="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
+             onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.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/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="/advertiser/addAd"> Ajouter une pub </a>
+                </li>
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/advertiser/adList"> Liste des pubs </a>
+                </li>
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/advertiser/history"> Historique 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="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
+             onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.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="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
+             onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.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.scss

@@ -1,55 +1,66 @@
-.StreamNotFound {
+.navbar {
-  font-style: oblique;
-  font-family: cursive;
-  font-size: xx-large;
-}
-
-
-mat-icon {
-  margin-top: 2px;
-  font-size: xx-large;
-}
-
-
-mat-slide-toggle {
-  margin-top: 20px;
-}
-
-
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
   background-color: black;
-  height: 70px;
+  height: 75px;
-  color: white;
-  border-bottom: solid 2px white;
-}
-
-
-li {
-  float: left;
   font-size: x-large;
-  background-color: black;
-}
-
-
-li a {
-  display: block;
   color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-  background-color: black;
 }
 
 
-.cliquable a:hover:not(.active)  {
+.navbar-expand-lg {
-  background-color: #c8c8c8;
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
 }
 
 
+// PolyNotFound
+.navbar-brand {
+  font-family: "Lucida Console";
+  font-weight: bold;
+  font-style: oblique 90deg;
+  font-size: xx-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 {

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

@@ -8,12 +8,16 @@ import {ThemeService} from "../../services/theme/theme.service";
 })
 export class NavBarComponent
 {
-  @Input() pour = "3roles";
+    @Input() pour = "3roles";
 
-  constructor(public themeService: ThemeService) { }
+    constructor(public themeService: ThemeService) { }
 
-  onClick(): void {
+    onClick(): void {
-      this.themeService.isLightTheme = !this.themeService.isLightTheme
+      this.themeService.isLightTheme = !this.themeService.isLightTheme;
-  }
+    }
+
+    onDeconnexion(): void {
+
+    }
 
 }

src/app/utils/interfaces/user.ts

@@ -0,0 +1,9 @@
+export interface User
+{
+    _id: string,
+    login: string
+    hashPass: string
+    mail: string
+    role: any,
+    profilePictureUrl: string
+}

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

@@ -3,6 +3,7 @@ import {Video} from "../../interfaces/video";
 import {Playlist} from "../../interfaces/playlist";
 import {Advert} from "../../interfaces/advert";
 import {WatchedVideo} from "../../interfaces/watchedVideo";
+import {User} from "../../interfaces/user";
 
 
 
@@ -167,4 +168,18 @@ export class FictitiousDatasService
 
         return tabWatchedVideo;
     }
+
+
+    getUser(): User
+    {
+        return {
+            _id: "blablablaId",
+            login: "yoyo",
+            hashPass: "agourgroou",
+            mail: "yoyo@gmail.com",
+            role: "user",
+            profilePictureUrl: "https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
+        }
+    }
+
 }