ajout champ confirmation email

.vscode/settings.json

+{
+    "python.pythonPath": "C:\\Users\\feliv\\anaconda3\\python.exe"
+}
\ No newline at end of file

src/app/signup/core/email.matcher.ts

+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material';
+
+// From: https://stackoverflow.com/a/51606362
+export class EmailErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);
+        return (control && control.dirty && invalidParent);
+    }
+}
\ No newline at end of file

src/app/signup/core/index.ts

@@ -3,3 +3,4 @@ export * from './registration.service';
 export * from './personnalData.model';
 export * from './personnalData.service';
 export * from './password.matcher';
+export * from './email.matcher';

src/app/signup/student-signup/student-signup.component.html

@@ -26,6 +26,15 @@
       </mat-hint>
     </mat-form-field>
 
+    <!-- Confirm Email -->
+    <mat-form-field class="full-width">
+      <input matInput type="email" formControlName="emailConfirm" placeholder="Confirmer l'adresse email"
+        [errorStateMatcher]="emailMatcher">
+      <mat-error *ngIf="formGroup.hasError('emailsDifferent')">
+        Les adresses emails doivent être identiques.
+      </mat-error>
+    </mat-form-field>
+
     <mat-form-field class="full-width">
       <input matInput type="tel" formControlName="phoneNumber" placeholder="Numéro de téléphone" required>
       <mat-hint>
@@ -46,7 +55,7 @@
     <!-- Confirm password -->
     <mat-form-field class="full-width">
       <input matInput type="password" formControlName="passwordConfirm" placeholder="Confirmer le mot de passe"
-        [errorStateMatcher]="matcher">
+        [errorStateMatcher]="passwordMatcher">
       <mat-error *ngIf="formGroup.hasError('passwordsDifferent')">
         Les mots de passe doivent être identiques.
       </mat-error>

src/app/signup/student-signup/student-signup.component.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material';
 import { Observable } from 'rxjs';
 import { tap, mergeMap } from 'rxjs/operators';
-import { Registration, RegistrationService, PasswordErrorStateMatcher,PersonnalData,PersonnalDataService } from '../core';
+import { Registration, RegistrationService, PasswordErrorStateMatcher, EmailErrorStateMatcher, PersonnalData, PersonnalDataService } from '../core';
 import { AuthService } from 'app/core';
 
 
@@ -52,7 +52,8 @@ export class StudentSignupComponent implements OnInit {
     { id: "no", name: "Non" },
   ]
 
-  matcher = new PasswordErrorStateMatcher();
+  passwordMatcher = new PasswordErrorStateMatcher();
+  emailMatcher = new EmailErrorStateMatcher();
 
   constructor(
     private registrationService: RegistrationService,
@@ -74,6 +75,7 @@ export class StudentSignupComponent implements OnInit {
       firstName: '',
       lastName: '',
       email: ['', Validators.email],
+      emailConfirm: '',
       phoneNumber: '',
       gender: '',
       adressNumber: '',
@@ -97,7 +99,7 @@ export class StudentSignupComponent implements OnInit {
       agree: [false, Validators.required],
       filledForm: false,
       acceptedConditions: false,
-    }, { validator: (group) => this.checkPasswords(group)},)
+    }, { validator: (group) => this.checkPasswords(group) && this.checkEmails(group) })
     console.log(this.formGroup.value.agree)
   }
 
@@ -106,6 +108,12 @@ export class StudentSignupComponent implements OnInit {
     const passwordConfirm = group.controls.passwordConfirm.value;
     return password === passwordConfirm ? null : { passwordsDifferent: true };
   }
+  private checkEmails(group: FormGroup): null | any {
+    const email = group.controls.email.value;
+    const emailConfirm = group.controls.emailConfirm.value;
+    return email === emailConfirm ? null : { emailsDifferent: true };
+  }
+
   toggleShowPersonnalDataForm() {
     this.showPersonnalDataForm = !this.showPersonnalDataForm;
   }
@@ -130,7 +138,8 @@ export class StudentSignupComponent implements OnInit {
         setTimeout(() => {
           this.router.navigate(['./membres'])
 
-        },3000)})
+        }, 3000)
+      })
 
     ).subscribe(
       () => { },