up

angular-client/src/app/components/admin/assistance/assistance-list/assistance-list.component.html

@@ -0,0 +1,23 @@
+<div *ngFor="let item of listOpenMessage">
+  <mat-accordion class="">
+    <mat-expansion-panel class="mb-3" (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{ item.email}}
+        </mat-panel-title>
+        <mat-panel-description>
+          {{item.created_date  | date: 'short'}}
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+
+
+      <p class="text-center font-weight-bold">{{item.message}}</p>
+
+      <div *ngIf="item.is_closed === false" class="row justify-content-center mt-2">
+        <button mat-raised-button class="btn mr-2" color="primary" (click)="responseMessage(item)">Répondre</button>
+        <button mat-raised-button class="btn ml-2" color="primary" (click)="closeMessage(item)">Supprimer</button>
+      </div>
+
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

angular-client/src/app/components/admin/assistance/assistance-list/assistance-list.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field + .mat-form-field {
+    margin-left: 8px;
+  }

angular-client/src/app/components/admin/assistance/assistance-list/assistance-list.component.spec.ts

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

angular-client/src/app/components/admin/assistance/assistance-list/assistance-list.component.ts

@@ -0,0 +1,33 @@
+import { Contact } from './../../../../models/contact';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-assistance-list',
+  templateUrl: './assistance-list.component.html',
+  styleUrls: ['./assistance-list.component.scss']
+})
+export class AssistanceListComponent implements OnInit {
+
+  @Input() listOpenMessage : Contact[]
+  @Output() response = new EventEmitter<Contact>();
+  @Output() close = new EventEmitter<Contact>();
+  
+  constructor() { }
+
+  panelOpenState = false;
+
+
+  responseMessage(event){
+    this.response.emit(event);
+  }
+
+
+  closeMessage(event){
+    this.close.emit(event);
+  }
+
+
+  ngOnInit(): void {
+  }
+
+}

angular-client/src/app/components/admin/assistance/assistance.component.html

@@ -0,0 +1,17 @@
+<div class="container navtop">
+
+    <div mat-dialog-actions class="row justify-content-center my-2">
+       
+        <button mat-raised-button class="btn mr-2" color="primary" (click)="subscribeToGetOpenMessage()" >Nouveaux Messages</button>
+        <button mat-raised-button class="btn ml-2" color="primary" (click)="subscribeToGetCloseMessage()" >Messages fermés</button>
+       
+      </div>
+
+
+    <app-assistance-list 
+    [listOpenMessage]="listOpenMessage"
+    (response)="responseMessage($event)"
+    (close)="closeMessage($event)">
+    </app-assistance-list>
+
+</div>

angular-client/src/app/components/admin/assistance/assistance.component.scss

@@ -0,0 +1,4 @@
+.navtop{
+    margin-top: 7em;
+    margin-bottom: 4em;
+  }

angular-client/src/app/components/admin/assistance/assistance.component.spec.ts

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

angular-client/src/app/components/admin/assistance/assistance.component.ts

@@ -0,0 +1,78 @@
+import { ResponseContactComponent } from './response-contact/response-contact.component';
+import { ConfirmMessageComponent } from './../../shared/confirm-message/confirm-message.component';
+import { MatDialog } from '@angular/material/dialog';
+import { Contact } from './../../../models/contact';
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from 'src/app/services/contact.service';
+
+@Component({
+  selector: 'app-assistance',
+  templateUrl: './assistance.component.html',
+  styleUrls: ['./assistance.component.scss']
+})
+export class AssistanceComponent implements OnInit {
+
+  constructor(private contactService: ContactService, public dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.subscribeToGetOpenMessage()
+  }
+
+  listOpenMessage : Contact[];
+
+  //sbscribe statistic
+  subscribeToGetOpenMessage() {
+    this.contactService.getOpenMessage().subscribe((res) => {
+       this.listOpenMessage = res
+    })
+  }
+
+  subscribeToGetCloseMessage() {
+    this.contactService.getColseMessage().subscribe((res) => {
+       this.listOpenMessage = res
+    })
+  }
+
+
+  responseMessage($event){
+     console.log($event)
+     this.openResponseContact($event)
+  }
+
+  closeMessage($event){
+     console.log('qsdqsd',$event)
+    this.openDialog($event)
+  }
+
+
+  openResponseContact(event) {
+    const dialogRef =
+     this.dialog.open(ResponseContactComponent, {
+      width: '48%',
+      data: event
+      });
+
+    dialogRef.afterClosed().subscribe(() => {
+      // this.contactService.closeContact()
+    });
+  }
+
+
+
+
+
+
+  openDialog(event) {
+    const dialogRef =
+     this.dialog.open(ConfirmMessageComponent, {
+      width: '38%',
+      data: {
+        response: event
+      }});
+
+    dialogRef.afterClosed().subscribe(() => {
+      // this.contactService.closeContact()
+    });
+  }
+
+}

angular-client/src/app/components/admin/assistance/response-contact/response-contact.component.html

@@ -0,0 +1,27 @@
+<h3 mat-dialog-title class="text-center ">  <span class="">Répondre à </span> <span class="font-weight-bold">{{element.email}}</span> </h3>
+
+<form [formGroup]="formGroup" >
+<div mat-dialog-content class="">
+   
+    <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Message :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+            <textarea  rows="7" matInput formControlName="text"></textarea>
+            <mat-error *ngIf="!formGroup.controls['text'].valid || formGroup.controls['text'].touched">
+                {{ getErrorMessage() }}
+              </mat-error>
+        </mat-form-field>
+        
+    </div>
+
+</div>
+
+
+<div mat-dialog-actions class="row justify-content-center mt-2">
+       
+    <button mat-raised-button class="btn mr-2" color="primary" (click)="sendResponse()" >Modifier</button>
+    <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Annuler</button>
+   
+  </div>
+
+</form>

angular-client/src/app/components/admin/assistance/response-contact/response-contact.component.spec.ts

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

angular-client/src/app/components/admin/assistance/response-contact/response-contact.component.ts

@@ -0,0 +1,81 @@
+import { Router } from '@angular/router';
+import { Contact } from './../../../../models/contact';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, Inject, OnInit } from '@angular/core';
+import { ContactService } from 'src/app/services/contact.service';
+
+@Component({
+  selector: 'app-response-contact',
+  templateUrl: './response-contact.component.html',
+  styleUrls: ['./response-contact.component.scss']
+})
+export class ResponseContactComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public element: Contact,  public dialogRef: MatDialogRef<ResponseContactComponent>,
+    private formBuilder: FormBuilder, private contactService: ContactService, public router : Router)
+   {}
+   formGroup: FormGroup;
+   submitted = false;
+
+
+   ngOnInit(): void {
+
+    this.createForm(); 
+  }
+
+
+
+  createForm() {
+   
+    this.formGroup = this.formBuilder.group({
+      text: [null, Validators.required],
+    });
+  }
+
+
+
+ sendResponse(){
+
+  this.submitted = true;
+  if (this.formGroup.invalid) {
+    return;
+  }
+
+  console.log(this.formGroup.value)
+  this.contactService.responseContact(this.element._id, this.formGroup.value).subscribe(
+    data => {
+        // this.router.navigate([this.returnUrl]);
+        console.log(data)
+        this.router.navigate(['/assistance']);
+        // this.loading = false;
+        // this.router.navigate(['auth']);
+    },
+    err => {
+        // this.loading = false;
+        // console.log(err.error.message)
+        // this.authService.openSnackBar(err.error.message)
+    });
+}
+
+
+
+
+getErrorMessage() {
+  return this.formGroup.get('text').hasError('required') ? 'Message requis' : '';
+}
+
+
+
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+}

angular-client/src/app/components/admin/emailing/email-form/email-form.component.html

