✨ mis en place de la feature pour la reinitialisation du mot de passe

Author: mckenziearts

src/app/core/store/router.selectors.ts

@@ -1,3 +1,3 @@
 import { getSelectors } from '@ngrx/router-store';
 
-export const { selectRouteParams } = getSelectors();
+export const { selectRouteParams, selectQueryParams } = getSelectors();

src/app/modules/authentication/interfaces/credentials.interface.ts

@@ -1,4 +1,11 @@
 export interface Credentials {
   email: string;
   password: string;
+}
+
+export interface ResetPasswordCredentials {
+  email: string;
+  password: string;
+  password_confirmation: string;
+  token: string;
 }

src/app/modules/authentication/pages/reset-password/reset-password.component.html

@@ -6,16 +6,19 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Réinitialisation Mot de
   </p>
 </div>
 
-<form action="#" method="POST" class="mt-8 space-y-6">
-  <!-- Password Reset Token -->
-  <input type="hidden" name="token" value="token-url" />
+<!-- Session Status -->
+<cosna-success *ngIf="message$ | async; let message" [message]="message" class="mt-4"></cosna-success>
 
+<!-- Validation Errors -->
+<cosna-errors *ngIf="error$ | async; let error" [message]="error" class="mt-4"></cosna-errors>
+
+<form [formGroup]="form" (submit)="submit()" class="mt-8 space-y-6">
   <!-- Email Address -->
   <div>
     <cosna-input-overlaping-label
       label="Adresse E-mail"
       name="email"
-      value=""
+      formControlName="email"
     ></cosna-input-overlaping-label>
   </div>
 
@@ -24,7 +27,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Réinitialisation Mot de
     <cosna-input-overlaping-label
       label="Nouveau Mot de passe"
       name="password"
-      value=""
+      formControlName="password"
       [type]="'password'"
     ></cosna-input-overlaping-label>
   </div>
@@ -34,15 +37,15 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Réinitialisation Mot de
     <cosna-input-overlaping-label
       label="Confirmer Mot de passe"
       name="password_confirmation"
-      value=""
+      formControlName="password_confirmation"
       [type]="'password'"
     ></cosna-input-overlaping-label>
   </div>
 
   <div class="flex items-center justify-end">
-    <cosna-button-primary type="submit">
+    <cosna-button-primary type="submit" class="space-x-3" [loading$]="(loading$)">
       Réinitialiser Mot de passe
     </cosna-button-primary>
-</div>
+  </div>
 
 </form>

src/app/modules/authentication/pages/reset-password/reset-password.component.ts

@@ -1,13 +1,45 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { map, Observable } from 'rxjs';
+
+import {
+  selectError,
+  selectLoading,
+  selectMessage,
+  selectResetPasswordToken
+} from '../../store/auth.selectors';
+import { resetPasswordAction } from '../../store/auth.actions';
+import { PasswordRules } from '../../rules/password.rules';
 
 @Component({
   templateUrl: './reset-password.component.html',
 })
 export class ResetPasswordComponent implements OnInit {
+  public form: FormGroup = this.formBuilder.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(2)]],
+    password_confirmation: ['', [Validators.required, Validators.minLength(2)]],
+  }, { validators:  [PasswordRules.match('password', 'password_confirmation')] });
 
-  constructor() { }
+  public error$: Observable<string | null> = this.store.select(selectError);
 
-  ngOnInit(): void {
-  }
+  public message$: Observable<string | null> = this.store.select(selectMessage);
+
+  public loading$: Observable<boolean> = this.store.select(selectLoading);
+
+  public token$: Observable<string | null> = this.store.select(selectResetPasswordToken);
 
+  constructor(private formBuilder: FormBuilder, private store: Store) { }
+
+  ngOnInit(): void {}
+
+  public submit() {
+    if (this.form.valid) {
+      this.token$.pipe(map((token) => token)).subscribe((value) => {
+        let credentials = { ...this.form.getRawValue(), token: value };
+        this.store.dispatch(resetPasswordAction({ credentials }));
+      });
+    }
+  }
 }

src/app/modules/authentication/rules/password.rules.ts

@@ -0,0 +1,19 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+export class PasswordRules {
+  static match(controlName: string, checkControlName: string): ValidatorFn {
+    return (controls: AbstractControl) => {
+      const control = controls.get(controlName);
+      const checkControl = controls.get(checkControlName);
+      if (checkControl?.errors && !checkControl.errors['matching']) {
+        return null;
+      }
+      if (control?.value !== checkControl?.value) {
+        controls.get(checkControlName)?.setErrors({ matching: true });
+        return { matching: true };
+      } else {
+        return null;
+      }
+    };
+  }
+}

src/app/modules/authentication/services/auth.service.ts

