authentification / signup /signin

src/app/components/signin/signin.component.html

@@ -1 +1,45 @@
-<p>signin works!</p>
+
+<div class="signin-form text-center">
+    <main class="form-signin">
+        <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+            <div class="form-floating">
+                <input type="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        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">
+                <input type="password" 
+                        class="form-control" 
+                        id="floatingPassword" 
+                        placeholder="" 
+                        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 class="w-100 btn btn-lg btn-success" 
+                    type="submit"
+                    [disabled]="signinForm.invalid">Se connecter</button>
+
+
+            <button class="w-100 btn btn-lg btn-success" 
+            routerLink="../creation-compte" routerLinkActive="active-custom"
+            >S'inscrire</button>
+
+        </form>
+
+        <div *ngIf="errorForm">
+            <p class="text-danger">Il manque des informations dans le formulaire...</p>
+        </div>
+    </main>
+</div>

src/app/components/signin/signin.component.scss

@@ -0,0 +1,31 @@
+.signin-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-signin {
+  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;
+  }
+
+  input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

src/app/components/signin/signin.component.ts

@@ -1,15 +1,38 @@
 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-signin',
   templateUrl: './signin.component.html',
-  styleUrls: ['./signin.component.scss']
+  styleUrls: ['./signin.component.scss'],
 })
 export class SigninComponent 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'];
+    const password = submittedForm.form.value['password'];
+    if (email !== '' && password !== '') {
+      this.authService.signin(email, password).subscribe((resp) => {
+        console.log('Component Signin: ', resp);
+        this.router.navigate(['tableau-de-bord']);
+      });
+    } else {
+      // afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
 }