From a242aca0164d396cc2a99faed0135e48dd8454f3 Mon Sep 17 00:00:00 2001
From: ltuffery <123221865+ltuffery@users.noreply.github.com>
Date: Wed, 14 Oct 2026 15:52:23 +0200
Subject: [PATCH 1/2] feat: PhotoController && link frontend

---
 .../Controllers/Profile/ProfileController.php |   4 +
 api/src/Controllers/User/PhotoController.php  |  77 ++++
 api/src/Exceptions/PhotoException.php         |  11 +
 api/src/Model/Photo.php                       |  19 +
 api/src/Resources/PhotoResource.php           |  21 +
 api/src/Resources/UserResource.php            |   3 +-
 api/src/Services/Photo.php                    |  10 +-
 api/src/routes.php                            |   5 +
 frontend/src/api/auth.ts                      |   1 +
 frontend/src/api/client.ts                    |  68 ++-
 frontend/src/api/photos.ts                    |  23 ++
 .../settings/sections/AccountSection.vue      | 143 ++++++-
 .../settings/sections/HistorySection.vue      | 163 +++++---
 .../settings/sections/ProfileSection.vue      | 391 ++++++++++++++++--
 frontend/src/composable/usePhotos.ts          |  25 ++
 frontend/src/composable/useUsers.ts           |   4 +-
 frontend/src/store/useAuthStore.ts            |   2 +-
 17 files changed, 814 insertions(+), 156 deletions(-)
 create mode 100644 api/src/Controllers/User/PhotoController.php
 create mode 100644 api/src/Exceptions/PhotoException.php
 create mode 100644 api/src/Resources/PhotoResource.php
 create mode 100644 frontend/src/api/photos.ts
 create mode 100644 frontend/src/composable/usePhotos.ts

diff --git a/api/src/Controllers/Profile/ProfileController.php b/api/src/Controllers/Profile/ProfileController.php
index a6589bed..8ccf70d6 100644
--- a/api/src/Controllers/Profile/ProfileController.php
+++ b/api/src/Controllers/Profile/ProfileController.php
@@ -58,6 +58,10 @@ public function update(): void
                 continue;
             }
 
+            if ($key === 'password') {
+                $value = password_hash($value, PASSWORD_DEFAULT);
+            }
+
             $user->{$key} = $value;
         }
 
diff --git a/api/src/Controllers/User/PhotoController.php b/api/src/Controllers/User/PhotoController.php
new file mode 100644
index 00000000..cf21a9b1
--- /dev/null
+++ b/api/src/Controllers/User/PhotoController.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace Matcha\Api\Controllers\User;
+
+use Flight;
+use Matcha\Api\Model\Photo;
+use Matcha\Api\Model\User;
+use Matcha\Api\Resources\PhotoResource;
+
+class PhotoController
+{
+    public function index()
+    {
+        $photos = Photo::all([
+            'user_id' => Flight::user()->id,
+        ]);
+
+        Flight::json(PhotoResource::collection($photos));
+    }
+
+    public function store()
+    {
+        /** @var User $user */
+        $user = Flight::user();
+        $files = Flight::request()->getUploadedFiles();
+        $photos = $files['photos'] ?? null;
+
+        if (!$photos) {
+            Flight::json(['success' => false, 'error' => 'Photos is required.'], 400);
+            return;
+        }
+        if (!is_array($photos)) {
+            $photos = [$photos];
+        }
+
+        if (count($user->getPhotosUrl()) + count($photos) > 5) {
+            Flight::json(['success' => false, 'error' => 'You cannot upload more than 5 photos.'], 422);
+            return;
+        }
+
+        foreach ($photos as $photo) {
+            if ($photo->getError() !== UPLOAD_ERR_OK) {
+                Flight::json(['success' => false, 'error' => 'Upload failed (code ' . $photo->getError() . ').'], 422);
+                return;
+            }
+        }
+
+        $p = [];
+        foreach ($photos as $photo) {
+            $p[] = Photo::upload($photo);
+        }
+
+        Flight::json(PhotoResource::collection($p), 201);
+    }
+
+
+    public function delete($id)
+    {
+        $photo = Photo::find(['id' => $id]);
+
+        if (is_null($photo)) {
+            Flight::json([
+                'success' => false,
+                'message' => "The photo does not exist.",
+            ], 404);
+            return;
+        }
+
+        unlink(BASE_PATH . "/storage/photos/" . $photo->name . ".png");
+        $photo->delete();
+
+        Flight::json([
+            'success' => true,
+            'message' => "The photo has been deleted.",
+        ], 201);
+    }
+}
\ No newline at end of file
diff --git a/api/src/Exceptions/PhotoException.php b/api/src/Exceptions/PhotoException.php
new file mode 100644
index 00000000..3767102e
--- /dev/null
+++ b/api/src/Exceptions/PhotoException.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace Matcha\Api\Exceptions;
+
+class PhotoException extends \Exception
+{
+    public function __construct()
+    {
+        parent::__construct("Photo exception.");
+    }
+}
\ No newline at end of file
diff --git a/api/src/Model/Photo.php b/api/src/Model/Photo.php
index 11b0f725..46493c87 100644
--- a/api/src/Model/Photo.php
+++ b/api/src/Model/Photo.php
@@ -2,7 +2,11 @@
 
 namespace Matcha\Api\Model;
 
+use Flight;
+use flight\net\UploadedFile;
+use Matcha\Api\Exceptions\PhotoException;
 use Matcha\Api\Validator\Asserts\NotBlank;
+use Matcha\Api\Services\Photo as PhotoService;
 
 class Photo extends Model
 {
@@ -19,4 +23,19 @@ public function user(): User
             'id' => $this->user_id,
         ]);
     }
+
+    public static function upload(UploadedFile $file): self
+    {
+        $service = PhotoService::new($file);
+
+        if (!$service->isValidExtension()) {
+            throw new PhotoException();
+        }
+
+        if (!is_dir(BASE_PATH . "/storage/photos")) {
+            mkdir(BASE_PATH . "/storage/photos", recursive: true);
+        }
+
+        return $service->save(Flight::user());
+    }
 }
diff --git a/api/src/Resources/PhotoResource.php b/api/src/Resources/PhotoResource.php
new file mode 100644
index 00000000..255b6778
--- /dev/null
+++ b/api/src/Resources/PhotoResource.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Matcha\Api\Resources;
+
+use Matcha\Api\Model\Photo;
+
+class PhotoResource extends JsonResource
+{
+    public function __construct(Photo $model)
+    {
+        parent::__construct($model);
+    }
+
+    public function jsonSerialize(): mixed
+    {
+        return [
+            'id' => $this->model->id,
+            'name' => $this->model->name,
+        ];
+    }
+}
\ No newline at end of file
diff --git a/api/src/Resources/UserResource.php b/api/src/Resources/UserResource.php
index c256d730..3028f0b4 100644
--- a/api/src/Resources/UserResource.php
+++ b/api/src/Resources/UserResource.php
@@ -20,8 +20,6 @@ public function jsonSerialize(): mixed
             'password',
             'email_verified',
             'temporary_email_token',
-            'lat',
-            'lon',
         ];
         $data = $this->model->getData();
 
@@ -32,6 +30,7 @@ public function jsonSerialize(): mixed
         $data['avatar'] = $this->model->getAvatar();
         $data['id'] = $this->model->id;
         $data['complete_profile'] = $this->model->hasCompleteProfile();
+        $data['verified'] = $this->model->email_verified;
 
         return $data;
     }
diff --git a/api/src/Services/Photo.php b/api/src/Services/Photo.php
index c5bf8588..3cca6649 100644
--- a/api/src/Services/Photo.php
+++ b/api/src/Services/Photo.php
@@ -5,6 +5,7 @@
 use Exception;
 use flight\net\UploadedFile;
 use Matcha\Api\Model\User;
