Fix login page + connect with localstorage service

src/app/components/login-page/login-page.component.css

@@ -0,0 +1,9 @@
+#authentication-modal.show {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+
+#authentication-modal.hidden {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}

src/app/components/login-page/login-page.component.html

@@ -1,5 +1,3 @@
-
-
 <!-- Modal toggle -->
 <button data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
 type="button">
@@ -7,7 +5,7 @@ type="button">
 </button>
   
   <!-- Main modal -->
-  <div id="authentication-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div id="authentication-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-opacity duration-300 ease-in-out">
       <div class="relative p-4 w-full max-w-md max-h-full">
           <!-- Modal content -->
           <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
@@ -16,7 +14,7 @@ type="button">
                   <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                       Sign in to our platform
                   </h3>
-                  <button type="button" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="authentication-modal">
+                  <button type="button" id="close-login-modal" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="authentication-modal">
                       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                       </svg>
@@ -43,6 +41,9 @@ type="button">
                           </div>
                           <a href="#" class="text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</a>
                       </div>
+                      <div *ngIf="errorMessage" class="text-red-500 text-sm">
+                          {{ errorMessage }}
+                      </div>
                       <button (click)="login()" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login to your account</button>
                       <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
                           Not registered? <a href="#" class="text-blue-700 hover:underline dark:text-blue-500">Create account</a>
@@ -52,4 +53,3 @@ type="button">
           </div>
       </div>
   </div>
-  

src/app/components/login-page/login-page.component.ts

@@ -1,41 +1,63 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { LoginService } from '../../services/login.service';
 import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { FormGroup } from '@angular/forms';
 import { User } from '../../model/User';
+import { LocalStorageService } from '../../services/localstorage.service';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-login-page',
-  imports: [FormsModule, ReactiveFormsModule],
+  imports: [FormsModule, ReactiveFormsModule, NgIf],
   templateUrl: './login-page.component.html',
   styleUrl: './login-page.component.css'
 })
 export class LoginPageComponent {
   
   userForm: FormGroup;
-  user: User = {login: '', password: ''}
+  user: User = {login: '', password: ''};
+  errorMessage: string = '';
 
-  constructor(private loginService: LoginService, private fb: FormBuilder, private router: Router) {
+  constructor(private loginService: LoginService, private fb: FormBuilder, private router: Router, private localStorageService: LocalStorageService, private renderer: Renderer2) {
     this.userForm = this.fb.group({
       login: [this.user.login, [Validators.required, Validators.minLength(3)]],
       password: [this.user.password, [Validators.required, Validators.minLength(3)]],
     });
   }
 
-public login(){
+  public login(){
     if (this.userForm.invalid){
+      this.errorMessage = "Veuillez remplir tous les champs";
       return;
     }
 
-    let login = this.userForm.value.login;
+    this.user.login = this.userForm.value.login;
-    let password = this.userForm.value.password
+    this.user.password = this.userForm.value.password;
-
+
-    this.user.login = login;
+    this.loginService.login(this.user.login, this.user.password).subscribe({
-    this.user.password = password;
+      next: (response) => {
+        console.log("Connexion OK: ", response);
+        this.localStorageService.setToken(response.access_token);
+        this.closeModal();
+        setTimeout(() => {
+          this.router.navigate(['/map']);
+        }, 500);
+      },
+
+      error: (response) => {
+        console.log("Connexion KO: ", response.error.detail);
+        this.errorMessage = response.error.detail;
+      }
+    });
 
-    console.log(this.loginService.login(login,password));
+  }
 
+  private closeModal() {
+    const modal = document.getElementById('close-login-modal');
+    if (modal) {
+      modal.click();
+    }
   }
 }