From d7a6d363f87290177e164549abb46433e889b8a6 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Tue, 24 Mar 2026 11:35:26 +0100
Subject: [PATCH] added dynamic login page

---
 .../sign-on-form/sign-on-form.component.html  | 28 +++++++++++++++++++
 .../sign-on-form/sign-on-form.component.scss  | 28 +++++++++++++++++++
 .../sign-on-form/sign-on-form.component.ts    | 22 +++++++++++++++
 src/app/pages/login/login.component.html      | 28 +++++++++----------
 src/app/pages/login/login.component.ts        | 21 +++++++++-----
 5 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 src/app/components/sign-on-form/sign-on-form.component.html
 create mode 100644 src/app/components/sign-on-form/sign-on-form.component.scss
 create mode 100644 src/app/components/sign-on-form/sign-on-form.component.ts

diff --git a/src/app/components/sign-on-form/sign-on-form.component.html b/src/app/components/sign-on-form/sign-on-form.component.html
new file mode 100644
index 0000000..9390987
--- /dev/null
+++ b/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>
diff --git a/src/app/components/sign-on-form/sign-on-form.component.scss b/src/app/components/sign-on-form/sign-on-form.component.scss
new file mode 100644
index 0000000..f906115
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/app/components/sign-on-form/sign-on-form.component.ts b/src/app/components/sign-on-form/sign-on-form.component.ts
new file mode 100644
index 0000000..39d0d9c
--- /dev/null
+++ b/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]),
+  })
+}
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 6307a5c..a103755 100644
--- a/src/app/pages/login/login.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index f438501..249dd9c 100644
--- a/src/app/pages/login/login.component.ts
+++ b/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);
+        }
+    }
 }