realisation de la page register

src/app/app.module.ts

@@ -56,9 +56,11 @@ import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-upda
 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';
+import { InputInterestsProfilComponent } from './user/myProfil/input-interests-profil/input-interests-profil.component';
 import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/page-profil-admin.component';
 import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/popup-update-admin.component';
+import {MatStepperModule} from "@angular/material/stepper";
+import { InputInterestsRegisterComponent } from './beforeConnexion/register/input-interests-register/input-interests-register.component';
 
 
 @NgModule({
@@ -97,9 +99,10 @@ import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/p
         PopupUpdateAdvertiserComponent,
         PopupUpdateUserComponent,
         NavbarBeforeConnexionComponent,
-        InputInterestsComponent,
+        InputInterestsProfilComponent,
         PageProfilAdminComponent,
         PopupUpdateAdminComponent,
+        InputInterestsRegisterComponent,
     ],
     imports: [
         BrowserModule,
@@ -125,7 +128,8 @@ import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/p
         MatAutocompleteModule,
         MatSelectModule,
         IvyCarouselModule,
-        MatRadioModule
+        MatRadioModule,
+        MatStepperModule
     ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
-  height: 75px;
+  height: 50px;
-  font-size: x-large;
+  font-size: large;
   color: white;
 }
 
@@ -18,7 +18,7 @@
   font-family: cursive;
   font-weight: bold;
   //font-style: oblique 90deg;
-  font-size: xxx-large;
+  font-size: xx-large;
   margin-left: 30px;
   color: white;
 }
@@ -35,7 +35,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: x-large;
+  font-size: large;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {

src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.spec.ts

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

src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.ts

@@ -0,0 +1,81 @@
+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-register',
+  templateUrl: './input-interests-register.component.html',
+  styleUrls: ['./input-interests-register.component.scss']
+})
+export class InputInterestsRegisterComponent 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/beforeConnexion/register/page-register/page-register.component.html

@@ -1,71 +1,217 @@
 <div [class]="themeService.getClassTheme()">
     <div class="myContainer">
-        <div class="bg">
 
+        <!-- navbar -->
+        <app-navbar-before-connexion pour="register"></app-navbar-before-connexion>
 
+        <!-- stepper -->
+        <mat-stepper [linear]=true>
 
+            <!-- Choix du role -->
+            <mat-step>
+                <ng-template matStepLabel>Type de compte</ng-template>
+                <form>
+                    <mat-radio-group [(ngModel)]="roleName">
+                        <mat-radio-button value="user">Utilisateur standard</mat-radio-button>&nbsp; &nbsp;
+                        <mat-radio-button value="advertiser">Annonceur</mat-radio-button>
+                    </mat-radio-group>
+                    <div style="text-align: right;">
+                        <button mat-button matStepperNext>Suivant</button>
+                    </div>
+                </form>
+            </mat-step>
 
-            <div class="wrapper">
+            <!-- Infos personelles -->
-                <div id="formContent">
+            <mat-step>
+                <ng-template matStepLabel>Compte & Informations personelles</ng-template>
+                <form>
+                    <ng-template *ngIf="roleName==='user'; then userBlock else advertiserBlock"></ng-template>
+                    <div style="text-align: right;">
+                        <button mat-button matStepperPrevious>Précédent</button>
+                        <button mat-button matStepperNext (click)="checkField()">Suivant</button>
+                    </div>
+                </form>
+            </mat-step>
 
-                    <!-- Icon -->
+            <!-- Derniere étape -->
-                    <div style="margin: 10px 0px 20px 0px">
+            <mat-step>
-                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
+                <!-- label -->
+                <ng-template matStepLabel>
+                    <span (click)="checkField()">Dernière étape</span>
+                </ng-template>
+                <!-- texte affiché -->
+                <ng-template *ngIf="!hasError ; then derniereEtapeCorrecte else derniereEtapeErronee"></ng-template>
+                <!-- boutons -->
+                <div style="text-align: right;">
+                    <button mat-button matStepperPrevious>Précédent</button>
+                    <button *ngIf="hasError" mat-button (click)="onValider()" disabled>Valider</button>
+                    <button *ngIf="!hasError" mat-button (click)="onValider()">Valider</button>
+                </div>
+            </mat-step>
+
+        </mat-stepper>
+    </div>
 </div>
 
