forgot-pwd + signup

package.json

@@ -25,7 +25,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.3",
+    "@angular-devkit/build-angular": "^13.1.4",
     "@angular/cli": "~13.0.3",
     "@angular/compiler-cli": "~13.0.0",
     "@types/jasmine": "~3.10.0",

src/app/app-routing.module.ts

@@ -26,7 +26,7 @@ const routes: Routes = [
   { path: 'password-oublie', component: PageForgotPasswordComponent },
   { path: 'menu', component: PageMenuSemaineComponent },
   { path: 'repertoire', component: PageRepertoireComponent },
-  { path: 'reinitialisation-password', component: PageResetPasswordComponent },
+  { path: 'reset-password', component: PageResetPasswordComponent },
   { path: 'creation-compte', component: PageSignupComponent },
   { path: 'to-do-list', component: PageToDoListComponent },
   { path: 'modifier-membre', component: PageUpdateMemberComponent },

src/app/models/membre.ts

@@ -1,10 +1,9 @@
 export interface Membre {
-  firstName: string;
-  lastName: string;
+  prenom : string;
+  nom: string;
   email: string;
   password: string;
   dateNaissance: Date;
-  teamName: string;
-  profil: boolean;
   passwordConfirm: string;
+  roleList: string[];
 }

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

src/app/pages/page-signup/page-signup.component.html

@@ -2,107 +2,77 @@
 <div class="signup-form text-center">
     <main class="form-signup">
         <form  (ngSubmit)="onSubmit()" [formGroup]="signupForm">
-            <h1>Merci de vous inscrire</h1>
+            <h1>Incrivez-vous !</h1>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputlastName" 
-                        placeholder="" 
-                        name="lastName" 
+                <input type="text"
+                        class="form-control"
+                        id="floatingInputlastName"
+                        placeholder=""
+                        name="lastName"
                         formControlName="lastNameFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['lastNameFc'].touched && signupForm.controls['lastNameFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['lastNameFc'].touched && signupForm.controls['lastNameFc'].valid,
                                     'is-invalid':  signupForm.controls['lastNameFc'].touched && !signupForm.controls['lastNameFc'].valid}">
                 <label for="floatingInputlastName">Nom</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputfirstName" 
-                        placeholder="" 
-                        name="firstName" 
+                <input type="text"
+                        class="form-control"
+                        id="floatingInputfirstName"
+                        placeholder=""
+                        name="firstName"
                         formControlName="firstNameFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['firstNameFc'].touched && signupForm.controls['firstNameFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['firstNameFc'].touched && signupForm.controls['firstNameFc'].valid,
                                     'is-invalid':  signupForm.controls['firstNameFc'].touched && !signupForm.controls['firstNameFc'].valid}">
                 <label for="floatingInputfirstName">Prénom</label>
             </div>
             <div class="form-floating">
-                <input type="date" 
-                        class="form-control" 
-                        id="floatingInputdateNaissance" 
-                        placeholder="" 
-                        name="dateNaissance" 
+                <input type="date"
+                        class="form-control"
+                        id="floatingInputdateNaissance"
+                        placeholder=""
+                        name="dateNaissance"
                         formControlName="dateNaissanceFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['dateNaissanceFc'].touched && signupForm.controls['dateNaissanceFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['dateNaissanceFc'].touched && signupForm.controls['dateNaissanceFc'].valid,
                                     'is-invalid':  signupForm.controls['dateNaissanceFc'].touched && !signupForm.controls['dateNaissanceFc'].valid}">
                 <label for="floatingInputfirstName">Date de naissance</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputteamName" 
-                        placeholder="" 
-                        name="teamName" 
-                        formControlName="teamNameFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['teamNameFc'].touched && signupForm.controls['teamNameFc'].valid, 
-                                    'is-invalid':  signupForm.controls['teamNameFc'].touched && !signupForm.controls['teamNameFc'].valid}">
-                <label for="floatingInputfirstName">Ma team</label>
-            </div>
-            <div class="form-floating">
-                <select type="text" 
-                        class="form-control" 
-                        id="floatingInputprofil" 
-                        name="profil" 
-                        formControlName="profilFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['profilFc'].touched && signupForm.controls['profilFc'].valid, 
-                                    'is-invalid':  signupForm.controls['profilFc'].touched && !signupForm.controls['profilFc'].valid}">
-                                <option>Adulte</option>
-                                <option>Enfant</option>
-                </select>
-                <label for="floatingInputfirstName">Profil</label>
-            </div>
-            <div class="form-floating">
-                <input type="email" 
-                        class="form-control" 
-                        id="floatingInput" 
-                        placeholder="" 
-                        name="email" 
+                <input type="email"
+                        class="form-control"
+                        id="floatingInput"
+                        placeholder=""
+                        name="email"
                         formControlName="emailFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['emailFc'].touched && signupForm.controls['emailFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['emailFc'].touched && signupForm.controls['emailFc'].valid,
                                     'is-invalid':  signupForm.controls['emailFc'].touched && !signupForm.controls['emailFc'].valid}">
                 <label for="floatingInput">Adresse email</label>
             </div>
             <div class="form-floating">
