Added alert

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

@@ -3,17 +3,13 @@
 
     <p class="text-gray-500 text-sm text-center w-3/5 leading-snug relative">
         Prêt à défier tes amis et prouver que t’es le meilleur ?
-        <img src="blob.svg" class="absolute -top-150 -left-50 -right-50 max-w-[200vw] -z-1">
+        <img src="blob.svg" class="absolute -top-150 -left-50 -right-50 max-w-[200vw] -z-10">
     </p>
 
     @if (authState()) {
         <app-sign-in-form class="mb-9" #loginForm></app-sign-in-form>
 
-        @if (errorMessage()) {
-            <p class="text-red-400">{{ errorMessage() }}</p>
-        }
-
-        <ion-button class="w-10/12 mt-0 border-0" color="primary" (click)="connectUser()" (touchstart)="connectUser()">
+        <ion-button class="w-10/12 mt-0 border-0" color="primary" (touchstart)="connectUser()">
             <p class="text-white font-bold m-0">Se connecter</p>
         </ion-button>
 
@@ -26,7 +22,7 @@
         <app-sign-on-form #userForm></app-sign-on-form>
     }
 
-    <ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()" (touchstart)="createAccount()">
+    <ion-button class="w-10/12 mt-0" color="secondary" (touchstart)="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,11 +1,10 @@
 import {Component, inject, signal, viewChild} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
+import {IonicModule, NavController, ToastController} from "@ionic/angular";
 import {SignInFormComponent} from "../../components/sign-in-form/sign-in-form.component";
 import {SignOnFormComponent} from "../../components/sign-on-form/sign-on-form.component";
 import {AuthManageService} from "../../services/auth-manage";
 import {firstValueFrom} from "rxjs";
 import {UsersService} from "../../services/api";
-import {Router} from "@angular/router";
 
 @Component({
     selector: 'app-login',
@@ -25,7 +24,8 @@ export class LoginComponent {
 
     private authManageService = inject(AuthManageService);
     private usersService = inject(UsersService);
-    private router = inject(Router);
+    private navCtrl = inject(NavController);
+    private toastCtrl = inject(ToastController);
 
     async createAccount() {
         if (this.authState()) {
@@ -33,6 +33,12 @@ export class LoginComponent {
         } else if (this.authState() == false) {
             if (await this.addUser()) {
                 this.authState.set(true);
+                const toast = await this.toastCtrl.create({
+                    message: 'Utilisateur crée',
+                    duration: 2000,
+                    color: 'success'
+                });
+                await toast.present();
             }
         }
     }
@@ -44,36 +50,49 @@ export class LoginComponent {
         try {
             await this.authManageService.connectUser(user.username, user.password);
 
-            await this.router.navigate(['/home']);
+            await this.navCtrl.navigateRoot('/home');
         } catch (e) {
-            console.error('Connexion échouée', e);
-
             if (e.status === 401) {
-                this.errorMessage.set("Mot de passe incorrect");
-            } else if (e.status === 404) {
-                this.errorMessage.set("Utilisateur introuvable");
+                this.errorMessage.set("Identifiants incorrects");
             } else {
                 this.errorMessage.set("Erreur de connexion");
             }
 
+            const toast = await this.toastCtrl.create({
+                message: this.errorMessage(),
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+
             this.login().loginForm.reset();
         }
     }
 
     async addUser() {
         if (this.user().userForm.invalid) {
-            console.log('Erreur d\'écriture dans le formulaire');
+            const toast = await this.toastCtrl.create({
+                message: 'Tout les champs sont requis',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+
             this.user().userForm.reset();
             return false;
         }
         try {
             const users = this.user().userForm.getRawValue();
-            await firstValueFrom(this.usersService.createUserEndpoint(users))
-            console.log('Utilisateur crée : ' + users);
+            await firstValueFrom(this.usersService.createUserEndpoint(users));
             return true;
         } catch (e) {
-            console.log(e);
-            return false
+            const toast = await this.toastCtrl.create({
+                message: 'Email ou mot de passe incorrect',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
         }
+
     }
 }