diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000000000000000000000000000000000..f7d4a644f1a97947833a2b3002a059072ac15458 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "python.pythonPath": "C:\\Users\\feliv\\anaconda3\\python.exe" +} \ No newline at end of file diff --git a/src/app/signup/core/email.matcher.ts b/src/app/signup/core/email.matcher.ts new file mode 100644 index 0000000000000000000000000000000000000000..1b3bd768aebb241213db530178d5fbe9d9f32aaa --- /dev/null +++ b/src/app/signup/core/email.matcher.ts @@ -0,0 +1,10 @@ +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 diff --git a/src/app/signup/core/index.ts b/src/app/signup/core/index.ts index 29d5d8235deb95cf8178b9c553beb5a6407e0c28..0d1f186bd09eef5bdee108d640c6aeb2e4ba67c3 100644 --- a/src/app/signup/core/index.ts +++ b/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'; diff --git a/src/app/signup/student-signup/student-signup.component.html b/src/app/signup/student-signup/student-signup.component.html index 31e460d98d2eb944c214c92d8d263b7074be2824..8f622cec5ca51f0140302f9af1b9342b4bd2ce19 100644 --- a/src/app/signup/student-signup/student-signup.component.html +++ b/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> @@ -37,7 +46,7 @@ <p> Il ne te reste plus qu'à choisir un mot de passe. :-) </p> - + <!-- Password --> <mat-form-field class="full-width"> <input matInput type="password" formControlName="password" placeholder="Mot de passe" required> @@ -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> diff --git a/src/app/signup/student-signup/student-signup.component.ts b/src/app/signup/student-signup/student-signup.component.ts index 398a968772ff0e1f237e32c0925fa3e8d572544e..5d127a5a5e5a57cfeb8872cc4b98f7ae3433c15e 100644 --- a/src/app/signup/student-signup/student-signup.component.ts +++ b/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'; @@ -23,45 +23,46 @@ export class StudentSignupComponent implements OnInit { public showPersonnalDataForm = false; public zipPattern = new RegExp(/^\d{5}(?:\d{2})?$/) public possibleParentsStatus = [ - {id:"maried",name:"Mariés"}, - {id:"divorced",name:"Divorcés"}, - {id:"cohabitation",name:"En concubinage"}, - {id:"monoparental",name:"Famille monoparentale"} + { id: "maried", name: "Mariés" }, + { id: "divorced", name: "Divorcés" }, + { id: "cohabitation", name: "En concubinage" }, + { id: "monoparental", name: "Famille monoparentale" } ] public possibleParentsActivities = [ - {id:"farmer",name:"Agriculteur"}, - {id:"artisan",name:"Artisan, commerçant, chef d'entreprise"}, - {id:"executive",name:"Cadre, profession intellectuelle supérieure"}, - {id:"teacher",name:"Enseignant et assimilé"}, - {id:"intermediate",name:"Profession intermédiaire"}, - {id:"employee",name:"Employé"}, - {id:"worker",name:"Ouvrier"}, - {id:"retreated",name:"Retraité"}, - {id:"inactive",name:"Inactif"}, - {id:"other",name:"Autre"} + { id: "farmer", name: "Agriculteur" }, + { id: "artisan", name: "Artisan, commerçant, chef d'entreprise" }, + { id: "executive", name: "Cadre, profession intellectuelle supérieure" }, + { id: "teacher", name: "Enseignant et assimilé" }, + { id: "intermediate", name: "Profession intermédiaire" }, + { id: "employee", name: "Employé" }, + { id: "worker", name: "Ouvrier" }, + { id: "retreated", name: "Retraité" }, + { id: "inactive", name: "Inactif" }, + { id: "other", name: "Autre" } ] public possibleScholarships = [ - {id:"echelon1",name:"Oui, échelon 1"}, - {id:"echelon2",name:"Oui, échelon 2"}, - {id:"echelon3",name:"Oui, échelon 3"}, - {id:"echelon4",name:"Oui, échelon 4"}, - {id:"echelon5",name:"Oui, échelon 5"}, - {id:"echelon6",name:"Oui, échelon 6"}, - {id:"no",name:"Non"}, + { id: "echelon1", name: "Oui, échelon 1" }, + { id: "echelon2", name: "Oui, échelon 2" }, + { id: "echelon3", name: "Oui, échelon 3" }, + { id: "echelon4", name: "Oui, échelon 4" }, + { id: "echelon5", name: "Oui, échelon 5" }, + { id: "echelon6", name: "Oui, échelon 6" }, + { id: "no", name: "Non" }, ] - matcher = new PasswordErrorStateMatcher(); + passwordMatcher = new PasswordErrorStateMatcher(); + emailMatcher = new EmailErrorStateMatcher(); constructor( private registrationService: RegistrationService, - private personnalDataService : PersonnalDataService, + private personnalDataService: PersonnalDataService, private formBuilder: FormBuilder, private router: Router, private auth: AuthService, private snackBar: MatSnackBar, - + ) { } ngOnInit() { @@ -69,35 +70,36 @@ export class StudentSignupComponent implements OnInit { } createForm() { - + this.formGroup = this.formBuilder.group({ firstName: '', lastName: '', email: ['', Validators.email], + emailConfirm: '', phoneNumber: '', - gender:'', - adressNumber:'', - street:'', - zipCode:['',Validators.pattern(this.zipPattern)], - city:'', - personnalPhone:'', - parentsPhone:'', - parentsEmail:['',Validators.email], - school:'', - grade:'', - section:'', - specialTeaching:'', - scholarship:'', - fatherActivity:'', - motherActivity:'', - parentsStatus:'', - dependantsNumber:'', + gender: '', + adressNumber: '', + street: '', + zipCode: ['', Validators.pattern(this.zipPattern)], + city: '', + personnalPhone: '', + parentsPhone: '', + parentsEmail: ['', Validators.email], + school: '', + grade: '', + section: '', + specialTeaching: '', + scholarship: '', + fatherActivity: '', + motherActivity: '', + parentsStatus: '', + dependantsNumber: '', password: '', passwordConfirm: '', agree: [false, Validators.required], filledForm: false, acceptedConditions: false, - }, { validator: (group) => this.checkPasswords(group)},) + }, { validator:[(group) => this.checkPasswords(group), (group)=>this.checkEmails(group)] }) console.log(this.formGroup.value.agree) } @@ -106,16 +108,18 @@ export class StudentSignupComponent implements OnInit { const passwordConfirm = group.controls.passwordConfirm.value; return password === passwordConfirm ? null : { passwordsDifferent: true }; } - toggleShowPersonnalDataForm(){ - this.showPersonnalDataForm = !this.showPersonnalDataForm; + private checkEmails(group: FormGroup): null | any { + const email = group.controls.email.value; + const emailConfirm = group.controls.emailConfirm.value; + return email === emailConfirm ? null : { emailsDifferent: true }; } + + submit() { this.loading = true; - const {email,firstName,lastName,phoneNumber} = this.formGroup.value - //const {gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber} = this.formGroup.value; - const registration: Registration = {email,firstName,lastName,phoneNumber}; - // const personnalData: PersonnalData = {gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber}; - + const { email, firstName, lastName, phoneNumber } = this.formGroup.value + const registration: Registration = { email, firstName, lastName, phoneNumber }; + const password: string = this.formGroup.controls.password.value; this.registrationService.create(registration, password).pipe( mergeMap(() => this.auth.login(registration.email, password)), @@ -124,25 +128,27 @@ export class StudentSignupComponent implements OnInit { 'OK', { duration: 3000 }, )), - tap(()=> this.error = ""), + tap(() => this.error = ""), tap(() => this.loading = false), tap(() => { - setTimeout(()=>{ + setTimeout(() => { this.router.navigate(['./membres']) - - },3000)}) - + + }, 3000) + }) + ).subscribe( - () => {}, - (error) => { - + () => { }, + (error) => { + - this.loading=false - - if(error.error.email){ + this.loading = false + + if (error.error.email) { this.error = "Erreur, cet email est déjà utilisé !" } - } + } + ); // this.personnalDataService.create(personnalData).pipe( // tap(() => this.loading = false),