signin + signup

db.json

@@ -6059,6 +6059,18 @@
       "email": "coco@mail.com",
       "password": "$2a$10$UdJi398SK6x93IFAWNbYK.KlhZ.20E6vF7v/Va1HplivYQWrMMl2G",
       "id": 2
+    },
+    {
+      "email": "julian@mail.com",
+      "password": "$2a$10$Zvontm1V.XFZRRR7wE6vnuFlRBknKOZEPKnI1sLKes4uSa8HM7ci6",
+      "id": 3
+    },
+    {
+      "email": "zfzz@efzefz.com",
+      "password": "$2a$10$KVxyOURcblApZM4QvdxbzeodcCm9y3sxJHTsEdiI/nNxK36mHIMQy",
+      "firstName": "zfzfz",
+      "lastName": "fzfzfz",
+      "id": 4
     }
   ]
 }

src/app/modules/account/account.module.ts

@@ -6,7 +6,7 @@ import { PageSigninComponent } from './pages/page-signin/page-signin.component';
 import { PageSignupnComponent } from './pages/page-signupn/page-signupn.component';
 import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 
 @NgModule({
@@ -19,7 +19,8 @@ import { FormsModule } from '@angular/forms';
   imports: [
     CommonModule,
     AccountRoutingModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule
   ]
 })
 export class AccountModule { }

src/app/modules/account/models/user.ts

@@ -0,0 +1,6 @@
+export interface User {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password?: string;
+}

src/app/modules/account/pages/page-signin/page-signin.component.html

@@ -1 +1,44 @@
-<p>page-signin works!</p>
+<!--********************************** 
+    Formulaire Signin : 
+    - champ email et password obligatoire
+    - bouton submit disable si le formulaire est invalid
+    - doit envoyer les données vers l'url /login 
+
+**********************************-->
+<div class="signin-form text-center">
+    <main class="form-signin">
+        <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+            <h1>Merci de vous connecter</h1>
+            <div class="form-floating">
+                <input type="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        name="email" 
+                        required ngModel
+                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' , 
+                                    'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
+                <label for="floatingInput">Adresse email</label>
+            </div>
+            <div class="form-floating">
+                <input type="password" 
+                        class="form-control" 
+                        id="floatingPassword" 
+                        placeholder="" 
+                        name="password"
+                        required ngModel
+                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' , 
+                                    'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
+                <label for="floatingPassword">Mot de passe</label>
+            </div>
+
+            <button class="w-100 btn btn-lg btn-success" 
+                    type="submit" [disabled]="signinForm.invalid">Je me connecte !</button>
+
+        </form>
+            
+        <div *ngIf="errorForm">
+            <p class="text-danger">Il manque des informations dans le formulaire...</p>
+        </div>
+    </main>
+</div>

src/app/modules/account/pages/page-signin/page-signin.component.scss

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