@@ -0,0 +1,84 @@
+<mat-card class="">
+  <mat-card-content>
+
+    <!-- <mat-progress-bar class="row " *ngIf="loading" mode="indeterminate"></mat-progress-bar> -->
+    <h1 class="row justify-content-center mb-4"><b>Emailing</b></h1>
+
+
+    <div class="row justify-content-center mb-3">
+      <mat-radio-group aria-label="Select an option" (change)="selectValue($event)">
+        <mat-radio-button *ngFor="let option of userOptions" [checked]="option.checked" value="{{option.value}}">
+          {{option.label}}
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+
+    <div class="row mb-4" *ngIf="selectedRadio == 5">
+      <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Adresse email :</p>
+      <mat-form-field class="col-7 col-md-5" appearance="outline">
+        <input matInput type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email" name="email"
+          [(ngModel)]="adressemail" #emailref="ngModel" required>
+        <mat-error *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" [hidden]="!emailref.errors?.pattern">
+          Adresse email Invalide
+        </mat-error>
+      </mat-form-field>
+    </div>
+
+
+
+    <form [formGroup]="formGroup" (ngSubmit)="sendEmail()">
+
+
+      <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Titre :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+          <input matInput placeholder="" formControlName="title" required>
+          <mat-error *ngIf="!formGroup.controls['title'].valid || formGroup.controls['title'].touched">
+            {{ getErrorTitle() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Description :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+          <input matInput placeholder="" formControlName="description" required>
+          <mat-error *ngIf="!formGroup.controls['description'].valid || formGroup.controls['description'].touched">
+            {{ getErrorDescription() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Objet :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+          <input matInput placeholder="" formControlName="subject" required>
+          <mat-error *ngIf="!formGroup.controls['subject'].valid || formGroup.controls['subject'].touched">
+            {{ getErrorObject() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+
+      <div class="row ">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Message :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline" style="width: 500px;">
+          <textarea matInput rows="13" formControlName="text"></textarea>
+          <mat-error *ngIf="!formGroup.controls['text'].valid || formGroup.controls['text'].touched">
+            {{ getErrorMessage() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+
+      <div class="row justify-content-center my-3">
+        <button class="mr-4" mat-raised-button color="primary" type="submit">Envoyer</button>
+        <button class="" mat-raised-button color="primary" (click)="resetForm()">Effacer</button>
+      </div>
+
+
+
+    </form>
+  </mat-card-content>
+</mat-card>

angular-client/src/app/components/admin/emailing/email-form/email-form.component.scss

@@ -0,0 +1,8 @@
+.parag{
+    margin-top: 1em;
+}
+
+
+.mat-radio-button ~ .mat-radio-button {
+    margin-left: 16px;
+  }

angular-client/src/app/components/admin/emailing/email-form/email-form.component.spec.ts

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

angular-client/src/app/components/admin/emailing/email-form/email-form.component.ts

@@ -0,0 +1,106 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { EmailService } from './../../../../services/email.service';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+@Component({
+  selector: 'app-email-form',
+  templateUrl: './email-form.component.html',
+  styleUrls: ['./email-form.component.scss']
+})
+export class EmailFormComponent implements OnInit {
+
+  constructor(private formBuilder: FormBuilder, private emailService: EmailService) { }
+
+  formGroup: FormGroup;
+  selectedRadio: number;
+  adressemail: string;
+
+  ngOnInit(): void {
+    this.createForm();
+  }
+
+  //radio button
+  public userOptions: any = [
+    { label: 'Tout les clients', value: '0', checked: true },
+    { label: 'Clients gagnant', value: '1', checked: false },
+    { label: 'Clients non gagnant', value: '2', checked: false },
+    { label: 'Clients compte actives', value: '3', checked: false },
+    { label: 'Clients bloqués', value: '4', checked: false },
+    { label: 'Adresse email', value: '5', checked: false }
+  ];
+
+  //select radio button
+  selectValue($event) {
+    this.selectedRadio = $event.source.value
+  }
+
+
+
+
+
+  createForm() {
+    let caracereregex: RegExp = /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]+$/;
+    this.formGroup = this.formBuilder.group({
+      title: [null, [Validators.required, Validators.pattern(caracereregex)]],
+      description: [null, [Validators.required, Validators.pattern(caracereregex)]],
+      subject: [null, [Validators.required, Validators.pattern(caracereregex)]],
+      text: [null, [Validators.required, Validators.pattern(caracereregex)]]
+    });
+  }
+
+
+
+  getErrorTitle() {
+    return this.formGroup.get('title').hasError('required') ? 'Titre requis' :
+      this.formGroup.get('title').hasError('pattern') ? 'Titre non valide' : 'Titre non valide';
+  }
+
+  getErrorDescription() {
+    return this.formGroup.get('description').hasError('required') ? 'Description requise' :
+      this.formGroup.get('description').hasError('pattern') ? 'Description non valide' : 'Description non valide';
+  }
+
+  getErrorObject() {
+    return this.formGroup.get('subject').hasError('required') ? 'Objet requis' :
+      this.formGroup.get('subject').hasError('pattern') ? 'Objet non valide' : 'Objet non valide';
+  }
+
+  getErrorMessage() {
+    return this.formGroup.get('text').hasError('required') ? 'Message requis' :
+      this.formGroup.get('text').hasError('pattern') ? 'Message non valide' : 'Message non valide';
+  }
+
+
+  get f() { return this.formGroup.controls; }
+
+
+  // rest form
+  resetForm() {
+    this.formGroup.reset()
+  }
+
+
+  // send email
+  sendEmail() {
+
+    if (this.formGroup.invalid) {
+      return;
+    }
+
+    let email = ''
+    let isgain: any = ''
+    let isactive: any = ''
+
+    if (this.selectedRadio == 5) { email = this.adressemail }
+    if (this.selectedRadio == 1) { isgain = true }
+    if (this.selectedRadio == 2) { isgain = false }
+    if (this.selectedRadio == 3) { isactive = true }
+    if (this.selectedRadio == 4) { isactive = false }
+
+    this.emailService.sendEmail(this.formGroup.value, email, isgain, isactive).subscribe(res => res)
+
+  }
+
+
+
+}

angular-client/src/app/components/admin/emailing/emailing.component.html

@@ -0,0 +1,5 @@
+<div class="container navtop">
+    
+   <app-email-form></app-email-form>
+
+</div>

angular-client/src/app/components/admin/emailing/emailing.component.scss

@@ -0,0 +1,3 @@
+.navtop{
+    margin-top: 7em;
+  }

angular-client/src/app/components/admin/emailing/emailing.component.spec.ts

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

angular-client/src/app/components/admin/emailing/emailing.component.ts

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

angular-client/src/app/components/admin/lots/lots.component.html

@@ -0,0 +1 @@
+<p>lots works!</p>

angular-client/src/app/components/admin/lots/lots.component.spec.ts

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

angular-client/src/app/components/admin/lots/lots.component.ts

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

angular-client/src/app/components/admin/statistic/statistic.component.html

@@ -0,0 +1,61 @@
+<div class="container navtop">
+
+  <h1 class="mb-5">Statistiques du jeux</h1>
+  <!-- charts -->
+  <div class="row justify-content-center">
+    <div *ngIf="isFoo " class="col-sm-12 col-lg-8">
+      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
+        [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartBar">
+      </canvas>
+    </div>
+  </div>
+  <div class="row justify-content-center">
+    <div *ngIf="!isFoo " class="col-sm-12 col-lg-8">
+      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
+        [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartHorizontal">
+      </canvas>
+    </div>
+  </div>
+
+
+  <button class="mt-4" mat-raised-button (click)="isFoo=!isFoo" color="primary">{{getBtnText()}}</button>
+
+ <!-- table statistique  -->
+  <div class="row justify-content-center my-5 ">
+    <table *ngIf="statisticArray" mat-table [dataSource]="statisticArray" class="mat-elevation-z8 col-11 col-lg-8">
+
+      <!-- gain Column -->
+      <ng-container matColumnDef="gain">
+        <th mat-header-cell *matHeaderCellDef>Gain</th>
+        <td mat-cell *matCellDef="let element" class="text-left"> {{element.gain }} </td>
+        <td mat-footer-cell *matFooterCellDef class="text-left">Totale</td>
+      </ng-container>
+
+      <!-- used Column -->
+      <ng-container matColumnDef="used">
+        <th mat-header-cell *matHeaderCellDef class="text-center">Utilisé</th>
+        <td mat-cell *matCellDef="let element"> {{element.used  }} </td>
+        <td mat-footer-cell *matFooterCellDef> {{getUsed()}} </td>
+      </ng-container>
+
+      <!-- served Column -->
+      <ng-container matColumnDef="served">
+        <th mat-header-cell *matHeaderCellDef class="text-center">Server</th>
+        <td mat-cell *matCellDef="let element"> {{element.served}} </td>
+        <td mat-footer-cell *matFooterCellDef> {{getServed()  }} </td>
+      </ng-container>
+
+      <!-- total Column -->
+      <ng-container matColumnDef="total">
+        <th mat-header-cell *matHeaderCellDef class="text-center">Totalité</th>
+        <td mat-cell *matCellDef="let element"> {{element.total  }} </td>
+        <td mat-footer-cell *matFooterCellDef> {{getTotal()  }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+    </table>
+  </div>
+
+</div>

angular-client/src/app/components/admin/statistic/statistic.component.scss

@@ -0,0 +1,8 @@
+.navtop{
+  margin-top: 3em;
+}
+
+
+  tr.mat-footer-row {
+    font-weight: bold;
+  }

angular-client/src/app/components/admin/statistic/statistic.component.spec.ts

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

angular-client/src/app/components/admin/statistic/statistic.component.ts

@@ -0,0 +1,94 @@
+import { StatisticService } from './../../../services/statistic.service';
+import { Component, OnInit } from '@angular/core';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Label } from 'ng2-charts';
+import { Statistic } from 'src/app/models/statisticResponse';
+
+
+@Component({
+  selector: 'app-statistic',
+  templateUrl: './statistic.component.html',
+  styleUrls: ['./statistic.component.scss']
+})
+export class StatisticComponent implements OnInit {
+
+
+  statisticArray: Statistic[]=[];
+  barChartData: ChartDataSets[] = [];
+  isFoo : boolean = true;
+
+
+  constructor(private StatisticService: StatisticService) { }
+
+  ngOnInit(): void {
+
+    this.subscribeToStatistic();
+
+  }
+
+
+
+  //sbscribe statistic
+  subscribeToStatistic() {
+
+    this.StatisticService.getStatistic().subscribe((res) => {
+      this.statisticArray = res.data;
+
+      this.barChartData = [
+        { data: this.statisticArray.map(res => res.total), label: 'totalité' },
+        { data: this.statisticArray.map(res => res.used), label: 'utiliser' },
+        { data: this.statisticArray.map(res => res.served), label: 'server' }
+      ];
+    })
+
+  }
+
+
+//chart
+  public barChartOptions: ChartOptions = {
+    responsive: true,
+  };
+  public barChartLabels: Label[] =
+    ['Une entrée ou un dessert au choix',
+      'Un burger au choix',
+      'Un menu du jour',
+      'Un menu au choix',
+      '70% de réduction'];
+  public barChartBar  : ChartType = 'bar'
+  public barChartHorizontal : ChartType = 'horizontalBar';
+  public barChartLegend = true;
+  public barChartPlugins = [];
+
+  
+  
+ 
+  
+
+  displayedColumns: string[] = ['gain', 'used', 'served','total'];
+ 
+
+
+  getTotal() {
+    return this.statisticArray.map(t => t.total).reduce((acc, value) => acc + value, 0);
+  }
+  getUsed() {
+    return this.statisticArray.map(t => t.used).reduce((acc, value) => acc + value, 0);
+  }
+  getServed() {
+    return this.statisticArray.map(t => t.served).reduce((acc, value) => acc + value, 0);
+  }
+
+//texte button 
+getBtnText(){
+  if(this.isFoo){
+    return 'diagramme à bandes horizontales'
+  }else
+    return 'diagramme à bandes verticales'
+}
+
+}
+
+
+
+
+

angular-client/src/app/components/admin/users/users-bloque/users-bloque.component.html

@@ -0,0 +1,9 @@
+<div mat-dialog-content class="text-center">
+    {{data}}
+    </div>
+    <div mat-dialog-actions class="row justify-content-center mt-3">
+        
+      <button mat-raised-button class="btn mr-2" color="primary" (click)="onConfirm()" >Oui</button>
+      <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Non</button>
+     
+    </div>

angular-client/src/app/components/admin/users/users-bloque/users-bloque.component.spec.ts

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

angular-client/src/app/components/admin/users/users-bloque/users-bloque.component.ts

@@ -0,0 +1,28 @@
+import { User } from './../../../../models/userResponse';
+import { UsersService } from './../../../../services/users.service';
+import {Component, Inject} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-users-bloque',
+  templateUrl: './users-bloque.component.html',
+  styleUrls: ['./users-bloque.component.scss']
+})
+export class UsersBloqueComponent  {
+
+ 
+  constructor( @Inject(MAT_DIALOG_DATA) public data: User, public dialogRef: MatDialogRef<UsersBloqueComponent>) { }
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+
+
+}

angular-client/src/app/components/admin/users/users-delete/users-delete.component.html

@@ -0,0 +1,9 @@
+<div mat-dialog-content class="text-center">
+   {{data}}
+   </div>
+   <div mat-dialog-actions class="row justify-content-center mt-3">
+       
+     <button mat-raised-button class="btn mr-2" color="primary" (click)="onConfirm()" >Oui</button>
+     <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Non</button>
+    
+   </div>

angular-client/src/app/components/admin/users/users-delete/users-delete.component.spec.ts

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

angular-client/src/app/components/admin/users/users-delete/users-delete.component.ts

@@ -0,0 +1,27 @@
+import { User } from './../../../../models/userResponse';
+import { UsersService } from './../../../../services/users.service';
+import {Component, Inject} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-users-delete',
+  templateUrl: './users-delete.component.html',
+  styleUrls: ['./users-delete.component.scss']
+})
+export class UsersDeleteComponent  {
+
+  constructor( @Inject(MAT_DIALOG_DATA) public data: User, public dialogRef: MatDialogRef<UsersDeleteComponent>) { }
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+
+
+}

angular-client/src/app/components/admin/users/users-details/users-details.component.html

@@ -0,0 +1,62 @@
+<h1 mat-dialog-title class="text-center font-weight-bold">{{element.lastname}} {{element.firstname}}</h1>
+<div mat-dialog-content class="">
+
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Nom :</p>
+    <div class="col-4"><p>{{element.lastname}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Prénom :</p>
+    <div class="col-4"><p>{{element.firstname}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Email :</p>
+    <div class="col-4"><p>{{element.email}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Numéro de téléphone :</p>
+    <div class="col-4"><p>{{element.phonenumber}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Adresse :</p>
+    <div class="col-4"><p>{{element.adress}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Date de naissance :</p>
+    <div class="col-4"><p>{{element.birthday | date: 'longDate'}}</p></div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Compte :</p>
+    <div class="col-4">
+        <mat-icon *ngIf="element.isActive" class="done"  aria-hidden="false" aria-label="Example home icon">done</mat-icon>
+        <mat-icon *ngIf="!element.isActive" aria-hidden="false" aria-label="Example home icon">clear</mat-icon>
+    </div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Lots :</p>
+    <div class="col-4"> 
+        <mat-icon *ngIf="element.isGain" class="done"  aria-hidden="false" aria-label="Example home icon">done</mat-icon>
+        <mat-icon *ngIf="!element.isGain" color="warn"  aria-hidden="false" aria-label="Example home icon">clear</mat-icon>
+    </div>
+</div>
+<div class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Date d'inscription :</p>
+    <div class="col-4"><p>{{element.register_date | date: 'longDate'}}</p></div>
+</div>
+<div *ngIf="element.isGain" class="row">   
+    <p class="col-4 font-weight-bold text-lg-right">Gains :</p>
+    <div class="col-4">
+        <ul *ngFor="let item of element.gains">
+        <li>
+            {{item.gains}}
+        </li>
+       
+      </ul></div>
+</div>
+
+
+
+
+  
+  
+</div>

angular-client/src/app/components/admin/users/users-details/users-details.component.scss

@@ -0,0 +1,5 @@
+
+
+.done{
+    color:#39C965 ;
+  }

angular-client/src/app/components/admin/users/users-details/users-details.component.spec.ts

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

angular-client/src/app/components/admin/users/users-details/users-details.component.ts

@@ -0,0 +1,26 @@
+import { User } from './../../../../models/userResponse';
+import {Component, Inject} from '@angular/core';
+import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+import { UsersDeleteComponent } from '../users-delete/users-delete.component';
+
+@Component({
+  selector: 'app-users-details',
+  templateUrl: './users-details.component.html',
+  styleUrls: ['./users-details.component.scss']
+})
+export class UsersDetailsComponent  {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public element: User,  public dialogRef: MatDialogRef<UsersDeleteComponent>) {}
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+
+}

angular-client/src/app/components/admin/users/users-edit/users-edit.component.html

@@ -0,0 +1,9 @@
+<div mat-dialog-content class="text-center">
+    {{data}}
+    </div>
+    <div mat-dialog-actions class="row justify-content-center mt-3">
+        
+      <button mat-raised-button class="btn mr-2" color="primary" (click)="onConfirm()" >Oui</button>
+      <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Non</button>
+     
+    </div>

angular-client/src/app/components/admin/users/users-edit/users-edit.component.spec.ts

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

angular-client/src/app/components/admin/users/users-edit/users-edit.component.ts

@@ -0,0 +1,31 @@
+import { User } from './../../../../models/userResponse';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+
+@Component({
+  selector: 'app-users-edit',
+  templateUrl: './users-edit.component.html',
+  styleUrls: ['./users-edit.component.scss']
+})
+export class UsersEditComponent implements OnInit {
+
+  
+  constructor( @Inject(MAT_DIALOG_DATA) public data: User, public dialogRef: MatDialogRef<UsersEditComponent>) { }
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+
+
+  ngOnInit(): void {
+  }
+
+}

angular-client/src/app/components/admin/users/users-form/users-form.component.html

@@ -0,0 +1,82 @@
+<!-- card search -->
+<div class="mx-5 my-5 ">
+
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header class="search">
+        <mat-panel-title>
+          <div class="row ml-2 ">
+            <div>
+              <mat-icon class=" mx-2" aria-hidden="false" aria-label="Example home icon">group</mat-icon>
+            </div>
+            <div>
+              <p class="">Rechercher des utilisateurs</p>
+            </div>
+          </div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <form [formGroup]="form" (ngSubmit)="filterUser()">
+
+        <div class="row">
+
+
+          <!-- lastname -->
+          <mat-form-field class="col-4">
+            <mat-label>Nom :</mat-label>
+            <input matInput formControlName="lastname" >
+          </mat-form-field>
+
+          <!-- firstname -->
+          <mat-form-field class="col-4">
+            <mat-label>Prénom :</mat-label>
+            <input matInput  formControlName="firstname" >
+          </mat-form-field>
+
+          <!-- username -->
+          <mat-form-field class="col-4">
+            <mat-label>Etat client :</mat-label>
+            <mat-select [formControl]="toppings" multiple>
+              <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+
+        <div class="row">
+
+          <!-- email -->
+          <mat-form-field class="col-4">
+            <mat-label>Adresse mail :</mat-label>
+            <input matInput name="email" formControlName="email" >
+          </mat-form-field>
+
+          <!-- date interval -->
+          <mat-form-field class="col-4">
+            <input matInput placeholder="Inscription :" [satDatepicker]="picker" formControlName="date">
+            <sat-datepicker-toggle matSuffix [for]="picker">
+            </sat-datepicker-toggle>
+            <sat-datepicker #picker [rangeMode]="true" touchUi="true">
+            </sat-datepicker>
+          </mat-form-field>
+
+          <!-- username -->
+          <mat-form-field class="col-4">
+            <mat-label>Adresse :</mat-label>
+            <input matInput formControlName="adress">
+          </mat-form-field>
+
+        </div>
+
+        <div class="row justify-content-center">
+          <button mat-raised-button color="primary" class="mr-3" type="submit">Rechercher</button>
+          <button mat-raised-button color="primary" (click)="reset()">Effacer</button>
+        </div>
+
+      </form>
+
+    </mat-expansion-panel>
+
+  </mat-accordion>
+
+</div>

angular-client/src/app/components/admin/users/users-form/users-form.component.spec.ts

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

angular-client/src/app/components/admin/users/users-form/users-form.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-users-form',
+  templateUrl: './users-form.component.html',
+  styleUrls: ['./users-form.component.scss'],
+})
+export class UsersFormComponent implements OnInit {
+
+  form: FormGroup;
+  startDate : Date;
+  endDate   : Date;
+  @Output() filterUsers = new EventEmitter<any>();
+
+  constructor( private formBuilder: FormBuilder) {
+    this.form = formBuilder.group({
+      lastname  :[''],
+      firstname :[''],
+      email     :['', Validators.email],
+      adress    :[''],
+      date      :[{begin: this.startDate, end: this.endDate}]
+    });
+    
+   }
+
+  toppings = new FormControl();
+  toppingList: string[] = ['Gagnant', 'Bloqué', 'servé'];
+  topping
+
+  ngOnInit(): void {
+  }
+
+
+  filterUser(){
+    this.filterUsers.emit(this.form.value);
+  }
+  reset(){
+   this.form.reset()
+  }
+
+}

angular-client/src/app/components/admin/users/users-list/users-list.component.html

@@ -0,0 +1,75 @@
+ <!-- table of users -->
+ <div class="mat-elevation-z8 col-12 col-lg-12 mb-5   justify-content-center ">
+    <table mat-table [dataSource]="users">
+
+
+      <!-- lastname firstname -->
+      <ng-container matColumnDef="lastname">
+        <th mat-header-cell *matHeaderCellDef> Nom </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.lastname}} </td>
+      </ng-container>
+
+      <!-- firstname Column -->
+      <ng-container matColumnDef="firstname">
+        <th mat-header-cell *matHeaderCellDef> Prénom </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.firstname}} </td>
+      </ng-container>
+
+      <!-- email Column -->
+      <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef> Adresse email </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.email}} </td>
+      </ng-container>
+
+       <!-- details -->
+      <ng-container matColumnDef="details">
+        <th mat-header-cell *matHeaderCellDef> Détails </th>
+        <td mat-cell *matCellDef="let element"  class="text-left">
+          <button mat-icon-button color="primary" (click)="detailUser(element)">
+              <mat-icon class="mat-18">reorder</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+       <!-- update -->
+      <ng-container matColumnDef="update">
+        <th mat-header-cell *matHeaderCellDef> Modifier </th>
+        <td mat-cell *matCellDef="let element"  class="text-left">
+          <button mat-icon-button color="accent" class="update" (click)="editUser(element)">
+              <mat-icon class="mat-18">system_update</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <!-- bloque -->
+      <ng-container matColumnDef="bloque">
+        <th mat-header-cell *matHeaderCellDef> Bloquer </th>
+        <td mat-cell *matCellDef="let element"  class="text-left">
+          <button *ngIf="element.isActive" mat-icon-button color="warn" (click)="bloqueUser(element)">
+              <mat-icon class="mat-18">not_interested</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+       <!-- delete -->
+      <ng-container matColumnDef="delete">
+          <th mat-header-cell *matHeaderCellDef> Supprimer </th>
+          <td mat-cell *matCellDef="let element"  class="text-left">
+            <button mat-icon-button color="warn" (click)="deleteUser(element)">
+                <mat-icon class="mat-18">delete</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+   
+
+    <mat-paginator [length]="total" [pageSize]="pageSize" [pageSizeOptions]="[5,10,20,50]" [showFirstLastButtons]="true"
+      (page)="handlePage($event)">
+    </mat-paginator>
+    
+  </div>

angular-client/src/app/components/admin/users/users-list/users-list.component.scss

@@ -0,0 +1,7 @@
+table {
+    width: 100%;
+  }
+
+  .update{
+    color:#39C965 ;
+  }

angular-client/src/app/components/admin/users/users-list/users-list.component.spec.ts

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

angular-client/src/app/components/admin/users/users-list/users-list.component.ts

@@ -0,0 +1,126 @@
+import { UsersService } from './../../../../services/users.service';
+import { UsersEditComponent } from './../users-edit/users-edit.component';
+import { UsersBloqueComponent } from './../users-bloque/users-bloque.component';
+import { UsersDetailsComponent } from './../users-details/users-details.component';
+import { element } from 'protractor';
+import { MatDialog } from '@angular/material/dialog';
+import { User } from './../../../../models/userResponse';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { UsersDeleteComponent } from '../users-delete/users-delete.component';
+
+@Component({
+  selector: 'app-users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss']
+})
+export class UsersListComponent {
+
+  @Input() users: User[];
+  @Input() page: number;
+  @Input() pageSize: number;
+  @Input() total: number;
+  @Output() filter = new EventEmitter<any>();
+
+  constructor(public dialog: MatDialog, private usersService: UsersService) { }
+
+
+
+  displayedColumns: string[] = ['lastname', 'firstname', 'email', 'details', 'update', 'bloque', 'delete'];
+  dataSource = new MatTableDataSource<any>(this.users);
+
+
+
+
+  handlePage($event) {
+    this.filter.emit($event);
+  }
+
+  // detail user 
+  detailUser(element): void {
+    const dialogRef = this.dialog.open(UsersDetailsComponent, {
+      width: '650px',
+      height: '440px',
+      data: element
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // if (result) {
+      //   this.bookService.cancelBook(this._book.id).subscribe(
+      //     response => {
+      //       this.openDialog()
+      //     }
+      //   )
+      // }
+    });
+  }
+
+  // edit user 
+  editUser(element): void {
+    const dialogRef = this.dialog.open(UsersEditComponent, {
+      width: '350px',
+      height: '140px',
+      data: "Souhaitez-vous supprimer cet utilisateur ?"
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // if (result) {
+      //   this.bookService.cancelBook(this._book.id).subscribe(
+      //     response => {
+      //       this.openDialog()
+      //     }
+      //   )
+      // }
+    });
+  }
+
+
+  // bloque user 
+  bloqueUser(element :User): void {
+    const dialogRef = this.dialog.open(UsersBloqueComponent, {
+      width: '350px',
+      height: '140px',
+      data: "Souhaitez-vous bloquer cet utilisateur ?"
+    });
+     let bloqued = {isActive : false }
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.usersService.editOneUser(element._id, bloqued).subscribe(
+          response => {
+            // this.openDialog()
+            console.log(response)
+          }
+        )
+      }
+    });
+  }
+
+
+  // delete user 
+  deleteUser(element :User): void {
+    const dialogRef = this.dialog.open(UsersDeleteComponent, {
+      width: '350px',
+      height: '140px',
+      data: "Souhaitez-vous supprimer cet utilisateur ?"
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.usersService.deleteOneUser(element._id).subscribe(
+          response => {
+            // this.openDialog()
+            console.log(response)
+          }
+        )
+      }
+    });
+  }
+
+
+
+
+
+
+
+}

