💄 Modal animations (also fixes lot of UI bugs w/ open/close & auth)

src/app/components/add-pin-popup/add-pin-popup.component.html

@@ -1,66 +1,55 @@
 <!-- Modal toggle -->
 <button
-  data-modal-target="authentication-modal"
-  data-modal-toggle="authentication-modal"
+  (click)="openPinModal()"
   class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
   type="button"
 >
   <p *ngIf="!isHomePage">Ajouter un pin</p>
 </button>
 
+<!-- Fond assombri -->
+<div
+  class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
+  [ngClass]="{'opacity-0 pointer-events-none': !isPinModalOpen, 'opacity-100': isPinModalOpen}"
+  (click)="closePinModal()"
+></div>
+
 <!-- Main modal -->
 <div
-  id="authentication-modal"
+  id="pin-modal"
   tabindex="-1"
   aria-hidden="true"
-  class="hidden overflow-auto absolute top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
+  [ngClass]="{
+    'opacity-0 scale-50 pointer-events-none': !isPinModalOpen,
+    'opacity-100 scale-100': isPinModalOpen
+  }"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
 >
   <div class="relative p-4 w-full max-w-xl max-h-full">
     <!-- Modal content -->
-    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out">
       <!-- Modal header -->
-      <div
-        class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
-      >
-        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-          Créer ton souvenir !
-        </h3>
+      <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Créer ton souvenir !</h3>
         <button
           type="button"
-          id="close-modal"
+          (click)="closePinModal()"
           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 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>
           <span class="sr-only">Fermer la modal</span>
         </button>
       </div>
+      
       <!-- Modal body -->
       <div class="p-4 md:p-5">
         <form class="grid gap-6 mb-1 md:grid-cols-2" [formGroup]="form">
           <div>
-            <label
-              for="title"
-              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >Titre</label
-            >
+            <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Titre</label>
             <input
-              type="title"
-              name="title"
+              type="text"
               id="title"
               formControlName="title"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
@@ -70,11 +59,7 @@
           </div>
 
           <div>
-            <label
-              for="localisation"
-              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >Localisation</label
-            >
+            <label for="localisation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Localisation</label>
             <input
               type="text"
               id="localisation"
@@ -84,31 +69,19 @@
               (focus)="onFocus()"
               (blur)="onBlur()"
             />
-            <ul
-              *ngIf="suggestions.length > 0 && inputFocused"
-              class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 mr-5 max-h-60 overflow-auto"
-            >
-              <li
-                *ngFor="let suggestion of suggestions"
-                (click)="selectSuggestion(suggestion)"
-                class="p-2 block mb-2 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer"
-              >
+            <ul *ngIf="suggestions.length > 0 && inputFocused" class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 mr-5 max-h-60 overflow-auto">
+              <li *ngFor="let suggestion of suggestions" (click)="selectSuggestion(suggestion)" class="p-2 block mb-2 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer">
                 {{ suggestion.display_name }}
               </li>
             </ul>
           </div>
 
           <div>
-            <app-drag-drop
-              (filesSelected)="onFilesReceived($event)"
-            ></app-drag-drop>
+            <app-drag-drop (filesSelected)="onFilesReceived($event)"></app-drag-drop>
           </div>
+
           <div>
-            <label
-              for="description"
-              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >Description</label
-            >
+            <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
             <textarea
               id="description"
               rows="4"
@@ -119,20 +92,12 @@
           </div>
 
           <div class="flex justify-between">
-            <button
-              type="reset"
-              data-modal-hide="authentication-modal"
-              class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
-            >
+            <button type="reset" (click)="closePinModal()" class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
               Annuler
             </button>
           </div>
           <div class="flex justify-between">
-            <button
-              type="submit"
-              (click)="submitForm()"
-              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"
-            >
+            <button type="submit" (click)="submitForm()" 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">
               Valider
             </button>
           </div>
@@ -140,4 +105,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -29,6 +29,7 @@ export class AddPinPopupComponent implements OnInit {
   inputFocused: boolean = false;
   @Input() isHomePage: boolean = false;
   files: any[] = [];
+  isPinModalOpen: boolean = false;
 
   constructor(
     private fb: FormBuilder,
@@ -100,17 +101,18 @@ export class AddPinPopupComponent implements OnInit {
       };
 
       this.addPinService.addPin(pinData).subscribe(() => {
-        this.closeModal();
+        this.closePinModal();
       });
     } else {
       console.error('Le formulaire est invalide');
     }
   }
 
-  private closeModal() {
-    const modal = document.getElementById('close-modal');
-    if (modal) {
-      modal.click();
-    }
+  openPinModal() {
+    this.isPinModalOpen = true;
+  }
+
+  closePinModal() {
+    this.isPinModalOpen = false;
   }
 }

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

@@ -1,23 +1,35 @@
 <!-- Modal toggle -->
 <button
-  data-modal-target="authentication-modal"
-  data-modal-toggle="authentication-modal"
+  (click)="openLoginModal()"
   class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
   type="button"
 >
   Connexion
 </button>
 
+<!-- Fond assombri -->
+<div
+  class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
+  [ngClass]="{'opacity-0 pointer-events-none': !isLoginModalOpen, 'opacity-100': isLoginModalOpen}"
+  (click)="closeLoginModal()"
+></div>
+
 <!-- 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 transition-opacity duration-300 ease-in-out"
