@mostajs/licensing-ui-react 0.1.0

package/src/react/LicenseGate.tsx

@@ -0,0 +1,504 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+import { Shield, CheckCircle, XCircle, AlertTriangle, Download, RefreshCw, Loader2 } from "lucide-react";
+import { useLicenseUi } from "./LicenseProvider";
+
+interface Props {
+  children: React.ReactNode;
+  project?: string;
+  version?: string;
+  gracePeriod?: number; // Jours de grâce offline
+}
+
+interface LicenseInfo {
+  valid: boolean;
+  reason?: string;
+  license?: {
+    key: string;
+    email: string;
+    project: string;
+    expires_at: string;
+    activations: number;
+    max_activations: number;
+  };
+  remaining_days?: number;
+}
+
+export default function LicenseGate({
+  children,
+  project: projectProp,
+  version = "1.0.0",
+  gracePeriod = 3
+}: Props) {
+  const { serverUrl, project: ctxProject } = useLicenseUi(); // config .env (createLicenseUiFromEnv)
+  const project = projectProp ?? ctxProject ?? "app";
+  const [status, setStatus] = useState<"checking" | "valid" | "invalid" | "requesting" | "expired" | "warning">("checking");
+  const [email, setEmail] = useState("");
+  const [company, setCompany] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [licenseInfo, setLicenseInfo] = useState<LicenseInfo | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+  const [isOffline, setIsOffline] = useState(false);
+  const [lastOnlineCheck, setLastOnlineCheck] = useState<Date | null>(null);
+
+  // Vérification de la connectivité
+  const checkConnectivity = useCallback(async () => {
+    try {
+      const response = await fetch("/api/license/ping", { 
+        method: "GET",
+        cache: "no-cache"
+      });
+      return response.ok;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  // Vérification offline (cache local + période de grâce)
+  const checkOfflineLicense = useCallback(() => {
+    const offlineData = localStorage.getItem("license_cache");
+    if (!offlineData) return false;
+
+    try {
+      const cached = JSON.parse(offlineData);
+      const cacheDate = new Date(cached.timestamp);
+      const now = new Date();
+      const diffDays = Math.floor((now.getTime() - cacheDate.getTime()) / (1000 * 60 * 60 * 24));
+      
+      if (diffDays <= gracePeriod && cached.valid) {
+        setLicenseInfo(cached.licenseInfo);
+        setLastOnlineCheck(cacheDate);
+        return true;
+      }
+    } catch (e) {
+      console.warn("Cache licence corrompu :", e);
+      localStorage.removeItem("license_cache");
+    }
+    return false;
+  }, [gracePeriod]);
+
+  const verifyLicense = useCallback(async (force = false) => {
+    try {
+      const isOnline = await checkConnectivity();
+      
+      if (!isOnline && !force) {
+        setIsOffline(true);
+        if (checkOfflineLicense()) {
+          setStatus("warning"); // Mode offline avec licence valide
+          return;
+        } else {
+          setStatus("invalid");
+          setError("Aucune connexion et licence locale expirée");
+          return;
+        }
+      }
+
+      setIsOffline(false);
+      
+      // Essayer d'abord l'API Node.js
+      let response = await fetch("/api/license/verify");
+      let data: LicenseInfo = await response.json();
+      
+      // Si la vérification Node.js échoue, essayer l'API Python
+      if (!data.valid && data.reason === "signature") {
+        console.log("🐍 Fallback vers vérification Python...");
+        try {
+          response = await fetch("/api/license/verify-python");
+          if (response.ok) {
+            data = await response.json();
+            console.log("✅ Vérification Python réussie:", data);
+          }
+        } catch (error) {
+          console.warn("⚠️ Fallback Python échoué:", error);
+        }
+      }
+      
+      setLicenseInfo(data);
+      
+      if (data.valid) {
+        setStatus("valid");
+        // Mise à jour du cache local
+        localStorage.setItem("license_cache", JSON.stringify({
+          licenseInfo: data,
+          timestamp: new Date().toISOString(),
+          valid: true
+        }));
+        setLastOnlineCheck(new Date());
+      } else {
+        setStatus("invalid");
+        localStorage.removeItem("license_cache");
+        
+        if (data.reason === "expired") {
+          setStatus("expired");
+          setError(`Licence expirée depuis ${data.remaining_days ? Math.abs(data.remaining_days) : '?'} jours`);
+        } else if (data.reason === "signature") {
+          setError("Signature invalide - Fichier de licence corrompu");
+        } else if (data.reason === "not_found") {
+          setError("Aucune licence trouvée");
+        } else {
+          setError(data.reason || "Licence invalide");
+        }
+      }
+    } catch (e) {
+      console.error("Erreur vérification licence :", e);
+      
+      // Tentative offline en cas d'erreur réseau
+      if (checkOfflineLicense()) {
+        setStatus("warning");
+        setIsOffline(true);
+      } else {
+        setStatus("invalid");
+        setError("Erreur lors de la vérification de licence");
+      }
+    }
+  }, [checkConnectivity, checkOfflineLicense]);
+
+  useEffect(() => {
+    verifyLicense();
+    
+    // Vérification périodique (toutes les 24h)
+    const interval = setInterval(() => {
+      verifyLicense();
+    }, 24 * 60 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, [verifyLicense]);
+
+  const requestLicense = async () => {
+    if (!email.trim()) {
+      setError("Email requis");
+      return;
+    }
+
+    if (!/\S+@\S+\.\S+/.test(email)) {
+      setError("Format d'email invalide");
+      return;
+    }
+
+    setStatus("requesting");
+    setError(null);
+
+    try {
+      const response = await fetch("/api/license/request", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ 
+          email: email.trim(), 
+          company: company.trim(),
+          project,
+          version
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Attendre un peu avant la vérification pour laisser le temps au serveur
+        setTimeout(() => {
+          verifyLicense(true);
+        }, 1000);
+      } else {
+        setError(data.error || "Erreur lors de la demande de licence");
+        setStatus("invalid");
+      }
+    } catch (e) {
+      console.error("Erreur demande licence :", e);
+      setError("Erreur réseau lors de la demande de licence");
+      setStatus("invalid");
+    }
+  };
+
+  const handleRetry = () => {
+    setRetryCount(prev => prev + 1);
+    setError(null);
+    verifyLicense(true);
+  };
+
+  const downloadLicense = () => {
+    // Trigger download of license file
+    const link = document.createElement('a');
+    link.href = '/api/license/download';
+    link.download = `${project}_licence.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // États d'affichage
+  if (status === "checking") {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
+          <p className="text-lg text-gray-700">Vérification de la licence...</p>
+          <p className="text-sm text-gray-500 mt-2">Connexion au serveur de licences</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "requesting") {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-green-500 mx-auto mb-4" />
+          <p className="text-lg text-gray-700">Demande de licence en cours...</p>
+          <p className="text-sm text-gray-500 mt-2">Génération de votre licence personnalisée</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Mode warning (offline avec licence valide)
+  if (status === "warning") {
+    return (
+      <div className="relative">
+        {/* Bandeau d'avertissement */}
+        <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
+          <div className="flex items-center">
+            <AlertTriangle className="w-5 h-5 text-yellow-400 mr-3" />
+            <div className="flex-1">
+              <p className="text-sm text-yellow-700">
+                Mode hors ligne - Licence valide localement
+                {lastOnlineCheck && (
+                  <span className="block text-xs text-yellow-600">
+                    Dernière vérification : {lastOnlineCheck.toLocaleDateString()}
+                  </span>
+                )}
+              </p>
+            </div>
+            <button
+              onClick={() => verifyLicense(true)}
+              className="text-yellow-600 hover:text-yellow-800"
+              title="Tenter une reconnexion"
+            >
+              <RefreshCw className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  // Mode licence expirée avec option de renouvellement
+  if (status === "expired") {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="max-w-lg p-8 bg-white rounded-xl shadow-lg border border-red-200">
+          <div className="text-center mb-6">
+            <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-bold text-red-600 mb-2">Licence expirée</h2>
+            <p className="text-gray-600">{error}</p>
+          </div>
+
+          {licenseInfo?.license && (
+            <div className="bg-red-50 p-4 rounded-lg mb-6">
+              <h3 className="font-semibold text-red-800 mb-2">Informations de licence</h3>
+              <div className="text-sm text-red-700 space-y-1">
+                <p><strong>Email :</strong> {licenseInfo.license.email}</p>
+                <p><strong>Projet :</strong> {licenseInfo.license.project}</p>
+                <p><strong>Clé :</strong> {licenseInfo.license.key}</p>
+                <p><strong>Expiré le :</strong> {new Date(licenseInfo.license.expires_at).toLocaleDateString()}</p>
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <button
+              onClick={() => {
+                setEmail(licenseInfo?.license?.email || "");
+                setStatus("invalid");
+              }}
+              className="w-full px-4 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+            >
+              Renouveler la licence
+            </button>
+            <button
+              onClick={handleRetry}
+              className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500"
+            >
+              <RefreshCw className="w-4 h-4 inline mr-2" />
+              Vérifier à nouveau
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Formulaire de demande de licence
+  if (status === "invalid") {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="max-w-md p-8 bg-white rounded-xl shadow-lg">
+          <div className="text-center mb-6">
+            <Shield className="w-16 h-16 text-blue-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-bold text-gray-800 mb-2">Activation requise</h2>
+            <p className="text-gray-600">Activez {project} avec votre licence</p>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+              <div className="flex items-center">
+                <XCircle className="w-5 h-5 text-red-500 mr-2" />
+                <p className="text-red-700 text-sm">{error}</p>
+              </div>
+            </div>
+          )}
+
+          {isOffline && (
+            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+              <div className="flex items-center">
+                <AlertTriangle className="w-5 h-5 text-yellow-500 mr-2" />
+                <p className="text-yellow-700 text-sm">Mode hors ligne détecté</p>
+              </div>
+            </div>
+          )}
+
+          <form onSubmit={(e) => { e.preventDefault(); requestLicense(); }} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Email professionnel *
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="votre@entreprise.com"
+                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Entreprise (optionnel)
+              </label>
+              <input
+                type="text"
+                value={company}
+                onChange={(e) => setCompany(e.target.value)}
+                placeholder="Nom de votre entreprise"
+                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div className="bg-blue-50 p-4 rounded-lg">
+              <h4 className="font-medium text-blue-800 mb-2">Informations de licence</h4>
+              <div className="text-sm text-blue-700 space-y-1">
+                <p><strong>Produit :</strong> {project}</p>
+                <p><strong>Version :</strong> {version}</p>
+                <p><strong>Type :</strong> Licence professionnelle</p>
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={!email.trim()}
+              className="w-full px-4 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Demander une licence
+            </button>
+
+            <div className="text-center space-y-2">
+              <button
+                type="button"
+                onClick={handleRetry}
+                className="text-sm text-gray-500 hover:text-gray-700 inline-flex items-center"
+              >
+                <RefreshCw className="w-4 h-4 mr-1" />
+                Vérifier à nouveau ({retryCount + 1})
+              </button>
+              
+              {licenseInfo && (
+                <button
+                  type="button"
+                  onClick={downloadLicense}
+                  className="block w-full text-sm text-blue-500 hover:text-blue-700"
+                >
+                  <Download className="w-4 h-4 inline mr-1" />
+                  Télécharger le fichier de licence
+                </button>
+              )}
+            </div>
+          </form>
+
+          <div className="mt-6 pt-6 border-t border-gray-200 text-center">
+            <p className="text-xs text-gray-500">
+              Une licence sera générée automatiquement et liée à cet appareil.
+              <br />
+              Contactez le support en cas de problème.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Licence valide - Afficher l'application avec bandeau en bas
+  return (
+    <div className="relative min-h-screen flex flex-col">
+      {/* Contenu principal */}
+      <div className="flex-1">
+        {children}
+      </div>
+      
+      {/* Bandeau de licence en bas de page */}
+      {licenseInfo?.license && (
+        <div className="fixed bottom-0 left-0 right-0 bg-green-50 border-t-4 border-green-400 p-3 text-sm shadow-lg z-50">
+          <div className="container mx-auto flex items-center justify-between">
+            <div className="flex items-center">
+              <CheckCircle className="w-4 h-4 text-green-400 mr-2" />
+              <span className="text-green-700">
+                <strong>Licence valide</strong> • {licenseInfo.license.email} • {licenseInfo.license.project}
+                {licenseInfo.remaining_days !== undefined && (
+                  <span className={`ml-2 ${licenseInfo.remaining_days < 30 ? 'text-yellow-600' : 'text-green-600'}`}>
+                    {licenseInfo.remaining_days < 30 
+                      ? `⚠️ Expire dans ${licenseInfo.remaining_days} jours`
+                      : `✅ ${licenseInfo.remaining_days} jours restants`
+                    }
+                  </span>
+                )}
+              </span>
+            </div>
+            <div className="flex items-center space-x-3">
+              <span className="text-xs text-green-600">
+                Clé: {licenseInfo.license.key}
+              </span>
+              <button
+                onClick={() => verifyLicense(true)}
+                className="text-green-600 hover:text-green-800 p-1 rounded transition-colors"
+                title="Actualiser la licence"
+              >
+                <RefreshCw className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => {
+                  const info = document.getElementById('license-info');
+                  if (info) info.style.display = info.style.display === 'none' ? 'block' : 'none';
+                }}
+                className="text-green-600 hover:text-green-800 text-xs px-2 py-1 border border-green-300 rounded"
+                title="Voir détails"
+              >
+                Info
+              </button>
+            </div>
+          </div>
+          
+          {/* Détails de licence (masqués par défaut) */}
+          <div id="license-info" className="mt-2 pt-2 border-t border-green-200 text-xs text-green-600" style={{ display: 'none' }}>
+            <div className="container mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div><strong>Activations:</strong> {licenseInfo.license.activations}/{licenseInfo.license.max_activations}</div>
+              <div><strong>Expire le:</strong> {new Date(licenseInfo.license.expires_at).toLocaleDateString()}</div>
+              <div><strong>Status:</strong> <span className="text-green-600">ACTIVE</span></div>
+              <div><strong>Dernière vérif:</strong> {lastOnlineCheck?.toLocaleTimeString() || 'Maintenant'}</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/LicenseProvider.tsx

@@ -0,0 +1,36 @@
+"use client";
+// @mostajs/licensing-ui — contexte React alimenté par createLicenseUiFromEnv.
+// Centralise la CONFIG .env (serveur, projet, clé publique) + le contrôleur composant
+// @mostajs/licensing. Les composants (LicenseGate, LicenseActivationForm…) le consomment via
+// useLicenseUi() au lieu d'URLs/projet codés en dur. @author Dr Hamid MADANI <drmdh@msn.com>
+import React, { createContext, useContext, useMemo } from "react";
+import { createLicenseUi, licenseUiConfigFromEnv, type LicenseUiOptions } from "../index";
+
+export interface LicenseContextValue {
+  serverUrl: string;
+  project?: string;
+  ui: ReturnType<typeof createLicenseUi>;
+}
+
+const LicenseCtx = createContext<LicenseContextValue | null>(null);
+
+/**
+ * Fournit la config de licence à l'arbre React.
+ *   <LicenseProvider env={publicEnv}> … </LicenseProvider>
+ * `env` : objet de variables (NEXT_PUBLIC_LICENSE_* / LICENSE_*) ; à défaut, lit process.env.
+ * `config` : surcharge directe (LicenseUiOptions) si fournie.
+ */
+export function LicenseProvider({ config, env, children }: { config?: LicenseUiOptions; env?: Record<string, string | undefined>; children: React.ReactNode }) {
+  const value = useMemo<LicenseContextValue>(() => {
+    const opts = config ?? licenseUiConfigFromEnv(env ?? (typeof process !== "undefined" ? (process.env as any) : {}));
+    return { serverUrl: opts.baseUrl, project: opts.project, ui: createLicenseUi(opts) };
+  }, [config, env]);
+  return <LicenseCtx.Provider value={value}>{children}</LicenseCtx.Provider>;
+}
+
+/** Accès à la config + contrôleur de licence (compose @mostajs/licensing). */
+export function useLicenseUi(): LicenseContextValue {
+  const v = useContext(LicenseCtx);
+  if (!v) throw new Error("useLicenseUi: entourez vos composants de <LicenseProvider> (config via createLicenseUiFromEnv).");
+  return v;
+}