angular-client/src/app/components/admin/users/users.component.html

@@ -0,0 +1,9 @@
+<div class="container  navtop">
+
+    <h1 class="mb-5">Liste des utilisateurs du jeux</h1>
+
+    <app-users-form (filterUsers)="filterUsersForm($event)"></app-users-form>
+
+    <app-users-list [users]="users" [total]="total" [page]="page" [pageSize]="pageSize" (filter)="filterUsersPage($event)" ></app-users-list>
+
+</div>

angular-client/src/app/components/admin/users/users.component.scss

@@ -0,0 +1,3 @@
+.navtop{
+    margin-top: 3em;
+  }

angular-client/src/app/components/admin/users/users.component.spec.ts

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

angular-client/src/app/components/admin/users/users.component.ts

@@ -0,0 +1,85 @@
+import { User } from './../../../models/userResponse';
+import { Component, OnInit } from '@angular/core';
+import { UsersService } from './../../../services/users.service';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss']
+})
+export class UsersComponent implements OnInit {
+
+  constructor(private UsersService: UsersService) { }
+
+  users : User[];
+  page : number = 1;
+  pageSize : number = 10;
+  total : number;
+  startregister  = '';
+  endregister = '';
+  firstname: string = '';
+  lastname : string = '';
+  email: string = '';
+  adress: string = '';
+
+
+  ngOnInit() {
+     this.subscribeToUsers();
+  }
+
+
+
+  filterUsersPage($event) {
+    this.UsersService.getUsers($event.pageIndex+1,$event.pageSize,this.lastname,this.firstname,this.email,this.adress,this.startregister,this.endregister).subscribe((res) => {
+     this.users = res.users
+     this.total = res.total
+    
+    })
+    console.log('1',$event)
+  }
+
+  filterUsersForm(userObject) {
+    console.log('2',userObject)
+    if(userObject.date == null){
+     var start = null
+     var end = null
+    }
+    if(userObject.date !== null){
+      var start = userObject.date.begin
+      var end = userObject.date.end
+     }
+
+     console.log('start : '+start)
+     console.log('end : '+end)
+    this.UsersService.getUsers(this.page, this.pageSize, userObject.lastname, userObject.firstname, userObject.email, userObject.adress, start, end).subscribe((res) => {
+     this.users = res.users
+     this.total = res.total
+    })
+    this.firstname = userObject.firstname
+    this.lastname  = userObject.lastname
+    this.email = userObject.email
+    this.startregister = start
+    this.endregister = end
+    
+
+    console.log('2',userObject)
+  }
+  
+
+  
+// sbscribe users
+subscribeToUsers() {
+
+  this.UsersService.getUsers(this.page, this.pageSize, this.lastname, this.firstname, this.email, this.adress, this.startregister, this.endregister).subscribe((res) => {
+    this.users = res.users
+    this.page = res.page
+    this.total = res.total
+  })
+}
+
+
+
+
+}
+
+