+  [ngClass]="{
+    'opacity-0 scale-50 pointer-events-none': !isLoginModalOpen,
+    'opacity-100 scale-100': isLoginModalOpen
+  }"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform 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">
+    <div
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
+    >
       <!-- Modal header -->
       <div
         class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
@@ -27,9 +39,8 @@
         </h3>
         <button
           type="button"
-          id="close-login-modal"
+          (click)="closeLoginModal()"
           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"
@@ -60,7 +71,7 @@
             >
             <input
               formControlName="login"
-              type="login"
+              type="text"
               name="login"
               id="login"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
@@ -125,4 +136,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -1,4 +1,4 @@
-import { NgIf } from '@angular/common';
+import { CommonModule, NgIf } from '@angular/common';
 import { Component, Renderer2 } from '@angular/core';
 import {
   FormBuilder,
@@ -14,7 +14,7 @@ import { LoginService } from '../../services/login.service';
 
 @Component({
   selector: 'app-login-page',
-  imports: [FormsModule, ReactiveFormsModule, NgIf],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, CommonModule],
   templateUrl: './login-page.component.html',
   styleUrl: './login-page.component.css',
 })
@@ -22,6 +22,7 @@ export class LoginPageComponent {
   userForm: FormGroup;
   user: User = { login: '', password: '' };
   errorMessage: string = '';
+  isLoginModalOpen: boolean = false;
 
   constructor(
     private loginService: LoginService,
@@ -52,7 +53,7 @@ export class LoginPageComponent {
       next: (response) => {
         console.log('Connexion OK: ', response);
         this.localStorageService.setToken(response.access_token);
-        this.closeModal();
+        this.closeLoginModal();
         setTimeout(() => {
           this.router.navigate(['/map']);
         }, 1);
@@ -65,10 +66,11 @@ export class LoginPageComponent {
     });
   }
 
-  private closeModal() {
-    const modal = document.getElementById('close-login-modal');
-    if (modal) {
-      modal.click();
-    }
+  openLoginModal() {
+    this.isLoginModalOpen = true;
+  }
+
+  closeLoginModal() {
+    this.isLoginModalOpen = false;
   }
 }

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

@@ -1,7 +1,6 @@
 <!-- Modal toggle -->
 <button
-  data-modal-target="register-modal"
-  data-modal-toggle="register-modal"
+  (click)="openRegisterModal()"
   class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
   type="button"
 >
@@ -9,15 +8,27 @@
 </button>
 
 <!-- Main modal -->
+<div
+  class="fixed inset-0 z-40 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out"
+  [ngClass]="{'opacity-0 pointer-events-none': !isRegisterModalOpen, 'opacity-100': isRegisterModalOpen}"
+  (click)="closeRegisterModal()"
+></div>
+
 <div
   id="register-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"
+  [ngClass]="{
+    'opacity-0 scale-0 pointer-events-none': !isRegisterModalOpen,
+    'opacity-100 scale-100': isRegisterModalOpen
+  }"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform 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">
+    <div
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
+    >
       <!-- Modal header -->
       <div
         class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
@@ -27,9 +38,8 @@
         </h3>
         <button
           type="button"
-          id="close-register-modal"
+          (click)="closeRegisterModal()"
           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="register-modal"
         >
           <svg
             class="w-3 h-3"
@@ -60,7 +70,7 @@
             >
             <input
               formControlName="login"
-              type="login"
+              type="text"
               name="login"
               id="login"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
@@ -110,4 +120,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -6,10 +6,11 @@ import { FormGroup } from '@angular/forms';
 import { User } from '../../model/User';
 import { RegisterService } from '../../services/register.service';
 import { LocalStorageService } from '../../services/localstorage.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-register-page',
-  imports: [FormsModule, ReactiveFormsModule],
+  imports: [FormsModule, ReactiveFormsModule, CommonModule],
   templateUrl: './register-page.component.html',
   styleUrl: './register-page.component.css',
 })
@@ -17,6 +18,7 @@ export class RegisterPageComponent {
   userForm: FormGroup;
   user: User = { login: '', password: '' };
   errorMessage: string = '';
+  isRegisterModalOpen: boolean = false;
 
   constructor(
     private registerService: RegisterService,
@@ -60,25 +62,25 @@ export class RegisterPageComponent {
       .register(this.user.login, this.user.password)
       .subscribe({
         next: (response) => {
-          console.log('Connexion OK: ', response);
+          console.log('Register OK: ', response);
           this.localStorageService.setToken(response.access_token);
-          this.closeModal();
+          this.closeRegisterModal();
           setTimeout(() => {
             this.router.navigate(['/map']);
-            window.location.reload();
-          }, 500);
+          }, 1);
         },
         error: (response) => {
-          console.log('Connexion KO: ', response.error.detail);
+          console.log('Register KO: ', response.error.detail);
           this.errorMessage = response.error.detail;
         },
       });
   }
+  
+  openRegisterModal() {
+    this.isRegisterModalOpen = true;
+  }
 
-  private closeModal() {
-    const modal = document.getElementById('close-register-modal');
-    if (modal) {
-      modal.click();
-    }
+  closeRegisterModal() {
+    this.isRegisterModalOpen = false;
   }
 }