src/app/modules/account/pages/page-signin/page-signin.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-page-signin',
@@ -7,9 +8,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageSigninComponent implements OnInit {
 
-  constructor() { }
+  public errorForm: boolean;
+
+  constructor(
+    private authService: AuthService) { 
+      this.errorForm = false;
+    }
 
   ngOnInit(): void {
   }
 
+  onSubmit(objectForm: any): void {
+    console.log(objectForm.form.value);
+    const email = objectForm.form.value.email;
+    const password = objectForm.form.value.password;
+
+    if(email !== '' && password !== '') {
+      this.authService.signin(email, password).subscribe(
+        resp => console.log(resp)
+      );
+    } else {
+      //Afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
+
 }

src/app/modules/account/pages/page-signupn/page-signupn.component.html

@@ -1,18 +1,66 @@
 <div class="signup-form text-center">
     <main class="form-signup">
-        <form (ngSubmit)="onSubmit(signupForm)" #signupForm="ngForm">
+        <form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
             <h1>Merci de vous inscrire</h1>
             <div class="form-floating">
-                <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" required ngModel>
+                <input type="text" 
-                <label for="floatingInput">Adresse email</label>
+                        class="form-control" 
+                        id="floatingInputfirstName" 
+                        placeholder="" 
+                        name="firstName" 
+                        formControlName="firstNameFc"
+                        [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="password" class="form-control" id="floatingPassword" placeholder="" name="password"
+                <input type="text" 
-                    required ngModel>
+                        class="form-control" 
+                        id="floatingInputlastName" 
+                        placeholder="" 
+                        name="lastName" 
+                        formControlName="lastNameFc"
+                        [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="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        name="email" 
+                        formControlName="emailFc"
+                        [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 *ngIf="signupForm.controls['emailFc'].status == 'INVALID' &&
+                            signupForm.controls['emailFc'].touched == true"
+                    class="alert alert-danger">Champ obligatoire !</div> -->
+            </div>
+            <div class="form-floating">
+                <input type="password" 
+                        class="form-control" 
+                        id="floatingPassword" 
+                        placeholder="" 
+                        name="password" 
+                        formControlName="passwordFc"
+                        [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 *ngIf="signupForm.controls['passwordFc'].status == 'INVALID' &&
+                            signupForm.controls['passwordFc'].touched == true"
+                    class="alert alert-danger">Il faut au moins 8 caractères !</div> -->
             </div>
 
-            <button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="signupForm.invalid">Je m'inscris !</button>
+            <button class="w-100 btn btn-lg btn-success" 
+                    type="submit" 
+                    >Je m'inscris !</button>
+
         </form>
     </main>
 </div>

src/app/modules/account/pages/page-signupn/page-signupn.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
@@ -8,19 +10,53 @@ import { AuthService } from '../../services/auth.service';
 })
 export class PageSignupnComponent implements OnInit {
 
-  constructor(private authService: AuthService) { }
+  signupForm : FormGroup;
 
-  ngOnInit(): void {
+  constructor(
+      private authService: AuthService,
+      private router: Router
+    ) { 
+      this.signupForm = new FormGroup({});
     }
 
-  public onSubmit(objectForm: any): void {
+  ngOnInit(): void {
-    console.log(objectForm.form.value);
+    this.signupForm = new FormGroup({
-    const email = objectForm.form.value.email;
+      firstNameFc: new FormControl(''),
+      lastNameFc: new FormControl(''),
+      emailFc: new FormControl('', [Validators.required, Validators.email, Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/igm)]),
+      passwordFc: new FormControl('', [Validators.minLength(8), Validators.required])
+    });
+  }
+
+  public onSubmit(): void {
+    console.log("value : ", this.signupForm.value);
+    console.log(this.signupForm);
+    const firstName = this.signupForm.value['firstNameFc'];
+    const lastName = this.signupForm.value['lastNameFc'];
+    const email = this.signupForm.value['emailFc'];
+    const password = this.signupForm.value['passwordFc'];
+    const user = {
+      firstName: firstName,
+      lastName: lastName,
+      email: email,
+      password: password
+    }
+
+    if(email !== '' && password !== '') {
+      this.authService.signup(user).subscribe(
+        resp => {
+          this.router.navigate(['account/signin']);
+        }
+      )
+    } else {
+
+    }
+    /*const email = objectForm.form.value.email;
     const password = objectForm.form.value.password;
 
     this.authService.signup(email, password).subscribe(
       resp => console.log(resp)
-    );
+    );*/
   }
 
 }

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

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { User } from '../models/user';
 
 @Injectable({
   providedIn: 'root'
@@ -13,12 +14,25 @@ export class AuthService {
     this.apiUrl = environment.apiUrl;
    }
 
-   signup(email: string, password: string): Observable<any> {
+   signup(newUser: User): Observable<any> {
+    //  const body = {
+    //   firstName: firstName,
+    //   lastName: lastName,
+    //   email: email,
+    //   password: password
+    //  };
+
+    console.log("newUser : ", newUser);
+
+    return this.http.post(`${this.apiUrl}/register`, newUser);
+   }
+
+   signin(email: string, password: string): Observable<any> {
     const body = {
       email: email,
       password: password
     };
     
-    return this.http.post(`${this.apiUrl}/register`, body);
+    return this.http.post(`${this.apiUrl}/login`, body);
    }
 }