🚸 Improved login and registration modal

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

@@ -17,7 +17,7 @@
     '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"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out"
 >
   <div class="relative p-4 w-full max-w-md max-h-full">
     <!-- Modal content -->
@@ -29,7 +29,7 @@
         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">
-          Sign in to our platform
+          Se connecter à Memory Map
         </h3>
         <button
           type="button"
@@ -51,7 +51,7 @@
               d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
             />
           </svg>
-          <span class="sr-only">Close modal</span>
+          <span class="sr-only">Fermer la fenêtre</span>
         </button>
       </div>
       <!-- Modal body -->
@@ -61,7 +61,7 @@
             <label
               for="login"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >Your login</label
+              >Identifiant</label
             >
             <input
               formControlName="login"
@@ -69,7 +69,7 @@
               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"
-              placeholder="user"
+              placeholder="ex: captain24"
               required
             />
           </div>
@@ -77,7 +77,7 @@
             <label
               for="password"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >Your password</label
+              >Mot de passe</label
             >
             <input
               formControlName="password"
@@ -102,13 +102,13 @@
               <label
                 for="remember"
                 class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-                >Remember me</label
+                >Se souvenir de moi
-              >
+              </label>
             </div>
             <a
               href="#"
               class="text-sm text-blue-700 hover:underline dark:text-blue-500"
-              >Lost Password?</a
+              >Mot de passe oublié ?</a
             >
           </div>
           <div *ngIf="errorMessage" class="text-red-500 text-sm">
@@ -118,12 +118,14 @@
             (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
+            Se connecter
           </button>
           <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-            Not registered?
+            Vous n'êtes pas encore inscrit ?
-            <a href="#" class="text-blue-700 hover:underline dark:text-blue-500"
+            <a
-              >Create account</a
+              (click)="openRegisterModal()"
+              class="text-blue-700 hover:underline dark:text-blue-500"
+              >Créer un compte</a
             >
           </div>
         </form>

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

@@ -90,4 +90,9 @@ export class LoginPageComponent {
   closeLoginModal() {
     this.modalService.closeModal(this.modalId);
   }
+
+  openRegisterModal() {
+    this.modalService.closeModal(this.modalId);
+    this.modalService.openModal('register-modal');
+  }
 }

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

@@ -37,7 +37,7 @@
         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">
-          Formulaire d'inscription
+          S'inscrire à Memory Map
         </h3>
         <button
           type="button"
@@ -59,7 +59,7 @@
               d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
             />
           </svg>
-          <span class="sr-only">Close modal</span>
+          <span class="sr-only">Fermer la fenêtre</span>
         </button>
       </div>
       <!-- Modal body -->
@@ -122,6 +122,14 @@
           >
             Démarrer l'aventure !
           </button>
+          <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
+            Déjà un compte ?
+            <a
+              (click)="openLoginModal()"
+              class="text-blue-700 hover:underline dark:text-blue-500"
+              >Se connecter</a
+            >
+          </div>
         </form>
       </div>
     </div>

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

@@ -8,8 +8,10 @@ import {
   Validators,
 } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { User } from '../../model/User';
 import { LocalStorageService } from '../../services/local-storage/local-storage.service';
+import { ModalService } from '../../services/modal/modal.service';
 import { RegisterService } from '../../services/register/register.service';
 
 @Component({
@@ -22,11 +24,14 @@ export class RegisterPageComponent {
   user: User = { login: '', password: '' };
   errorMessage: string = '';
   isRegisterModalOpen: boolean = false;
+  modalId: string = 'register-modal';
+  private modalSub!: Subscription;
 
   constructor(
     private registerService: RegisterService,
     private fb: FormBuilder,
     private localStorageService: LocalStorageService,
+    private modalService: ModalService,
     private router: Router
   ) {
     this.userForm = this.fb.group(
@@ -45,6 +50,18 @@ export class RegisterPageComponent {
     );
   }
 
+  ngOnInit() {
+    this.modalSub = this.modalService
+      .getModalState(this.modalId)
+      .subscribe((open) => {
+        this.isRegisterModalOpen = open;
+      });
+  }
+
+  ngOnDestroy() {
+    this.modalSub.unsubscribe();
+  }
+
   passwordMatchValidator(formGroup: FormGroup) {
     const password = formGroup.get('password')?.value;
     const verifyPassword = formGroup.get('verifyPassword')?.value;
@@ -80,10 +97,15 @@ export class RegisterPageComponent {
   }
 
   openRegisterModal() {
-    this.isRegisterModalOpen = true;
+    this.modalService.openModal(this.modalId);
   }
 
   closeRegisterModal() {
-    this.isRegisterModalOpen = false;
+    this.modalService.closeModal(this.modalId);
+  }
+
+  openLoginModal() {
+    this.modalService.closeModal(this.modalId);
+    this.modalService.openModal('login-modal');
   }
 }