angular-client/src/app/components/auth/gain/gain-form/gain-form.component.html

@@ -0,0 +1,34 @@
+
+      <mat-card class="v">
+        <mat-card-content>
+          <form [formGroup]="formGroup" (ngSubmit)="sendCodeGain()">
+            <!-- <mat-progress-bar class="row " *ngIf="loading" mode="indeterminate"></mat-progress-bar> -->
+            <h1 class="row justify-content-center font-weight-bold">Tentez votre chance, et repartez peut-etre avec votre Range Rover</h1>
+            <h3 class="row justify-content-center">Entrez votre code</h3>
+  
+  
+            <div class="row justify-content-center">
+                <div >
+                    <mat-form-field class="formu" appearance="outline">
+                        <input matInput formControlName="code" type="number" placeholder="Exemple : 1234567890">
+                        <mat-icon matSuffix>card_giftcard</mat-icon>
+                        <mat-error *ngIf="!formGroup.controls['code'].valid || formGroup.controls['code'].touched">
+                          {{ getErrorCode() }}
+                        </mat-error>
+                      </mat-form-field>
+                </div>
+                
+            </div>
+            
+  
+            <div class="row justify-content-center mt-3">
+              <button class="col-4 color-theme" mat-raised-button color="primary" type="submit">Je vérifie</button>
+            </div>
+
+            <h1 class="row justify-content-center"><b>100% gagnant</b></h1>
+           
+          </form>
+        </mat-card-content>
+      </mat-card>
+  
+   

angular-client/src/app/components/auth/gain/gain-form/gain-form.component.scss

@@ -0,0 +1,4 @@
+.formu{
+    background-color: white !important;
+}
+

angular-client/src/app/components/auth/gain/gain-form/gain-form.component.spec.ts

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

angular-client/src/app/components/auth/gain/gain-form/gain-form.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-gain-form',
+  templateUrl: './gain-form.component.html',
+  styleUrls: ['./gain-form.component.scss']
+})
+export class GainFormComponent implements OnInit {
+
+  constructor( private formBuilder: FormBuilder,) { }
+
+  formGroup: FormGroup;
+  @Output() code = new EventEmitter<number>();
+
+
+  ngOnInit(): void {
+    this.createForm();
+  }
+
+
+  createForm() {
+    this.formGroup = this.formBuilder.group({
+      code: [null, Validators.required]
+    });
+  }
+
+
+
+  getErrorCode() {
+    return this.formGroup.get('code').hasError('required') ? 'code requis' : '';
+  }
+
+
+  get f() { return this.formGroup.controls; }
+
+
+  sendCodeGain() {
+    
+    if (this.formGroup.invalid) {
+      return;
+    }
+    this.code.emit(this.formGroup.value);
+  }
+
+
+
+}

