refacto forgot/reset password

This commit is contained in:
Hedi MJID 2022-02-26 19:23:13 +01:00
parent 9501ab5c47
commit 1d8eb27df0
8 changed files with 195 additions and 38 deletions

View file

@ -1,19 +1,45 @@
<app-header></app-header>
<div class="reset-form text-center">
<main class="form-reset">
<form (ngSubmit)="onSubmit(resetForm)" #resetForm="ngForm">
<form (ngSubmit)="onSubmit()" [formGroup]="resetForm">
<h3>Entrez ici votre email et votre nouveau mot de passe</h3>
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="" name="email" ngModel required
[ngClass]="{'is-valid': resetForm.form.touched && resetForm.form.value['email'] != '' ,
'is-invalid': resetForm.form.touched && resetForm.form.value['email'] == ''}">
<label for="floatingEmail">Email</label>
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder=""
name="password"
formControlName="passwordFc"
[ngClass]="{
'is-valid':
resetForm.controls['passwordFc'].touched &&
resetForm.controls['passwordFc'].valid,
'is-invalid':
resetForm.controls['passwordFc'].touched &&
!resetForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">MOT DE PASSE</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
required [ngClass]="{'is-valid': resetForm.form.touched && resetForm.form.value['password'] != '' ,
'is-invalid': resetForm.form.touched && resetForm.form.value['password'] == ''}">
<label for="floatingPassword">Mot de passe</label>
<input
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
name="passwordConfirm"
formControlName="passwordConfirmFc"
[ngClass]="{
'is-valid':
resetForm.controls['passwordConfirmFc'].touched &&
resetForm.controls['passwordConfirmFc'].valid,
'is-invalid':
resetForm.controls['passwordConfirmFc'].touched &&
!resetForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
</div>
<button class="w-100 btn btn-outline-success" type="submit" [disabled]="resetForm.invalid">Enregistrer</button>

View file

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Membre } from 'src/app/models/membre';
import { AuthService } from 'src/app/services/auth.service';
@ -9,20 +11,80 @@ import { AuthService } from 'src/app/services/auth.service';
styleUrls: ['./page-reset-password.component.scss']
})
export class PageResetPasswordComponent implements OnInit {
public resetForm: FormGroup;
uuid:string;
constructor(private authService: AuthService, private router: Router,private fb: FormBuilder, private activatedRoute: ActivatedRoute) {
this.resetForm = new FormGroup({});
this.uuid = this.activatedRoute.snapshot.params['uuid'];
}
constructor(private authService: AuthService, private router: Router,) { }
ngOnInit(): void {
this.resetForm = this.fb.group(
{
passwordFc: new FormControl('', [
Validators.minLength(8),
Validators.required,
]),
passwordConfirmFc: new FormControl('', [
Validators.minLength(8),
Validators.required,
]),
},
{
validator: this.ConfirmedValidator('passwordFc', 'passwordConfirmFc'),
}
);
}
ngOnInit(): void { }
// public onSubmit(submittedForm: any): void {
// console.log(submittedForm.form.value);
// const password = submittedForm.form.value['password'];
// console.log(email);
// this.authService.resetPassword(email, password).subscribe((resp: any) => {
// window.alert("Votre mot de passe est bien ré-initialisé !")
// this.router.navigate(['accueil']);
public onSubmit(submittedForm: any): void {
console.log(submittedForm.form.value);
const password = submittedForm.form.value['password'];
const email = submittedForm.form.value['email'];
console.log(email);
this.authService.resetPassword(email, password).subscribe((resp: any) => {
window.alert("Votre mot de passe est bien ré-initialisé !")
this.router.navigate(['accueil']);
// });
// }
});
public onSubmit(): void {
console.log('value : ', this.resetForm.value);
console.log('form : ', this.resetForm);
const passwordValue = this.resetForm.value['passwordFc'];
const passwordConfirmValue = this.resetForm.value['passwordConfirmFc'];
const membre: Membre = {
nom: "",
prenom: "",
dateNaissance: new Date(),
email: "",
password: passwordValue,
roleList: ["ROLE_PARENT"],
couleur: "",
passwordConfirm: ""
};
this.authService.resetPassword(membre,this.uuid).subscribe((resp) => {
//this.router.navigate(['accueil']);
});
}
ConfirmedValidator(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (
matchingControl.errors &&
!matchingControl.errors['confirmedValidator']
) {
return;
}
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ confirmedValidator: true });
} else {
matchingControl.setErrors(null);
}
};
}
}