diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 52421ee7fc8bd49d4e838c61475e1bd0d6abdada..efacd3c848b600e4743d252025c6d9bee9c3fe48 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 { ResetEmailComponent } from './reset-email/reset-email.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'; @@ -44,6 +45,10 @@ const routes: Routes = [ path: 'users/verify/:id', component: UserVerificationComponent, }, + { + path: 'change-email/:id', + component: ResetEmailComponent, + }, { path: 'profile', canActivate: [AuthGuard], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b65276612431e4ad7f9611819a450f4fb8a6f71c..1a02174b10116efa3ecd4d721e85175b3d4acd57 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 { ResetEmailComponent } from './reset-email/reset-email.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; @NgModule({ @@ -44,6 +45,7 @@ import { ResetPasswordComponent } from './reset-password/reset-password.componen MenuPhoneComponent, FormComponent, UserVerificationComponent, + ResetEmailComponent, ResetPasswordComponent, ], imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule, ProfileModule], diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index 1a7ca9883fc528448dad988b6b2b1e23ae907cbc..d85790c5f574a43b2182dc6fd633eb638e176910 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -4,6 +4,25 @@ <div *ngIf="userProfile" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px"> <p>Id: {{ userProfile._id }}</p> <p>Email: {{ userProfile.email }}</p> + <button (click)="toogleChangeEmail()">Changer d'email</button> + <form + *ngIf="changeEmail" + fxLayout="column" + fxLayoutGap="10px" + [formGroup]="formEmail" + (ngSubmit)="onSubmitEmail()" + > + <div class="form-group"> + <label for="email">Email</label> + <input type="email" autocomplete="on" formControlName="email" class="form-control" /> + <div *ngIf="submitted" class="invalid-feedback"> + <app-validator-form [control]="formEmail.controls.email"></app-validator-form> + </div> + </div> + <div class="form-group"> + <button type="submit" [disabled]="loading" class="btn btn-primary">Appliquer</button> + </div> + </form> <button (click)="toogleChangePassword()">Changer de mot de passe</button> <form *ngIf="changePassword" fxLayout="column" fxLayoutGap="10px" [formGroup]="form" (ngSubmit)="onSubmit()"> diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index e22fff776015432069060bdb2ae221e83fc0fd78..f9183d465112cc9c5ee38ce693646df618ba93ee 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -15,6 +15,8 @@ export class ProfileComponent implements OnInit { public submitted = false; public changePassword = false; public loading = false; + public changeEmail = false; + public formEmail: FormGroup; constructor(private formBuilder: FormBuilder, private profileService: ProfileService) {} @@ -40,6 +42,9 @@ export class ProfileComponent implements OnInit { }, { validator: MustMatch('password', 'confirmPassword') } ); + this.formEmail = this.formBuilder.group({ + email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')]], + }); } // getter for form fields @@ -51,6 +56,26 @@ export class ProfileComponent implements OnInit { this.changePassword = !this.changePassword; } + public toogleChangeEmail(): void { + this.changeEmail = !this.changeEmail; + } + + public onSubmitEmail(): void { + this.submitted = true; + if (this.formEmail.invalid) { + return; + } + this.loading = true; + this.profileService.changeEmail(this.formEmail.value.email, this.userProfile.email).subscribe( + () => { + this.toogleChangeEmail(); + this.loading = false; + }, + (err) => { + this.loading = false; + } + ); + } public onSubmit(): void { this.submitted = true; // stop here if form is invalid diff --git a/src/app/profile/services/profile.service.ts b/src/app/profile/services/profile.service.ts index 0e1a65cf28b119a03a4b19debaee3a6543faedbd..ef4d4537a3f3267d23918e12c2a8218e5ecde3e5 100644 --- a/src/app/profile/services/profile.service.ts +++ b/src/app/profile/services/profile.service.ts @@ -18,4 +18,12 @@ export class ProfileService { public changePassword(newPassword: string, oldPassword: string): Observable<User> { return this.http.post<any>(`${this.baseUrl}/change-password`, { newPassword, oldPassword }); } + public verifyAndUpdateEmail(token: string): Observable<User> { + return this.http.post<any>(`${this.baseUrl}/verify-change-email`, null, { + params: { token }, + }); + } + public changeEmail(newEmail: string, oldEmail: string): Observable<User> { + return this.http.post<any>(`${this.baseUrl}/change-email`, { newEmail, oldEmail }); + } } diff --git a/src/app/reset-email/reset-email.component.html b/src/app/reset-email/reset-email.component.html new file mode 100644 index 0000000000000000000000000000000000000000..725a7a8f995d37e548b5fdaf77768f574a11f647 --- /dev/null +++ b/src/app/reset-email/reset-email.component.html @@ -0,0 +1,12 @@ +<div fxLayout="column" class="content-container"> + <div class="section-container" fxLayout="colum" fxLayoutAlign="center center"> + <p *ngIf="changeSuccess"> + Vous avez correctement changé votre email associé a votre compte. Vous pouvez désormais vous reconnecter avec + votre nouvel email + </p> + <p *ngIf="!changeSuccess"> + Une erreur est survenue lors de la validation du changement de votre email... Veuillez envoyer un mail au support. + </p> + <div></div> + </div> +</div> diff --git a/src/app/reset-email/reset-email.component.scss b/src/app/reset-email/reset-email.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/reset-email/reset-email.component.spec.ts b/src/app/reset-email/reset-email.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..126ebbac503a4ec775ad1dea0c0e06f4171c7344 --- /dev/null +++ b/src/app/reset-email/reset-email.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResetEmailComponent } from './reset-email.component'; + +describe('ResetEmailComponent', () => { + let component: ResetEmailComponent; + let fixture: ComponentFixture<ResetEmailComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ResetEmailComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ResetEmailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/reset-email/reset-email.component.ts b/src/app/reset-email/reset-email.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..0c92a21cad4b9d3490cc6540cc89c2c815a84b65 --- /dev/null +++ b/src/app/reset-email/reset-email.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ProfileService } from '../profile/services/profile.service'; +import { AuthService } from '../services/auth.service'; +@Component({ + selector: 'app-reset-email', + templateUrl: './reset-email.component.html', + styleUrls: ['./reset-email.component.scss'], +}) +export class ResetEmailComponent implements OnInit { + public token: string; + public changeSuccess = false; + constructor( + private activatedRoute: ActivatedRoute, + private profileService: ProfileService, + private authService: AuthService + ) { + this.token = this.activatedRoute.snapshot.paramMap.get('id'); + } + + ngOnInit(): void { + if (this.token) { + this.changeEmail(); + } + } + + private changeEmail(): void { + this.profileService.verifyAndUpdateEmail(this.token).subscribe( + () => { + this.changeSuccess = true; + this.authService.logout(); + }, + (err) => { + this.changeSuccess = false; + } + ); + } +}