Now the sdashboard handle setProcess, setMyProcesses & setUserPairingId

app/dashboard/layout.tsx

@@ -27,11 +27,15 @@ import {
 import AuthModal from "@/components/4nk/AuthModal"
 import MessageBus from "@/lib/4nk/MessageBus"
 import UserStore from "@/lib/4nk/UserStore"
+import Iframe from "@/components/4nk/Iframe"
 // DebugInfo supprimé
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
+  const [processes, setProcesses] = useState<any>(null)
+  const [myProcesses, setMyProcesses] = useState<string[]>([])
+  const [userPairingId, setUserPairingId] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [isMockMode, setIsMockMode] = useState(false)
   const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -52,6 +56,39 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     { name: "Paramètres", href: "/dashboard/settings", icon: Settings },
   ]
 
+  useEffect(() => {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      messageBus.isReady().then(() => {
+        messageBus.getProcesses().then((processes: any) => {
+          setProcesses(processes);
+        });
+      });
+  }, [iframeUrl]);
+
+  useEffect(() => {
+    if (processes !== null) {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      messageBus.isReady().then(() => {
+        messageBus.getMyProcesses().then((res: string[]) => {
+          setMyProcesses(res);
+        })
+      });
+    }
+  }, [processes]);
+
+  useEffect(() => {
+    if (userPairingId === null) {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      messageBus.isReady().then(() => {
+        messageBus.getUserPairingId().then((userPairingId: string) => {
+          UserStore.getInstance().pair(userPairingId);
+          setUserPairingId(UserStore.getInstance().getUserPairingId());
+          console.log("User paired!");
+        })
+      });
+    }
+  }, [userPairingId, processes]);
+
   useEffect(() => {
     const checkAuthentication = async () => {
       try {
@@ -60,24 +97,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         const messageBus = MessageBus.getInstance(iframeUrl)
 
         if (accessToken) {
-          // Vérifier si on est en mode mock
-          // const mockMode = messageBus.isInMockMode()
-          // setIsMockMode(mockMode)
-
-          if (true) {
-            console.log("🎭 Dashboard en mode mock")
-            setIsAuthenticated(true)
-            setUserInfo({
-              id: "mock_user_001",
-              name: "Utilisateur Démo",
-              email: "demo@docv.fr",
-              role: "Administrateur",
-              company: "Entreprise Démo (ID: 1234)",
-            })
-          } else {
           // Vérifier la validité du token en mode production
-            const isValid = await messageBus.validateToken()
+          // const isValid = await messageBus.validateToken()
-            if (isValid) {
+          // if (isValid) {
             setIsAuthenticated(true)
             const pairingId = userStore.getUserPairingId()
             setUserInfo({
@@ -87,10 +109,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               role: "Utilisateur",
               company: "Organisation 4NK",
             })
-            } else {
+          // }
-              setIsAuthModalOpen(true)
-            }
-          }
         } else {
           setIsAuthModalOpen(true)
         }
@@ -114,10 +133,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   const handleLogout = () => {
     const userStore = UserStore.getInstance()
-    const messageBus = MessageBus.getInstance(iframeUrl)
-
     userStore.disconnect()
-    // messageBus.disableMockMode()
 
     // Afficher un message de confirmation avec options
     setShowLogoutConfirm(true)
@@ -210,8 +226,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                 <Link
                   key={item.name}
                   href={item.href}
-                  className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+                  className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${isActive ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                    isActive ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                     }`}
                   onClick={() => setSidebarOpen(false)}
                 >
@@ -304,10 +319,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               <p className="text-gray-600 mb-6">Vous avez été déconnecté de votre espace sécurisé DocV.</p>
 
               <div className="space-y-3">
-                <Button onClick={() => confirmLogout(false)} className="w-full">
+                {/* <Button onClick={() => confirmLogout(false)} className="w-full">
                   <LogOut className="h-4 w-4 mr-2" />
                   Aller à la page de connexion
-                </Button>
+                </Button> */}
 
                 <Button onClick={() => confirmLogout(true)} variant="outline" className="w-full">
                   <Home className="h-4 w-4 mr-2" />
@@ -321,6 +336,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         </div>
       )}
 
+      {<Iframe iframeUrl={iframeUrl} />}
+
       {/* Debug info retiré */}
     </div>
   )

app/login/page.tsx

@@ -1,199 +0,0 @@
-"use client"
-
-import type React from "react"
-
-import { useState } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import {
-  Shield,
-  ArrowLeft,
-  Home,
-  CheckCircle,
-} from "lucide-react"
-import AuthModal from "@/components/4nk/AuthModal"
-import MessageBus from "@/lib/4nk/MessageBus"
-import UserStore from "@/lib/4nk/UserStore"
-
-export default function LoginPage() {
-  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isConnected, setIsConnected] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const router = useRouter()
-
-  const iframeUrl = process.env.NEXT_PUBLIC_4NK_IFRAME_URL || "https://dev3.4nkweb.com"
-
-  // Vérifier l'état de connexion au chargement
-  useState(() => {
-    const userStore = UserStore.getInstance()
-    setIsConnected(userStore.isConnected())
-  })
-
-  const handleLogin = () => {
-    setIsAuthModalOpen(true)
-    setError(null)
-  }
-
-  const handleAuthSuccess = async () => {
-    setIsAuthModalOpen(false)
-    setIsConnected(true)
-    
-    try {
-      // Récupérer l'ID d'appairage après connexion
-      const messageBus = MessageBus.getInstance(iframeUrl)
-      await messageBus.isReady()
-      const pairingId = await messageBus.getUserPairingId()
-      
-      console.log("✅ Authentification 4NK réussie, ID d'appairage:", pairingId)
-      
-      // Redirection vers le dashboard
-      router.push("/dashboard")
-    } catch (err) {
-      console.error("Erreur lors de la récupération de l'ID d'appairage:", err)
-      // Redirection quand même vers le dashboard
-      router.push("/dashboard")
-    }
-  }
-
-  const handleAuthError = (errorMessage: string) => {
-    setError(errorMessage)
-    setIsAuthModalOpen(false)
-  }
-
-  // Si déjà connecté, rediriger vers le dashboard
-  if (isConnected) {
-    router.push("/dashboard")
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
-        <Card className="w-full max-w-md">
-          <CardContent className="text-center py-8">
-            <CheckCircle className="h-12 w-12 mx-auto text-green-600 mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Déjà connecté</h2>
-            <p className="text-gray-600">Redirection vers le dashboard...</p>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
-      <div className="w-full max-w-md space-y-6">
-        {/* Lien de retour vers l'accueil */}
-        <div className="text-center">
-          <Link
-            href="/"
-            className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
-          >
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Retour à l'accueil
-          </Link>
-        </div>
-
-        {/* Logo et titre */}
-        <div className="text-center">
-          <div className="flex items-center justify-center mb-6">
-            <Shield className="h-12 w-12 text-blue-600" />
-          </div>
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">DocV</h1>
-          <p className="text-gray-600">Gestion électronique de documents sécurisée</p>
-        </div>
-
-        {/* Carte de connexion 4NK */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-center">
-              <Shield className="h-8 w-8 mx-auto mb-4 text-blue-600" />
-              Connexion sécurisée 4NK
-            </CardTitle>
-            <CardDescription className="text-center">
-              Authentification cryptographique sans mot de passe
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {/* Description de la connexion 4NK */}
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-              <h3 className="font-semibold text-blue-900 mb-2">🔐 Authentification 4NK</h3>
-              <ul className="text-sm text-blue-800 space-y-1">
-                <li>• Aucun mot de passe requis</li>
-                <li>• Identité cryptographique sécurisée</li>
-                <li>• Chiffrement bout en bout</li>
-                <li>• Protection par blockchain</li>
-              </ul>
-            </div>
-
-            {/* Affichage des erreurs */}
-            {error && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-                <p className="text-red-700 font-medium">Erreur de connexion :</p>
-                <p className="text-red-600 text-sm">{error}</p>
-              </div>
-            )}
-
-            {/* Bouton de connexion */}
-            <Button 
-              onClick={handleLogin} 
-              className="w-full" 
-              size="lg"
-              disabled={isLoading}
-            >
-              <Shield className="h-5 w-5 mr-2" />
-              {isLoading ? "Connexion en cours..." : "Se connecter avec 4NK"}
-            </Button>
-
-            {/* Informations sur l'iframe */}
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-              <p className="text-xs text-gray-600 text-center">
-                <strong>URL d'authentification :</strong><br />
-                {iframeUrl}
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Badges de sécurité */}
-        <div className="flex flex-wrap justify-center gap-2">
-          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
-            <Shield className="h-3 w-3 mr-1" />
-            Sécurisé 4NK
-          </Badge>
-          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
-            Chiffrement bout en bout
-          </Badge>
-          <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
-            Blockchain
-          </Badge>
-        </div>
-
-        {/* Lien vers l'espace public */}
-        <div className="text-center">
-          <Link
-            href="/"
-            className="inline-flex items-center text-sm text-blue-600 hover:text-blue-800 transition-colors"
-          >
-            <Home className="h-4 w-4 mr-2" />
-            Découvrir DocV sans se connecter
-          </Link>
-        </div>
-
-        {/* Informations légales */}
-        <div className="text-center text-xs text-gray-500 space-y-1">
-          <p>En vous connectant, vous acceptez nos conditions d'utilisation</p>
-          <p>Vos données sont protégées par le chiffrement 4NK</p>
-        </div>
-      </div>
-
-      {/* Modal d'authentification 4NK */}
-      <AuthModal
-        isOpen={isAuthModalOpen}
-        onConnect={handleAuthSuccess}
-        onClose={() => setIsAuthModalOpen(false)}
-        iframeUrl={iframeUrl}
-      />
-    </div>
-  )
-}

app/page.tsx

@@ -1,10 +1,32 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Shield, Key, Database, Zap, Users, Globe, CheckCircle, ArrowRight, Code } from "lucide-react"
+import { Shield, ArrowRight, Key, Zap, Users, Globe, Database, Code, CheckCircle } from "lucide-react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import AuthModal from "@/components/4nk/AuthModal"
+import Iframe from "@/components/4nk/Iframe"
+import UserStore from "@/lib/4nk/UserStore"
 
 export default function HomePage() {
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [isConnected, setIsConnected] = useState(false)
+  const [userPairingId, setUserPairingId] = useState<string | null>(null)
+
+  const router = useRouter()
+  const iframeUrl = process.env.NEXT_PUBLIC_4NK_IFRAME_URL || "https://dev3.4nkweb.com"
+
+  useEffect(() => {
+    setIsConnected(UserStore.getInstance().isConnected());
+  });
+
+  useEffect(() => {
+    setUserPairingId(UserStore.getInstance().getUserPairingId());
+  });
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
       {/* Header */}
@@ -30,9 +52,7 @@ export default function HomePage() {
             <Link href="/formation">
               <Button variant="outline">Formation</Button>
             </Link>
-            <Link href="/login">
+            <Button onClick={() => setShowLoginModal(true)}>Connexion</Button>
-              <Button>Connexion</Button>
-            </Link>
           </nav>
         </div>
       </header>
@@ -63,6 +83,21 @@ export default function HomePage() {
         </div>
       </section>
 
+      {/* Modal d’authentification */}
+      {showLoginModal && (
+        <AuthModal
+          isOpen={showLoginModal}
+          onConnect={() => {
+            setShowLoginModal(false)
+            router.push("/dashboard") // ✅ redirection après login
+          }}
+          onClose={() => setShowLoginModal(false)}
+          iframeUrl={iframeUrl}
+        />
+      )}
+
+      {isConnected && <Iframe iframeUrl={iframeUrl} />}
+
       {/* Product Features */}
       <section id="produit" className="py-16 px-4 bg-white">
         <div className="container mx-auto">

lib/4nk/MessageBus.ts

@@ -576,8 +576,11 @@ export default class MessageBus {
       console.error('[MessageBus] sendMessage: iframe not found');
       return;
     }
-    console.log('[MessageBus] sendMessage:', message);
+  
-    iframe.contentWindow?.postMessage(message, this.origin);
+    const targetOrigin = "*" // this.origin pour la production ;
+  
+    console.log('[MessageBus] sendMessage:', message, 'to', targetOrigin);
+    iframe.contentWindow?.postMessage(message, targetOrigin);
   }
 
   private initMessageListener(correlationId: string): void {