implemented routes and error messages in login page

src/app/pages/groups/groups.component.html

@@ -0,0 +1,3 @@
+<p>
+    groups works!
+</p>

src/app/pages/groups/groups.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-groups',
+    templateUrl: './groups.component.html',
+    styleUrls: ['./groups.component.scss'],
+})
+export class GroupsComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}

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

@@ -0,0 +1,3 @@
+<p>
+    home works!
+</p>

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

@@ -0,0 +1,9 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {
+}

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

@@ -9,7 +9,11 @@
     @if (authState()) {
         <app-sign-in-form class="mb-9" #loginForm></app-sign-in-form>
 
-        <ion-button class="w-10/12 mt-0 border-0" color="primary" (click)="connectUser()">
+        @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()">
             <p class="text-white font-bold m-0">Se connecter</p>
         </ion-button>
 
@@ -22,7 +26,7 @@
         <app-sign-on-form #userForm></app-sign-on-form>
     }
 
-    <ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()">
+    <ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()" (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

@@ -5,6 +5,7 @@ import {SignOnFormComponent} from "../../components/sign-on-form/sign-on-form.co
 import {AuthManageService} from "../../services/auth-manage";
 import {firstValueFrom} from "rxjs";
 import {UsersService} from "../../services/api";
+import {Router} from "@angular/router";
 
 @Component({
     selector: 'app-login',
@@ -18,38 +19,61 @@ import {UsersService} from "../../services/api";
 })
 export class LoginComponent {
     authState = signal<boolean>(true)
+    errorMessage = signal<string | null>(null);
     login = viewChild<SignInFormComponent>('loginForm');
     user = viewChild<SignOnFormComponent>('userForm');
 
     private authManageService = inject(AuthManageService);
     private usersService = inject(UsersService);
+    private router = inject(Router);
 
     async createAccount() {
         if (this.authState()) {
             this.authState.set(false);
         } else if (this.authState() == false) {
-            await this.addUser();
-            this.authState.set(true);
+            if (await this.addUser()) {
+                this.authState.set(true);
+            }
         }
     }
 
-    connectUser() {
+    async connectUser() {
         const user = this.login().loginForm.getRawValue();
-        console.log(user);
-        this.authManageService.connectUser(user.username, user.password);
+        this.errorMessage.set(null);
+
+        try {
+            await this.authManageService.connectUser(user.username, user.password);
+
+            await this.router.navigate(['/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");
+            } else {
+                this.errorMessage.set("Erreur de connexion");
+            }
+
+            this.login().loginForm.reset();
+        }
     }
 
     async addUser() {
         if (this.user().userForm.invalid) {
             console.log('Erreur d\'écriture dans le formulaire');
-            return;
+            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);
+            return true;
         } catch (e) {
             console.log(e);
+            return false
         }
     }
 }

src/app/pages/ranking/ranking.component.html

@@ -0,0 +1,3 @@
+<p>
+    ranking works!
+</p>

src/app/pages/ranking/ranking.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-ranking',
+    templateUrl: './ranking.component.html',
+    styleUrls: ['./ranking.component.scss'],
+})
+export class RankingComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}

src/app/pages/social/social.component.html

@@ -0,0 +1,3 @@
+<p>
+    friends works!
+</p>

src/app/pages/social/social.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-social',
+    templateUrl: './social.component.html',
+    styleUrls: ['./social.component.scss'],
+})
+export class SocialComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}