-                <input type="password" 
-                        class="form-control" 
-                        id="floatingPassword" 
-                        placeholder="" 
-                        name="password" 
+                <input type="password"
+                        class="form-control"
+                        id="floatingPassword"
+                        placeholder=""
+                        name="password"
                         formControlName="passwordFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['passwordFc'].touched && signupForm.controls['passwordFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['passwordFc'].touched && signupForm.controls['passwordFc'].valid,
                                     'is-invalid':  signupForm.controls['passwordFc'].touched && !signupForm.controls['passwordFc'].valid}">
                 <label for="floatingPassword">Mot de passe</label>
             </div>
             <div class="form-floating">
-                <input type="passwordConfirm" 
-                        class="form-control" 
-                        id="floatingpasswordConfirm" 
-                        placeholder="" 
-                        name="passwordConfirm" 
+                <input type="passwordConfirm"
+                        class="form-control"
+                        id="floatingpasswordConfirm"
+                        placeholder=""
+                        name="passwordConfirm"
                         formControlName="passwordConfirmFc"
-                        [ngClass]="{'is-valid' : signupForm.controls['passwordConfirmFc'].touched && signupForm.controls['passwordConfirmFc'].valid, 
+                        [ngClass]="{'is-valid' : signupForm.controls['passwordConfirmFc'].touched && signupForm.controls['passwordConfirmFc'].valid,
                                     'is-invalid':  signupForm.controls['passwordConfirmFc'].touched && !signupForm.controls['passwordConfirmFc'].valid}">
                 <label for="floatingPassword">Confirmer mot de passe</label>
             </div>
 
-            <button class="w-100 btn btn-lg btn-success" 
-                    type="submit" 
+            <button class="w-100 btn btn-lg btn-success"
+                    type="submit"
                     [disabled]="signupForm.invalid">Je m'inscris !</button>
-            <p>
-                Value : {{ signupForm.value | json }}
-            </p>
-            <p>
-                Form valid : {{ signupForm.valid }}
-            </p>
 
         </form>
     </main>

src/app/pages/page-signup/page-signup.component.ts

@@ -5,7 +5,7 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { Membre } from '../../models/membre';
 import { AuthService } from '../../services/auth.service';
 
@@ -31,8 +31,7 @@ export class PageSignupComponent implements OnInit {
         firstNameFc: new FormControl('', [Validators.required]),
         lastNameFc: new FormControl('', [Validators.required]),
         dateNaissanceFc: new FormControl('', [Validators.required]),
-        teamNameFc: new FormControl('', [Validators.required]),
-        profilFc: new FormControl('', [Validators.required]),
+        roleFc: new FormControl(''),
         emailFc: new FormControl('', [
           Validators.email,
           Validators.required,
@@ -56,29 +55,27 @@ export class PageSignupComponent implements OnInit {
   public onSubmit(): void {
     console.log('value : ', this.signupForm.value);
     console.log('form : ', this.signupForm);
-    const firstNameValue = this.signupForm.value['firstNameFc'];
-    const lastNameValue = this.signupForm.value['lastNameFc'];
+    const prenomValue = this.signupForm.value['firstNameFc'];
+    const nomValue = this.signupForm.value['lastNameFc'];
     const emailValue = this.signupForm.value['emailFc'];
     const passwordValue = this.signupForm.value['passwordFc'];
     const dateNaissanceValue = this.signupForm.value['dateNaissanceFc'];
-    const teamNameValue = this.signupForm.value['teamNameFc'];
-    const profilValue = this.signupForm.value['profilFc'];
     const passwordConfirmValue = this.signupForm.value['passwordConfirmFc'];
+    const roleValue = ['ROLE_PARENT'];
 
     const membre: Membre = {
-      firstName: firstNameValue,
-      lastName: lastNameValue,
+      prenom: prenomValue,
+      nom: nomValue,
       email: emailValue,
       password: passwordValue,
       dateNaissance: dateNaissanceValue,
-      teamName: teamNameValue,
-      profil: profilValue,
       passwordConfirm: passwordConfirmValue,
+      roleList: roleValue,
     };
 
     if (membre.email !== '' && membre.password !== '') {
       this.authService.signup(membre).subscribe((resp) => {
-        this.router.navigate(['account/signin']);
+        this.router.navigate(['accueil']);
       });
     } else {
       // affichage erreur

src/app/services/auth.service.ts

@@ -20,7 +20,7 @@ export class AuthService {
   signup(membre: Membre): Observable<any> {
     console.log(membre);
 
-    return this.http.post(`${this.apiUrl}/creation-compte`, membre);
+    return this.http.post(`${this.apiUrl}/membres/sign-up`, membre);
   }
 
   signin(email: string, password: string): Observable<any> {
@@ -35,7 +35,7 @@ export class AuthService {
     // - pour pouvoir stocker dans le localstorage notre accesstoken
     // - Sous la clé "TOKEN-LBP"
 
-    return this.http.post(`${this.apiUrl}/login`, body).pipe(
+    return this.http.post(`${this.apiUrl}/membres/sign-in`, body).pipe(
       map((x: any) => {
         console.log('Service : ', x.accessToken);
         // Modification à faire ici
@@ -45,14 +45,10 @@ export class AuthService {
     );
   }
 
-  forgotPassword(email: string, password: string): Observable<any> {
+  forgotPassword(email: string): Observable<any> {
     const body = {
       email: email,
-      password: password,
     };
-
-    console.log('Mon body : ', body);
-
-    return this.http.post(`${this.apiUrl}/forgot-psw`, body);
+    return this.http.post(`${this.apiUrl}/membres/forgot-password`, body);
   }
 }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:3306',
+  apiUrl: 'http://localhost:8088',
   tokenKey: 'TOKEN-ORGANIZEE',
 };