added dynamic login page

2026-03-24 11:35:26 +01:00
parent 692e2aef82
commit d7a6d363f8
5 changed files with 106 additions and 21 deletions
@@ -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>
@@ -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);
+}
@@ -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]),
+  })
+}