login et register + chat et discussion services

src/app/pages/login-form/login-form.component.ts

@@ -5,7 +5,7 @@ import {
 import { CommonModule } from "@angular/common";
 import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
-import { LoginService } from "../../services/api/login.service";
+import { AuthService } from "../../core/auth/auth.service";
 
 @Component({
   selector: 'login-form',
@@ -16,9 +16,8 @@ import { LoginService } from "../../services/api/login.service";
 export class LoginFormComponent {
 
   private fb = inject(FormBuilder);
-  private loginService = inject(LoginService);
+  private authService = inject(AuthService);
   private router = inject(Router);
-  private navCtrl = inject(NavController);
 
   isLoading = false;
 
@@ -35,26 +34,20 @@ export class LoginFormComponent {
     if (this.loginForm.valid) {
       this.isLoading = true;
 
-      const request = {
-        name: this.loginForm.value.name!,
-        password: this.loginForm.value.password!
-      };
-
-      this.loginService.login(request).subscribe({
-        next: (response) => {
-          this.isLoading = false;
-          // Le discussionId vient de la réponse de l'API
-          this.navCtrl.navigateRoot(['main/messages', response.discussionId]);
-        },
-        error: (err) => {
-          this.isLoading = false;
-          if (err.status === 401) {
-            console.error('Identifiant ou mot de passe incorrect.');
-          } else {
-            console.error('Impossible de contacter le serveur.');
-          }
+      try {
+        await this.authService.login(
+            this.loginForm.value.name!,
+            this.loginForm.value.password!
+        );
+      } catch (err: any) {
+        if (err.status === 401) {
+          console.error('Identifiant ou mot de passe incorrect.');
+        } else {
+          console.error('Impossible de contacter le serveur.');
         }
-      });
+      } finally {
+        this.isLoading = false;
+      }
 
     } else {
       Object.values(this.loginForm.controls).forEach(control => {

src/app/pages/messages/messages-send/messages-send.component.ts

@@ -12,7 +12,7 @@ export class MessagesSend {
 
   private chatService = inject(ChatService);
 
-  @Input() discussionId!: string; // passé par le composant parent
+  @Input() discussionId!: string;
 
   sendMessage = new FormControl();
   isSending = false;
@@ -21,7 +21,7 @@ export class MessagesSend {
     const message = this.sendMessage.value;
 
     if (!message || message.trim() === '') return;
-    if (this.isSending) return; // évite le double envoi
+    if (this.isSending) return;
 
     this.isSending = true;
 
@@ -30,7 +30,6 @@ export class MessagesSend {
       this.sendMessage.reset();
     } catch (error) {
       console.error('Erreur lors de l\'envoi :', error);
-      // Afficher une notification d'erreur ici
     } finally {
       this.isSending = false;
     }

src/app/pages/register-form/register-form.component.html

@@ -1,5 +1,4 @@
 <ion-content [fullscreen]="true" class="bg">
-
     <div class="container">
 
         <div class="logo-box">
@@ -8,34 +7,37 @@
 
         <h1>Knots</h1>
 
-        <div class="card">
+        <div class="card" [formGroup]="registerForm">
 
             <h3>Inscrivez-vous à Knots !</h3>
             <p class="subtitle">Commencez à nouer des liens !</p>
 
             <ion-item lines="none" class="input">
-                <ion-input placeholder="Nom d'utilisateur..."></ion-input>
+                <ion-input placeholder="Nom d'utilisateur..." formControlName="username"></ion-input>
             </ion-item>
 
             <ion-item lines="none" class="input">
-                <ion-input type="password" placeholder="Mot de passe..."></ion-input>
+                <ion-input type="password" placeholder="Mot de passe..." formControlName="password"></ion-input>
             </ion-item>
 
             <ion-item lines="none" class="input">
-                <ion-input type="password" placeholder="Confirmez votre mot de passe..."></ion-input>
+                <ion-input type="password" placeholder="Confirmez votre mot de passe..." formControlName="confirmPassword"></ion-input>
             </ion-item>
 
-            <ion-button expand="block" class="btn">
-                Créer son compte
+            <p *ngIf="registerForm.hasError('passwordMismatch')" style="color:#d97070; font-size:13px; text-align:center; margin:0;">
+                Les mots de passe ne correspondent pas.
+            </p>
+
+            <ion-button expand="block" class="btn" (click)="submitForm()" [disabled]="isLoading">
+                {{ isLoading ? 'Création...' : 'Créer son compte' }}
             </ion-button>
 
         </div>
 
         <div class="signup">
             Déjà un compte ?<br>
-            <a (click)="goToLogin()" >Connectez-vous ici</a>
+            <a (click)="goToLogin()">Connectez-vous ici</a>
         </div>
 
     </div>
-
 </ion-content>

src/app/pages/register-form/register-form.component.ts

@@ -1,30 +1,59 @@
-import {Component, inject} from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
-    IonButton,
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardSubtitle,
-    IonCardTitle, IonContent, IonInput, IonItem
+    IonButton, IonContent, IonInput, IonItem
 } from "@ionic/angular/standalone";
-import {Router} from "@angular/router";
+import { Router } from "@angular/router";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import {AuthService} from "../../core/auth/auth.service";
 
 @Component({
-  selector: 'app-register-form',
-    imports: [
-        IonButton,
-        IonInput,
-        IonContent,
-        IonItem
-    ],
-  templateUrl: './register-form.component.html',
-  styleUrl: './register-form.component.css'
+    selector: 'app-register-form',
+    imports: [IonButton, IonInput, IonContent, IonItem, ReactiveFormsModule, CommonModule],
+    templateUrl: './register-form.component.html',
+    styleUrl: './register-form.component.css'
 })
 export class RegisterFormComponent {
 
-    private router = inject(Router)
+    private router = inject(Router);
+    private fb = inject(FormBuilder);
+    private authService = inject(AuthService);
+
+    isLoading = false;
+
+    registerForm = this.fb.group({
+        username: ['', [Validators.required, Validators.maxLength(50)]],
+        password: ['', [Validators.required, Validators.minLength(12), Validators.maxLength(50)]],
+        confirmPassword: ['', [Validators.required]]
+    }, { validators: this.passwordMatchValidator });
+
+    passwordMatchValidator(form: any) {
+        const password = form.get('password')?.value;
+        const confirm = form.get('confirmPassword')?.value;
+        return password === confirm ? null : { passwordMismatch: true };
+    }
 
     goToLogin() {
         this.router.navigate(['/login']);
     }
-}
+
+    async submitForm() {
+        if (this.registerForm.valid) {
+            this.isLoading = true;
+            try {
+                await this.authService.register(
+                    this.registerForm.value.username!,
+                    this.registerForm.value.password!
+                );
+            } catch (err: any) {
+                if (err.status === 409) {
+                    console.error('Ce nom d\'utilisateur est déjà pris.');
+                } else {
+                    console.error('Impossible de contacter le serveur.');
+                }
+            } finally {
+                this.isLoading = false;
+            }
+        }
+    }
+}