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 { 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'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>
|
||||||
|
|||||||
Reference in New Issue
Block a user