implemented routes and error messages in login page

src/app/app.html

@@ -1 +1 @@
-<app-login></app-login>
+<router-outlet></router-outlet>

src/app/app.routes.ts

@@ -1,3 +1,29 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: '/login'
+    },
+    { // TODO: Guard pour empêcher la recherche de page
+        path: 'login',
+        loadComponent: () => import('./pages/login/login.component').then(x => x.LoginComponent)
+    },
+    {
+        path: 'home',
+        loadComponent: () => import('./pages/home/home.component').then(x => x.HomeComponent)
+    },
+    {
+        path: 'groups',
+        loadComponent: () => import('./pages/groups/groups.component').then(x => x.GroupsComponent)
+    },
+    {
+        path: 'ranking',
+        loadComponent: () => import('./pages/ranking/ranking.component').then(x => x.RankingComponent)
+    },
+    {
+        path: 'social',
+        loadComponent: () => import('./pages/social/social.component').then(x => x.SocialComponent)
+    }
+];

src/app/app.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
 import {IonicModule} from "@ionic/angular";
-import {LoginComponent} from "./pages/login/login.component";
+import {RouterOutlet} from "@angular/router";
 
 @Component({
     selector: 'app-root',
-    imports: [IonicModule, LoginComponent],
+    imports: [IonicModule, RouterOutlet],
     templateUrl: './app.html',
     styleUrl: './app.css'
 })

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

@@ -19,4 +19,6 @@ export class SignOnFormComponent {
         email: new FormControl<string>(null, [Validators.required]),
         password: new FormControl<string>(null, [Validators.required]),
     })
+
+    //TODO: Message d'erreur comme pour login
 }

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();
+            if (await this.addUser()) {
                 this.authState.set(true);
             }
         }
+    }
 
-    connectUser() {
+    async connectUser() {
         const user = this.login().loginForm.getRawValue();
-        console.log(user);
+        this.errorMessage.set(null);
-        this.authManageService.connectUser(user.username, user.password);
+
+        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() {
+    }
+
+}

src/app/services/auth-manage.ts

@@ -13,8 +13,10 @@ export class AuthManageService {
             const loginDto = {username, password};
             const res = await firstValueFrom(this.loginService.loginEndpoint(loginDto));
             localStorage.setItem('jwt', res.token);
+            return res;
         } catch (e) {
-            console.log(e)
+            console.error('Erreur login:', e);
+            throw e;
         }
     }