From 83c209117e171cdc242d5d57397b245c4ed2de8b Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Sun, 23 Nov 2025 11:03:22 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20du=20bouton=20de=20copie=20?=
 =?UTF-8?q?du=20lien=20unique?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout d'un feedback visuel (bouton devient vert + 'Copié !')
- Icônes Copy et Check pour plus de clarté
- Fallback pour navigateurs anciens (document.execCommand)
- Meilleur affichage du lien (plus grand, en monospace)
- Message explicatif pour l'utilisateur
---
 components/admin/ClientForm.tsx | 54 ++++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/components/admin/ClientForm.tsx b/components/admin/ClientForm.tsx
index 94bc278..0a87310 100644
--- a/components/admin/ClientForm.tsx
+++ b/components/admin/ClientForm.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Client, ClientInput } from "@/lib/types/client";
 import QRCodeDisplay from "./QRCodeDisplay";
+import { Copy, Check } from "lucide-react";
 
 interface ClientFormProps {
   client?: Client;
@@ -24,6 +25,7 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
+  const [copied, setCopied] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -68,6 +70,29 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
     return `${baseUrl}/accueil?token=${createdClient.token}`;
   };
 
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(getClientUrl());
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Erreur lors de la copie:", err);
+      // Fallback pour les navigateurs plus anciens
+      const textArea = document.createElement("textarea");
+      textArea.value = getClientUrl();
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        document.execCommand("copy");
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (e) {
+        alert("Impossible de copier. Veuillez copier manuellement le lien.");
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -167,19 +192,32 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
             <h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-gray-600 mb-2">Lien unique :</p>
-                <div className="bg-secondary rounded-xl p-3 flex items-center justify-between gap-2">
-                  <code className="text-xs break-all flex-1">{getClientUrl()}</code>
+                <p className="text-sm font-medium text-gray-700 mb-2">Lien unique :</p>
+                <div className="bg-secondary rounded-xl p-4 space-y-3">
+                  <code className="text-sm break-all block text-primary font-mono">
+                    {getClientUrl()}
+                  </code>
                   <Button
                     size="sm"
-                    variant="outline"
-                    onClick={() => {
-                      navigator.clipboard.writeText(getClientUrl());
-                    }}
+                    onClick={handleCopyLink}
+                    className={`w-full ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
                   >
-                    Copier
+                    {copied ? (
+                      <>
+                        <Check className="h-4 w-4 mr-2" />
+                        Copié !
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="h-4 w-4 mr-2" />
+                        Copier le lien
+                      </>
+                    )}
                   </Button>
                 </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  Partagez ce lien avec le client pour qu&apos;il configure son app automatiquement
+                </p>
               </div>
               <div>
                 <p className="text-sm text-gray-600 mb-2">QR Code :</p>