-                    <!-- Login Form -->
+
-                    <form>
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Info personnelles user -->
+<ng-template #userBlock>
+    <br>
+    <div class="row">
+
+        <!-- Colonne gauche -->
+        <div class="col-5 leftCol">
+            <h4>Compte</h4>
+
             <!-- Login -->
             <mat-form-field appearance="fill">
                 <mat-label>Login</mat-label>
-                            <input matInput type="text" [(ngModel)]="pseudo">
+                <input matInput type="text" [(ngModel)]="user.login" required>
-                        </mat-form-field>
-                        <br>
-
-                        <!-- Email -->
-                        <mat-form-field appearance="fill">
-                            <mat-label>Email</mat-label>
-                            <input matInput type="email" [(ngModel)]="email">
-                        </mat-form-field>
-                        <br>
-
-                        <!-- Role -->
-                        <mat-form-field appearance="fill">
-                            <mat-label>Type de compte</mat-label>
-                            <mat-select [(ngModel)]="role">
-                                <mat-option value="user"> Utilisateur </mat-option>
-                                <mat-option value="advertiser"> Annonceur </mat-option>
-                            </mat-select>
             </mat-form-field>
             <br>
 
             <!-- Mot de passe -->
             <mat-form-field appearance="fill">
                 <mat-label>Mot de passe</mat-label>
-                            <input matInput type="password" [(ngModel)]="password">
+                <input matInput type="password" [(ngModel)]="password" required>
             </mat-form-field>
             <br>
 
             <!-- Confirmation mot de passe -->
             <mat-form-field appearance="fill">
                 <mat-label>Confirmation mot de passe</mat-label>
-                            <input matInput type="password" [(ngModel)]="confirmPassword">
+                <input matInput type="password" [(ngModel)]="confirmPassword" required>
+            </mat-form-field>
+        </div>
+
+        <!-- Colonne droite -->
+        <div class="col-7">
+            <h4>Informations personelles</h4>
+
+            <!-- Email -->
+            <mat-form-field appearance="fill">
+                <mat-label>Email</mat-label>
+                <input matInput type="email" [(ngModel)]="user.mail" required>
             </mat-form-field>
             <br>
 
