Merge branch 'Vincent' into dev

src/app/pages/models/user.ts

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

src/app/pages/signin/signin.component.html

@@ -1,13 +1,19 @@
 <div class="signin-form text-center">
   <main class="form-signin">
-    <img src="../../../assets/images-header/logo.png"><br>
-      <br><h5>Le bon plan pour manger</h5>
+      <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+      <h5>Merci de vous connecter</h5>
+      <img src="../../../assets/images-header/logo.png"><br>
+      <br>Le bon plan pour manger<br>
           <div class="form-floating">
               <input type="email"
                       class="form-control"
                       id="floatingInput"
                       placeholder=""
-                      name="email">
+                      name="email"
+                      ngModel
+                      required
+                      [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">
@@ -15,13 +21,27 @@
                       class="form-control"
                       id="floatingPassword"
                       placeholder=""
-                      name="password">
+                      name="password"
+                      ngModel
+                      required
+                      [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 type="submit">Connexion</button>
-
+          <button class="w-100 btn btn-lg btn-danger"
+                  type="submit"
+                  [disabled]="signinForm.invalid">Je me connecte !</button>
+                  <p>
+                      Form is dirty : {{ signinForm.form.dirty }}
+                  </p>
+                  <p>
+                      Form is touched : {{ signinForm.form.touched }}
+                  </p>
+      </form>
 
+      <div *ngIf="errorForm">
+          <p class="text-danger">Il manque des informations dans le formulaire...</p>
+      </div>
   </main>
 </div>
-

src/app/pages/signin/signin.component.scss

@@ -1,42 +1,37 @@
 .signin-form {
-  height: 50vh;
-  width: 80vh;
+  height: 100vh;
   padding-top: 40px;
-  margin-bottom: 40px;
   background-image: url(../../../assets/fond_signin.png);
-
+  background-position: center;
 }
 
 .form-signin {
-  width: 60%;
+  width: 500px;
   //max-width: 330px;
   padding: 15px;
   margin: auto;
   background-color: #f0f0f0;
   border-radius: 15px;
-
-
-
-  input[type="email"] {
-      //margin-top: 10px;
-      //border-bottom-right-radius: 0;
-      //border-bottom-left-radius: 0;
-      border-radius: 10px;
-      margin-bottom: 10px;
-      border-color: red;
-  }
-
-  input[type="password"] {
-      margin-bottom: 10px;
-      //border-top-left-radius: 0;
-      //border-top-right-radius: 0;
-      margin-top: 10px;
-      border-radius: 10px;
-      border-color: red;
-  }
-
-  button{
-    color: white;
-    background-color: red;
-  }
+  box-shadow: 10px 10px 10px grey;
+  margin-top: 25vh;
 }
+
+.form-floating:focus-within {
+  z-index: 2;
+}
+
+input[type="email"] {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-color: red;
+}
+
+input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-color: red;
+}
+

src/app/pages/signin/signin.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-signin',
@@ -6,10 +7,27 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./signin.component.scss']
 })
 export class SigninComponent implements OnInit {
-
-  constructor() { }
+  public errorForm: boolean;
+  constructor(private authService: AuthService) {
+    this.errorForm = false;
+   }
 
   ngOnInit(): void {
   }
 
+  public onSubmit(submittedForm: any): void {
+    console.log(submittedForm.form.value);
+    const email = submittedForm.form.value['email'];
+    const password = submittedForm.form.value['password'];
+    if(email !== '' && password !== '') {
+      this.authService.signin(email, password).subscribe(
+        resp => console.log('Component Page Signin: ', resp)
+      )
+    } else {
+      // afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
+
 }
+