BDD-25 — Affichage de la photo de profil du client

1. User Story

En tant que client externe Je veux voir apparaitre ma photo de profil dans mon icon user Afin de avoir une expérience personnalisé

2. Criteres d'acceptance

1. Affichage de la photo de profil sur le MainLayout
2. En cas d'erreur ou icon null, afficher une icon par défaut

3. Perimetre fonctionnel

• MainLayout front: front/src/layouts/MainLayout.vue
• Composant de bascule de mode: front/src/components/ui/ProfileButton.vue
• Récupération des données de l'image cote front via store: front/src/stores/user-store.js

4. Points de verification

• Affichage de l'avatar utilisateur dans ProfileButton (header desktop et mobile).
• Si user.photo.url est present, l'image de profil est affichee dans les deux avatars (bouton + menu profil).
• Si user.photo.url est absent/null, un avatar par defaut est affiche (icone utilisateur).
• Affichage des informations utilisateur dans le menu profil (nom complet et email).
• Presence du composant ProfileButton dans MainLayout en desktop et en mobile.
• Le bouton Quitter reste fonctionnel (logout puis redirection /login) sans regression.

5. Tests associes

• Tests unitaires/composants:

  • front/src/__tests__/components/ui/ProfileButton.spec.js
    • affichage nom / email / bouton quitter
    • verification du fallback avatar par defaut
    • verification affichage image si user.photo.url est renseigne
    • logout + redirection /login
  • front/src/__tests__/layouts/MainLayout.spec.js
    • presence de ProfileButton en desktop et mobile
    • affichage des informations utilisateur dans le header

• Tests E2E front recommandes (Playwright):

  • affichage de la photo de profil dans le header apres authentification
  • fallback icone si aucune photo n'est disponible
  • verification de la photo dans le menu profil ouvert