From c91cda15dc7c00220b910d122e2f65f40bb57e06 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 14 Dec 2020 17:39:19 +0100
Subject: [PATCH] feat: add password-reset handling
---
src/app/app-routing.module.ts | 5 +
src/app/app.module.ts | 2 +
.../reset-password.component.html | 66 +++++++++++++
.../reset-password.component.spec.ts | 25 +++++
.../reset-password.component.ts | 95 +++++++++++++++++++
src/app/services/auth.service.ts | 11 +++
.../signup-modal/signup-modal.component.html | 1 +
.../signup-modal/signup-modal.component.ts | 5 +
8 files changed, 210 insertions(+)
create mode 100644 src/app/reset-password/reset-password.component.html
create mode 100644 src/app/reset-password/reset-password.component.spec.ts
create mode 100644 src/app/reset-password/reset-password.component.ts
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e7e52edb3..52421ee7f 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 799d3b558..6c0a142cb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,6 +24,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: [
@@ -41,6 +42,7 @@ import { ProfileModule } from './profile/profile.module';
AboutComponent,
MenuPhoneComponent,
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 000000000..f9c3810a2
--- /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 000000000..92e44ad45
--- /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 000000000..ed5a77541
--- /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 4f40f2c3d..4e98779cf 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 e12cffd1b..cf0a3fa0a 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 1ef87d4d1..3d70b98ae 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;
--
GitLab