angular-client/src/app/components/auth/gain/gain-list/gain-list.component.html

@@ -0,0 +1,54 @@
+ <!-- table of users -->
+
+    <table mat-table [dataSource]="lots" class="tablegain">
+
+
+      <!-- index -->
+      <ng-container matColumnDef="index">
+        <th mat-header-cell *matHeaderCellDef> Numéro </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.index}} </td>
+      </ng-container>
+
+      <!-- code -->
+      <ng-container matColumnDef="code">
+        <th mat-header-cell *matHeaderCellDef> Code </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.code}} </td>
+      </ng-container>
+
+      <!-- gain -->
+      <ng-container matColumnDef="gain">
+        <th mat-header-cell *matHeaderCellDef> Lot gagné </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.gains}} </td>
+      </ng-container>
+
+
+      <!-- isServed -->
+      <ng-container matColumnDef="isServed">
+        <th mat-header-cell *matHeaderCellDef> Servé </th>
+        <td mat-cell *matCellDef="let element"  class="text-left">
+            <mat-icon *ngIf="element.isServed === true" class="icon mr-2" style="color:#4FC031">done_outline</mat-icon>
+            <mat-icon *ngIf="element.isServed === false" class="icon mr-2" style="color:rgb(67, 151, 230)">hourglass_bottom</mat-icon>
+           </td>
+      </ng-container>
+
+       <!-- date_used -->
+      <ng-container matColumnDef="date_used">
+        <th mat-header-cell *matHeaderCellDef> Date d'utilisation </th>
+        <td mat-cell *matCellDef="let element"  class="text-left"> {{element.date_used | date: 'longDate' }} </td>
+      </ng-container>
+
+      
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+
+
+    <!-- <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="[2,3,10]" [showFirstLastButtons]="true"
+      (page)="handlePage($event)">
+    </mat-paginator> -->
+
+
+

angular-client/src/app/components/auth/gain/gain-list/gain-list.component.scss

@@ -0,0 +1,5 @@
+table {
+    width: 100%;
+  }
+
+

angular-client/src/app/components/auth/gain/gain-list/gain-list.component.spec.ts

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

angular-client/src/app/components/auth/gain/gain-list/gain-list.component.ts

@@ -0,0 +1,34 @@
+import { Ticket } from './../../../../models/ticket';
+import { Component, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'app-gain-list',
+  templateUrl: './gain-list.component.html',
+  styleUrls: ['./gain-list.component.scss']
+})
+export class GainListComponent  {
+
+  constructor() { }
+
+  @Input() lots : Ticket[];
+
+
+  displayedColumns: string[] = [ 'index', 'code', 'gain', 'isServed', 'date_used'];
+  dataSource = new MatTableDataSource<any>(this.lots);
+
+
+
+  subscribeToUsers() {
+  
+    // this.UsersService.getUsers(this.page,this.pageSize).subscribe((res) => {
+    //   this.usersArray = res.users
+    //   this.length = res.total
+    //   this.page = res.page
+    //   console.log(res.users)
+    // })
+  
+  }
+  
+  
+}

angular-client/src/app/components/auth/gain/gain.component.html

@@ -0,0 +1,8 @@
+<div class="container navtop">
+    <div>
+        <app-gain-form (code)="receiveCode($event)"></app-gain-form>
+    </div>
+    <div class="my-3">
+        <app-gain-list [lots]="lots"></app-gain-list>
+    </div>
+</div>

angular-client/src/app/components/auth/gain/gain.component.scss

@@ -0,0 +1,3 @@
+.navtop{
+    margin-top: 6em;
+  }

angular-client/src/app/components/auth/gain/gain.component.spec.ts

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

angular-client/src/app/components/auth/gain/gain.component.ts

@@ -0,0 +1,40 @@
+import { UsersService } from './../../../services/users.service';
+import { Ticket } from './../../../models/ticket';
+import { User } from './../../../models/userResponse';
+import { AuthService } from './../../../services/auth.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gain',
+  templateUrl: './gain.component.html',
+  styleUrls: ['./gain.component.scss']
+})
+export class GainComponent implements OnInit {
+
+  constructor(private authService : AuthService, private userService : UsersService)
+   { }
+
+  lots : Ticket[];
+  user : User;
+
+  ngOnInit(): void {
+     this.getInfoUser()
+  }
+
+  getInfoUser(){
+     this.authService.getUserInfo().subscribe( (user) =>{ this.user = user, this.lots = user.gains})
+  }
+
+
+  receiveCode($event : Ticket){
+    let id = this.authService.userValue._id
+    console.log('coe',$event)
+    console.log('id',id)
+    this.userService.verifyLotUser(id, $event).subscribe( res => console.log(res))
+  }
+
+
+
+
+
+}

angular-client/src/app/components/auth/profil/edit-profil-info-connexion/edit-profil-info-connexion.component.html

@@ -0,0 +1,33 @@
+<h1 mat-dialog-title class="text-center font-weight-bold">{{element.lastname}} {{element.firstname}}</h1>
+
+<form [formGroup]="formGroup" (ngSubmit)="updateProfil()">
+<div mat-dialog-content class="">
+   
+    <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Téléphone :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+            <input matInput placeholder="" formControlName="phonenumber" required>
+            <mat-error *ngIf="!formGroup.controls['phonenumber'].valid || formGroup.controls['phonenumber'].touched">
+                {{ getErrorPhonenumber() }}
+              </mat-error>
+        </mat-form-field>
+    </div>
+    <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Adresse :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+            <input matInput placeholder="" formControlName="adress" required>
+            
+        </mat-form-field>
+    </div>
+
+</div>
+
+
+<div mat-dialog-actions class="row justify-content-center mt-2">
+       
+    <button mat-raised-button class="btn mr-2" color="primary" (click)="updateProfil()" >Modifier</button>
+    <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Annuler</button>
+   
+  </div>
+
+</form>

angular-client/src/app/components/auth/profil/edit-profil-info-connexion/edit-profil-info-connexion.component.spec.ts

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

angular-client/src/app/components/auth/profil/edit-profil-info-connexion/edit-profil-info-connexion.component.ts

@@ -0,0 +1,81 @@
+import { UsersService } from './../../../../services/users.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { User } from './../../../../models/userResponse';
+import { Component, Inject, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-edit-profil-info-connexion',
+  templateUrl: './edit-profil-info-connexion.component.html',
+  styleUrls: ['./edit-profil-info-connexion.component.scss']
+})
+export class EditProfilInfoConnexionComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public element: User,  public dialogRef: MatDialogRef<EditProfilInfoConnexionComponent>,
+    private formBuilder: FormBuilder, private usersService: UsersService)
+   {}
+   formGroup: FormGroup;
+   submitted = false;
+
+
+   ngOnInit(): void {
+
+    this.createForm(); 
+  }
+
+
+
+  createForm() {
+   
+    let phonenumberregex : RegExp = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/;
+    this.formGroup = this.formBuilder.group({
+      phonenumber: [Validators.pattern(phonenumberregex)],
+      adress:[]
+    });
+  }
+
+
+ // login
+ updateProfil(){
+
+  this.submitted = true;
+  if (this.formGroup.invalid) {
+    return;
+  }
+  this.usersService.editOneUser(this.element._id, this.formGroup.value).subscribe(
+    data => {
+        // this.router.navigate([this.returnUrl]);
+        console.log(data)
+        // this.loading = false;
+        // this.router.navigate(['auth']);
+    },
+    err => {
+        // this.loading = false;
+        // console.log(err.error.message)
+        // this.authService.openSnackBar(err.error.message)
+    });
+}
+
+
+
+
+
+getErrorPhonenumber() {
+  return this.formGroup.get('phonenumber').hasError('pattern') ? 'Numéro de téléphone non valide' : '';
+}
+
+
+
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+}

angular-client/src/app/components/auth/profil/edit-profil-info-user/edit-profil-info-user.component.html

@@ -0,0 +1,33 @@
+<h1 mat-dialog-title class="text-center font-weight-bold">{{element.lastname}} {{element.firstname}}</h1>
+
+<form [formGroup]="formGroup" (ngSubmit)="updateProfil()">
+<div mat-dialog-content class="">
+   
+    <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Téléphone :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+            <input matInput placeholder="" formControlName="phonenumber"  [(ngModel)]="user.phonenumber" required>
+            <mat-error *ngIf="!formGroup.controls['phonenumber'].valid || formGroup.controls['phonenumber'].touched">
+                {{ getErrorPhonenumber() }}
+              </mat-error>
+        </mat-form-field>
+    </div>
+    <div class="row">
+        <p class="col-5 col-md-4 font-weight-bold text-lg-right parag">Adresse :</p>
+        <mat-form-field class="col-7 col-md-5" appearance="outline">
+            <input matInput placeholder="" formControlName="adress" [(ngModel)]="user.adress" required>
+            
+        </mat-form-field>
+    </div>
+
+</div>
+
+
+<div mat-dialog-actions class="row justify-content-center mt-2">
+       
+    <button mat-raised-button class="btn mr-2" color="primary" (click)="updateProfil()" >Modifier</button>
+    <button mat-raised-button class="btn ml-2" cdkFocusInitial color="primary" (click)="onNoClick()">Annuler</button>
+   
+  </div>
+
+</form>

angular-client/src/app/components/auth/profil/edit-profil-info-user/edit-profil-info-user.component.scss

@@ -0,0 +1,5 @@
+
+
+.parag{
+    margin-top: 1em;
+}

angular-client/src/app/components/auth/profil/edit-profil-info-user/edit-profil-info-user.component.spec.ts

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

angular-client/src/app/components/auth/profil/edit-profil-info-user/edit-profil-info-user.component.ts