@@ -2,9 +2,9 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
-import { AuthResponse, User } from '@app/modules/user/interfaces/user.interface';
-import { Credentials } from '../interfaces/credentials.interface';
 import { environment } from 'environments/environment';
+import { AuthResponse, User } from '@app/modules/user/interfaces/user.interface';
+import { Credentials, ResetPasswordCredentials } from '../interfaces/credentials.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -26,10 +26,10 @@ export class AuthService {
     );
   }
 
-  public resetPassword(email: string, password: string, confirmPassword: string): Observable<any> {
+  public resetPassword(credentials: ResetPasswordCredentials): Observable<any> {
     return this.http.post(
       `${environment.apiUrl}/reset-password`, 
-      { email, password, confirmPassword }
+      credentials
     );
   }
 

src/app/modules/authentication/store/auth.actions.ts

@@ -1,5 +1,5 @@
 import { createAction, props } from '@ngrx/store';
-import { Credentials } from '../interfaces/credentials.interface';
+import { Credentials, ResetPasswordCredentials } from '../interfaces/credentials.interface';
 
 import { User } from '@app/modules/user/interfaces/user.interface';
 
@@ -35,12 +35,12 @@ export const forgotPasswordFailureAction = createAction(
 
 export const resetPasswordAction = createAction(
   '[Auth] Reset Password',
-  props<{ email: string, password: string, confirmPassword: string }>()
+  props<{ credentials: ResetPasswordCredentials }>()
 );
 
 export const resetPasswordSuccessAction = createAction(
   '[Auth] Reset Password Success',
-  props<{ message: string, user: User }>()
+  props<{ message: string }>()
 );
 
 export const resetPasswordFailureAction = createAction(

src/app/modules/authentication/store/auth.effects.ts

@@ -6,7 +6,7 @@ import { catchError, map, switchMap } from 'rxjs/operators';
 
 import * as AuthActions from './auth.actions';
 import { AuthService } from '../services/auth.service';
-import { Credentials } from '../interfaces/credentials.interface';
+import { Credentials, ResetPasswordCredentials } from '../interfaces/credentials.interface';
 import { AuthResponse, User } from '@app/modules/user/interfaces/user.interface';
 import { AccessTokenService } from '../services/access-token.service';
 
@@ -38,12 +38,8 @@ export class AuthEffects {
     ofType(AuthActions.forgotPasswordAction),
     switchMap(({ email }: { email: string }) => 
       this.authService.forgotPassword(email).pipe(
-        map(({ message }: { message: string }) => {
-          console.log(message);
-          return AuthActions.forgotPasswordSuccessAction({ message })
-        }),
+        map(({ message }: { message: string }) => AuthActions.forgotPasswordSuccessAction({ message })),
         catchError((error) => {
-          console.log(error);
           return of(
             AuthActions.forgotPasswordFailureAction({
               error: error.error?.message ?? 'Unknown error occurred',
@@ -56,6 +52,18 @@ export class AuthEffects {
 
   resetPasswordEffect = createEffect(() => this.actions$.pipe(
     ofType(AuthActions.resetPasswordAction),
+    switchMap(({ credentials }: { credentials: ResetPasswordCredentials }) =>
+      this.authService.resetPassword(credentials).pipe(
+        map(({ message }: { message: string }) => AuthActions.resetPasswordSuccessAction({ message })),
+        catchError((error) => {
+          return of(
+            AuthActions.resetPasswordFailureAction({
+              error: error.error?.message ?? 'Unknown error occurred',
+            })
+          )
+        }
+      ))
+    )
   ));
 
   getCurrentUserEffect = createEffect(() => 

src/app/modules/authentication/store/auth.reducer.ts

@@ -65,13 +65,12 @@ export const authReducer = createReducer(
   ),
   on(
     AuthActions.resetPasswordSuccessAction,
-    (state: AuthState, { message, user }: { message: string, user: User }): AuthState => {
+    (state: AuthState, { message }: { message: string }): AuthState => {
       return {
         ...state,
         isLoading: false,
         error: null,
         message,
-        user,
       }
     }
   ),

src/app/modules/authentication/store/auth.selectors.ts

@@ -1,7 +1,9 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
+import { selectQueryParams } from '@app/core/store/router.selectors';
 import { AuthState } from '../interfaces/state.interface';
 import { authFeatureKey } from './auth.reducer';
+import { Params } from '@angular/router';
 
 const authSelectorFeature = createFeatureSelector<AuthState>(authFeatureKey);
 
@@ -28,4 +30,9 @@ export const selectMessage = createSelector(
 export const selectLoading = createSelector(
   authSelectorFeature,
   (state: AuthState) => state.isLoading
+);
+
+export const selectResetPasswordToken = createSelector(
+  selectQueryParams,
+  (params: Params) => params['token']
 );