isa44.74/organizee-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #59 from AlineRinquin/forgot-reset-password

Browse Source 
Forgot reset password
This commit is contained in:
AlineRinquin 2022-02-27 14:53:05 +01:00 committed by GitHub
commit 4aa5469a04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 195 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -36,7 +36,7 @@ const routes: Routes = [
{ path: 'password-oublie', component: PageForgotPasswordComponent },
{ path: 'menu', canActivate: [AuthGuard], component: PageMenuSemaineComponent },
{ path: 'repertoire', canActivate: [AuthGuard], component: PageRepertoireComponent },
{ path: 'reinitialisation-password', component: PageResetPasswordComponent },
{ path: 'reinitialisation-password/:uuid', component: PageResetPasswordComponent },
{ path: 'creation-compte', component: PageSignupComponent },
{ path: 'page-support', component: PageSupportComponent},
{ path: 'to-do-list', canActivate: [AuthGuard], component: PageToDoListComponent },

2
src/app/components/signin/signin.component.html
View File

@ -23,7 +23,7 @@
routerLinkActive="active-custom">S'inscrire</button>
</form>
<a routerLink="/password-oublie" routerLinkActive="active-custom" class="nav-link">password perdu ?</a>
<div *ngIf="errorForm">
<p class="text-danger">Il manque des informations dans le formulaire...</p>
</div>

16
src/app/pages/page-forgot-password/page-forgot-password.component.html
View File

@ -9,10 +9,22 @@
<label for="floatingInput">Adresse email</label>
</div>
<button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="forgotForm.invalid" routerLink="../reinitialisation-password"
routerLinkActive="active-custom">Ré-initialiser mon mot de passe</button>
<!-- <button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="forgotForm.invalid" routerLink="../reinitialisation-password"
routerLinkActive="active-custom">Ré-initialiser mon mot de passe</button> -->
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="forgotForm.invalid">
Ré-initialiser mon mot de passe
</button>
</form>
<br/> <br/>
<div *ngIf="isShow">
<div class="alert alert-{{alert.type}}" role="alert">
{{alert.content}}
</div>
</div>
<!--
<div *ngIf="errorForm">
<p class="text-danger">Il manque des informations dans le formulaire...</p>

67
src/app/pages/page-forgot-password/page-forgot-password.component.ts
View File

@ -7,6 +7,9 @@ import {
FormGroup,
Validators,
} from '@angular/forms';
import { Membre } from 'src/app/models/membre';
import { MailService } from 'src/app/services/mail.service';
import { Mail } from 'src/app/models/mail';
@Component({
selector: 'app-page-forgot-password',
@ -14,18 +17,76 @@ import {
styleUrls: ['./page-forgot-password.component.scss']
})
export class PageForgotPasswordComponent implements OnInit {
constructor(private authService: AuthService, private router: Router) {
alert : any;
isShow : boolean;
constructor(private authService: AuthService, private router: Router, private mailService: MailService,) {
this.alert = "";
this.isShow = false;
}
ngOnInit(): void {}
public onSubmit(submittedForm: any): void {
console.log(submittedForm.form.value);
const membre: Membre = {
nom: "",
prenom: "",
dateNaissance: new Date(),
email: submittedForm.form.value.email,
password: "",
roleList: ["ROLE_PARENT"],
couleur: "",
passwordConfirm: ""
};
console.log(membre);
// this.authService.forgotPassword(membre).subscribe((resp) => {
// console.log('----'+resp)
// });
this.authService.forgotPassword(membre).subscribe(
{
next: result => {
this.alert={"type":"success", "content":"Un mail à été envoyé !"};
this.isShow = true;
const mail: Mail = {
recipient: submittedForm.form.value.email,
subject: "Votre mot de passe Organizee",
//message: 'Votre mot de passe'
message: `
Bonjour!\n
Vous avez fait une demande de ré-initialisation de mot de passe. \n
Cliquez sur le lien pour définir un nouveau mot de passe: \n
Lien : http://192.168.1.16:4200/reinitialisation-password/${result}`
};
this.mailService.envoiMailText(mail)?.subscribe((respMail) =>{
console.log("Mail envoyé");
})
},
error: err => {
this.alert={"type":"danger", "content":"Le mail a merdé, ou il n'y a personne ds la bdd !"};
this.isShow = true;
},
complete: () => console.log('DONE!')
}
);
// service resetpassword
// creer un random et le mettre dans password
//service envoi de mail // envoyer un lien avec ce random
// nouveau formulaire de reset password
// update du password
// const email = submittedForm.form.value['email'];
// console.log(email);
window.alert("Vous allez recevoir un email pour re-initialiser votre mot de passe !")
//window.alert("Vous allez recevoir un email pour re-initialiser votre mot de passe !")
// this.router.navigate(['reinitialisation-password']);
}

44
src/app/pages/page-reset-password/page-reset-password.component.html
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>

86
src/app/pages/page-reset-password/page-reset-password.component.ts
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);
}
};
}
}

14
src/app/services/auth.service.ts
View File

@ -44,17 +44,13 @@ export class AuthService {
}
forgotPassword(email: string): Observable<any> {
const body = {
email: email,
};
return this.http.get(`${this.apiUrl}/membres/forgot-password`);
forgotPassword(membre: Membre): Observable<any> {
return this.http.post(`${this.apiUrl}/membres/forgot-password`, membre, {responseType: "text"});
}
resetPassword(email: string, password: string): Observable<any> {
const body = password;
console.log(password);
return this.http.put(`${this.apiUrl}/membres/reset-password/${email}`, body);
resetPassword(membre: Membre, uuid:string): Observable<any> {
console.log('--'+uuid+' / '+membre);
return this.http.put(`${this.apiUrl}/membres/reset-password/${uuid}`, membre);
}
creationTeam(team: Team): Observable<any> {

2
src/environments/environment.ts
View File

@ -4,7 +4,7 @@
export const environment = {
production: false,
apiUrl: 'http://localhost:8088',
apiUrl: 'http://localhost:8080',
tokenKey: 'TOKEN-ORGANIZEE',
};