@@ -0,0 +1,80 @@
+import { UsersService } from './../../../../services/users.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { User } from './../../../../models/userResponse';
+import { Component, Inject, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-profil-info-user',
+  templateUrl: './edit-profil-info-user.component.html',
+  styleUrls: ['./edit-profil-info-user.component.scss']
+})
+export class EditProfilInfoUserComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public element: User,  public dialogRef: MatDialogRef<EditProfilInfoUserComponent>,
+    private formBuilder: FormBuilder, private usersService: UsersService)
+   {}
+   formGroup: FormGroup;
+   submitted = false;
+   user = this.element
+
+   ngOnInit(): void {
+
+    this.createForm(); 
+  }
+
+
+
+  createForm() {
+   
+    let phonenumberregex : RegExp = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/;
+    this.formGroup = this.formBuilder.group({
+      phonenumber: [Validators.pattern(phonenumberregex)],
+      adress:[]
+    });
+  }
+
+
+ // login
+ updateProfil(){
+
+  this.submitted = true;
+  if (this.formGroup.invalid) {
+    return;
+  }
+  this.usersService.editOneUser(this.element._id, this.formGroup.value).subscribe(
+    data => {
+        // this.router.navigate([this.returnUrl]);
+        console.log(data)
+        // this.loading = false;
+        // this.router.navigate(['auth']);
+    },
+    err => {
+        // this.loading = false;
+        // console.log(err.error.message)
+        // this.authService.openSnackBar(err.error.message)
+    });
+}
+
+
+
+
+
+getErrorPhonenumber() {
+  return this.formGroup.get('phonenumber').hasError('pattern') ? 'Numéro de téléphone non valide' : '';
+}
+
+
+
+
+  
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+}

angular-client/src/app/components/auth/profil/profil.component.html

@@ -0,0 +1,97 @@
+<div class="container navtop ">
+
+    <div class="row justify-content-center">
+        <mat-card class="col-11 col-md-8">
+            <mat-card-content>
+
+                <div class="row">
+                    <div class="col-md-6 border-right">
+                        <div class="row justify-content-center ">
+                            <img width="120" height="120" src="assets/img/profil/profil.png" alt="">
+                        </div>
+                        <div class="row justify-content-center mb-3">
+                           <p><b>{{user.firstname}} {{user.lastname}}</b></p>
+                        </div>
+
+                        <div class="row">
+                            <p class="col-5">
+                                Email :
+                            </p>
+
+                            <p class="col-5">{{user.email}}</p>
+
+                        </div>
+
+                        <div class="row">
+                            <p class="col-5">
+                                Mot de passe :
+                            </p>
+
+                            <p class="col-5">***********</p>
+
+                        </div>
+
+                        <div class="row justify-content-center mt-3">
+                            <button class="col-6" mat-raised-button color="primary" type="submit" (click)="editInfoUserConnexion()">Modifier</button>
+                          </div>
+                    </div>
+                    <div class="col-md-6">
+
+                    <div class="row">
+                        <div class="col-5">
+                            <p>Nom : </p>
+                        </div>
+                        <div class="col-5">
+                            <p>begaz</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-5">
+                            <p>Prénom : </p>
+                        </div>
+                        <div class="col-5">
+                            <p>ghiles</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-5">
+                            <p>Numéro de téléphone : </p>
+                        </div>
+                        <div class="col-5">
+                            <p>{{user.phonenumber}}</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-5">
+                            <p>Date de naissance : </p>
+                        </div>
+                        <div class="col-5">
+                            <p>{{user.birthday | date: 'longDate'}}</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-5">
+                            <p>Adresse : </p>
+                        </div>
+                        <div class="col-5">
+                            <p>{{user.adress}}</p>
+                        </div>
+                    </div>
+                    <div class="row justify-content-center mt-3">
+                        <button class="col-6" mat-raised-button color="primary" (click)="editInfoUser()" >Modifier</button>
+                      </div>
+                </div>
+
+                </div>
+
+            </mat-card-content>
+        </mat-card>
+
+    </div>
+
+
+
+
+
+
+</div>

angular-client/src/app/components/auth/profil/profil.component.scss

@@ -0,0 +1,5 @@
+.navtop{
+    margin-top: 8.6em;
+    margin-bottom: 4em;
+  }
+ 

angular-client/src/app/components/auth/profil/profil.component.spec.ts

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

angular-client/src/app/components/auth/profil/profil.component.ts

@@ -0,0 +1,68 @@
+import { EditProfilInfoConnexionComponent } from './edit-profil-info-connexion/edit-profil-info-connexion.component';
+import { MatDialog } from '@angular/material/dialog';
+import { EditProfilInfoUserComponent } from './edit-profil-info-user/edit-profil-info-user.component';
+import { User } from './../../../models/userResponse';
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'src/app/services/auth.service';
+
+@Component({
+  selector: 'app-profil',
+  templateUrl: './profil.component.html',
+  styleUrls: ['./profil.component.scss']
+})
+export class ProfilComponent implements OnInit {
+
+ 
+  constructor(private authService : AuthService, public dialog: MatDialog)
+   { this.authService.user_info.subscribe((x) =>{this.user = x});}
+
+   user : User;
+
+  ngOnInit(): void {
+  }
+
+
+
+
+  //edit info user  
+  editInfoUser(): void {
+    const dialogRef = this.dialog.open( EditProfilInfoUserComponent, {
+      width: '450px',
+      height: '280px',
+      data: this.user
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // if (result) {
+      //   this.bookService.cancelBook(this._book.id).subscribe(
+      //     response => {
+      //       this.openDialog()
+      //     }
+      //   )
+      // }
+    });
+  }
+
+
+
+  editInfoUserConnexion(): void {
+    const dialogRef = this.dialog.open( EditProfilInfoConnexionComponent, {
+      width: '450px',
+      height: '280px',
+      data: this.user
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // if (result) {
+      //   this.bookService.cancelBook(this._book.id).subscribe(
+      //     response => {
+      //       this.openDialog()
+      //     }
+      //   )
+      // }
+    });
+  }
+  
+
+
+}

angular-client/src/app/components/home/home.component.html

@@ -0,0 +1,70 @@
+<div class="container navtop">
+
+    <div class="range">
+        <h4 class="text-center concours font-weight-bold">Du 16 juillet 2020 au 16 septembre 2020</h4>
+        <h4 class="text-center concours">Pour tout achat d'une valeur de 18€ ou plus dans l'un de nos restaurants reçoit un code
+            Promo</h4>
+
+        <h1 class="text-center  gain mb-4">Tentez de gagner un Range Rover</h1>
+
+        <div class="row">
+            <div class="col-12 col-md-6 order-2 order-md-1">
+                <h4 class="col-12 col-md-9">A l'occasion de l'ouverture de notre 100e restaurants Fatboar, Tentez de repartir avec
+                    un Range Rover d'une valeur de 59900€ en participant à notre Grand jeu-concours FatBoar.</h4>
+                <h4 class="col-12 col-md-9">Il vous suffi d'une seule participation à notre jeu concours pour avoir une chance d'être tiré au sort et gagner votre Range Rover !</h4>
+                <h4 class="col-12 col-md-9">A noter que chacunes de vos participations vous offrons  une récompences !</h4>
+            </div>
+
+            <div class="col-12 col-md-6 order-1 order-md-2">
+                <img class="rangeRover"  [src]="getImgRange()" width="80%">
+            </div>
+
+        </div>
+
+        <div class=" row justify-content-center mt-3">
+            <button class="col-8 col-md-4 color-theme" mat-raised-button color="primary" type="submit" routerLink="/login">Je participe</button>
+        </div>
+
+    </div>
+
+    <div class="lots mt-4">
+       
+            <h2 class="text-center font-weight-bold">100% des tickets seront gagnants</h2>
+        
+
+        <div class="row mt-5">
+            <div class="col-4">
+                <img [src]="getDessert()"  width="100%" >
+                <h2 class="text-center font-weight-bold dessert">Un dessert au choix</h2>
+               
+            </div>
+            <div class="col-4">
+               
+                <img [src]="getBurger()" width="90%">
+                <h2 class="text-center font-weight-bold">Un burger au choix</h2>
+            </div>
+            <div class="col-4">
+                
+                <img [src]="getMenuJour()" width="60%">
+                <h2 class="text-center font-weight-bold">Un menu du jour</h2>
+            </div>
+        </div>
+
+        <div class="row justify-content-center">
+            <div class="col-4">
+                
+                <img [src]="getMenuChoix()" width="90%">
+                <h2 class="text-center font-weight-bold">Un menu au choix</h2>
+            </div>
+            <div class="col-4">
+               
+                <img [src]="getReduction()" width="90%">
+                <h2 class="text-center font-weight-bold">70% de réduction</h2>
+            </div>
+        </div>
+
+
+
+    </div>
+
+</div>

angular-client/src/app/components/home/home.component.scss

@@ -0,0 +1,52 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Pacifico&family=Pangolin&family=Permanent+Marker&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@900&display=swap');
+
+.navtop{
+    margin-top: 6em;
+  }
+
+  .gain{
+    color:rgb(30, 3, 56);
+    font-family: 'Indie Flower', cursive;
+    font-family: 'Pacifico', cursive;
+    font-family: 'Pangolin', cursive;
+    font-family: 'Permanent Marker', cursive;
+    font-size: 2.5em;
+  }
+
+
+  @media screen and (max-width: 640px) {
+    .rangeRover {
+       margin-left: 3em ;
+    }
+  }
+
+.tex{
+  font-family: 'Maven Pro', sans-serif;
+}
+
+.dessert{
+  margin-top: 0.7em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+

angular-client/src/app/components/home/home.component.spec.ts

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

angular-client/src/app/components/home/home.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from "@angular/platform-browser";
+const imgRange = "assets/img/concours/range.png";
+const imgReduction = "assets/img/concours/70.png";
+const imgBurger = "assets/img/concours/burger2.png";
+const imgDessert = "assets/img/concours/dessert5.png";
+const imgMenuJour = "assets/img/concours/menu-jour.png";
+const imgMenuChoix = "assets/img/concours/menu-choix.png";
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor( private domSanitizer: DomSanitizer, ) { }
+
+  ngOnInit(): void {
+  }
+  
+  getImgRange(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgRange)
+  }
+
+  getDessert(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgDessert)
+  }
+
+  getBurger(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgBurger)
+  }
+
+  getMenuJour(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgMenuJour)
+  }
+
+  getMenuChoix(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgMenuChoix)
+  }
+
+  getReduction(){
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(imgReduction)
+  }
+
+}

