Skip to content
Snippets Groups Projects
Unverified Commit 22d0eddc authored by feli90's avatar feli90 Committed by GitHub
Browse files

Test new form (#70)


* Fix Oser to OSER (#55)

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* fix Oser to OSER

* Validated signup file display (#57)

* Modify inscription page (#32)

* modify the order of blocks

* Update dependencies and TravisCI build (#33)

* Update dependencies via a clean npm install

* Use Node.js 10 in Travis CI

* Specify node==10.x for Heroku

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* adds untested frontend support for showing validated status of signup file

* adds phone number validation for personnal data

* checks for year field in registration to display correct status

Co-authored-by: default avatarAurianeStrasser2 <32937502+AurianeStrasser2@users.noreply.github.com>
Co-authored-by: default avatarchiahetcho <44137047+chiahetcho@users.noreply.github.com>
Co-authored-by: default avatarFlorimond Manca <florimond.manca@gmail.com>
Co-authored-by: default avatarDylan Sechet <dylan.sechet82@gmail.com>

* Personnal data fix (#58)

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* adds some options and fixes wrong scholarship in the personnal data form

* adds info on phone number format (#61)

* Modify inscription page (#32)

* modify the order of blocks

* Update dependencies and TravisCI build (#33)

* Update dependencies via a clean npm install

* Use Node.js 10 in Travis CI

* Specify node==10.x for Heroku

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* Validated signup file display (#54)

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* adds untested frontend support for showing validated status of signup file

* adds phone number validation for personnal data

* checks for year field in registration to display correct status

* adds some options and fixes wrong scholarship in the personnal data form

* adds info on phone number format

Co-authored-by: default avatarAurianeStrasser2 <32937502+AurianeStrasser2@users.noreply.github.com>
Co-authored-by: default avatarchiahetcho <44137047+chiahetcho@users.noreply.github.com>
Co-authored-by: default avatarFlorimond Manca <florimond.manca@gmail.com>
Co-authored-by: default avatarDylan Sechet <dylan.sechet82@gmail.com>

* Update student-signup.component.html (#62)

* Improve error message (#63)

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* improves phone number validation format

* adds error message when email is already used and redirects after signup (#64)

* adds support for personnal data

* modifie le form pour inclure la nationalité

* supprime le gg form

* supprime le champ section et ajoute la liste des etablissements

* adapts for user

* adds validation and connects to students api for personnal data

* adds classType field and rgpd info

* corrects scholarships

* removes signup file tab

* minor presentation changes

* deletes random console.log

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* changes upload component declarations

* filters if the whole list is sent back

* adds message after personnal data modifications

* improves phone number validation format

* adds message when email already used and redirects after signup

* ajout champ confirmation email

* ajout champ confirmation email en changeant tout

* correction ERRROR due a la suppressiond es ficher email.matcher.ts et password.matcher.ts

* chgmt mineurs

* chgmt mineurs

* mise en commentaire de la condition sur le mdp

* mise en commentaire de "personnalDataService"

* ajout d'espaces sur html

Co-authored-by: default avatarArthur Guédon <60623551+arthurgdn@users.noreply.github.com>
Co-authored-by: default avatarAurianeStrasser2 <32937502+AurianeStrasser2@users.noreply.github.com>
Co-authored-by: default avatarchiahetcho <44137047+chiahetcho@users.noreply.github.com>
Co-authored-by: default avatarFlorimond Manca <florimond.manca@gmail.com>
Co-authored-by: default avatarDylan Sechet <dylan.sechet82@gmail.com>
Co-authored-by: default avatarfeli vigneau <feli.vigneau@student-cs.fr>
parent 05294cf2
Branches
No related tags found
1 merge request!75Authorize valid profile
{
"python.pythonPath": "C:\\Users\\feliv\\anaconda3\\python.exe"
}
\ No newline at end of file
......@@ -98,7 +98,6 @@ export class EditDataComponent implements OnInit {
personalPhone:[this.personalData.personalPhone,Validators.pattern("^([0-9]{2}[]?){5}$")],
parentsPhone:[this.personalData.parentsPhone,Validators.pattern("^([0-9]{2}[]?){5}$")],
parentsEmail:[this.personalData.parentsEmail,Validators.email],
school:this.personalData.school,
grade:this.personalData.grade,
......
import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
//from https://obsessiveprogrammer.com/validating-confirmation-fields-in-angular-reactive-forms-with-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: 'La forme de l\'adresse email doit être valide (username@domain)',
confirmEmail: 'Les adresses email doivent être identiques',
// password: 'Password must be between 7 and 15 characters, and contain at least one number and special character',
confirmPassword: 'Les mots de passe doivent être identiques'
};
\ No newline at end of file
......@@ -2,5 +2,4 @@ export * from './registration.model';
export * from './registration.service';
export * from './personnalData.model';
export * from './personnalData.service';
export * from './password.matcher';
// commentaire
\ No newline at end of file
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);
}
}
<app-form-page>
<form [formGroup]="formGroup" (ngSubmit)="submit()">
<!-- <form [formGroup]="formGroup" (ngSubmit)="submit()"> -->
<h1>Inscription</h1>
<!-- <h1>Inscription</h1>
<p>
Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
</p>
</p> -->
<!-- First name -->
<mat-form-field class="full-width">
<!-- <mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
</mat-form-field>
</mat-form-field> -->
<!-- Last name -->
<mat-form-field class="full-width">
<!-- <mat-form-field class="full-width">
<input matInput type="text" formControlName="lastName" placeholder="Nom" required>
</mat-form-field>
</mat-form-field> -->
<!-- Email -->
<mat-form-field class="full-width">
<!-- <mat-form-field class="full-width">
<input matInput type="email" formControlName="email" placeholder="Adresse email" required>
<mat-hint>
Elle te servira d'identifiant de connexion.
</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">
......@@ -36,17 +45,17 @@
<p>
Il ne te reste plus qu'à choisir un mot de passe. :-)
</p>
</p> -->
<!-- Password -->
<mat-form-field class="full-width">
<!-- <mat-form-field class="full-width">
<input matInput type="password" formControlName="password" placeholder="Mot de passe" required>
</mat-form-field>
</mat-form-field> -->
<!-- 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"
[errorStateMatcher]="matcher">
[errorStateMatcher]="passwordMatcher">
<mat-error *ngIf="formGroup.hasError('passwordsDifferent')">
Les mots de passe doivent être identiques.
</mat-error>
......@@ -60,9 +69,93 @@
</div>
<p class="text-center">{{error}}</p>
<p class="text-center">
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>
<!-- 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 class="full-width">
<input matInput placeholder="Adresse email *" type="email" formControlName="email">
<mat-hint>
Elle te servira d'identifiant de connexion.
</mat-hint>
<mat-error>
{{errors.email}}
</mat-error>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input matInput placeholder="Confirmer l'adresse email" type="email" formControlName="confirmEmail"
[errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmEmail}}
</mat-error>
</mat-form-field>
</div>
<mat-form-field class="full-width">
<input matInput type="tel" formControlName="phoneNumber" placeholder="Numéro de téléphone" required>
<mat-hint>
Il nous permettra de te contacter en cas de nécessité.
</mat-hint>
</mat-form-field>
<p>
Il ne te reste plus qu'à choisir un mot de passe. :-)
</p>
<!-- Password -->
<div formGroupName="passwordGroup">
<mat-form-field class="full-width">
<input matInput placeholder="Mot de passe *" type="password" formControlName="password">
<mat-error>
{{errors.password}}
</mat-error>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input matInput placeholder="Confirmer le mot de passe" 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>
</app-form-page>
......@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material';
import { Observable } from 'rxjs';
// import { Observable } from 'rxjs';
import { tap, mergeMap } from 'rxjs/operators';
import { Registration, RegistrationService, PasswordErrorStateMatcher,PersonnalData,PersonnalDataService } from '../core';
import { Registration, RegistrationService, PersonnalData, PersonnalDataService } from '../core';
import { CustomValidators, ConfirmValidParentMatcher, errorMessages } from '../core/customValidationModule';
import { AuthService } from 'app/core';
......@@ -13,10 +14,160 @@ import { AuthService } from 'app/core';
templateUrl: './student-signup.component.html',
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 {
registration: Registration;
personnalData: PersonnalData
personnalData: PersonnalData;
formGroup: FormGroup;
error: String;
loading = false;
......@@ -51,29 +202,36 @@ export class StudentSignupComponent implements OnInit {
{ id: "echelon6", name: "Oui, échelon 6" },
{ id: "no", name: "Non" },
]
confirmValidParentMatcher = new ConfirmValidParentMatcher(); //ajouté
matcher = new PasswordErrorStateMatcher();
errors = errorMessages; //ajouté
constructor(
private registrationService: RegistrationService,
private personnalDataService : PersonnalDataService,
// 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],
emailGroup: this.formBuilder.group({
email: ['', [
Validators.required,
Validators.email
]],
confirmEmail: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual }),
phoneNumber: '',
gender: '',
adressNumber: '',
......@@ -92,20 +250,20 @@ export class StudentSignupComponent implements OnInit {
motherActivity: '',
parentsStatus: '',
dependantsNumber: '',
password: '',
passwordConfirm: '',
passwordGroup: this.formBuilder.group({
password: ['', [
Validators.required,
// Validators.pattern(regExps.password) /si l'on veut ajouter une condition au mdp (en définissant regExps dans ../core/customValidationModule.ts)
]],
confirmPassword: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual }),
agree: [false, Validators.required],
filledForm: false,
acceptedConditions: false,
}, { validator: (group) => this.checkPasswords(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 };
}
//dernières lignes ajoutées (jusqu'au register):
toggleShowPersonnalDataForm() {
this.showPersonnalDataForm = !this.showPersonnalDataForm;
}
......@@ -124,13 +282,15 @@ export class StudentSignupComponent implements OnInit {
'OK',
{ duration: 3000 },
)),
tap(() => this.error = ""),
tap(() => this.loading = false),
tap(() => {
setTimeout(() => {
this.router.navigate(['./membres'])
},3000)})
}, 3000)
})
).subscribe(
() => { },
......@@ -143,6 +303,7 @@ export class StudentSignupComponent implements OnInit {
this.error = "Erreur, cet email est déjà utilisé !"
}
}
);
// this.personnalDataService.create(personnalData).pipe(
// tap(() => this.loading = false),
......@@ -152,4 +313,8 @@ export class StudentSignupComponent implements OnInit {
// (error) => this.loading = false,
// );
}
register(): void {
// API call to register your user
} //ajouté (inutile?)
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment