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>