Skip to content
Snippets Groups Projects
Commit 30600133 authored by felivigneau's avatar felivigneau
Browse files

ajout champ confirmation email en changeant tout

parent 9b27facd
No related branches found
No related tags found
2 merge requests!70Test new form,!71Add context sheet for visits, frontend
Show whitespace changes
Inline Side-by-side
src/app/signup/core/customValidationModule.ts 0 → 100644
+ 43
− 0
View file @ 30600133
import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
/**
* Custom validator functions for reactive form validation
*/
export class CustomValidators {
/**
* Validates that child controls in the form group are equal
*/
static childrenEqual: ValidatorFn = (formGroup: FormGroup) => {
const [firstControlName, ...otherControlNames] = Object.keys(formGroup.controls || {});
const isValid = otherControlNames.every(controlName => formGroup.get(controlName).value === formGroup.get(firstControlName).value);
return isValid ? null : { childrenNotEqual: true };
}
}
/**
* Custom ErrorStateMatcher which returns true (error exists) when the parent form group is invalid and the control has been touched
*/
export class ConfirmValidParentMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control.parent.invalid && control.touched;
}
}
/**
* Collection of reusable RegExps
*/
export const regExps: { [key: string]: RegExp } = {
password: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/
};
/**
* Collection of reusable error messages
*/
export const errorMessages: { [key: string]: string } = {
fullName: 'Full name must be between 1 and 128 characters',
email: 'Email must be a valid email address (username@domain)',
confirmEmail: 'Email addresses must match',
password: 'Password must be between 7 and 15 characters, and contain at least one number and special character',
confirmPassword: 'Passwords must match'
};
\ No newline at end of file
src/app/signup/core/email.matcher.ts deleted 100644 → 0
+ 0
− 10
View file @ 9b27facd
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/password.matcher.ts deleted 100644 → 0
+ 0
− 10
View file @ 9b27facd
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
// From: https://stackoverflow.com/a/51606362
export class PasswordErrorStateMatcher 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);
}
}
src/app/signup/student-signup/student-signup.component.html
+ 94
− 20
View file @ 30600133
<app-form-page> <app-form-page>
<form [formGroup]="formGroup" (ngSubmit)="submit()"> <!-- <form [formGroup]="formGroup" (ngSubmit)="submit()"> -->
<h1>Inscription</h1> <!-- <h1>Inscription</h1>
<p> <p>
Bienvenue ! Procédons à ton inscription sur l'espace lycéens. Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
</p> </p> -->
<!-- First name --> <!-- First name -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required> <input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
</mat-form-field> </mat-form-field> -->
<!-- Last name --> <!-- Last name -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="text" formControlName="lastName" placeholder="Nom" required> <input matInput type="text" formControlName="lastName" placeholder="Nom" required>
</mat-form-field> </mat-form-field> -->
<!-- Email --> <!-- Email -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="email" formControlName="email" placeholder="Adresse email" required> <input matInput type="email" formControlName="email" placeholder="Adresse email" required>
<mat-hint> <mat-hint>
Elle te servira d'identifiant de connexion. Elle te servira d'identifiant de connexion.
</mat-hint> </mat-hint>
</mat-form-field> </mat-form-field> -->
<!-- Confirm Email --> <!-- Confirm Email -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="email" formControlName="emailConfirm" placeholder="Confirmer l'adresse email" <input matInput type="email" formControlName="emailConfirm" placeholder="Confirmer l'adresse email"
[errorStateMatcher]="emailMatcher"> [errorStateMatcher]="emailMatcher">
<mat-error *ngIf="formGroup.hasError('emailsDifferent')"> <mat-error *ngIf="formGroup.hasError('emailsDifferent')">
...@@ -45,15 +45,15 @@ ...@@ -45,15 +45,15 @@
<p> <p>
Il ne te reste plus qu'à choisir un mot de passe. :-) Il ne te reste plus qu'à choisir un mot de passe. :-)
</p> </p> -->
<!-- Password --> <!-- Password -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="password" formControlName="password" placeholder="Mot de passe" required> <input matInput type="password" formControlName="password" placeholder="Mot de passe" required>
</mat-form-field> </mat-form-field> -->
<!-- Confirm password --> <!-- Confirm password -->
<mat-form-field class="full-width"> <!-- <mat-form-field class="full-width">
<input matInput type="password" formControlName="passwordConfirm" placeholder="Confirmer le mot de passe" <input matInput type="password" formControlName="passwordConfirm" placeholder="Confirmer le mot de passe"
[errorStateMatcher]="passwordMatcher"> [errorStateMatcher]="passwordMatcher">
<mat-error *ngIf="formGroup.hasError('passwordsDifferent')"> <mat-error *ngIf="formGroup.hasError('passwordsDifferent')">
...@@ -72,6 +72,80 @@ ...@@ -72,6 +72,80 @@
<p class="text-center"> <p class="text-center">
J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a> J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a>
</p> -->
<!-- </form> -->
<form [formGroup]="formGroup" novalidate>
<h1>Inscription</h1>
<p>
Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
</p> </p>
<!-- First name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
</mat-form-field>
<!-- Last name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="lastName" placeholder="Nom" required>
</mat-form-field>
<!-- Email -->
<div formGroupName="emailGroup">
<mat-form-field>
<input matInput placeholder="Email address" type="email" formControlName="email">
<mat-error>
{{errors.email}}
</mat-error>
</mat-form-field>
<br />
<mat-form-field>
<input matInput placeholder="Confirm email address" type="email" formControlName="confirmEmail"
[errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmEmail}}
</mat-error>
</mat-form-field>
</div>
<p>
Il ne te reste plus qu'à choisir un mot de passe. :-)
</p>
<!-- Password -->
<div formGroupName="passwordGroup">
<mat-form-field>
<input matInput placeholder="Password" type="password" formControlName="password">
<mat-error>
{{errors.password}}
</mat-error>
</mat-form-field>
<br />
<mat-form-field>
<input matInput placeholder="Confirm password" type="password" formControlName="confirmPassword"
[errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmPassword}}
</mat-error>
</mat-form-field>
</div>
<div class="text-center">
<button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">M'inscrire
<app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
</button>
</div>
<p class="text-center">
J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a>
</p>
</form> </form>
</app-form-page> </app-form-page>
\ No newline at end of file
src/app/signup/student-signup/student-signup.component.ts
+ 184
− 30
View file @ 30600133
...@@ -4,7 +4,8 @@ import { Router } from '@angular/router'; ...@@ -4,7 +4,8 @@ import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material'; import { MatSnackBar } from '@angular/material';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { tap, mergeMap } from 'rxjs/operators'; import { tap, mergeMap } from 'rxjs/operators';
import { Registration, RegistrationService, PasswordErrorStateMatcher, EmailErrorStateMatcher, PersonnalData, PersonnalDataService } from '../core'; import { Registration, RegistrationService, PersonnalData, PersonnalDataService } from '../core';
import { CustomValidators, ConfirmValidParentMatcher, regExps, errorMessages } from '../core/customValidationModule';
import { AuthService } from 'app/core'; import { AuthService } from 'app/core';
...@@ -13,10 +14,160 @@ import { AuthService } from 'app/core'; ...@@ -13,10 +14,160 @@ import { AuthService } from 'app/core';
templateUrl: './student-signup.component.html', templateUrl: './student-signup.component.html',
styleUrls: ['./student-signup.component.scss'] styleUrls: ['./student-signup.component.scss']
}) })
// export class StudentSignupComponent implements OnInit {
// registration: Registration;
// personnalData: PersonnalData
// formGroup: FormGroup;
// error: String;
// loading = false;
// 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" }
// ]
// 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" }
// ]
// 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" },
// ]
// passwordMatcher = new PasswordErrorStateMatcher();
// emailMatcher = new EmailErrorStateMatcher();
// constructor(
// private registrationService: RegistrationService,
// private personnalDataService: PersonnalDataService,
// private formBuilder: FormBuilder,
// private router: Router,
// private auth: AuthService,
// private snackBar: MatSnackBar,
// ) { }
// ngOnInit() {
// this.createForm();
// }
// 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: '',
// password: '',
// passwordConfirm: '',
// agree: [false, Validators.required],
// filledForm: false,
// acceptedConditions: false,
// }, { validator: (group) => this.checkPasswords(group) && this.checkEmails(group) })
// console.log(this.formGroup.value.agree)
// }
// private checkPasswords(group: FormGroup): null | any {
// const password = group.controls.password.value;
// 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;
// }
// 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 password: string = this.formGroup.controls.password.value;
// this.registrationService.create(registration, password).pipe(
// mergeMap(() => this.auth.login(registration.email, password)),
// tap(() => this.snackBar.open(
// `Ton compte a été créé ! Tu es maintenant connecté.`,
// 'OK',
// { duration: 3000 },
// )),
// tap(() => this.error = ""),
// tap(() => this.loading = false),
// tap(() => {
// setTimeout(() => {
// this.router.navigate(['./membres'])
// }, 3000)
// })
// ).subscribe(
// () => { },
// (error) => {
// 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),
// // tap(() => this.router.navigate(['/'])),
// // ).subscribe(
// // () => {},
// // (error) => this.loading = false,
// // );
// }
// }
export class StudentSignupComponent implements OnInit { export class StudentSignupComponent implements OnInit {
registration: Registration; registration: Registration;
personnalData: PersonnalData personnalData: PersonnalData;
formGroup: FormGroup; formGroup: FormGroup;
error: String; error: String;
loading = false; loading = false;
...@@ -51,9 +202,9 @@ export class StudentSignupComponent implements OnInit { ...@@ -51,9 +202,9 @@ export class StudentSignupComponent implements OnInit {
{ id: "echelon6", name: "Oui, échelon 6" }, { id: "echelon6", name: "Oui, échelon 6" },
{ id: "no", name: "Non" }, { id: "no", name: "Non" },
] ]
confirmValidParentMatcher = new ConfirmValidParentMatcher(); //ajouté
passwordMatcher = new PasswordErrorStateMatcher(); errors = errorMessages; //ajouté
emailMatcher = new EmailErrorStateMatcher();
constructor( constructor(
private registrationService: RegistrationService, private registrationService: RegistrationService,
...@@ -63,19 +214,24 @@ export class StudentSignupComponent implements OnInit { ...@@ -63,19 +214,24 @@ export class StudentSignupComponent implements OnInit {
private auth: AuthService, private auth: AuthService,
private snackBar: MatSnackBar, private snackBar: MatSnackBar,
) { } ) {
}
ngOnInit() { ngOnInit() {
this.createForm(); this.createForm();
} }
createForm() { createForm() {
this.formGroup = this.formBuilder.group({ this.formGroup = this.formBuilder.group({
firstName: '', firstName: '',
lastName: '', lastName: '',
email: ['', Validators.email], emailGroup: this.formBuilder.group({
emailConfirm: '', email: ['', [
Validators.required,
Validators.email
]],
confirmEmail: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual }),
phoneNumber: '', phoneNumber: '',
gender: '', gender: '',
adressNumber: '', adressNumber: '',
...@@ -94,26 +250,20 @@ export class StudentSignupComponent implements OnInit { ...@@ -94,26 +250,20 @@ export class StudentSignupComponent implements OnInit {
motherActivity: '', motherActivity: '',
parentsStatus: '', parentsStatus: '',
dependantsNumber: '', dependantsNumber: '',
password: '', passwordGroup: this.formBuilder.group({
passwordConfirm: '', password: ['', [
Validators.required,
Validators.pattern(regExps.password)
]],
confirmPassword: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual }),
agree: [false, Validators.required], agree: [false, Validators.required],
filledForm: false, filledForm: false,
acceptedConditions: false, acceptedConditions: false,
}, { validator: (group) => this.checkPasswords(group) && this.checkEmails(group) }) });
console.log(this.formGroup.value.agree)
}
private checkPasswords(group: FormGroup): null | any {
const password = group.controls.password.value;
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 };
} }
//dernières lignes ajoutées (jusqu'au register):
toggleShowPersonnalDataForm() { toggleShowPersonnalDataForm() {
this.showPersonnalDataForm = !this.showPersonnalDataForm; this.showPersonnalDataForm = !this.showPersonnalDataForm;
} }
...@@ -153,12 +303,16 @@ export class StudentSignupComponent implements OnInit { ...@@ -153,12 +303,16 @@ export class StudentSignupComponent implements OnInit {
} }
} }
); );
// this.personnalDataService.create(personnalData).pipe( this.personnalDataService.create(personnalData).pipe(
// tap(() => this.loading = false), tap(() => this.loading = false),
// tap(() => this.router.navigate(['/'])), tap(() => this.router.navigate(['/'])),
// ).subscribe( ).subscribe(
// () => {}, () => { },
// (error) => this.loading = false, (error) => this.loading = false,
// ); );
} }
register(): void {
// API call to register your user
} //ajouté (inutile?)
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment