added dynamic login page

src/app/pages/login/login.component.html

@@ -1,28 +1,28 @@
 <div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4">
     <img src="BeReady.png" alt="BeReady-Logo" class="w-1/3 max-w-xs">
 
-<!--    <p class="text-3xl font-extrabold text-center text-black">-->
-<!--        BeReady-->
-<!--    </p>-->
-
     <p class="text-gray-500 text-sm text-center w-3/5 leading-snug relative">
         Prêt à défier tes potes et prouver que t’es le meilleur ?
         <img src="blob.svg" class="absolute -top-150 -left-50 -right-50 max-w-[200vw] -z-1">
     </p>
 
-    <app-login-form class="mb-9"></app-login-form>
+    @if (authState()) {
+        <app-login-form class="mb-9"></app-login-form>
 
-    <ion-button class="w-10/12 mt-0 border-0" color="primary">
-        <p class="text-white font-bold m-0">Se connecter</p>
-    </ion-button>
+        <ion-button class="w-10/12 mt-0 border-0" color="primary">
+            <p class="text-white font-bold m-0">Se connecter</p>
+        </ion-button>
 
-    <div class="flex items-center w-10/12">
-        <div class="flex-1 border-b border-gray-400"></div>
-        <span class="px-2 text-gray-400 font-bold">ou</span>
-        <div class="flex-1 border-b border-gray-400"></div>
-    </div>
+        <div class="flex items-center w-10/12">
+            <div class="flex-1 border-b border-gray-400"></div>
+            <span class="px-2 text-gray-400 font-bold">ou</span>
+            <div class="flex-1 border-b border-gray-400"></div>
+        </div>
+    } @else {
+        <app-sign-on-form></app-sign-on-form>
+    }
 
-    <ion-button class="w-10/12 mt-0" color="secondary">
+    <ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()">
         <p class="text-black font-bold m-0">Créer un compte</p>
     </ion-button>
 </div>

src/app/pages/login/login.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {IonicModule} from "@ionic/angular";
 import {LoginFormComponent} from "../../components/login-form/login-form.component";
+import {SignOnFormComponent} from "../../components/sign-on-form/sign-on-form.component";
 
 @Component({
     selector: 'app-login',
@@ -8,13 +9,19 @@ import {LoginFormComponent} from "../../components/login-form/login-form.compone
     styleUrls: ['./login.component.scss'],
     imports: [
         IonicModule,
-        LoginFormComponent
+        LoginFormComponent,
+        SignOnFormComponent
     ]
 })
-export class LoginComponent  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
+export class LoginComponent {
+    authState = signal<boolean>(true)
 
+    createAccount(): void {
+        if (this.authState()) {
+            this.authState.set(false);
+        }else
+            if (this.authState() == false) {
+            this.authState.set(true);
+        }
+    }
 }