Merge branch 'feat/change-email' into 'dev'

Feat : Change an email's account

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!44

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],

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],

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()">

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

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 });
+  }
 }

src/app/reset-email/reset-email.component.html

+<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>

src/app/reset-email/reset-email.component.spec.ts

+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();
+  });
+});

src/app/reset-email/reset-email.component.ts

+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;
+      }
+    );
+  }
+}