angular-client/src/app/components/login/login.component.html

@@ -0,0 +1,83 @@
+<div class="container navtop">
+
+
+  <div class="row justify-content-center">
+ 
+    
+    <mat-card class="col-11 col-lg-5" style="border-radius: 10px;">
+      <mat-progress-bar class="col-12" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+      <mat-card-content>
+        
+
+        <form [formGroup]="formGroup" (ngSubmit)="signIn()">
+          <h1 class="row justify-content-center"><b>Connexion</b></h1>
+
+          <div class="row justify-content-center mb-3">
+            <button mat-raised-button class="col-10 col-md-8 googlelogin" style="background-color: #DB4437; color: white;">
+              <div class="row mt-1 ml-3">
+                <mat-icon class="ml-2" svgIcon="googleLogo"></mat-icon>
+                <p class="ml-2 marginButton">Se connecter avec Google</p>
+              </div>
+            </button>
+          </div>
+
+          <div class="row justify-content-center ">
+            <button mat-raised-button class="col-10 col-md-8 facebooklogin" style="background-color: #3b5998; color: white;">
+              <div class="row mt-1 ml-3">
+                <mat-icon class="ml-2" svgIcon="facebookLogo"></mat-icon>
+                <p class="ml-2 marginButton">Se connecter avec Facebook</p>
+              </div>
+            </button>
+          </div>
+
+          <div class="row mt-3 justify-content-center">
+            <div class="col-4">
+              <hr>
+            </div>
+            <div class="col-1">
+              <p>ou</p>
+            </div>
+            <div class="col-4">
+              <hr>
+            </div>
+          </div>
+
+
+          <div class="row justify-content-center">
+            <mat-form-field class="col-10">
+              <input matInput placeholder="Adresse email" formControlName="email" required>
+              <mat-error *ngIf="!formGroup.controls['email'].valid && formGroup.controls['email'].touched">
+                {{ getErrorEmail() }}
+              </mat-error>
+            </mat-form-field>
+          </div>
+          <div class="row justify-content-center">
+            <mat-form-field class="col-10">
+              <input matInput placeholder="Mot de passe" formControlName="password" [type]="hide ? 
+              'password' : 'text'" required>
+              <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 
+                'visibility'}}</mat-icon>
+              <mat-error *ngIf="!formGroup.controls['password'].valid && formGroup.controls['password'].touched">
+                {{ getErrorPassword() }}
+              </mat-error>
+            </mat-form-field>
+          </div>
+
+
+          <div class="row justify-content-center mt-3">
+            <button class="col-6 color-theme" mat-raised-button color="primary" type="submit">Se connecter</button>
+          </div>
+          <p class="row justify-content-center mt-3"> <a routerLink="/login/lost-password">Mot de passe oublié ?</a></p>
+          <p class="row justify-content-center">Vous n'avez pas encore de compte?<a class="ml-1" routerLink="/register"> Créer un compte</a></p>
+        </form>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+
+  
+  
+
+
+
+</div>

angular-client/src/app/components/login/login.component.scss

@@ -0,0 +1,16 @@
+.navtop{
+    margin-top: 7em;
+    margin-bottom: 3em;
+  }
+ 
+  .facebooklogin{
+    margin-bottom: -0.5em !important;
+  }
+  .googlelogin{
+    margin-bottom: -0.5em !important;
+  }
+  .marginButton{
+    margin-bottom: 0em !important;
+  }
+
+ 

angular-client/src/app/components/login/login.component.spec.ts

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

angular-client/src/app/components/login/login.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DomSanitizer } from "@angular/platform-browser";
+import { MatIconRegistry } from '@angular/material/icon';
+import { AuthService } from 'src/app/services/auth.service'
+const googleLogoURL = "../assets/img/social/google+.svg";
+const facebookLogoURL = "../assets/img/social/facebook.svg";
+import {MatSnackBar} from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  constructor( public router: Router, public snackBar: MatSnackBar, private authService : AuthService, private formBuilder: FormBuilder, private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer)
+      { this.matIconRegistry.addSvgIcon("googleLogo", this.domSanitizer.bypassSecurityTrustResourceUrl(googleLogoURL)),
+    this.matIconRegistry.addSvgIcon("facebookLogo", this.domSanitizer.bypassSecurityTrustResourceUrl(facebookLogoURL))}
+
+    formGroup: FormGroup;
+    submitted = false;
+    loading = false;
+      hide =true;
+
+    
+
+  ngOnInit(): void {
+
+    this.createForm(); 
+  }
+
+  createForm() {
+    let emailregex: RegExp = /^(([^<>()\[\]\\.,;:\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,}))$/
+    this.formGroup = this.formBuilder.group({
+      email: [null, [Validators.required, Validators.pattern(emailregex)]],
+      password: [null, [Validators.required, this.checkPassword]],
+    });
+  }
+
+
+  checkPassword(control) {
+    let enteredPassword = control.value
+    let passwordCheck = /^(?=.*[a-z])(?=.{6,})/;
+    return (!passwordCheck.test(enteredPassword) && enteredPassword) ? { 'requirements': true } : null;
+  }
+
+
+  getErrorEmail() {
+    return this.formGroup.get('email').hasError('required') ? 'Adresse email requise' :
+      this.formGroup.get('email').hasError('pattern') ? 'Adresse email non valide' : '';
+  }
+
+  getErrorPassword() {
+    return this.formGroup.get('password').hasError('required') ? 'Mot de passe requis' :
+      this.formGroup.get('password').hasError('requirements') ? 
+      'Le mot de passe doit comporter au moins 8 caractères, une lettre majuscule' : '';
+  }
+
+  get f() { return this.formGroup.controls; }
+
+
+
+ // login
+   signIn(){
+
+    this.submitted = true;
+    if (this.formGroup.invalid) {
+      return;
+    }
+    this.loading = true;
+   this.authService.signIn(this.formGroup.value).subscribe(
+    data => {
+        // this.router.navigate([this.returnUrl]);
+        console.log(data)
+        this.loading = false;
+        this.router.navigate(['auth']);
+    },
+    err => {
+        this.loading = false;
+        console.log(err.error.message)
+        this.authService.openSnackBar(err.error.message)
+    });
+    // this.router.navigate(['/']);
+
+   
+   
+  }
+
+}

angular-client/src/app/components/login/lost-password/lost-password.component.html

@@ -0,0 +1,50 @@
+<div class="container navtop">
+
+
+    <div class="row justify-content-center">
+
+
+        <mat-card class="col-10 col-lg-7" style="border-radius:  30px;">
+            <mat-progress-bar class="col-12" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+            <mat-card-content>
+
+
+                <form [formGroup]="formGroup" (ngSubmit)="lostPassword()">
+                    <h1 class="row justify-content-center mt-2"><b>Mot de passe oublié ?</b></h1>
+
+
+                    <h3 class="text-center">Pas de problème ! Renseignez votre adresse e-mail ci-dessous, nous
+                        vous enverrons un lien pour réinitialiser votre mot de passe.</h3>
+
+
+
+
+                    <div class="row justify-content-center">
+                        <mat-form-field class="col-10">
+                            <input matInput placeholder="Adresse email" formControlName="email" required>
+                            <mat-error
+                                *ngIf="!formGroup.controls['email'].valid || formGroup.controls['email'].touched">
+                                {{ getErrorEmail() }}
+                            </mat-error>
+                        </mat-form-field>
+                    </div>
+
+
+
+                    <div class="row justify-content-center my-3">
+                        <button class="col-8 col-md-4 color-theme" mat-raised-button color="primary" type="submit">
+                            Envoyer</button>
+                    </div>
+
+                </form>
+            </mat-card-content>
+        </mat-card>
+
+    </div>
+
+
+
+
+
+
+</div>

angular-client/src/app/components/login/lost-password/lost-password.component.scss

@@ -0,0 +1,11 @@
+.navtop{
+    margin-top: 10em;
+    margin-bottom: 5.2em;
+  }
+ 
+
+  .marginButton{
+    margin-bottom: 0em !important;
+  }
+
+ 

angular-client/src/app/components/login/lost-password/lost-password.component.spec.ts

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

angular-client/src/app/components/login/lost-password/lost-password.component.ts

@@ -0,0 +1,82 @@
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmMessageComponent } from './../../shared/confirm-message/confirm-message.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from './../../../services/auth.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lost-password',
+  templateUrl: './lost-password.component.html',
+  styleUrls: ['./lost-password.component.scss']
+})
+export class LostPasswordComponent implements OnInit {
+
+  constructor(public router: Router, public snackBar: MatSnackBar, public dialog: MatDialog,
+    private authService: AuthService, private formBuilder: FormBuilder) { }
+
+  formGroup: FormGroup;
+  submitted = false;
+  loading = false;
+
+
+
+  ngOnInit(): void {
+    this.createForm();
+  }
+
+  createForm() {
+    let emailregex: RegExp = /^(([^<>()\[\]\\.,;:\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,}))$/
+    this.formGroup = this.formBuilder.group({
+      email: [null, [Validators.required, Validators.pattern(emailregex)]]
+    });
+  }
+
+
+  getErrorEmail() {
+    return this.formGroup.get('email').hasError('required') ? 'Adresse email requise' :
+      this.formGroup.get('email').hasError('pattern') ? 'Adresse email non valide' : '';
+  }
+
+
+  get f() { return this.formGroup.controls; }
+
+
+  // lost password
+  lostPassword() {
+
+    this.submitted = true;
+    if (this.formGroup.invalid) {
+      return;
+    }
+    this.loading = true;
+    this.authService.lostPassword(this.formGroup.value).subscribe(
+      data => {
+        this.loading = false;
+        this.openDialog(data)
+      },
+      err => {
+        this.loading = false;
+        this.authService.openSnackBar(err.error.message)
+      });
+  }
+
+
+  openDialog(data) {
+    const dialogRef =
+      this.dialog.open(ConfirmMessageComponent, {
+        width: '38%',
+        data: {
+          response: data
+        }
+      });
+    dialogRef.afterClosed().subscribe(() => {
+      this.router.navigate(['/login']);
+    });
+  }
+
+
+
+
+}

angular-client/src/app/components/login/reset-password/reset-password.component.html

