diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e7e52edb3be6d27dd87c88827df1c825b5ba2df8..52421ee7fc8bd49d4e838c61475e1bd0d6abdada 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,6 +5,7 @@ import { AuthGuard } from './guards/auth.guard'; import { HomeComponent } from './home/home.component'; import { LegalNoticeComponent } from './legal-notice/legal-notice.component'; import { ProfileComponent } from './profile/profile.component'; +import { ResetPasswordComponent } from './reset-password/reset-password.component'; import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component'; import { StructureListComponent } from './structure-list/structure-list.component'; import { UserVerificationComponent } from './user-verification/user-verification.component'; @@ -48,6 +49,10 @@ const routes: Routes = [ canActivate: [AuthGuard], component: ProfileComponent, }, + { + path: 'reset-password', + component: ResetPasswordComponent, + }, { path: '**', redirectTo: 'home', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bbbbb3cc5392a16acdf7fa4d2752a3dcf78097c1..b65276612431e4ad7f9611819a450f4fb8a6f71c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import { UserVerificationComponent } from './user-verification/user-verification import { AuthGuard } from './guards/auth.guard'; import { CustomHttpInterceptor } from './config/http-interceptor'; import { ProfileModule } from './profile/profile.module'; +import { ResetPasswordComponent } from './reset-password/reset-password.component'; @NgModule({ declarations: [ @@ -43,6 +44,7 @@ import { ProfileModule } from './profile/profile.module'; MenuPhoneComponent, FormComponent, UserVerificationComponent, + ResetPasswordComponent, ], imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule, ProfileModule], providers: [ diff --git a/src/app/reset-password/reset-password.component.html b/src/app/reset-password/reset-password.component.html new file mode 100644 index 0000000000000000000000000000000000000000..f9c3810a248f7332f14c2dc7e4049afd51d14537 --- /dev/null +++ b/src/app/reset-password/reset-password.component.html @@ -0,0 +1,66 @@ +<div fxLayout="column" class="content-container"> + <div class="section-container" fxLayout="column" fxLayoutAlign="center center"> + <h1>Réinitialisation du mot de passe</h1> + <form *ngIf="!token" [formGroup]="resetForm" (ngSubmit)="onSubmit()"> + <div class="form-group"> + <label for="email">Email</label> + <input + type="email" + autocomplete="on" + formControlName="email" + class="form-control" + [ngClass]="{ 'is-invalid': submitted && f.email.errors }" + /> + <div *ngIf="submitted && f.email.errors" class="invalid-feedback"> + <div *ngIf="f.email.errors.required">Email is required</div> + </div> + </div> + <div class="form-group"> + <button [disabled]="loading" class="btn btn-primary"> + <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span> + Envoyer + </button> + <a routerLink="../login" class="btn btn-link">Cancel</a> + </div> + </form> + <form *ngIf="token" [formGroup]="resetFormChangePassword" (ngSubmit)="onSubmitPassword()"> + <div class="form-group"> + <label for="password">Mot de passe</label> + <input + type="password" + autocomplete="on" + formControlName="password" + class="form-control" + [ngClass]="{ 'is-invalid': submitted && fPassword.password.errors }" + /> + <div *ngIf="submitted && fPassword.password.errors" class="invalid-feedback"> + <div *ngIf="fPassword.password.errors.required">Le mot de passe est obligatoire</div> + <div *ngIf="fPassword.password.errors.pattern"> + Le mot de passe doit avoir au minimun 8 caractères, une majuscule, une minuscule, un chiffre et un caractère + spécial. + </div> + </div> + </div> + <div class="form-group"> + <label for="confirmPassword">Confirmation du mot de passe</label> + <input + type="password" + autocomplete="on" + formControlName="confirmPassword" + class="form-control" + [ngClass]="{ 'is-invalid': submitted && fPassword.confirmPassword.errors }" + /> + <div *ngIf="submitted && fPassword.confirmPassword.errors" class="invalid-feedback"> + <div *ngIf="fPassword.confirmPassword.errors.required">La confirmation du mot de passe est obligatoire</div> + <div *ngIf="fPassword.confirmPassword.errors.mustMatch">Les mot de passe ne sont pas les mêmes</div> + </div> + </div> + <div class="form-group"> + <button [disabled]="loading" class="btn btn-primary"> + <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span> + Enregistrer + </button> + </div> + </form> + </div> +</div> diff --git a/src/app/reset-password/reset-password.component.spec.ts b/src/app/reset-password/reset-password.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..92e44ad4534e2126ee299a3dcfce553d9a95ea0f --- /dev/null +++ b/src/app/reset-password/reset-password.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResetPasswordComponent } from './reset-password.component'; + +describe('ResetPasswordComponent', () => { + let component: ResetPasswordComponent; + let fixture: ComponentFixture<ResetPasswordComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ResetPasswordComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ResetPasswordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..ed5a77541a12372197e202763e6216c12fb822eb --- /dev/null +++ b/src/app/reset-password/reset-password.component.ts @@ -0,0 +1,95 @@ +import { Component, OnInit } from '@angular/core'; +import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { AuthService } from '../services/auth.service'; +import { MustMatch } from '../shared/validator/form'; + +@Component({ + selector: 'app-reset-password', + templateUrl: './reset-password.component.html', +}) +export class ResetPasswordComponent implements OnInit { + public resetForm: FormGroup; + public resetFormChangePassword: FormGroup; + public token: string; + public loading = false; + public submitted = false; + + constructor( + private formBuilder: FormBuilder, + private authService: AuthService, + private router: Router, + private activatedRoute: ActivatedRoute + ) {} + + ngOnInit(): void { + this.activatedRoute.queryParams.subscribe((params) => { + this.token = params['token']; + }); + + this.initPasswordForm(); + this.resetForm = this.formBuilder.group({ + email: ['', Validators.required], + }); + } + + private initPasswordForm(): void { + this.resetFormChangePassword = this.formBuilder.group( + { + password: [ + '', + [Validators.required, Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/)], + ], + confirmPassword: [''], + }, + { validator: MustMatch('password', 'confirmPassword') } + ); + } + + // getter for form fields + get f(): { [key: string]: AbstractControl } { + return this.resetForm.controls; + } + + get fPassword(): { [key: string]: AbstractControl } { + return this.resetFormChangePassword.controls; + } + + public onSubmit(): void { + this.submitted = true; + + // stop here if form is invalid + if (this.resetForm.invalid) { + return; + } + + this.loading = true; + this.authService.resetPassword(this.f.email.value).subscribe( + () => { + this.router.navigate(['']); + }, + () => { + this.loading = false; + } + ); + } + + public onSubmitPassword(): void { + this.submitted = true; + + // stop here if form is invalid + if (this.resetFormChangePassword.invalid) { + return; + } + + this.loading = true; + this.authService.resetPasswordApply(this.token, this.fPassword.password.value).subscribe( + () => { + this.router.navigate(['']); + }, + () => { + this.loading = false; + } + ); + } +} diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 4f40f2c3de4bac22ba01f1723f73e3f9d68ce71b..4e98779cf926d18cb540833cd4a6341ed0cbff09 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -66,4 +66,15 @@ export class AuthService { params: { token }, }); } + + public resetPassword(email: string): Observable<any> { + return this.http.post(`api/users/reset-password`, { email }); + } + + public resetPasswordApply(token: string, password: string): Observable<any> { + return this.http.post(`api/users/reset-password/apply`, { + token, + password, + }); + } } diff --git a/src/app/shared/components/signup-modal/signup-modal.component.html b/src/app/shared/components/signup-modal/signup-modal.component.html index e12cffd1bb4d9ddf98e5be88099be372786c06c3..cf0a3fa0ada7f83d43ac102f4e11f41d0d98cdc0 100644 --- a/src/app/shared/components/signup-modal/signup-modal.component.html +++ b/src/app/shared/components/signup-modal/signup-modal.component.html @@ -40,6 +40,7 @@ </button> <button (click)="sendSwitchToSignIn()">Inscription</button> </div> + <a (click)="swithToResetPassword()">Mot de passe oublié</a> </form> </div> </div> diff --git a/src/app/shared/components/signup-modal/signup-modal.component.ts b/src/app/shared/components/signup-modal/signup-modal.component.ts index 1ef87d4d1f9ba8924e4642ec8a60bd5b3a834f56..3d70b98aeb373a6b83cd9679c00cec138305f346 100644 --- a/src/app/shared/components/signup-modal/signup-modal.component.ts +++ b/src/app/shared/components/signup-modal/signup-modal.component.ts @@ -48,6 +48,11 @@ export class SignUpModalComponent implements OnInit { this.closed.emit(false); } + public swithToResetPassword(): void { + this.closed.emit(true); + this.router.navigate(['/reset-password']); + } + public onSubmit(): void { this.submitted = true;