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 { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Client, ClientInput } from "@/lib/types/client"; import { Client, ClientInput } from "@/lib/types/client";
import QRCodeDisplay from "./QRCodeDisplay"; import QRCodeDisplay from "./QRCodeDisplay";
import { Copy, Check } from "lucide-react";
interface ClientFormProps { interface ClientFormProps {
client?: Client; client?: Client;
@ -24,6 +25,7 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [createdClient, setCreatedClient] = useState<Client | null>(client || null); const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
const [copied, setCopied] = useState(false);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@ -68,6 +70,29 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
return `${baseUrl}/accueil?token=${createdClient.token}`; 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 ( return (
<Card> <Card>
<CardHeader> <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> <h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<p className="text-sm text-gray-600 mb-2">Lien unique :</p> <p className="text-sm font-medium text-gray-700 mb-2">Lien unique :</p>
<div className="bg-secondary rounded-xl p-3 flex items-center justify-between gap-2"> <div className="bg-secondary rounded-xl p-4 space-y-3">
<code className="text-xs break-all flex-1">{getClientUrl()}</code> <code className="text-sm break-all block text-primary font-mono">
{getClientUrl()}
</code>
<Button <Button
size="sm" size="sm"
variant="outline" onClick={handleCopyLink}
onClick={() => { className={`w-full ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
navigator.clipboard.writeText(getClientUrl());
}}
> >
Copier {copied ? (
<>
<Check className="h-4 w-4 mr-2" />
Copié !
</>
) : (
<>
<Copy className="h-4 w-4 mr-2" />
Copier le lien
</>
)}
</Button> </Button>
</div> </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>
<div> <div>
<p className="text-sm text-gray-600 mb-2">QR Code :</p> <p className="text-sm text-gray-600 mb-2">QR Code :</p>