From e8f0202b1525b231ac090abbe9643312975c8a56 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 21:57:55 +0100
Subject: [PATCH] feat(avatar) : add profile page with avatar upload and crop

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/i18n/locales/fr.json      |  7 +++
 frontend/middleware/auth.global.ts | 15 +++---
 frontend/pages/profile.vue         | 85 ++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 frontend/pages/profile.vue

diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index cd45bf8..1044ec1 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -237,6 +237,7 @@
         "new": "Nouveau ticket",
         "created": "Ticket créé avec succès.",
         "deleted": "Ticket supprimé avec succès.",
+        "updated": "Ticket mis à jour avec succès.",
         "statusUpdated": "Statut du ticket mis à jour.",
         "type": {
             "bug": "Bug",
@@ -290,6 +291,12 @@
             "days": "Il y a {n}j"
         }
     },
+    "profile": {
+        "title": "Mon profil",
+        "changeAvatar": "Changer l'avatar",
+        "removeAvatar": "Supprimer l'avatar",
+        "cropAvatar": "Recadrer l'avatar"
+    },
     "bookstack": {
         "settings": {
             "title": "Configuration BookStack",
diff --git a/frontend/middleware/auth.global.ts b/frontend/middleware/auth.global.ts
index 69e8499..76af8ef 100644
--- a/frontend/middleware/auth.global.ts
+++ b/frontend/middleware/auth.global.ts
@@ -10,17 +10,16 @@ export default defineNuxtRouteMiddleware(async (to) => {
         return navigateTo('/login')
     }
 
+    const isClientOnly = auth.isAuthenticated
+        && auth.user?.roles?.includes('ROLE_CLIENT')
+        && !auth.user?.roles?.includes('ROLE_ADMIN')
+
     if (isLogin && auth.isAuthenticated) {
-        const isClientOnly = auth.user?.roles?.includes('ROLE_CLIENT') && !auth.user?.roles?.includes('ROLE_ADMIN')
         return navigateTo(isClientOnly ? '/portal' : '/')
     }
 
-    // ROLE_CLIENT without ROLE_ADMIN: redirect to /portal, block internal pages
-    if (auth.isAuthenticated && auth.user?.roles?.includes('ROLE_CLIENT') && !auth.user?.roles?.includes('ROLE_ADMIN')) {
-        const isPortalRoute = to.path.startsWith('/portal')
-        const isLoginRoute = to.path === '/login'
-        if (!isPortalRoute && !isLoginRoute) {
-            return navigateTo('/portal')
-        }
+    const isProfileRoute = to.path === '/profile'
+    if (isClientOnly && !to.path.startsWith('/portal') && !isProfileRoute) {
+        return navigateTo('/portal')
     }
 })
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
new file mode 100644
index 0000000..625e5c5
--- /dev/null
+++ b/frontend/pages/profile.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="mx-auto max-w-lg px-4 py-10">
+        <h1 class="mb-8 text-2xl font-bold text-neutral-900">{{ $t('profile.title') }}</h1>
+
+        <div class="flex flex-col items-center gap-6 rounded-xl border border-neutral-200 bg-white p-8 shadow-sm">
+            <!-- Current avatar -->
+            <UserAvatar
+                v-if="auth.user"
+                :user="auth.user"
+                size="lg"
+            />
+
+            <p class="text-lg font-semibold text-neutral-800">{{ auth.user?.username }}</p>
+
+            <div class="flex gap-3">
+                <label
+                    class="cursor-pointer rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500"
+                >
+                    {{ $t('profile.changeAvatar') }}
+                    <input
+                        type="file"
+                        accept="image/jpeg,image/png,image/webp,image/gif"
+                        class="hidden"
+                        @change="onFileSelect"
+                    />
+                </label>
+
+                <button
+                    v-if="auth.user?.avatarUrl"
+                    type="button"
+                    class="rounded-lg border border-red-300 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50"
+                    :disabled="removing"
+                    @click="onRemove"
+                >
+                    {{ $t('profile.removeAvatar') }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Crop modal -->
+        <AvatarCropper
+            v-if="selectedFile"
+            :image-file="selectedFile"
+            @crop="onCrop"
+            @cancel="selectedFile = null"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const auth = useAuthStore()
+const { upload, remove } = useAvatarService()
+
+const selectedFile = ref<File | null>(null)
+const removing = ref(false)
+
+function onFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) {
+        selectedFile.value = file
+    }
+    input.value = ''
+}
+
+async function onCrop(blob: Blob) {
+    selectedFile.value = null
+    if (!auth.user) return
+
+    await upload(auth.user.id, blob)
+    await auth.refreshUser()
+}
+
+async function onRemove() {
+    if (!auth.user) return
+    removing.value = true
+
+    try {
+        await remove(auth.user.id)
+        await auth.refreshUser()
+    } finally {
+        removing.value = false
+    }
+}
+</script>