Implemented form to update profile and fixed labels in sign on form

src/app/components/modal/modal.component.html

@@ -1,3 +1,3 @@
-<div class="fixed inset-0 z-50 bg-[#f7f6f2] animate-slide-in ion-padding">
+<div class="fixed inset-0 z-50 bg-[#f7f6f2] animate-slide-in ion-padding mt-10">
     <ng-content></ng-content>
 </div>

src/app/components/profil-form/profil-form.component.html

@@ -0,0 +1,25 @@
+<div class="bg-white rounded-2xl p-2">
+    <form [formGroup]="profileForm">
+        <ion-item lines="none">
+            <ion-label position="stacked">Prénom  <ion-text color="danger">*</ion-text></ion-label>
+            <ion-input placeholder="Prénom" [clearInput]="true" formControlName="firstName"></ion-input>
+        </ion-item>
+
+        <ion-item lines="none">
+            <ion-label position="stacked">Nom  <ion-text color="danger">*</ion-text></ion-label>
+            <ion-input placeholder="Nom de famille" [clearInput]="true" formControlName="name"></ion-input>
+        </ion-item>
+
+        <ion-item lines="none">
+            <ion-label position="stacked">Pseudo  <ion-text color="danger">*</ion-text></ion-label>
+            <ion-input placeholder="Nom d'utilisateur" [clearInput]="true" formControlName="username"></ion-input>
+        </ion-item>
+
+        <ion-item lines="none">
+            <ion-label position="stacked">Adresse email  <ion-text color="danger">*</ion-text></ion-label>
+            <ion-input placeholder="Email" type="email" [clearInput]="true" email formControlName="email"></ion-input>
+        </ion-item>
+
+        <ion-button class="mt-4" expand="block" (click)="updateUser()">Modifier</ion-button>
+    </form>
+</div>

src/app/components/profil-form/profil-form.component.ts

@@ -0,0 +1,84 @@
+import {Component, inject, input, OnInit} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetUserDetailsDto, GetUserDto, UsersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+    selector: 'app-profil-form',
+    templateUrl: './profil-form.component.html',
+    styleUrls: ['./profil-form.component.scss'],
+    imports: [
+        FormsModule,
+        IonicModule,
+        ReactiveFormsModule
+    ]
+})
+export class ProfilFormComponent implements OnInit {
+    private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
+    private usersServices = inject(UsersService);
+
+    profileForm: 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])
+    })
+
+    user = input.required<GetUserDetailsDto>();
+
+    ngOnInit() {
+        this.profileForm.patchValue({
+            firstName: this.user().firstName,
+            name: this.user().name,
+            username: this.user().username,
+            email: this.user().email,
+        })
+    }
+
+    async updateUser() {
+        const loading = await this.loadCtrl.create({
+            message: 'Vérification...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        if (this.profileForm.invalid) {
+            const toast = await this.toastCtrl.create({
+                message: 'Tout les champs sont requis',
+                duration: 2000,
+                color: 'danger'
+            });
+            await loading.dismiss();
+            await toast.present();
+
+            return;
+        }
+        await loading.dismiss();
+
+        const loading2 = await this.loadCtrl.create({
+            message: 'Modification...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading2.present();
+
+        try {
+            await firstValueFrom(this.usersServices.updateUserEndpoint(this.profileForm.getRawValue()));
+            const toast = await this.toastCtrl.create({
+                message: 'Modification réussie',
+                duration: 2000,
+                color: 'success'
+            });
+            await loading2.dismiss();
+            await toast.present();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Modification impossible',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+}

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

@@ -1,27 +1,27 @@
 <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-label position="stacked">Prénom <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input placeholder="Prénom" [clearInput]="true" 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-label position="stacked">Nom <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input placeholder="Nom de famille" [clearInput]="true" 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-label position="stacked">Pseudo <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input placeholder="Nom d'utilisateur" [clearInput]="true" 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-label position="stacked">Adresse email <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input placeholder="Email" [clearInput]="true" 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-label position="stacked">Mot de passe <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input type="password" placeholder="MotDePasse1234" [clearInput]="true" formControlName="password">
             <ion-input-password-toggle slot="end"></ion-input-password-toggle>
         </ion-input>
     </ion-item>

src/app/pages/home/home.component.html

@@ -88,7 +88,7 @@
                 @case ('profile') {
                     <app-modal>
                         <div class="p-4">
-                            <p>Formulaire profil</p>
+                            <app-profil-form [user]="user()"></app-profil-form>
                         </div>
                     </app-modal>
                 }

src/app/pages/home/home.component.ts

@@ -21,6 +21,7 @@ import {
 } from "../../components/challenges-accomplished/challenges-accomplished.component";
 import {UserAchievementsComponent} from "../../components/user-achievements/user-achievements.component";
 import {ModalComponent} from "../../components/modal/modal.component";
+import {ProfilFormComponent} from "../../components/profil-form/profil-form.component";
 
 addIcons({
     'profile': personOutline,
@@ -42,7 +43,8 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
         GenericUserInfoComponent,
         ChallengesAccomplishedComponent,
         UserAchievementsComponent,
-        ModalComponent
+        ModalComponent,
+        ProfilFormComponent
     ]
 })
 export class HomeComponent implements OnInit {