@@ -0,0 +1,45 @@
+<div class="container navtop">
+
+    <div class="row justify-content-center">
+
+        <mat-card class="col-10 col-lg-7" style="border-radius:  30px;">
+            <mat-progress-bar class="col-12" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+            <mat-card-content>
+
+                <form [formGroup]="formGroup" (ngSubmit)="ResetPassword()">
+                    <h1 class="row justify-content-center mt-2"><b>Réinitialiser votre mot de passe</b></h1>
+
+                    <h3 class="text-center">Renseignez votre nouveau mot de passe ci-dessous.</h3>
+
+                    <div class="row justify-content-center">
+                        <mat-form-field class="col-10">
+                            <input matInput placeholder="Nouveau mot de passe" type="password" formControlName="password" required>
+                            <mat-error
+                                *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
+                                {{ getErrorPassword() }}
+                            </mat-error>
+                        </mat-form-field>
+                    </div>
+
+                    <div class="row justify-content-center">
+                        <mat-form-field class="col-10">
+                            <input matInput placeholder="Confirmer votre mot de passe" type="password" formControlName="confirmPassword" required>
+                            <mat-error
+                            *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
+                            {{ getErrorConfirmPassword() }}
+                        </mat-error>
+                        </mat-form-field>
+                    </div>
+
+                    <div class="row justify-content-center my-3">
+                        <button class="col-8 col-md-4 color-theme" mat-raised-button color="primary" type="submit">
+                            Envoyer</button>
+                    </div>
+
+                </form>
+            </mat-card-content>
+        </mat-card>
+
+    </div>
+
+</div>

angular-client/src/app/components/login/reset-password/reset-password.component.scss

@@ -0,0 +1,11 @@
+.navtop{
+    margin-top: 9em;
+    margin-bottom: 3.8em;
+  }
+ 
+
+  .marginButton{
+    margin-bottom: 0em !important;
+  }
+
+ 

angular-client/src/app/components/login/reset-password/reset-password.component.spec.ts

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

angular-client/src/app/components/login/reset-password/reset-password.component.ts

@@ -0,0 +1,119 @@
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmMessageComponent } from './../../shared/confirm-message/confirm-message.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AuthService } from './../../../services/auth.service';
+import { Validators, FormGroup, FormBuilder, FormControl } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+import { MustMatch } from '../../shared/validator/confirm-password.validator';
+
+
+
+@Component({
+  selector: 'app-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrls: ['./reset-password.component.scss']
+})
+export class ResetPasswordComponent implements OnInit {
+
+  constructor( public router: Router, public snackBar: MatSnackBar, private activatedRoute: ActivatedRoute, 
+    private authService : AuthService, private formBuilder: FormBuilder,  public dialog: MatDialog)
+      { }
+
+    formGroup: FormGroup;
+    submitted = false;
+    loading = false;
+    token ;
+
+    private subscription : any;
+
+
+  ngOnInit(): void {
+    this.createForm(); 
+    this.subscription = this.activatedRoute.params.subscribe( params => {
+      this.token = params.token
+     })
+  }
+
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  createForm() {
+   
+    this.formGroup = this.formBuilder.group({
+      password: ['', [Validators.required, this.checkPassword]],
+      confirmPassword:['', Validators.required]
+    }, {
+      validator: MustMatch('password', 'confirmPassword')
+  });
+}
+
+
+
+
+
+  checkPassword(control) {
+    let enteredPassword = control.value
+    let passwordCheck = /^(?=.*[a-z])(?=.{6,})/;
+    return (!passwordCheck.test(enteredPassword) && enteredPassword) ? { 'requirements': true } : null;
+  }
+
+  getErrorPassword() {
+    return this.formGroup.get('password').hasError('required') ? 'Mot de passe requis' :
+      this.formGroup.get('password').hasError('requirements') ? 
+      'Le mot de passe doit comporter au moins 8 caractères, une lettre majuscule' : '';
+  }
+
+
+  getErrorConfirmPassword() {
+    return this.formGroup.get('confirmPassword').hasError('required') ? 'Confirmation mot de passe requise' :
+      this.formGroup.hasError('MustMatch') ? 
+      '' : 'Les mots de passe saisis ne sont pas identiques';
+  }
+
+
+  
+  get f() { return this.formGroup.controls; }
+
+ 
+
+ // login
+   ResetPassword(){
+
+    this.submitted = true;
+    if (this.formGroup.invalid) {
+      return;
+    }
+    this.loading = true;
+    let data = {'password': this.formGroup.value.password, 'resetLink': this.token  }
+
+   this.authService.resetPassword(data).subscribe(
+    data => {
+        console.log(data)
+        this.loading = false;
+        this.openDialog(data)
+    },
+    err => {
+        this.loading = false;
+        this.authService.openSnackBar(err.error.message)
+    });
+
+  }
+
+  openDialog(data) {
+    const dialogRef =
+      this.dialog.open(ConfirmMessageComponent, {
+        width: '38%',
+        data: {
+          response: data
+        }
+      });
+    dialogRef.afterClosed().subscribe(() => {
+      this.router.navigate(['/login']);
+    });
+  }
+
+
+}

angular-client/src/app/components/register/register.component.html

@@ -0,0 +1,132 @@
+<div class="container navtop">
+
+
+    <div class="row justify-content-center">
+      <mat-card class="col-11 col-lg-7">
+        <mat-card-content>
+          <form [formGroup]="formGroup" (ngSubmit)="signUp()">
+            <mat-progress-bar class="row " *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+            <h1 class="row justify-content-center"><b>Inscription</b></h1>
+  
+            <div class="row justify-content-center ">
+              <button mat-raised-button class="col-10 col-lg-5 mr-lg-2 mb-2 googlelogin" style="background-color: #DB4437; color: white;">
+                <div class="row mt-1 ml-3">
+                  <mat-icon class="ml-2" svgIcon="googleLogo"></mat-icon>
+                  <p class="ml-2 marginButton">Se connecter avec Google</p>
+                </div>
+              </button>
+            
+              <button mat-raised-button class="col-10 col-lg-5 ml-lg-2 mb-2 facebooklogin" style="background-color: #3b5998; color: white;">
+                <div class="row mt-1 ml-3">
+                  <mat-icon class="ml-2" svgIcon="facebookLogo"></mat-icon>
+                  <p class="ml-2 marginButton">Se connecter avec Facebook</p>
+                </div>
+              </button>
+            </div>
+  
+            <div class="row  justify-content-center">
+              <div class="col-4">
+                <hr>
+              </div>
+              <div class="col-1">
+                <p>ou</p>
+              </div>
+              <div class="col-4">
+                <hr>
+              </div>
+            </div>
+            <div class="row justify-content-center">
+              <mat-form-field class="col-5">
+                <input matInput placeholder="Nom :" formControlName="lastname" required>
+                <mat-error *ngIf="!formGroup.controls['lastname'].valid || formGroup.controls['lastname'].touched">
+                  {{ getErrorLastname() }}
+                </mat-error>
+              </mat-form-field>
+              <mat-form-field class="col-5">
+                <input matInput placeholder="Prénom :" formControlName="firstname" required>
+                <mat-error *ngIf="!formGroup.controls['firstname'].valid || formGroup.controls['firstname'].touched">
+                  {{ getErrorFirstname() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+
+            <div class="row justify-content-center">
+              <mat-form-field class="col-10">
+                <input matInput placeholder="Numéro de téléphone :" formControlName="phonenumber" required>
+                <mat-error *ngIf="!formGroup.controls['phonenumber'].valid || formGroup.controls['phonenumber'].touched">
+                  {{ getErrorPhonenumber() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <div class="row justify-content-center">
+              <mat-form-field  class="col-10">
+                <mat-label>Date de naissance :</mat-label>
+                <input matInput [matDatepicker]="picker" disabled="true" [max]="maxDate" formControlName="birthday" (click)="picker.open()"  required>
+                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-datepicker touchUi disabled="false"  #picker></mat-datepicker>
+                <mat-error *ngIf="!formGroup.controls['birthday'].valid || formGroup.controls['birthday'].touched">
+                  {{ getErrorDate() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <div class="row justify-content-center">
+              <mat-form-field class="col-10">
+                <input matInput placeholder="Adresse :" formControlName="adress" required>
+                <mat-error *ngIf="!formGroup.controls['adress'].valid || formGroup.controls['adress'].touched">
+                  {{ getErrorAdress() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+  
+            <div class="row justify-content-center">
+              <mat-form-field class="col-10">
+                <input matInput placeholder="Adresse email :" formControlName="email" required>
+                <mat-error *ngIf="!formGroup.controls['email'].valid || formGroup.controls['email'].touched">
+                  {{ getErrorEmail() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <div class="row justify-content-center">
+              <mat-form-field class="col-10">
+                <input matInput placeholder="Mot de passe :" formControlName="password" [type]="hide ? 
+                'password' : 'text'" required>
+                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 
+                  'visibility'}}</mat-icon>
+                <mat-error *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
+                  {{ getErrorPassword() }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <div class="row justify-content-center">
+              <mat-form-field class="col-10">
+                <input matInput placeholder="Confirmer le mot de passe :" formControlName="confirmPassword"  [type]="hide ? 
+                'password' : 'text'" required>
+                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 
+                  'visibility'}}</mat-icon>
+                  <mat-error *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
+                  {{ getErrorConfirmPassword() }}
+              </mat-error>
+              </mat-form-field>
+            </div>
+
+  
+            <div class="row justify-content-center mt-3">
+              <button class="col-6 color-theme" mat-raised-button color="primary" type="submit">S'inscrire</button>
+            </div>
+            <p class="row justify-content-center mt-3">Vous avez un compte?<a class="ml-1" routerLink="/login">Se connecter</a></p>
+          </form>
+        </mat-card-content>
+      </mat-card>
+  
+      
+      
+  
+  
+    </div>
+  
+    
+    
+  
+  
+  
+  </div>

angular-client/src/app/components/register/register.component.scss

@@ -0,0 +1,8 @@
+.navtop{
+  margin-top: 7em;
+  margin-bottom: 3em;
+  }
+
+  .marginButton{
+    margin-bottom: 0em !important;
+  }