From e1bf9ecb22488781b0ac388fcc6b81044b9f0f4e Mon Sep 17 00:00:00 2001
From: Matthieu <contact@malio.fr>
Date: Mon, 1 Jun 2026 22:52:07 +0200
Subject: [PATCH] fix(frontend) : copie presse-papiers fonctionnelle en HTTP
 via fallback execCommand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

navigator.clipboard n'est disponible qu'en secure context (HTTPS/localhost),
ce qui cassait la copie en prod HTTP. Ajout d'un utilitaire copyToClipboard
avec fallback textarea + execCommand, appliqué au viewer Markdown, au token
API du profil et au nom de branche Git.
---
 .../components/task/TaskDocumentPreview.vue   |  6 +--
 frontend/components/task/TaskGitSection.vue   |  3 +-
 frontend/pages/profile.vue                    |  6 +--
 frontend/utils/clipboard.ts                   | 40 +++++++++++++++++++
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 frontend/utils/clipboard.ts

diff --git a/frontend/components/task/TaskDocumentPreview.vue b/frontend/components/task/TaskDocumentPreview.vue
index deb7781..e6e4327 100644
--- a/frontend/components/task/TaskDocumentPreview.vue
+++ b/frontend/components/task/TaskDocumentPreview.vue
@@ -124,6 +124,7 @@
 import type { TaskDocument } from '~/services/dto/task-document'
 import { useTaskDocumentService } from '~/services/task-documents'
 import { formatFileSize } from '~/utils/format'
+import { copyToClipboard } from '~/utils/clipboard'
 
 const props = defineProps<{
     document: TaskDocument | null
@@ -159,13 +160,10 @@ const isPdf = computed(() => props.document?.mimeType === 'application/pdf')
 const isText = computed(() => isTextDocument(props.document))
 
 async function copyContent() {
-    try {
-        await navigator.clipboard.writeText(textContent.value)
+    if (await copyToClipboard(textContent.value)) {
         copied.value = true
         useToast().success(t('taskDocuments.copied'))
         setTimeout(() => { copied.value = false }, 2000)
-    } catch {
-        // Clipboard unavailable
     }
 }
 
diff --git a/frontend/components/task/TaskGitSection.vue b/frontend/components/task/TaskGitSection.vue
index ae4012a..0e6dffc 100644
--- a/frontend/components/task/TaskGitSection.vue
+++ b/frontend/components/task/TaskGitSection.vue
@@ -229,6 +229,7 @@
 import type { Task } from '~/services/dto/task'
 import type { GiteaBranch, GiteaPullRequest } from '~/services/dto/gitea'
 import { useGiteaService } from '~/services/gitea'
+import { copyToClipboard } from '~/utils/clipboard'
 
 const { t } = useI18n()
 const props = defineProps<{
@@ -374,7 +375,7 @@ async function handleCreate() {
 async function handleCopy() {
     try {
         const result = await getBranchName(props.task.id, branchForm.type)
-        await navigator.clipboard.writeText(result.name)
+        await copyToClipboard(result.name)
         const { success } = useToast()
         success(t('gitea.branch.copied'))
     } catch {
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 2119c80..368185f 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -129,6 +129,7 @@
 <script setup lang="ts">
 import { useAvatarService } from '~/composables/useAvatarService'
 import { useApiTokenService } from '~/services/api-token'
+import { copyToClipboard } from '~/utils/clipboard'
 
 const auth = useAuthStore()
 const toast = useToast()
@@ -181,10 +182,9 @@ async function onRemove() {
 
 async function onCopy() {
     if (!auth.user?.apiToken) return
-    try {
-        await navigator.clipboard.writeText(auth.user.apiToken)
+    if (await copyToClipboard(auth.user.apiToken)) {
         toast.success({ message: t('profile.apiToken.copied') })
-    } catch {
+    } else {
         toast.error({ message: t('profile.apiToken.copyFailed') })
     }
 }
diff --git a/frontend/utils/clipboard.ts b/frontend/utils/clipboard.ts
new file mode 100644
index 0000000..4c13dd9
--- /dev/null
+++ b/frontend/utils/clipboard.ts
@@ -0,0 +1,40 @@
+/**
+ * Copy text to the clipboard with a fallback for non-secure contexts.
+ *
+ * `navigator.clipboard` is only available in secure contexts (HTTPS or
+ * localhost). On a plain HTTP origin (e.g. an internal/prod server without
+ * TLS) the API is missing, so we fall back to the legacy
+ * `document.execCommand('copy')` using a temporary off-screen textarea.
+ *
+ * @returns `true` if the copy succeeded, `false` otherwise.
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+    // Preferred path: available in secure contexts (HTTPS / localhost).
+    if (navigator.clipboard && window.isSecureContext) {
+        try {
+            await navigator.clipboard.writeText(text)
+            return true
+        } catch {
+            // Fall through to the legacy fallback below.
+        }
+    }
+
+    // Legacy fallback: works on plain HTTP origins.
+    try {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        // Keep it out of view and prevent layout shift / scrolling.
+        textarea.style.position = 'fixed'
+        textarea.style.top = '-9999px'
+        textarea.style.left = '-9999px'
+        textarea.setAttribute('readonly', '')
+        document.body.appendChild(textarea)
+        textarea.select()
+        textarea.setSelectionRange(0, text.length)
+        const ok = document.execCommand('copy')
+        document.body.removeChild(textarea)
+        return ok
+    } catch {
+        return false
+    }
+}