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:
@ -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'il configure son app automatiquement
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">QR Code :</p>
|
||||
|
||||
Reference in New Issue
Block a user