Created form to update password

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

@@ -0,0 +1,35 @@
+<div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
+    <form [formGroup]="passwordForm" class="space-y-5">
+
+        <ion-label class="text-xs text-gray-500 mb-1 block">
+            Mot de passe
+            <ion-text color="danger">*</ion-text>
+        </ion-label>
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
+            <ion-input type="password"
+                       placeholder="Mot de passe"
+                       class="text-gray-800"
+                       formControlName="password">
+                <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+            </ion-input>
+        </ion-item>
+
+        <ion-button expand="block"
+                    class="mt-6 rounded-xl font-medium"
+                    style="--background: #1f2937;"
+                    (click)="updatePassword()">
+            Modifier
+        </ion-button>
+
+        <div class="text-[12px] text-gray-400 m-3">
+            <p class="m-0">Consignes du mot de passe :</p>
+            <ul class="mt-0">
+                <li>12 caractères</li>
+                <li>Au moins une majuscule</li>
+                <li>Au moins une minuscule</li>
+                <li>Au moins un chiffre</li>
+                <li>Au moins un caractère spécial</li>
+            </ul>
+        </div>
+    </form>
+</div>

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

@@ -0,0 +1,79 @@
+import {Component, inject, input, OnInit, output} from '@angular/core';
+import {AlertController, IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetUserDetailsDto, UsersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+    selector: 'app-password-form',
+    templateUrl: './password-form.component.html',
+    styleUrls: ['./password-form.component.scss'],
+    imports: [
+        IonicModule,
+        ReactiveFormsModule
+    ]
+})
+export class PasswordFormComponent {
+    private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
+    private usersServices = inject(UsersService);
+
+    passwordForm: FormGroup = new FormGroup({
+        password: new FormControl<string>(null, [Validators.required,
+            Validators.minLength(12),
+            Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*?[#?!_@$%^&*-])/)])
+    });
+
+    async updatePassword() {
+        const loading = await this.loadCtrl.create({
+            message: 'Vérification...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        if (this.passwordForm.invalid) {
+            const toast = await this.toastCtrl.create({
+                message: 'Mot de passe incorrect',
+                duration: 2000,
+                color: 'danger'
+            });
+            this.passwordForm.reset();
+            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.patchUserPasswordEndpoint(this.passwordForm.getRawValue()));
+
+            const toast = await this.toastCtrl.create({
+                message: 'Modification réussie',
+                duration: 2000,
+                color: 'success'
+            });
+
+            this.passwordForm.reset();
+
+            await loading2.dismiss();
+            await toast.present();
+        } catch (error) {
+            const toast = await this.toastCtrl.create({
+                message: 'Modification impossible',
+                duration: 2000,
+                color: 'danger'
+            });
+            await loading2.dismiss();
+            await toast.present();
+
+            console.log(error.message);
+        }
+    }
+}

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

@@ -5,7 +5,7 @@
             Prénom
             <ion-text color="danger">*</ion-text>
         </ion-label>
-        <ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
             <ion-input placeholder="Prénom"
                        [clearInput]="true"
                        formControlName="firstName"
@@ -17,7 +17,7 @@
             Nom
             <ion-text color="danger">*</ion-text>
         </ion-label>
-        <ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
             <ion-input placeholder="Nom de famille"
                        [clearInput]="true"
                        formControlName="name"
@@ -29,7 +29,7 @@
             Pseudo
             <ion-text color="danger">*</ion-text>
         </ion-label>
-        <ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
             <ion-input placeholder="Nom d'utilisateur"
                        [clearInput]="true"
                        formControlName="username"
@@ -41,7 +41,7 @@
             Email
             <ion-text color="danger">*</ion-text>
         </ion-label>
-        <ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
             <ion-input placeholder="Email"
                        type="email"
                        [clearInput]="true"

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

@@ -95,7 +95,7 @@
                 @case ('password') {
                     <app-modal>
                         <div class="p-4">
-                            <p>Formulaire password</p>
+                            <app-password-form></app-password-form>
                         </div>
                     </app-modal>
                 }

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

@@ -22,6 +22,7 @@ import {
 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";
+import {PasswordFormComponent} from "../../components/password-form/password-form.component";
 
 addIcons({
     'profile': personOutline,
@@ -44,7 +45,9 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
         ChallengesAccomplishedComponent,
         UserAchievementsComponent,
         ModalComponent,
-        ProfilFormComponent
+        ProfilFormComponent,
+        PasswordFormComponent,
+        PasswordFormComponent
     ]
 })
 export class HomeComponent implements OnInit {