added dynamic login page

src/app/components/sign-on-form/sign-on-form.component.html

@@ -0,0 +1,28 @@
+<form [formGroup]="userForm">
+    <ion-item lines="none">
+        <ion-label position="stacked">Prénom</ion-label>
+        <ion-input placeholder="Prénom" formControlName="firstName"></ion-input>
+    </ion-item>
+
+    <ion-item lines="none">
+        <ion-label position="stacked">Nom</ion-label>
+        <ion-input placeholder="Nom de famille" formControlName="name"></ion-input>
+    </ion-item>
+
+    <ion-item lines="none">
+        <ion-label position="stacked">Pseudo</ion-label>
+        <ion-input placeholder="Nom d'utilisateur" formControlName="username"></ion-input>
+    </ion-item>
+
+    <ion-item lines="none">
+        <ion-label position="stacked">Adresse email</ion-label>
+        <ion-input placeholder="Email" formControlName="email"></ion-input>
+    </ion-item>
+
+    <ion-item lines="none">
+        <ion-label position="stacked">Mot de passe</ion-label>
+        <ion-input type="password" placeholder="MotDePasse1234" formControlName="password">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+    </ion-item>
+</form>

src/app/components/sign-on-form/sign-on-form.component.scss

@@ -0,0 +1,28 @@
+/* Style global des items */
+ion-item {
+  --background: #ffffff;
+  margin-bottom: 4px;
+}
+
+/* Label */
+ion-label {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+/* Input */
+ion-input{
+  --padding-start: 10px;
+  --padding-end: 10px;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  border: solid 1px #000;
+  border-radius: 10px;
+  font-size: 14px;
+}
+
+/* Button */
+ion-button:active {
+  transform: scale(0.98);
+}

src/app/components/sign-on-form/sign-on-form.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {IonicModule} from "@ionic/angular";
+
+@Component({
+  selector: 'app-sign-on-form',
+  templateUrl: './sign-on-form.component.html',
+  styleUrls: ['./sign-on-form.component.scss'],
+  imports: [
+    IonicModule,
+    ReactiveFormsModule
+  ]
+})
+export class SignOnFormComponent {
+  userForm: FormGroup = new FormGroup({
+    firstName: new FormControl<string>(null, [Validators.required]),
+    name: new FormControl<string>(null, [Validators.required]),
+    username: new FormControl<string>(null, [Validators.required]),
+    email: new FormControl<string>(null, [Validators.required]),
+    password: new FormControl<string>(null, [Validators.required]),
+  })
+}

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

@@ -1,15 +1,12 @@
 <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>
 
+    @if (authState()) {
         <app-login-form class="mb-9"></app-login-form>
 
         <ion-button class="w-10/12 mt-0 border-0" color="primary">
@@ -21,8 +18,11 @@
             <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 {
+export class LoginComponent {
-
+    authState = signal<boolean>(true)
-  constructor() { }
-
-  ngOnInit() {}
 
+    createAccount(): void {
+        if (this.authState()) {
+            this.authState.set(false);
+        }else
+            if (this.authState() == false) {
+            this.authState.set(true);
+        }
+    }
 }