Début du login + parametres

src/app/pages/parameters/parameters-profile/parameters-profile.component.ts

@@ -1,6 +1,9 @@
-import {Component, signal} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import {firstValueFrom} from "rxjs";
+import {UsersService} from "../../../services/api";
+import {AuthService} from "../../../core/auth/auth.service";
 
 
 @Component({
@@ -10,36 +13,118 @@ import { FormsModule } from '@angular/forms';
   styleUrl: './parameters-profile.component.css'
 })
 export class ParametersProfileComponent {
-  username = signal('Doggeybag');
-  bio = signal('Joueur Valorant');
+  private usersService = inject(UsersService);
+  private authService = inject(AuthService);
+
+  profileImage = signal<string>(null);
+  username = signal<string>(null);
+  bio = signal<string>(null);
 
   editingUsername = signal(false);
   editingBio = signal(false);
 
-  profileImage = signal<string | null>(null);
+  usernameError = signal<string>(null);
+  loading = signal(false);
 
-  onPhotoChange(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files[0]) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        this.profileImage.set(e.target?.result as string);
-      };
-      reader.readAsDataURL(input.files[0]);
+  ngOnInit() {
+    const user = this.authService.currentUser();
+    this.profileImage.set(user?.profilePicture ?? null);
+    this.username.set(user?.username ?? null);
+    this.bio.set(user?.description ?? null);
+  }
+
+  // --- Username ---
+
+  toggleEditUsername() {
+    if (this.editingUsername()) {
+      this.submitUsername();
+    } else {
+      this.usernameError.set(null);
+      this.editingUsername.set(true);
     }
   }
 
-  triggerFileInput(): void {
-    const input = document.getElementById('photoInput') as HTMLInputElement;
-    input?.click();
+  async submitUsername() {
+    const value = this.username()?.trim();
+
+    if (!value) {
+      this.usernameError.set('Le pseudo ne peut pas être vide.');
+      return;
+    }
+    if (value === this.authService.currentUser()?.username) {
+      this.editingUsername.set(false);
+      return;
+    }
+
+    this.loading.set(true);
+    const user = this.authService.currentUser();
+
+    try {
+      await firstValueFrom(this.usersService.patchUsernameEndpoint(user.id, { username: value }));
+      this.usernameError.set(null);
+      this.editingUsername.set(false);
+    } catch (e: any) {
+      if (e?.status === 400) {
+        this.usernameError.set('Ce nom d\'utilisateur est déjà pris.');
+      } else {
+        this.usernameError.set('Erreur lors de la mise à jour.');
+      }
+    }
+
+    this.loading.set(false);
   }
 
-  toggleEditUsername(): void {
-    this.editingUsername.update((v) => !v);
+  // --- Bio ---
+
+  toggleEditBio() {
+    if (this.editingBio()) {
+      this.submitBio();
+    } else {
+      this.editingBio.set(true);
+    }
   }
 
-  toggleEditBio(): void {
-    this.editingBio.update((v) => !v);
+  async submitBio() {
+    this.loading.set(true);
+    const user = this.authService.currentUser();
+
+    try {
+      await firstValueFrom(this.usersService.patchUserDescriptionEndpoint(user.id, { description: this.bio() }));
+      this.editingBio.set(false);
+    } catch (e) {
+      console.error('Erreur lors de la mise à jour de la bio', e);
+    }
+
+    this.loading.set(false);
+  }
+
+  // --- Photo ---
+
+  triggerFileInput() {
+    document.getElementById('photoInput')?.click();
+  }
+
+  async onPhotoChange(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const base64 = reader.result as string;
+      this.profileImage.set(base64);
+
+      this.loading.set(true);
+      const user = this.authService.currentUser();
+
+      try {
+        await firstValueFrom(this.usersService.patchUserProfilePictureEndpoint(user.id, { profilePicture: base64 }));
+      } catch (e) {
+        console.error('Erreur lors de la mise à jour de la photo', e);
+      }
+
+      this.loading.set(false);
+    };
+    reader.readAsDataURL(file);
   }
 
 }