Amélioration du bouton de copie du lien unique

- 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
This commit is contained in:
2025-11-23 11:03:22 +01:00
parent ea2d620c7a
commit 83c209117e

View File

@ -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>