✨ mis en place de la feature pour le rappel de mot de passe

Author: mckenziearts

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

@@ -6,24 +6,30 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Mot de passe oublié?</h2
   </p>
 </div>
 
-<form action="#" method="POST" class="mt-8 space-y-6">
+<!-- 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">
   <div>
     <cosna-input-overlaping-label
       label="Adresse E-mail"
       name="email"
-      value=""
+      formControlName="email"
     ></cosna-input-overlaping-label>
   </div>
 
   <div class="flex items-center justify-end">
-    <cosna-button-primary type="submit">
+    <cosna-button-primary type="submit" class="justify-center" [loading$]="(loading$)">
       Envoyer le lien de réinitialisation
     </cosna-button-primary>
   </div>
 </form>
 
 <p class="mt-2 text-right">
-  <a routerLink="/auth/login" class="inline-flex items-center text-secondary-500 hover:text-secondary-600 hover:underline text-sm leading-5 font-medium">
+  <a routerLink="/auth/login" class="inline-flex items-center text-sm font-medium leading-5 text-secondary-500 hover:text-secondary-600 hover:underline">
       <svg class="w-5 h-5 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.75 15.75L3 12M3 12L6.75 8.25M3 12H21" />
       </svg>

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

@@ -1,13 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { forgotPasswordAction } from '../../store/auth.actions';
+import { selectError, selectLoading, selectMessage } from '../../store/auth.selectors';
 
 @Component({
   templateUrl: './forgot-password.component.html',
 })
 export class ForgotPasswordComponent implements OnInit {
+  public form: FormGroup = this.formBuilder.group({
+    email: ['', [Validators.required, Validators.email]],
+  });
+  public error$: Observable<string | null> = this.store.select(selectError);
+  public message$: Observable<string | null> = this.store.select(selectMessage);
+  public loading$: Observable<boolean> = this.store.select(selectLoading);
 
-  constructor() { }
+  constructor(private formBuilder: FormBuilder, private store: Store) { }
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+
+  public submit() {
+    if (this.form.valid) {
+      this.store.dispatch(forgotPasswordAction(this.form.getRawValue()));
+    }
   }
 
 }

src/app/modules/authentication/pages/login/login.component.html

@@ -41,7 +41,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
   </div>
 
   <div>
-    <cosna-button-primary type="submit" class="relative justify-center w-full group disabled:opacity-50 disabled:cursor-not-allowed" [loading$]="(loading$)">
+    <cosna-button-primary type="submit" class="justify-center w-full group" [loading$]="(loading$)">
       <span *ngIf="!(loading$ | async)" class="absolute inset-y-0 left-0 flex items-center pl-3">
         <svg class="w-5 h-5 text-primary-500 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C7.51472 1 5.5 3.01472 5.5 5.5V9H5C3.89543 9 3 9.89543 3 11V17C3 18.1046 3.89543 19 5 19H15C16.1046 19 17 18.1046 17 17V11C17 9.89543 16.1046 9 15 9H14.5V5.5C14.5 3.01472 12.4853 1 10 1ZM13 9V5.5C13 3.84315 11.6569 2.5 10 2.5C8.34315 2.5 7 3.84315 7 5.5V9H13Z" />

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

@@ -36,6 +36,22 @@ export class AuthEffects {
 
   forgotPasswordEffect = createEffect(() => this.actions$.pipe(
     ofType(AuthActions.forgotPasswordAction),
+    switchMap(({ email }: { email: string }) => 
+      this.authService.forgotPassword(email).pipe(
+        map(({ message }: { message: string }) => {
+          console.log(message);
+          return AuthActions.forgotPasswordSuccessAction({ message })
+        }),
+        catchError((error) => {
+          console.log(error);
+          return of(
+            AuthActions.forgotPasswordFailureAction({
+              error: error.error?.message ?? 'Unknown error occurred',
+            })
+          )
+        })
+      )
+    )
   ));
 
   resetPasswordEffect = createEffect(() => this.actions$.pipe(

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

@@ -58,6 +58,7 @@ export const authReducer = createReducer(
       return {
         ...state,
         isLoading: false,
+        error: null,
         message,
       }
     }
@@ -68,6 +69,7 @@ export const authReducer = createReducer(
       return {
         ...state,
         isLoading: false,
+        error: null,
         message,
         user,
       }