+use RuntimeException;
 
 class Photo
 {
@@ -38,7 +39,7 @@ private function testCreateByGD(string $extension): bool
         };
     }
 
-    public function save(User $user): void
+    public function save(User $user): \Matcha\Api\Model\Photo
     {
         try {
             $name = bin2hex(random_bytes(15));
@@ -51,7 +52,10 @@ public function save(User $user): void
         $photo->name = $name;
         $photo->user_id = $user->id;
 
-        $photo->save();
-        $this->file->moveTo(BASE_PATH . "/storage/photos/" . $name . ".png");
+        if (!move_uploaded_file($this->file->getTempName(), BASE_PATH . "/storage/photos/" . $name . ".png")) {
+            throw new RuntimeException('Failed to store photo.');
+        }
+
+        return $photo->save();
     }
 }
diff --git a/api/src/routes.php b/api/src/routes.php
index 09935690..c8d3e430 100644
--- a/api/src/routes.php
+++ b/api/src/routes.php
@@ -18,6 +18,7 @@
 use Matcha\Api\Controllers\RegisterController;
 use Matcha\Api\Controllers\SearchProfileController;
 use Matcha\Api\Controllers\TagsController;
+use Matcha\Api\Controllers\User\PhotoController;
 use Matcha\Api\Controllers\ViewController;
 use Matcha\Api\Middleware\AuthMiddleware;
 use Matcha\Api\Middleware\CompleteProfileMiddleware;
@@ -92,6 +93,10 @@
         Flight::route('POST /notifications/@id/view', [NotificationsController::class, 'viewed']);
         Flight::route('GET /notifications', [NotificationsController::class, 'index']);
 