-                        <!-- Message d'erreur -->
+            <!-- gender -->
-                        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+            <mat-radio-group [(ngModel)]="user.gender">
-                            <span class="mat-error"> {{errorMessage}} </span>
+                <mat-radio-button value="man"> Homme </mat-radio-button>&nbsp; &nbsp;
+                <mat-radio-button value="woman"> Femme </mat-radio-button>
+            </mat-radio-group>
+            <br><br>
+
+            <!-- dateOfBirth -->
+            <mat-form-field appearance="fill">
+                <mat-label>Date de naissance</mat-label>
+                <input matInput type="date"
+                       [ngModel] ="user.dateOfBirth | date:'yyyy-MM-dd'"
+                       (ngModelChange)="user.dateOfBirth = $event">
+            </mat-form-field>
+
+            <!-- interests -->
+            <app-input-interests-profil
+                    [myInterests]="user.interests"
+                    (eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
         </div>
 
-                        <!-- Valider -->
+    </div>
-                        <input type="submit" class="fadeIn fourth" value="S'inscrire" (click)="onRegister()">
+</ng-template>
-                    </form>
 
+
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Info personnelles advertiser -->
+<ng-template #advertiserBlock>
+
+    <!-- Login -->
+    <mat-form-field appearance="fill">
+        <mat-label>Login</mat-label>
+        <input matInput type="text" [(ngModel)]="user.login" required>
+    </mat-form-field>
+    <br>
+
+    <!-- Email -->
+    <mat-form-field appearance="fill">
+        <mat-label>Email</mat-label>
+        <input matInput type="email" [(ngModel)]="user.mail" required>
+    </mat-form-field>
+    <br>
+
+    <!-- Mot de passe -->
+    <mat-form-field appearance="fill">
+        <mat-label>Mot de passe</mat-label>
+        <input matInput type="password" [(ngModel)]="password" required>
+    </mat-form-field>
+    <br>
+
+    <!-- Confirmation mot de passe -->
+    <mat-form-field appearance="fill">
+        <mat-label>Confirmation mot de passe</mat-label>
+        <input matInput type="password" [(ngModel)]="confirmPassword" required>
+    </mat-form-field>
+
+</ng-template>
+
+
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Dernière étape correcte -->
+<ng-template #derniereEtapeCorrecte>
+
+    <!-- pour advertiser -->
+    <div *ngIf="roleName === 'advertiser'">
+        Cliquer sur valider pour soumettre l'inscription.
+    </div>
+
+    <!-- pour user -->
+    <div *ngIf="roleName === 'user'">
+        <br>
+        <!-- login -->
+        <div class="row myRow">
+            <div class="col-2 myLabel">Login:</div>
+            <div class="col-10 myValue"> {{user.login}} </div>
+        </div>
+        <!-- mail -->
+        <div class="row myRow">
+            <div class="col-2 myLabel">Mail:</div>
+            <div class="col-10 myValue"> {{user.mail}} </div>
+        </div>
+        <!-- dateOfBirth -->
+        <div class="row myRow">
+            <div class="col-2 myLabel">Date de naissance:</div>
+            <div class="col-10 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
+        </div>
+        <!-- gender -->
+        <div class="row myRow">
+            <div class="col-2 myLabel">Sexe:</div>
+            <div class="col-10 myValue">
+                <span *ngIf="user.gender==='man'"> Homme </span>
+                <span *ngIf="user.gender==='woman'"> Femme </span>
+            </div>
+        </div>
+        <!-- interets -->
+        <div class="row myRow">
+            <div class="col-2 myLabel">Centres d'intérêt:</div>
+            <div class="col-10 myValue" style="border-left: solid 1px #e6e6e6">
+                <div *ngFor="let interest of user.interests">• {{interest}}</div>
+            </div>
         </div>
     </div>
 
+</ng-template>
 
-        </div>
+
-    </div>
+<!-- -------------------------------------------------------------------------------------------------------- -->
-</div>
+
+
+<!-- Dernière étape érronée -->
+<ng-template #derniereEtapeErronee>
+    <mat-error>{{errorMessage}}</mat-error>
+</ng-template>

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

@@ -1,75 +1,33 @@
-body {
-  font-family: "Poppins", sans-serif;
-  height: 100vh;
-}
-
-
 .myContainer {
+  width: 100vw;
   height: 100vh;
-  width: 100vw;
-  overflow-y: hidden;
-  overflow-x: hidden;
 }
 
 
-.bg{
+mat-stepper {
-  height: 80vh;
+  width: 60%;
-  width: 100vw;
+  margin: 10vh auto;
+  border: solid 1px black;
+  border-radius: 20px;
 }
 
 
-.wrapper {
+.leftCol {
-  display: flex;
+  border-right: solid 1px #dcdcdc;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  min-height: 100%;
-  padding: 20px;
 }
 
 
-#formContent {
+.myRow {
-  -webkit-border-radius: 10px 10px 10px 10px;
+  margin: 15px 0px 15px 0px;
-  border-radius: 10px 10px 10px 10px;
-  background: #fff;
-  padding: 30px;
-  width: 90%;
-  max-width: 450px;
-  position: relative;
-  padding: 0px;
-  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
-  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
-  text-align: center;
 }
-
+.myLabel {
-
+  text-align: right;
-#icon {
+  padding: 0px 5px 0px 0px;
-  width:30%;
+  margin: 0px;
+  font-weight: bold;
 }
-
+.myValue {
-
+  text-align: left;
-mat-form-field {
+  padding: 0px 0px 0px 5px;
-  width: 80%;
+  margin: 0px;
-}
-
-
-input[type=button], input[type=submit], input[type=reset]  {
-  background-color: #5E89FF;
-  border: none;
-  color: white;
-  padding: 15px 80px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  text-transform: uppercase;
-  font-size: 13px;
-  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-  border-radius: 5px 5px 5px 5px;
-  margin: 5px 20px 40px 20px;
-}
-
-
-input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
-  background-color: #39ace7;
 }

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

@@ -4,21 +4,39 @@ import {Router} from "@angular/router";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupConfirmationComponent} from "../popup-confirmation/popup-confirmation.component";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {User} from "../../../utils/interfaces/user";
+
+
 
 @Component({
   selector: 'app-page-register',
   templateUrl: './page-register.component.html',
   styleUrls: ['./page-register.component.scss']
 })
-export class PageRegisterComponent implements OnInit
+export class PageRegisterComponent
 {
-    pseudo: string = "";
+    roleName: string = "user";
-    email: string = "" ;
     password: string = "";
-    role: string = "";
     confirmPassword: string = "";
     hasError: boolean = false;
     errorMessage: string = "";
+    user: User = {
+        _id: "",
+        login: "",
+        hashPass: "",
+        mail: "",
+        role: {
+            name: "user",
+            permission: 0,
+        },
+        profilePictureUrl: "",
+        dateOfBirth: new Date(),
+        gender: "man",
+        interests: [],
+        isActive: false,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+    };
 
 
     constructor( private messageService: MessageService,
@@ -27,85 +45,103 @@ export class PageRegisterComponent implements OnInit
                  public themeService: ThemeService ) { }
 
 
-    ngOnInit(): void {}
+    // Envoie de l'utilisateur au backend
+    onValider(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            if(this.roleName === "advertiser") this.user.role = { name: "advertiser", permission: 5 };
+            else this.user.role = { name: "user", permission: 0 };
+            this.user.hashPass = this.hashage(this.password);
+
+            // FAUX CODE
+            const retour = { status: "succes" };
+            this.myCallback(retour);
+
+            // VRAI CODE
+            /*
+            this.messageService
+                .sendMessage('register', this.user)
+                .subscribe(retour => this.myCallback(retour));
+            */
+        }
+    }
 
 
-    isValidEmail(email)
+    // Gestion de la réponde du backend
+    myCallback(retour): void
+    {
+        if(retour.status === "error")
+        {
+            console.log(retour);
+        }
+        else
+        {
+            const config = { width: '25%', data: { roleName: this.roleName} };
+            this.dialog
+                .open(PopupConfirmationComponent, config)
+                .afterClosed()
+                .subscribe(result => this.router.navigateByUrl( '/login' ));
+        }
+    }
+
+
+    // Indique si email a bien le format d'un email
+    isValidEmail(email): boolean
     {
         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);
     }
 
 
+    // Check les champs saisies par l'utilisateur
     checkField(): void
     {
-        if(this.pseudo.length === 0) {
+        if(this.user.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'pseudo'";
+            this.errorMessage = "Veuillez remplir le champ 'login'.";
             this.hasError = true;
         }
-        else if(this.email.length === 0)
+        else if(this.user.mail.length === 0) {
-        {
+            this.errorMessage = "Veuillez remplir le champ 'email'.";
-            this.errorMessage = "Veuillez remplir le champ 'email'";
             this.hasError = true;
         }
-        else if(!this.isValidEmail(this.email))
+        else if(!this.isValidEmail(this.user.mail)) {
-        {
             this.errorMessage = "Email invalide";
             this.hasError = true;
         }
-        else if(this.role === "")
+        else if(this.password.length === 0) {
-        {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
-            this.errorMessage = "Veuillez selectionner un type de compte";
             this.hasError = true;
         }
-        else if(this.password.length === 0)
+        else if(this.password !== this.confirmPassword) {
-        {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation.";
-            this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
-            this.hasError = true;
-        }
-        else if(this.password !== this.confirmPassword)
-        {
-            this.errorMessage = "Le mot de passe est différent de sa confirmation";
             this.hasError = true;
         }
         else {
             this.errorMessage = "" ;
             this.hasError = false;
         }
-        console.log(this.errorMessage);
     }
 
 
-    onRegister(): void
+    // Récupère la liste des centres d'intérets (car celle-ci est remplie à l'aide d'un component intermédiaire)
+    onEventInputInterests(myInterets: string[]): void
     {
-        console.log(this.role);
+        this.user.interests = myInterets;
-        this.checkField();
-        if(!this.hasError)
-        {
-            let data = {
-                "pseudo": this.pseudo,
-                "email": this.email,
-                "role": this.role,
-                "password": this.password
-            };
-            this.messageService
-                .sendMessage('register', data)
-                .subscribe(retour => this.maCallback(retour))
-        }
     }
 
 
-    maCallback(retour): void
+    // Fonction de hashage (faible)
+    hashage(input: string): string
     {
-        if(retour.status === "error") console.log(retour.data)
+        let hash = 0;
-        else
+        for (let i = 0; i < input.length; i++) {
-        {
+            let ch = input.charCodeAt(i);
-            const config = { width: '25%', data: {} }
+            hash = ((hash << 5) - hash) + ch;
-            this.dialog
+            hash = hash & hash;
-                .open(PopupConfirmationComponent, config )
-                .afterClosed()
-                .subscribe(result => this.router.navigateByUrl( '/connexion' ));
         }
+        return hash.toString();
     }
 
 }

src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.html

@@ -1,4 +1,11 @@
-<p> Votre inscription a bien été effectué. </p>
+<p *ngIf="data.roleName === 'user'">
+    Votre inscription a bien été effectuée.
+</p>
+
+<p *ngIf="data.roleName === 'advertiser'">
+    Votre inscription est en cours de validation.
+</p>
+
 <div style="text-align: right">
     <button mat-button mat-dialog-close> Continuer </button>
 </div>

src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts

@@ -11,8 +11,4 @@ export class PopupConfirmationComponent
     constructor( public dialogRef: MatDialogRef<PopupConfirmationComponent>,
                  @Inject(MAT_DIALOG_DATA) public data) {}
 
-    onClick(): void
-    {
-        this.dialogRef.close();
-    }
 }

src/app/user/myProfil/input-interests-profil/input-interests-profil.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-profil/input-interests-profil.component.scss

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

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

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

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

@@ -10,11 +10,11 @@ import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
 
 
 @Component({
-  selector: 'app-input-interests',
+  selector: 'app-input-interests-profil',
-  templateUrl: './input-interests.component.html',
+  templateUrl: './input-interests-profil.component.html',
-  styleUrls: ['./input-interests.component.scss']
+  styleUrls: ['./input-interests-profil.component.scss']
 })
-export class InputInterestsComponent implements OnInit
+export class InputInterestsProfilComponent implements OnInit
 {
     selectable = true;
     removable = true;

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

@@ -41,7 +41,9 @@
         <br><br>
 
         <!-- interets -->
-        <app-input-interests [myInterests]="userCopy.interests" (eventEmitter)="onEventInputInterests($event)"></app-input-interests>
+        <app-input-interests-profil
+                [myInterests]="userCopy.interests"
+                (eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
 
         <!-- divider -->
         <br><mat-divider></mat-divider><br>

src/styles.scss

@@ -4,13 +4,14 @@
   --dark-color: #f0f0f0;
 }
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; }
 
 
 .lightTheme {
   background: url("assets/lightBackground.jpg") no-repeat center center fixed;
   font-color: black;
   border-color: black;
+  font-size: small;
 }
 
 
@@ -18,6 +19,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   background: url("assets/darkBackground.webp") no-repeat center center fixed;
   font-color: white;
   border-color: white;
+  font-size: small;
 }