Ajout du système d'administration avec token unique et QR code

- Implémentation complète du système d'administration (/admin)
- Gestion des clients avec base de données JSON
- Génération de token unique et QR code pour chaque client
- Intégration des données client dans l'application (bungalow, WiFi, message)
- Amélioration du composant WifiCard avec fallback de copie
- Optimisation du hook useClientData pour chargement immédiat
- Ajout de la variable d'environnement ADMIN_PASSWORD

components/accueil/WifiCard.tsx

@@ -1,24 +1,75 @@
 "use client";
 
-import { useState } from "react";
-import { Wifi, Copy, Check } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Wifi, Copy, Check, AlertCircle } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { config } from "@/lib/config";
+import { useClientData } from "@/lib/hooks/useClientData";
 
 export default function WifiCard() {
+  const { wifiName, wifiPassword, loading } = useClientData();
   const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleCopyPassword = async () => {
+  // Fonction de copie avec fallback pour les navigateurs qui ne supportent pas l'API Clipboard
+  const copyToClipboard = async (text: string): Promise<boolean> => {
+    // Méthode moderne (nécessite HTTPS ou localhost)
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch (err) {
+        console.error("Erreur avec l'API Clipboard:", err);
+      }
+    }
+
+    // Fallback pour les navigateurs plus anciens ou contextes non sécurisés
     try {
-      await navigator.clipboard.writeText(config.wifiPassword);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      
+      const successful = document.execCommand("copy");
+      document.body.removeChild(textArea);
+      
+      if (successful) {
+        return true;
+      } else {
+        throw new Error("La commande copy a échoué");
+      }
     } catch (err) {
-      console.error("Erreur lors de la copie:", err);
+      console.error("Erreur avec la méthode fallback:", err);
+      return false;
     }
   };
 
+  const handleCopyPassword = async () => {
+    if (!wifiPassword || wifiPassword.trim() === "") {
+      setError("Le mot de passe WiFi n'est pas disponible");
+      setTimeout(() => setError(null), 3000);
+      return;
+    }
+
+    setError(null);
+    const success = await copyToClipboard(wifiPassword);
+
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } else {
+      setError("Impossible de copier. Veuillez sélectionner manuellement le mot de passe ci-dessous.");
+      setTimeout(() => setError(null), 5000);
+    }
+  };
+
+  // Afficher le mot de passe en cas d'échec de la copie
+  const showPasswordFallback = error && error.includes("sélectionner manuellement");
+
   return (
     <Card className="bg-white">
       <CardHeader>
@@ -30,14 +81,36 @@ export default function WifiCard() {
       <CardContent className="space-y-4">
         <div>
           <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
-          <p className="text-lg font-semibold text-primary">{config.wifiName}</p>
+          <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
         </div>
+
+        {showPasswordFallback && wifiPassword && (
+          <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3">
+            <p className="text-sm text-yellow-800 font-mono select-all">
+              {wifiPassword}
+            </p>
+          </div>
+        )}
+
+        {error && !showPasswordFallback && (
+          <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2">
+            <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-red-800">{error}</p>
+          </div>
+        )}
+
         <Button
           onClick={handleCopyPassword}
+          disabled={loading || !wifiPassword}
           className="w-full h-14 text-lg"
           size="lg"
         >
-          {copied ? (
+          {loading ? (
+            <>
+              <Copy className="mr-2 h-5 w-5" />
+              Chargement...
+            </>
+          ) : copied ? (
             <>
               <Check className="mr-2 h-5 w-5" />
               Mot de passe copié !