+        Flight::route('POST /photos', [PhotoController::class, 'store']);
+        Flight::route('GET /photos', [PhotoController::class, 'index']);
+        Flight::route('DELETE /photos/@id', [PhotoController::class, 'delete']);
+
         Flight::group('/matches', function () {
             Flight::route('GET /', [ChatController::class, 'index']);
             Flight::route('GET /@username', [ChatController::class, 'show']);
diff --git a/frontend/src/api/auth.ts b/frontend/src/api/auth.ts
index 1869ac4c..aa050434 100644
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -29,6 +29,7 @@ export interface User {
   created_at: string
   last_connection: string
   profile_complete: boolean
+  verified: boolean
 }
 
 export interface LoginCredentials {
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 3c56bed7..08a499df 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -2,13 +2,16 @@ import { useAuth } from '@/composable/useAuth'
 import { ApiError, type ApiErrorBody, ApiErrorCode } from '@/api/errors'
 import { useAuthStore } from '@/store/useAuthStore'
 
+type Body = Record<string, any> | FormData | null
+
 export class ApiClient<T> {
   method = ''
   path = ''
   headers: Record<string, string> = {
     'Content-Type': 'application/json',
   }
-  private refreshPromise: Promise<boolean> | null = null
+  private retried = false
+  private static refreshPromise: Promise<boolean> | null = null
 
   static get<T>(
     path: string,
@@ -24,10 +27,11 @@ export class ApiClient<T> {
     return this.request<T>('DELETE', path, body)
   }
 
-  static post<T>(
-    path: string,
-    body: Record<string, any> | null = null,
-  ): Promise<ApiResponse<T>> {
+  post(path: string, body: Body = null): Promise<ApiResponse<T>> {
+    return this.request('POST', path, body)
+  }
+
+  static post<T>(path: string, body: Body = null): Promise<ApiResponse<T>> {
     return this.request<T>('POST', path, body)
   }
 
@@ -38,6 +42,17 @@ export class ApiClient<T> {
     return this.request<T>('PUT', path, body)
   }
 
+  async request(
+    method: string,
+    path: string,
+    body: Body = null,
+  ): Promise<ApiResponse<T>> {
+    this.method = method
+    this.path = path.replace(/^\/+|\/+$/g, '')
+
+    return await this.send(body)
+  }
+
   static async request<T>(
     method: string,
     path: string,
@@ -45,10 +60,7 @@ export class ApiClient<T> {
   ): Promise<ApiResponse<T>> {
     const self = new this<T>()
 
-    self.method = method
-    self.path = path.replace(/^\/+|\/+$/g, '')
-
-    return await self.send(body)
+    return self.request(method, path, body)
   }
 
   header(name: string, value: string): this {
@@ -57,9 +69,14 @@ export class ApiClient<T> {
     return this
   }
 
-  private async send(
-    body: Record<string, any> | null = null,
-  ): Promise<ApiResponse<T>> {
+  static header<T>(name: string, value: string): ApiClient<T> {
+    const self = new this<T>()
+    self.headers[name] = value
+
+    return self
+  }
+
+  private async send(body: Body = null): Promise<ApiResponse<T>> {
     const jwt = localStorage.getItem('jwt')
 
     if (jwt != null) {
@@ -74,20 +91,33 @@ export class ApiClient<T> {
       if (query) url += `?${query}`
     }
 
+    const headers = { ...this.headers }
+    let payload: BodyInit | null = null
+
+    if (body != null && this.method !== 'GET') {
+      if (body instanceof FormData) {
+        delete headers['Content-Type']
+        payload = body
+      } else {
+        payload = JSON.stringify(body)
+      }
+    }
+
     const res = await fetch(url, {
       method: this.method,
-      headers: this.headers,
-      body: body != null && this.method !== 'GET' ? JSON.stringify(body) : null,
+      headers: headers,
+      body: payload,
     })
 
-    if (res.status === 401 && this.path !== 'auth/refresh') {
-      this.refreshPromise ??= useAuth()
+    if (res.status === 401 && this.path !== 'auth/refresh' && !this.retried) {
+      this.retried = true
+      ApiClient.refreshPromise ??= useAuth()
         .refreshSession()
         .finally(() => {
-          this.refreshPromise = null
+          ApiClient.refreshPromise = null
         })
-      await this.refreshPromise
-      return await this.send(body)
+      const ok = await ApiClient.refreshPromise
+      if (ok) return await this.send(body)
     }
 
     if (res.status === 403) {
diff --git a/frontend/src/api/photos.ts b/frontend/src/api/photos.ts
new file mode 100644
index 00000000..a076ac37
--- /dev/null
+++ b/frontend/src/api/photos.ts
@@ -0,0 +1,23 @@
+import { ApiClient } from '@/api/client'
+
+export interface Photo {
+  id: number
+  name: string
+}
+
+export const photosApi = {
+  async getPhotos() {
+    return ApiClient.get<Photo[]>('/users/me/photos').then(res => res.json())
+  },
+
+  async uploadPhoto(fd: FormData) {
+    return ApiClient.post<Photo[]>(
+      '/users/me/photos',
+      fd,
+    ).then(res => res.json())
+  },
+
+  async deletePhoto(id: number) {
+    return ApiClient.delete(`/users/me/photos/${id}`).then(res => res.json())
+  }
+}
diff --git a/frontend/src/components/settings/sections/AccountSection.vue b/frontend/src/components/settings/sections/AccountSection.vue
index 241817c4..31c2d017 100644
--- a/frontend/src/components/settings/sections/AccountSection.vue
+++ b/frontend/src/components/settings/sections/AccountSection.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+import { useForm, Field as VeeField } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { ref } from 'vue'
+import { toast } from 'vue-sonner'
+
 import {
   Card,
   CardContent,
@@ -8,29 +12,136 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
+import { useAuthStore } from '@/store/useAuthStore'
+
+const authStore = useAuthStore()
+
+const schema = toTypedSchema(
+  z
+    .object({
+      email: z.string().min(1, 'Email is required').email('Invalid email'),
+      password: z
+        .string()
+        .min(8, 'Password must be at least 8 characters')
+        .optional()
+        .or(z.literal('')),
+      passwordConfirm: z.string().optional().or(z.literal('')),
+    })
+    .refine(d => !d.password || !d.passwordConfirm || d.password === d.passwordConfirm, {
+      message: 'Passwords do not match',
+      path: ['passwordConfirm'],
+    }),
+)
+
+const { handleSubmit, isSubmitting, resetField, setErrors } = useForm({
+  validationSchema: schema,
+  initialValues: {
+    email: authStore.user?.email ?? '',
+    password: '',
+    passwordConfirm: '',
+  },
+})
+
+const serverError = ref<string | null>(null)
+
+const onSubmit = handleSubmit(async values => {
+  serverError.value = null
+  try {
+    await authStore.updateProfile({
+      email: values.email,
+      ...(values.password ? { password: values.password } : {}),
+    })
+
+    resetField('password')
+    resetField('passwordConfirm')
+    toast.success('Profile updated successfully')
+  } catch (e: any) {
+    const apiErrors = e?.response?.data?.errors
+    if (apiErrors) setErrors(apiErrors)
+    else serverError.value = e?.response?.data?.message ?? 'An error occurred'
+    toast.error('Update failed')
+  }
+})
 </script>
 
 <template>
   <Card>
     <CardHeader>
       <CardTitle>Credentials</CardTitle>
-      <CardDescription> Manage your email and password. </CardDescription>
+      <CardDescription>Manage your email and password.</CardDescription>
     </CardHeader>
-    <CardContent class="space-y-4">
-      <div class="space-y-2">
-        <Label>Email</Label>
-        <Input type="email" placeholder="your@email.com" />
-      </div>
-      <Separator />
-      <div class="space-y-2">
-        <Label>New password</Label>
-        <Input type="password" placeholder="********" />
-      </div>
-      <div class="flex justify-end">
-        <Button>Save change</Button>
-      </div>
+
+    <CardContent>
+      <form class="space-y-4" @submit="onSubmit">
+        <FieldGroup>
+          <VeeField v-slot="{ field, errors }" name="email">
+            <Field :data-invalid="!!errors.length">
+              <FieldLabel for="email">Email</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                placeholder="your@email.com"
+                v-bind="field"
+                :aria-invalid="!!errors.length"
+              />
+              <FieldError v-if="errors.length" :errors="errors" />
+            </Field>
+          </VeeField>
+
+          <Separator />
+
+          <VeeField v-slot="{ field, errors }" name="password">
+            <Field :data-invalid="!!errors.length">
+              <FieldLabel for="password">New password</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                placeholder="********"
+                v-bind="field"
+                :aria-invalid="!!errors.length"
+              />
+              <FieldDescription>
+                Leave empty to keep your current password.
+              </FieldDescription>
+              <FieldError v-if="errors.length" :errors="errors" />
+            </Field>
+          </VeeField>
+
+          <VeeField v-slot="{ field, errors }" name="passwordConfirm">
+            <Field :data-invalid="!!errors.length">
+              <FieldLabel for="passwordConfirm">Confirm password</FieldLabel>
+              <Input
+                id="passwordConfirm"
+                type="password"
+                placeholder="********"
+                v-bind="field"
+                :aria-invalid="!!errors.length"
+              />
+              <FieldError v-if="errors.length" :errors="errors" />
+            </Field>
+          </VeeField>
+
+          <p v-if="serverError" class="text-sm text-destructive">
+            {{ serverError }}
+          </p>
+
+          <div class="flex justify-end">
+            <Button type="submit" :disabled="isSubmitting">
+              {{ isSubmitting ? 'Saving...' : 'Save changes' }}
+            </Button>
+          </div>
+        </FieldGroup>
+      </form>
     </CardContent>
   </Card>
 </template>
diff --git a/frontend/src/components/settings/sections/HistorySection.vue b/frontend/src/components/settings/sections/HistorySection.vue
index 943384d1..dd5ba498 100644
--- a/frontend/src/components/settings/sections/HistorySection.vue
+++ b/frontend/src/components/settings/sections/HistorySection.vue
@@ -7,6 +7,13 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { Heart, Eye } from 'lucide-vue-next'
 import UserItem from '@/components/users/UserItem.vue'
 import { useMe } from '@/composable/useMe.ts'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card/index.ts'
 
 const me = useMe()
 
@@ -41,73 +48,93 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-full">
-    <Tabs default-value="viewed" orientation="horizontal">
-      <TabsList class="grid w-full grid-cols-2 items-center">
-        <TabsTrigger value="viewed" class="flex items-center gap-2">
-          <Eye class="h-4 w-4" />
-          Vus
-          <Badge variant="secondary">{{ viewedCount }}</Badge>
-        </TabsTrigger>
-        <TabsTrigger value="liked">
-          <Heart class="h-4 w-4" />
-          Likés
-          <Badge variant="secondary">{{ likedCount }}</Badge>
-        </TabsTrigger>
-      </TabsList>
-
-      <!-- VIEW -->
-      <TabsContent value="viewed">
-        <ScrollArea class="h-[70vh]">
-          <div v-if="isLoading" class="space-y-3">
-            <Skeleton v-for="i in 4" :key="i" class="h-20 w-full rounded-xl" />
-          </div>
-
-          <div
-            v-else-if="viewedProfiles.length === 0"
-            class="text-center py-16"
-          >
-            <Eye class="mx-auto h-10 w-10 text-muted-foreground mb-2" />
-            <p class="text-muted-foreground">
-              No profiles have been viewed yet
-            </p>
-          </div>
-
-          <div v-else class="space-y-3">
-            <UserItem
-              v-for="profile in viewedProfiles"
-              :key="profile.id"
-              :profile="profile"
-              :description="formatRelativeDate(profile.created_at)"
-            />
-          </div>
-        </ScrollArea>
-      </TabsContent>
-
-      <!-- LIKES -->
-      <TabsContent value="liked">
-        <ScrollArea class="h-[70vh]">
-          <div v-if="isLoading" class="space-y-3">
-            <Skeleton v-for="i in 4" :key="i" class="h-20 w-full rounded-xl" />
-          </div>
-
-          <div v-else-if="likedProfiles.length === 0" class="text-center py-16">
-            <Heart class="mx-auto h-10 w-10 text-muted-foreground mb-2" />
-            <p class="text-muted-foreground">
-              You haven't liked any profiles yet
-            </p>
-          </div>
-
-          <div v-else class="space-y-3">
-            <UserItem
-              v-for="profile in likedProfiles"
-              :key="profile.id"
-              :profile="profile"
-              :description="formatRelativeDate(profile.created_at)"
-            />
-          </div>
-        </ScrollArea>
-      </TabsContent>
-    </Tabs>
+  <div class="">
+    <Card>
+      <CardHeader>
+        <CardTitle>History</CardTitle>
+        <CardDescription>Votre historique de vues et likes.</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <Tabs default-value="viewed" orientation="horizontal">
+          <TabsList class="grid w-full grid-cols-2 items-center">
+            <TabsTrigger value="viewed" class="flex items-center gap-2">
+              <Eye class="h-4 w-4" />
+              Vus
+              <Badge variant="secondary">{{ viewedCount }}</Badge>
+            </TabsTrigger>
+            <TabsTrigger value="liked">
+              <Heart class="h-4 w-4" />
+              Likés
+              <Badge variant="secondary">{{ likedCount }}</Badge>
+            </TabsTrigger>
+          </TabsList>
+
+          <!-- VIEW -->
+          <TabsContent value="viewed">
+            <ScrollArea>
+              <div v-if="isLoading" class="space-y-3">
+                <Skeleton
+                  v-for="i in 4"
+                  :key="i"
+                  class="h-20 w-full rounded-xl"
+                />
+              </div>
+
+              <div
+                v-else-if="viewedProfiles.length === 0"
+                class="text-center py-16"
+              >
+                <Eye class="mx-auto h-10 w-10 text-muted-foreground mb-2" />
+                <p class="text-muted-foreground">
+                  No profiles have been viewed yet
+                </p>
+              </div>
+
+              <div v-else class="space-y-3">
+                <UserItem
+                  v-for="profile in viewedProfiles"
+                  :key="profile.id"
+                  :profile="profile"
+                  :description="formatRelativeDate(profile.created_at)"
+                />
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          <!-- LIKES -->
+          <TabsContent value="liked">
+            <ScrollArea>
+              <div v-if="isLoading" class="space-y-3">
+                <Skeleton
+                  v-for="i in 4"
+                  :key="i"
+                  class="h-20 w-full rounded-xl"
+                />
+              </div>
+
+              <div
+                v-else-if="likedProfiles.length === 0"
+                class="text-center py-16"
+              >
+                <Heart class="mx-auto h-10 w-10 text-muted-foreground mb-2" />
+                <p class="text-muted-foreground">
+                  You haven't liked any profiles yet
+                </p>
+              </div>
+
+              <div v-else class="space-y-3">
+                <UserItem
+                  v-for="profile in likedProfiles"
+                  :key="profile.id"
+                  :profile="profile"
+                  :description="formatRelativeDate(profile.created_at)"
+                />
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
   </div>
 </template>
diff --git a/frontend/src/components/settings/sections/ProfileSection.vue b/frontend/src/components/settings/sections/ProfileSection.vue
index 2a0741ee..73b13aa4 100644
--- a/frontend/src/components/settings/sections/ProfileSection.vue
+++ b/frontend/src/components/settings/sections/ProfileSection.vue
@@ -1,6 +1,19 @@
 <script setup lang="ts">
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useForm, Field as VeeField } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { toast } from 'vue-sonner'
+import {
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+  parseDate,
+  today,
+  type DateValue,
+} from '@internationalized/date'
+import { Calendar as CalendarIcon, Camera, Loader2, X } from 'lucide-vue-next'
+
 import {
   Card,
   CardContent,
@@ -8,18 +21,182 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 import {
-  NumberField,
-  NumberFieldContent,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from '@/components/ui/number-field'
-import { Camera } from 'lucide-vue-next'
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
+import { cn } from '@/lib/utils'
+import { useAuthStore } from '@/store/useAuthStore'
+import { useUsers } from '@/composable/useUsers'
+import type { Profile } from '@/api/users'
+import { usePhotos } from '@/composable/usePhotos'
+
+const authStore = useAuthStore()
+const photosComposable = usePhotos()
+
+const me = authStore.user
+
+/* ------------------------------------------------------------------ */
+/*  Photos                                                            */
+/* ------------------------------------------------------------------ */
+const MAX_PHOTOS = 5
+const MAX_SIZE = 5 * 1024 * 1024 // 5 Mo
+const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp']
+
+type Photo = { id: number | null; url: string; uploading?: boolean }
+
+const photos = ref<Photo[]>([])
+const fileInput = ref<HTMLInputElement | null>(null)
+const objectUrls: string[] = []
+
+const openPicker = () => {
+  if (photos.value.length < MAX_PHOTOS) fileInput.value?.click()
+}
+
+const onFilesSelected = async (e: Event) => {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files ?? []).slice(
+    0,
+    MAX_PHOTOS - photos.value.length,
+  )
+  input.value = ''
+
+  for (const file of files) {
+    if (!ACCEPTED.includes(file.type)) {
+      toast.error(`${file.name}: unsupported format`)
+      continue
+    }
+    if (file.size > MAX_SIZE) {
+      toast.error(`${file.name}: max 5 MB`)
+      continue
+    }
+
+    const preview = URL.createObjectURL(file)
+    objectUrls.push(preview)
+
+    const photo = ref<Photo>({
+      id: null,
+      url: preview,
+      uploading: true,
+    }).value
+    photos.value.push(photo)
+
+    try {
+      const saved = await photosComposable.upload(file)
+      Object.assign(photo, {
+        id: saved[0].id,
+        url: `http://localhost:8011/api/medias/p/${saved[0].name}`,
+        uploading: false,
+      })
+    } catch {
+      photos.value = photos.value.filter(p => p.url !== photo.url)
+      toast.error(`${file.name}: upload failed`)
+    }
+  }
+}
+
+const removePhoto = async (index: number) => {
+  const photo = photos.value[index]
+  if (!photo) return
+  try {
+    if (photo.id) {
+      await photosComposable.remove(photo.id)
+    }
+    photos.value.splice(index, 1)
+  } catch {
+    toast.error('Unable to delete photo')
+  }
+}
+
+onMounted(async () => {
+  photos.value = (await photosComposable.fetchAll()).map(value => ({
+    uploading: false,
+    url: `http://localhost:8011/api/medias/p/${value.name}`,
+    id: value.id,
+  }))
+})
+
+onBeforeUnmount(() => objectUrls.forEach(URL.revokeObjectURL))
+
+const BIO_MAX = 500
+const tz = getLocalTimeZone()
+const maxBirthdate = today(tz).subtract({ years: 18 }) // 18 year minimum
+const minBirthdate = today(tz).subtract({ years: 100 })
+const df = new DateFormatter('en-US', { dateStyle: 'long' })
+
+const schema = toTypedSchema(
+  z.object({
+    firstName: z.string().trim().min(1, 'First name is required').max(50),
+    lastName: z.string().trim().min(1, 'Last name is required').max(50),
+    birthdate: z
+      .string({ required_error: 'Birthdate is required' })
+      .min(1, 'Birthdate is required')
+      .refine(
+        v => parseDate(v).compare(maxBirthdate) <= 0,
+        'You must be at least 18 years old',
+      ),
+    bio: z.string().max(BIO_MAX, `Max ${BIO_MAX} characters`).optional(),
+  }),
+)
+
+const { handleSubmit, isSubmitting, setFieldValue, values, setErrors } =
+  useForm({
+    validationSchema: schema,
+    initialValues: {
+      firstName: me?.first_name ?? '',
+      lastName: me?.last_name ?? '',
+      birthdate: me?.birthday, // format 'YYYY-MM-DD'
+      bio: me?.biography ?? '',
+    },
+  })
+
+const birthdateValue = computed<DateValue | undefined>({
+  get: () => (values.birthdate ? parseDate(values.birthdate) : undefined),
+  set: v => setFieldValue('birthdate', v ? v.toString() : ''),
+})
+
+const age = computed(() => {
+  const b = birthdateValue.value
+  if (!b) return null
+  const t = today(tz)
+  let a = t.year - b.year
+  if (t.compare(new CalendarDate(t.year, b.month, b.day)) < 0) a--
+  return a
+})
+
+const bioLength = computed(() => values.bio?.length ?? 0)
+
+const onSubmit = handleSubmit(async vals => {
+  try {
+    await authStore.updateProfile({
+      first_name: vals.firstName,
+      last_name: vals.lastName,
+      birthday: vals.birthdate,
+      biography: vals.bio ?? '',
+    })
+    toast.success('Profile updated successfully')
+  } catch (e: any) {
+    const apiErrors = e?.response?.data?.errors
+    if (apiErrors) setErrors(apiErrors)
+    toast.error(e?.response?.data?.message ?? 'Update failed')
+  }
+})
 </script>
 
 <template>
+  <!-- Photos -->
   <Card>
     <CardHeader>
       <CardTitle>Profile photos</CardTitle>
@@ -28,18 +205,65 @@ import { Camera } from 'lucide-vue-next'
       </CardDescription>
     </CardHeader>
     <CardContent>
-      <div class="grid grid-cols-3 sm:grid-cols-6 gap-3">
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        accept="image/jpeg,image/png,image/webp"
+        multiple
+        @change="onFilesSelected"
+      />
+
+      <div class="grid grid-cols-3 sm:grid-cols-5 gap-3">
         <div
-          v-for="i in 5"
+          v-for="i in MAX_PHOTOS"
           :key="i"
-          class="aspect-square rounded-xl border-2 border-dashed border-muted-foreground/25 flex items-center justify-center hover:border-primary/50 hover:bg-muted/50 cursor-pointer transition-colors"
+          class="relative aspect-square rounded-xl overflow-hidden"
         >
-          <Camera class="h-6 w-6 text-muted-foreground" />
+          <template v-if="photos[i - 1]">
+            <img
+              :src="photos[i - 1].url"
+              alt=""
+              class="h-full w-full object-cover"
+            />
+            <span
+              v-if="i === 1"
+              class="absolute bottom-1 left-1 rounded bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground"
+            >
+              Principal
+            </span>
+            <div
+              v-if="photos[i - 1] && photos[i - 1].uploading"
+              class="absolute inset-0 flex items-center justify-center bg-background/60"
+            >
+              <Loader2 class="h-6 w-6 animate-spin" />
+            </div>
+            <button
+              v-else
+              type="button"
+              class="absolute top-1 right-1 rounded-full bg-background/80 p-1 hover:bg-background"
+              aria-label="Remove photo"
+              @click="removePhoto(i - 1)"
+            >
+              <X class="h-4 w-4" />
+            </button>
+          </template>
+
+          <button
+            v-else
+            type="button"
+            class="h-full w-full rounded-xl border-2 border-dashed border-muted-foreground/25 flex items-center justify-center hover:border-primary/50 hover:bg-muted/50 transition-colors"
+            aria-label="Add photo"
+            @click="openPicker"
+          >
+            <Camera class="h-6 w-6 text-muted-foreground" />
+          </button>
         </div>
       </div>
     </CardContent>
   </Card>
 
+  <!-- Infos personnelles -->
   <Card>
     <CardHeader>
       <CardTitle>Personal Information</CardTitle>
@@ -47,38 +271,115 @@ import { Camera } from 'lucide-vue-next'
         This information is visible on your public profile.
       </CardDescription>
     </CardHeader>
-    <CardContent class="space-y-4">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div class="space-y-2">
-          <Label>First name</Label>
-          <Input placeholder="Camille" />
-        </div>
-        <div class="space-y-2">
-          <Label>Last name</Label>
-          <Input placeholder="Dupond" />
-        </div>
-        <div class="space-y-2">
-          <NumberField id="age" :default-value="18" :min="18">
-            <Label for="age">Age</Label>
-            <NumberFieldContent>
-              <NumberFieldDecrement />
-              <NumberFieldInput />
-              <NumberFieldIncrement />
-            </NumberFieldContent>
-          </NumberField>
-        </div>
-      </div>
-      <div class="space-y-2">
-        <Label>Bio</Label>
-        <textarea
-          class="flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          placeholder="Tell us a little about yourself..."
-        />
-        <p class="text-xs text-muted-foreground text-right">0 / 500</p>
-      </div>
-      <div class="flex justify-end">
-        <Button>Save changes</Button>
-      </div>
+    <CardContent>
+      <form @submit="onSubmit">
+        <FieldGroup>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <VeeField v-slot="{ field, errors }" name="firstName">
+              <Field :data-invalid="!!errors.length">
+                <FieldLabel for="firstName">First name</FieldLabel>
+                <Input
+                  id="firstName"
+                  placeholder="Camille"
+                  autocomplete="given-name"
+                  v-bind="field"
+                  :aria-invalid="!!errors.length"
+                />
+                <FieldError v-if="errors.length" :errors="errors" />
+              </Field>
+            </VeeField>
+
+            <VeeField v-slot="{ field, errors }" name="lastName">
+              <Field :data-invalid="!!errors.length">
+                <FieldLabel for="lastName">Last name</FieldLabel>
+                <Input
+                  id="lastName"
+                  placeholder="Dupond"
+                  autocomplete="family-name"
+                  v-bind="field"
+                  :aria-invalid="!!errors.length"
+                />
+                <FieldError v-if="errors.length" :errors="errors" />
+              </Field>
+            </VeeField>
+
+            <VeeField v-slot="{ errors }" name="birthdate">
+              <Field :data-invalid="!!errors.length">
+                <FieldLabel for="birthdate">Birthdate</FieldLabel>
+                <Popover>
+                  <PopoverTrigger as-child>
+                    <Button
+                      id="birthdate"
+                      type="button"
+                      variant="outline"
+                      :aria-invalid="!!errors.length"
+                      :class="
+                        cn(
+                          'w-full justify-start text-left font-normal',
+                          !birthdateValue && 'text-muted-foreground',
+                        )
+                      "
+                    >
+                      <CalendarIcon class="mr-2 h-4 w-4" />
+                      {{
+                        birthdateValue
+                          ? df.format(birthdateValue.toDate(tz))
+                          : 'Pick a date'
+                      }}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent class="w-auto p-0" align="start">
+                    <Calendar
+                      v-model="birthdateValue"
+                      :default-placeholder="maxBirthdate"
+                      :min-value="minBirthdate"
+                      :max-value="maxBirthdate"
+                      layout="month-and-year"
+                      initial-focus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FieldDescription v-if="age !== null">
+                  {{ age }} years old
+                </FieldDescription>
+                <FieldError v-if="errors.length" :errors="errors" />
+              </Field>
+            </VeeField>
+          </div>
+
+          <VeeField v-slot="{ field, errors }" name="bio">
+            <Field :data-invalid="!!errors.length">
+              <FieldLabel for="bio">Bio</FieldLabel>
+              <Textarea
+                id="bio"
+                class="min-h-24"
+                placeholder="Tell us a little about yourself..."
+                :maxlength="BIO_MAX"
+                v-bind="field"
+                :aria-invalid="!!errors.length"
+              />
+              <p
+                class="text-xs text-right"
+                :class="
+                  bioLength >= BIO_MAX
+                    ? 'text-destructive'
+                    : 'text-muted-foreground'
+                "
+              >
+                {{ bioLength }} / {{ BIO_MAX }}
+              </p>
+              <FieldError v-if="errors.length" :errors="errors" />
+            </Field>
+          </VeeField>
+
+          <div class="flex justify-end">
+            <Button type="submit" :disabled="isSubmitting">
+              <Loader2 v-if="isSubmitting" class="mr-2 h-4 w-4 animate-spin" />
+              {{ isSubmitting ? 'Saving...' : 'Save changes' }}
+            </Button>
+          </div>
+        </FieldGroup>
+      </form>
     </CardContent>
   </Card>
 </template>
diff --git a/frontend/src/composable/usePhotos.ts b/frontend/src/composable/usePhotos.ts
new file mode 100644
index 00000000..5dcb92ed
--- /dev/null
+++ b/frontend/src/composable/usePhotos.ts
@@ -0,0 +1,25 @@
+import { photosApi } from '@/api/photos'
+
+export function usePhotos() {
+  const fetchAll = async () => {
+    return await photosApi.getPhotos()
+  }
+
+  const upload = async (photo: File) => {
+    const form = new FormData()
+
+    form.append('photos[]', photo, photo.name)
+
+    return await photosApi.uploadPhoto(form)
+  }
+
+  const remove = async (id: number) => {
+    return await photosApi.deletePhoto(id)
+  }
+
+  return {
+    fetchAll,
+    upload,
+    remove,
+  }
+}
diff --git a/frontend/src/composable/useUsers.ts b/frontend/src/composable/useUsers.ts
index b9fe64af..99510b6f 100644
--- a/frontend/src/composable/useUsers.ts
+++ b/frontend/src/composable/useUsers.ts
@@ -1,11 +1,11 @@
 import { ref } from 'vue'
-import { usersApi } from '@/api/users'
+import { type Profile, usersApi } from '@/api/users'
 
 export function useUsers() {
   const isLoading = ref(false)
   const error = ref<string | null>(null)
 
-  const userProfile = ref<any>(null)
+  const userProfile = ref<Profile | null>(null)
   const blockedUsers = ref<any[]>([])
 
   // --- Consultation ---
diff --git a/frontend/src/store/useAuthStore.ts b/frontend/src/store/useAuthStore.ts
index 473762a6..d6ab4526 100644
--- a/frontend/src/store/useAuthStore.ts
+++ b/frontend/src/store/useAuthStore.ts
@@ -46,7 +46,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   // PUT|PATCH /users/me
-  async function updateProfile(data: Partial<User>): Promise<User | null> {
+  async function updateProfile(data: Partial<User & { password?: string }>): Promise<User | null> {
     loading.value = true
     error.value = null
     try {

From 66612739eaa8f02c54cfb238a858a494e37e26fe Mon Sep 17 00:00:00 2001
From: ltuffery <123221865+ltuffery@users.noreply.github.com>
Date: Wed, 14 Oct 2026 17:58:15 +0200
Subject: [PATCH 2/2] fix: empty fields

---
 .../settings/sections/AccountSection.vue      | 131 +++---
 .../settings/sections/ProfileSection.vue      | 378 +++++++++---------
 2 files changed, 279 insertions(+), 230 deletions(-)

diff --git a/frontend/src/components/settings/sections/AccountSection.vue b/frontend/src/components/settings/sections/AccountSection.vue
index 31c2d017..b9b57d36 100644
--- a/frontend/src/components/settings/sections/AccountSection.vue
+++ b/frontend/src/components/settings/sections/AccountSection.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useForm, Field as VeeField } from 'vee-validate'
+import { ref, watch } from 'vue'
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { ref } from 'vue'
 import { toast } from 'vue-sonner'
+import { storeToRefs } from 'pinia'
 
 import {
   Card,
@@ -25,6 +26,7 @@ import {
 import { useAuthStore } from '@/store/useAuthStore'
 
 const authStore = useAuthStore()
+const { user } = storeToRefs(authStore)
 
 const schema = toTypedSchema(
   z
@@ -37,21 +39,42 @@ const schema = toTypedSchema(
         .or(z.literal('')),
       passwordConfirm: z.string().optional().or(z.literal('')),
     })
-    .refine(d => !d.password || !d.passwordConfirm || d.password === d.passwordConfirm, {
+    .refine(d => !d.password || d.password === d.passwordConfirm, {
       message: 'Passwords do not match',
       path: ['passwordConfirm'],
     }),
 )
 
-const { handleSubmit, isSubmitting, resetField, setErrors } = useForm({
+const {
+  handleSubmit,
+  isSubmitting,
+  errors,
+  setErrors,
+  resetForm,
+  defineField,
+} = useForm({
   validationSchema: schema,
+  // Le user est déjà dans Pinia (navigation sans F5)
   initialValues: {
-    email: authStore.user?.email ?? '',
+    email: user.value?.email ?? '',
     password: '',
     passwordConfirm: '',
   },
 })
 
+const [email, emailAttrs] = defineField('email')
+const [password, passwordAttrs] = defineField('password')
+const [passwordConfirm, passwordConfirmAttrs] = defineField('passwordConfirm')
+
+// Le user arrive plus tard (F5) ou change (après une sauvegarde)
+watch(user, u => {
+  if (u) {
+    resetForm({
+      values: { email: u.email ?? '', password: '', passwordConfirm: '' },
+    })
+  }
+})
+
 const serverError = ref<string | null>(null)
 
 const onSubmit = handleSubmit(async values => {
@@ -62,8 +85,10 @@ const onSubmit = handleSubmit(async values => {
       ...(values.password ? { password: values.password } : {}),
     })
 
-    resetField('password')
-    resetField('passwordConfirm')
+    // Vide les champs mot de passe en gardant l'email actuel
+    resetForm({
+      values: { email: values.email, password: '', passwordConfirm: '' },
+    })
     toast.success('Profile updated successfully')
   } catch (e: any) {
     const apiErrors = e?.response?.data?.errors
@@ -84,52 +109,58 @@ const onSubmit = handleSubmit(async values => {
     <CardContent>
       <form class="space-y-4" @submit="onSubmit">
         <FieldGroup>
-          <VeeField v-slot="{ field, errors }" name="email">
-            <Field :data-invalid="!!errors.length">
-              <FieldLabel for="email">Email</FieldLabel>
-              <Input
-                id="email"
-                type="email"
-                placeholder="your@email.com"
-                v-bind="field"
-                :aria-invalid="!!errors.length"
-              />
-              <FieldError v-if="errors.length" :errors="errors" />
-            </Field>
-          </VeeField>
+          <!-- Email -->
+          <Field :data-invalid="!!errors.email">
+            <FieldLabel for="email">Email</FieldLabel>
+            <Input
+              id="email"
+              v-model="email"
+              v-bind="emailAttrs"
+              type="email"
+              placeholder="your@email.com"
+              autocomplete="email"
+              :aria-invalid="!!errors.email"
+            />
+            <FieldError v-if="errors.email" :errors="[errors.email]" />
+          </Field>
 
           <Separator />
 
-          <VeeField v-slot="{ field, errors }" name="password">
-            <Field :data-invalid="!!errors.length">
-              <FieldLabel for="password">New password</FieldLabel>
-              <Input
-                id="password"
-                type="password"
-                placeholder="********"
-                v-bind="field"
-                :aria-invalid="!!errors.length"
-              />
-              <FieldDescription>
-                Leave empty to keep your current password.
-              </FieldDescription>
-              <FieldError v-if="errors.length" :errors="errors" />
-            </Field>
-          </VeeField>
-
-          <VeeField v-slot="{ field, errors }" name="passwordConfirm">
-            <Field :data-invalid="!!errors.length">
-              <FieldLabel for="passwordConfirm">Confirm password</FieldLabel>
-              <Input
-                id="passwordConfirm"
-                type="password"
-                placeholder="********"
-                v-bind="field"
-                :aria-invalid="!!errors.length"
-              />
-              <FieldError v-if="errors.length" :errors="errors" />
-            </Field>
-          </VeeField>
+          <!-- Nouveau mot de passe -->
+          <Field :data-invalid="!!errors.password">
+            <FieldLabel for="password">New password</FieldLabel>
+            <Input
+              id="password"
+              v-model="password"
+              v-bind="passwordAttrs"
+              type="password"
+              placeholder="********"
+              autocomplete="new-password"
+              :aria-invalid="!!errors.password"
+            />
+            <FieldDescription>
+              Leave empty to keep your current password.
+            </FieldDescription>
+            <FieldError v-if="errors.password" :errors="[errors.password]" />
+          </Field>
+
+          <!-- Confirmation -->
+          <Field :data-invalid="!!errors.passwordConfirm">
+            <FieldLabel for="passwordConfirm">Confirm password</FieldLabel>
+            <Input
+              id="passwordConfirm"
+              v-model="passwordConfirm"
+              v-bind="passwordConfirmAttrs"
+              type="password"
+              placeholder="********"
+              autocomplete="new-password"
+              :aria-invalid="!!errors.passwordConfirm"
+            />
+            <FieldError
+              v-if="errors.passwordConfirm"
+              :errors="[errors.passwordConfirm]"
+            />
+          </Field>
 
           <p v-if="serverError" class="text-sm text-destructive">
             {{ serverError }}
diff --git a/frontend/src/components/settings/sections/ProfileSection.vue b/frontend/src/components/settings/sections/ProfileSection.vue
index 73b13aa4..a41fae72 100644
--- a/frontend/src/components/settings/sections/ProfileSection.vue
+++ b/frontend/src/components/settings/sections/ProfileSection.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { useForm, Field as VeeField } from 'vee-validate'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 import { toast } from 'vue-sonner'
+import { storeToRefs } from 'pinia'
 import {
   CalendarDate,
   DateFormatter,
@@ -39,21 +40,103 @@ import {
 } from '@/components/ui/field'
 import { cn } from '@/lib/utils'
 import { useAuthStore } from '@/store/useAuthStore'
-import { useUsers } from '@/composable/useUsers'
-import type { Profile } from '@/api/users'
 import { usePhotos } from '@/composable/usePhotos'
+import type { User } from '@/api/auth'
 
 const authStore = useAuthStore()
+const { user } = storeToRefs(authStore)
 const photosComposable = usePhotos()
 
-const me = authStore.user
+const BIO_MAX = 500
+const tz = getLocalTimeZone()
+const maxBirthdate = today(tz).subtract({ years: 18 })
+const minBirthdate = today(tz).subtract({ years: 100 })
+const df = new DateFormatter('en-US', { dateStyle: 'long' })
+
+const schema = toTypedSchema(
+  z.object({
+    firstName: z.string().trim().min(1, 'First name is required').max(50),
+    lastName: z.string().trim().min(1, 'Last name is required').max(50),
+    birthdate: z
+      .string()
+      .min(1, 'Birthdate is required')
+      .refine(v => /^\d{4}-\d{2}-\d{2}$/.test(v), 'Invalid date')
+      .refine(v => {
+        try {
+          return parseDate(v).compare(maxBirthdate) <= 0
+        } catch {
+          return false
+        }
+      }, 'You must be at least 18 years old'),
+    bio: z.string().max(BIO_MAX, `Max ${BIO_MAX} characters`).optional(),
+  }),
+)
+
+const toFormValues = (u: User | null) => ({
+  firstName: u?.first_name ?? '',
+  lastName: u?.last_name ?? '',
+  birthdate: u?.birthday?.slice(0, 10) ?? '',
+  bio: u?.biography ?? '',
+})
+
+const {
+  handleSubmit,
+  isSubmitting,
+  setFieldValue,
+  values,
+  errors,
+  setErrors,
+  resetForm,
+  defineField,
+} = useForm({
+  validationSchema: schema,
+  initialValues: toFormValues(user.value),
+})
+
+const [firstName, firstNameAttrs] = defineField('firstName')
+const [lastName, lastNameAttrs] = defineField('lastName')
+const [bio, bioAttrs] = defineField('bio')
+
+watch(user, u => {
+  if (u) resetForm({ values: toFormValues(u) })
+})
+
+const birthdateValue = computed<DateValue | undefined>({
+  get: () => (values.birthdate ? parseDate(values.birthdate) : undefined),
+  set: v => setFieldValue('birthdate', v ? v.toString() : ''),
+})
+
+const age = computed(() => {
+  const b = birthdateValue.value
+  if (!b) return null
+  const t = today(tz)
+  let a = t.year - b.year
+  if (t.compare(new CalendarDate(t.year, b.month, b.day)) < 0) a--
+  return a
+})
+
+const bioLength = computed(() => values.bio?.length ?? 0)
+
+const onSubmit = handleSubmit(async vals => {
+  try {
+    await authStore.updateProfile({
+      first_name: vals.firstName,
+      last_name: vals.lastName,
+      birthday: vals.birthdate,
+      biography: vals.bio ?? '',
+    })
+    toast.success('Profile updated successfully')
+  } catch (e: any) {
+    const apiErrors = e?.response?.data?.errors
+    if (apiErrors) setErrors(apiErrors)
+    toast.error(e?.response?.data?.message ?? 'Update failed')
+  }
+})
 
-/* ------------------------------------------------------------------ */
-/*  Photos                                                            */
-/* ------------------------------------------------------------------ */
 const MAX_PHOTOS = 5
-const MAX_SIZE = 5 * 1024 * 1024 // 5 Mo
+const MAX_SIZE = 5 * 1024 * 1024
 const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp']
+const MEDIA_URL = 'http://localhost:8011/api/medias/p/'
 
 type Photo = { id: number | null; url: string; uploading?: boolean }
 
@@ -86,22 +169,18 @@ const onFilesSelected = async (e: Event) => {
     const preview = URL.createObjectURL(file)
     objectUrls.push(preview)
 
-    const photo = ref<Photo>({
-      id: null,
-      url: preview,
-      uploading: true,
-    }).value
-    photos.value.push(photo)
+    photos.value.push({ id: null, url: preview, uploading: true })
+    const photo = photos.value[photos.value.length - 1] // version réactive
 
     try {
       const saved = await photosComposable.upload(file)
       Object.assign(photo, {
         id: saved[0].id,
-        url: `http://localhost:8011/api/medias/p/${saved[0].name}`,
+        url: MEDIA_URL + saved[0].name,
         uploading: false,
       })
     } catch {
-      photos.value = photos.value.filter(p => p.url !== photo.url)
+      photos.value = photos.value.filter(p => p !== photo)
       toast.error(`${file.name}: upload failed`)
     }
   }
@@ -111,9 +190,7 @@ const removePhoto = async (index: number) => {
   const photo = photos.value[index]
   if (!photo) return
   try {
-    if (photo.id) {
-      await photosComposable.remove(photo.id)
-    }
+    if (photo.id) await photosComposable.remove(photo.id)
     photos.value.splice(index, 1)
   } catch {
     toast.error('Unable to delete photo')
@@ -121,78 +198,14 @@ const removePhoto = async (index: number) => {
 }
 
 onMounted(async () => {
-  photos.value = (await photosComposable.fetchAll()).map(value => ({
+  photos.value = (await photosComposable.fetchAll()).map(p => ({
+    id: p.id,
+    url: MEDIA_URL + p.name,
     uploading: false,
-    url: `http://localhost:8011/api/medias/p/${value.name}`,
-    id: value.id,
   }))
 })
 
 onBeforeUnmount(() => objectUrls.forEach(URL.revokeObjectURL))
-
-const BIO_MAX = 500
-const tz = getLocalTimeZone()
-const maxBirthdate = today(tz).subtract({ years: 18 }) // 18 year minimum
-const minBirthdate = today(tz).subtract({ years: 100 })
-const df = new DateFormatter('en-US', { dateStyle: 'long' })
-
-const schema = toTypedSchema(
-  z.object({
-    firstName: z.string().trim().min(1, 'First name is required').max(50),
-    lastName: z.string().trim().min(1, 'Last name is required').max(50),
-    birthdate: z
-      .string({ required_error: 'Birthdate is required' })
-      .min(1, 'Birthdate is required')
-      .refine(
-        v => parseDate(v).compare(maxBirthdate) <= 0,
-        'You must be at least 18 years old',
-      ),
-    bio: z.string().max(BIO_MAX, `Max ${BIO_MAX} characters`).optional(),
-  }),
-)
-
-const { handleSubmit, isSubmitting, setFieldValue, values, setErrors } =
-  useForm({
-    validationSchema: schema,
-    initialValues: {
-      firstName: me?.first_name ?? '',
-      lastName: me?.last_name ?? '',
-      birthdate: me?.birthday, // format 'YYYY-MM-DD'
-      bio: me?.biography ?? '',
-    },
-  })
-
-const birthdateValue = computed<DateValue | undefined>({
-  get: () => (values.birthdate ? parseDate(values.birthdate) : undefined),
-  set: v => setFieldValue('birthdate', v ? v.toString() : ''),
-})
-
-const age = computed(() => {
-  const b = birthdateValue.value
-  if (!b) return null
-  const t = today(tz)
-  let a = t.year - b.year
-  if (t.compare(new CalendarDate(t.year, b.month, b.day)) < 0) a--
-  return a
-})
-
-const bioLength = computed(() => values.bio?.length ?? 0)
-
-const onSubmit = handleSubmit(async vals => {
-  try {
-    await authStore.updateProfile({
-      first_name: vals.firstName,
-      last_name: vals.lastName,
-      birthday: vals.birthdate,
-      biography: vals.bio ?? '',
-    })
-    toast.success('Profile updated successfully')
-  } catch (e: any) {
-    const apiErrors = e?.response?.data?.errors
-    if (apiErrors) setErrors(apiErrors)
-    toast.error(e?.response?.data?.message ?? 'Update failed')
-  }
-})
 </script>
 
 <template>
@@ -233,7 +246,7 @@ const onSubmit = handleSubmit(async vals => {
               Principal
             </span>
             <div
-              v-if="photos[i - 1] && photos[i - 1].uploading"
+              v-if="photos[i - 1].uploading"
               class="absolute inset-0 flex items-center justify-center bg-background/60"
             >
               <Loader2 class="h-6 w-6 animate-spin" />
@@ -275,102 +288,107 @@ const onSubmit = handleSubmit(async vals => {
       <form @submit="onSubmit">
         <FieldGroup>
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <VeeField v-slot="{ field, errors }" name="firstName">
-              <Field :data-invalid="!!errors.length">
-                <FieldLabel for="firstName">First name</FieldLabel>
-                <Input
-                  id="firstName"
-                  placeholder="Camille"
-                  autocomplete="given-name"
-                  v-bind="field"
-                  :aria-invalid="!!errors.length"
-                />
-                <FieldError v-if="errors.length" :errors="errors" />
-              </Field>
-            </VeeField>
-
-            <VeeField v-slot="{ field, errors }" name="lastName">
-              <Field :data-invalid="!!errors.length">
-                <FieldLabel for="lastName">Last name</FieldLabel>
-                <Input
-                  id="lastName"
-                  placeholder="Dupond"
-                  autocomplete="family-name"
-                  v-bind="field"
-                  :aria-invalid="!!errors.length"
-                />
-                <FieldError v-if="errors.length" :errors="errors" />
-              </Field>
-            </VeeField>
-
-            <VeeField v-slot="{ errors }" name="birthdate">
-              <Field :data-invalid="!!errors.length">
-                <FieldLabel for="birthdate">Birthdate</FieldLabel>
-                <Popover>
-                  <PopoverTrigger as-child>
-                    <Button
-                      id="birthdate"
-                      type="button"
-                      variant="outline"
-                      :aria-invalid="!!errors.length"
-                      :class="
-                        cn(
-                          'w-full justify-start text-left font-normal',
-                          !birthdateValue && 'text-muted-foreground',
-                        )
-                      "
-                    >
-                      <CalendarIcon class="mr-2 h-4 w-4" />
-                      {{
-                        birthdateValue
-                          ? df.format(birthdateValue.toDate(tz))
-                          : 'Pick a date'
-                      }}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent class="w-auto p-0" align="start">
-                    <Calendar
-                      v-model="birthdateValue"
-                      :default-placeholder="maxBirthdate"
-                      :min-value="minBirthdate"
-                      :max-value="maxBirthdate"
-                      layout="month-and-year"
-                      initial-focus
-                    />
-                  </PopoverContent>
-                </Popover>
-                <FieldDescription v-if="age !== null">
-                  {{ age }} years old
-                </FieldDescription>
-                <FieldError v-if="errors.length" :errors="errors" />
-              </Field>
-            </VeeField>
-          </div>
+            <!-- Prénom -->
+            <Field :data-invalid="!!errors.firstName">
+              <FieldLabel for="firstName">First name</FieldLabel>
+              <Input
+                id="firstName"
+                v-model="firstName"
+                v-bind="firstNameAttrs"
+                placeholder="Camille"
+                autocomplete="given-name"
+                :aria-invalid="!!errors.firstName"
+              />
+              <FieldError
+                v-if="errors.firstName"
+                :errors="[errors.firstName]"
+              />
+            </Field>
 
-          <VeeField v-slot="{ field, errors }" name="bio">
-            <Field :data-invalid="!!errors.length">
-              <FieldLabel for="bio">Bio</FieldLabel>
-              <Textarea
-                id="bio"
-                class="min-h-24"
-                placeholder="Tell us a little about yourself..."
-                :maxlength="BIO_MAX"
-                v-bind="field"
-                :aria-invalid="!!errors.length"
+            <!-- Nom -->
+            <Field :data-invalid="!!errors.lastName">
+              <FieldLabel for="lastName">Last name</FieldLabel>
+              <Input
+                id="lastName"
+                v-model="lastName"
+                v-bind="lastNameAttrs"
+                placeholder="Dupond"
+                autocomplete="family-name"
+                :aria-invalid="!!errors.lastName"
               />
-              <p
-                class="text-xs text-right"
-                :class="
-                  bioLength >= BIO_MAX
-                    ? 'text-destructive'
-                    : 'text-muted-foreground'
-                "
+              <FieldError v-if="errors.lastName" :errors="[errors.lastName]" />
+            </Field>
+
+            <!-- Date de naissance -->
+            <Field :data-invalid="!!errors.birthdate">
+              <FieldLabel for="birthdate">Birthdate</FieldLabel>
+              <Popover>
+                <PopoverTrigger as-child>
+                  <Button
+                    id="birthdate"
+                    type="button"
+                    variant="outline"
+                    :aria-invalid="!!errors.birthdate"
+                    :class="
+                      cn(
+                        'w-full justify-start text-left font-normal',
+                        !birthdateValue && 'text-muted-foreground',
+                      )
+                    "
+                  >
+                    <CalendarIcon class="mr-2 h-4 w-4" />
+                    {{
+                      birthdateValue
+                        ? df.format(birthdateValue.toDate(tz))
+                        : 'Pick a date'
+                    }}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent class="w-auto p-0" align="start">
+                  <Calendar
+                    v-model="birthdateValue"
+                    :default-placeholder="maxBirthdate"
+                    :min-value="minBirthdate"
+                    :max-value="maxBirthdate"
+                    layout="month-and-year"
+                    initial-focus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FieldDescription v-if="age !== null"
+                >{{ age }} years old</FieldDescription
               >
-                {{ bioLength }} / {{ BIO_MAX }}
-              </p>
-              <FieldError v-if="errors.length" :errors="errors" />
+              <FieldError
+                v-if="errors.birthdate"
+                :errors="[errors.birthdate]"
+              />
             </Field>
-          </VeeField>
+          </div>
+
+          <!-- Bio -->
+          <Field :data-invalid="!!errors.bio">
+            <FieldLabel for="bio">Bio</FieldLabel>
+            <Textarea
+              id="bio"
+              v-model="bio"
+              v-bind="bioAttrs"
+              class="min-h-24"
+              placeholder="Tell us a little about yourself..."
+              :maxlength="BIO_MAX"
+              :aria-invalid="!!errors.bio"
+            />
+            <p
+              class="text-xs text-right"
+              :class="
+                bioLength >= BIO_MAX
+                  ? 'text-destructive'
+                  : 'text-muted-foreground'
+              "
+            >
+              {{ bioLength }} / {{ BIO_MAX }}
+            </p>
+            <FieldError v-if="errors.bio" :errors="[errors.bio]" />
+          </Field>
 
           <div class="flex justify-end">
             <Button type="submit" :disabled="isSubmitting">