+
+
+
+ ```
+
+- [ ] **Step 2 : Commit**
+
+ ```bash
+ git -C /home/r-dev/malio-dev/Lesstime add frontend/components/mail/MailMessageList.vue
+ git -C /home/r-dev/malio-dev/Lesstime commit -m "feat(mail) : MailMessageList — liste paginée infinite scroll, indicateurs lu/étoilé/PJ/date relative"
+ ```
+
+---
+
+### Task 7 : Composant `MailMessageViewer.vue`
+
+Lecteur de mail complet. Reçoit le détail complet du message sélectionné. Sanitize le HTML body via `sanitizeMailHtml`. Gère le toggle "Afficher les images distantes". Actions : Créer tâche, Lier à tâche, Marquer lu/non-lu, Étoiler. Téléchargement PJ.
+
+- [ ] **Step 1 : Créer `frontend/components/mail/MailMessageViewer.vue`**
+
+ ```vue
+
+
+
+
+ {{ t('mail.empty.list') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ Points clés :
+ - `v-html="sanitizedBody"` est le **seul** `v-html` du composant, et il reçoit toujours la sortie de `sanitizeMailHtml` — jamais le `rawHtml` brut directement.
+ - La bannière "Afficher les images" est visible dès qu'il y a un `bodyHtml` et que `showImages` est false.
+ - `handleDownload` crée un lien `` temporaire pour déclencher le téléchargement du Blob retourné par `mailService.downloadAttachment`.
+
+- [ ] **Step 2 : Commit**
+
+ ```bash
+ git -C /home/r-dev/malio-dev/Lesstime add frontend/components/mail/MailMessageViewer.vue
+ git -C /home/r-dev/malio-dev/Lesstime commit -m "feat(mail) : MailMessageViewer — header, body sanitizé DOMPurify, PJ téléchargeables, 4 actions"
+ ```
+
+---
+
+### Task 8 : Page `pages/mail.vue`
+
+Page principale en layout 3 colonnes. Intègre les 4 composants créés ci-dessus. Gère le deep-link `?messageId=X`. Vérifie le rôle ROLE_CLIENT (redirection `/portal`). Le middleware global `auth.global.ts` gère déjà l'authentification de base — ici on ajoute seulement le check spécifique ROLE_CLIENT dans `onMounted`.
+
+- [ ] **Step 1 : Créer `frontend/pages/mail.vue`**
+
+ ```vue
+
+
+
+
+ {{ t('mail.empty.viewer') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ detail.header.subject ?? t('mail.noSubject') }} +
+ + +-
+
- {{ t('mail.from') }} +
- + {{ + detail.header.fromName + ? `${detail.header.fromName} <${detail.header.fromEmail}>` + : (detail.header.fromEmail ?? '') + }} + +
- {{ t('mail.to') }} +
- {{ joinAddresses(detail.header.toRecipients) }} +
- {{ t('mail.cc') }} +
- {{ joinAddresses(detail.header.ccRecipients) }} +
- {{ t('mail.date') }} +
- {{ formatDate(detail.header.sentAt ?? detail.header.receivedAt) }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ detail.bodyText }}
+
+
+
+ + {{ t('mail.attachments') }} ({{ detail.attachments.length }}) +
+
+
+
+
+
+
+
+ ```
+
+ Points clés :
+ - `await navigateTo('/portal')` au niveau du `` dans un corps de mail (via devtools ou fixture)
+ - [ ] Ouvrir le mail dans le lecteur → aucune alerte JS, contenu rendu inoffensif
+ - [ ] Vérifier dans le DOM inspecté que la balise `` → aucune alerte |
+| Images distantes bloquées par défaut | Body avec `
+
+
+
+ + {{ t('mail.title') }} +
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ t('mail.messages') }} +
+
+
+
+
+