forgot-pwd + signup

src/app/pages/page-forgot-password/page-forgot-password.component.html

@@ -1,2 +1,23 @@
 <app-header></app-header>
+<div class="signin-form text-center">
+  <main class="form-forgot">
+    <form (ngSubmit)="onSubmit(forgotForm)" #forgotForm="ngForm">
+      <div class="form-floating">
+        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
+          [ngClass]="{'is-valid': forgotForm.form.touched && forgotForm.form.value['email'] != '' ,
+                                    'is-invalid': forgotForm.form.touched && forgotForm.form.value['email'] == ''}">
+        <label for="floatingInput">Adresse email</label>
+      </div>
+
+      <button class="w-100 btn btn-lg btn-success"  type="submit" [disabled]="forgotForm.invalid" routerLink="../reinitialisation-password"
+        routerLinkActive="active-custom">Ré-initialiser mon mot de passe</button>
+
+    </form>
+
+    <div *ngIf="errorForm">
+      <p class="text-danger">Il manque des informations dans le formulaire...</p>
+    </div>
+  </main>
+</div>
+
 

src/app/pages/page-forgot-password/page-forgot-password.component.scss

@@ -0,0 +1,25 @@
+.forgot-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-forgot {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+  .checkbox {
+    font-weight: 400;
+  }
+
+  .form-floating:focus-within {
+    z-index: 2;
+  }
+
+  input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

src/app/pages/page-forgot-password/page-forgot-password.component.ts

@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-page-forgot-password',
@@ -6,10 +14,25 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-forgot-password.component.scss']
 })
 export class PageForgotPasswordComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
+public errorForm: boolean;
+  constructor(private authService: AuthService, private router: Router) {
+     this.errorForm = false;
   }
 
+  ngOnInit(): void {}
+  public onSubmit(submittedForm: any): void {
+    console.log(submittedForm.form.value);
+    const email = submittedForm.form.value['email'];
+    if (email !== '') {
+      this.authService.forgotPassword(email).subscribe((resp) => {
+        console.log('Component : PageForgotPassword ', resp);
+        this.router.navigate(['reinitialisation-password']);
+      });
+    } else {
+      // afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
+
+
 }