@mostajs/licensing-ui-react 0.1.0

package/src/react/PendingLicenseActivation.tsx

@@ -0,0 +1,270 @@
+"use client";
+import { useState } from 'react';
+import { Shield, CheckCircle, Clock, AlertTriangle, Loader2, Key, Server, Calendar, Users, Zap, XCircle } from 'lucide-react';
+
+interface PendingLicenseActivationProps {
+  licenseInfo: any;
+  verificationInfo?: any;
+  activationCode: string;
+  licenseData: any;
+  onActivate?: (result: any) => void;
+  onCancel?: () => void;
+}
+
+export default function PendingLicenseActivation({
+  licenseInfo,
+  verificationInfo,
+  activationCode,
+  licenseData,
+  onActivate,
+  onCancel
+}: PendingLicenseActivationProps) {
+  const [isActivating, setIsActivating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activationResult, setActivationResult] = useState<any>(null);
+
+  const handleStartActivation = async () => {
+    setIsActivating(true);
+    setError(null);
+
+    try {
+      // Appeler l'API pour démarrer l'activation et le comptage
+      const response = await fetch('/api/license/start-activation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          activationCode,
+          licenseData
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Échec de l\'activation');
+      }
+
+      const result = await response.json();
+      setActivationResult(result);
+
+      // Mettre à jour le localStorage
+      localStorage.setItem('license_cache', JSON.stringify({
+        licenseInfo: {
+          valid: true,
+          license: {
+            ...licenseInfo,
+            status: 'ACTIVE',
+            activated_at: result.activationInfo?.started_at,
+            expires_at: result.activationInfo?.expires_at
+          }
+        },
+        timestamp: new Date().toISOString(),
+        valid: true
+      }));
+
+      // Supprimer la licence en attente
+      localStorage.removeItem('pending_license');
+
+      // Notifier le parent après un court délai
+      setTimeout(() => {
+        onActivate?.(result);
+      }, 1500);
+
+    } catch (err: any) {
+      console.error('Erreur activation:', err);
+      setError(err.message || 'Erreur lors de l\'activation');
+      setIsActivating(false);
+    }
+  };
+
+  // Calculer les jours restants
+  const calculateRemainingDays = () => {
+    if (verificationInfo?.code_info?.expires_at) {
+      const expires = new Date(verificationInfo.code_info.expires_at);
+      const now = new Date();
+      const diff = Math.floor((expires.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+      return diff;
+    }
+    return 365; // Par défaut
+  };
+
+  const remainingDays = calculateRemainingDays();
+  const activationsRemaining = verificationInfo?.code_info?.activations_remaining || 
+                               (verificationInfo?.code_info?.max_activations - verificationInfo?.code_info?.activations_used) || 
+                               4;
+
+  if (activationResult) {
+    // Afficher le succès de l'activation
+    return (
+      <div className="max-w-2xl mx-auto p-8 bg-white rounded-xl shadow-lg">
+        <div className="text-center">
+          <CheckCircle className="w-20 h-20 text-green-500 mx-auto mb-6" />
+          <h2 className="text-3xl font-bold text-gray-800 mb-4">
+            Licence Activée avec Succès !
+          </h2>
+          <p className="text-lg text-gray-600 mb-6">
+            Le comptage de votre licence a commencé.
+          </p>
+          
+          <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-left">
+            <h3 className="font-semibold text-green-800 mb-3">Détails de l'activation :</h3>
+            <div className="space-y-2 text-sm text-green-700">
+              <p><strong>Date d'activation :</strong> {new Date().toLocaleDateString()}</p>
+              <p><strong>Expire le :</strong> {new Date(activationResult.activationInfo?.expires_at).toLocaleDateString()}</p>
+              <p><strong>Jours restants :</strong> {activationResult.activationInfo?.remaining_days} jours</p>
+              <p><strong>Activations utilisées :</strong> {activationResult.activationInfo?.activations_used}/{activationResult.activationInfo?.max_activations}</p>
+            </div>
+          </div>
+
+          <p className="text-sm text-gray-500 mt-6">
+            L'application va redémarrer dans quelques instants...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-8 bg-white rounded-xl shadow-lg">
+      {/* En-tête */}
+      <div className="text-center mb-8">
+        <div className="relative inline-block">
+          <Shield className="w-20 h-20 text-blue-500 mx-auto" />
+          <Clock className="w-8 h-8 text-orange-500 absolute -bottom-1 -right-1 bg-white rounded-full p-1" />
+        </div>
+        <h2 className="text-3xl font-bold text-gray-800 mt-4 mb-2">
+          Licence Prête pour Activation
+        </h2>
+        <p className="text-gray-600">
+          Votre licence a été téléchargée et vérifiée avec succès
+        </p>
+      </div>
+
+      {/* Informations de la licence */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
+        <h3 className="font-semibold text-blue-800 mb-4 flex items-center">
+          <Key className="w-5 h-5 mr-2" />
+          Détails de la licence
+        </h3>
+        
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <p className="text-blue-600 font-medium">Code d'activation</p>
+            <p className="text-blue-800 font-mono">{activationCode}</p>
+          </div>
+          
+          <div>
+            <p className="text-blue-600 font-medium">Projet</p>
+            <p className="text-blue-800">{licenseInfo?.project || 'app'}</p>
+          </div>
+          
+          <div>
+            <p className="text-blue-600 font-medium">Email</p>
+            <p className="text-blue-800">{licenseInfo?.email}</p>
+          </div>
+          
+          <div>
+            <p className="text-blue-600 font-medium">Durée de validité</p>
+            <p className="text-blue-800">{remainingDays} jours</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Statut des activations */}
+      <div className="bg-orange-50 border border-orange-200 rounded-lg p-6 mb-6">
+        <h3 className="font-semibold text-orange-800 mb-3 flex items-center">
+          <Users className="w-5 h-5 mr-2" />
+          Statut des activations
+        </h3>
+        
+        <div className="flex items-center justify-between">
+          <div className="text-sm text-orange-700">
+            <p className="mb-1">Activations disponibles :</p>
+            <p className="text-2xl font-bold text-orange-800">
+              {activationsRemaining} / {verificationInfo?.code_info?.max_activations || 4}
+            </p>
+          </div>
+          
+          {activationsRemaining <= 1 && (
+            <div className="flex items-center text-orange-600">
+              <AlertTriangle className="w-5 h-5 mr-2" />
+              <span className="text-sm">Dernière activation disponible</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Avertissement important */}
+      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+        <div className="flex items-start">
+          <AlertTriangle className="w-5 h-5 text-yellow-600 mr-3 mt-0.5 flex-shrink-0" />
+          <div className="text-sm">
+            <p className="text-yellow-800 font-medium mb-1">Information importante</p>
+            <p className="text-yellow-700">
+              En cliquant sur "Activer maintenant", le comptage de votre licence démarrera immédiatement 
+              et sera comptabilisé sur le serveur de licences. Cette action est irréversible.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Message d'erreur */}
+      {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 flex-shrink-0" />
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Boutons d'action */}
+      <div className="flex space-x-4">
+        <button
+          onClick={handleStartActivation}
+          disabled={isActivating}
+          className="flex-1 px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-105 flex items-center justify-center"
+        >
+          {isActivating ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin mr-2" />
+              Activation en cours...
+            </>
+          ) : (
+            <>
+              <Zap className="w-5 h-5 mr-2" />
+              Activer Maintenant
+            </>
+          )}
+        </button>
+
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            disabled={isActivating}
+            className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors"
+          >
+            Annuler
+          </button>
+        )}
+      </div>
+
+      {/* Footer informatif */}
+      <div className="mt-8 pt-6 border-t border-gray-200">
+        <div className="flex items-center justify-center text-xs text-gray-500">
+          <Server className="w-4 h-4 mr-2" />
+          <span>
+            Connexion au serveur de licences : 
+            <span className="text-green-600 font-medium ml-1">Active</span>
+          </span>
+          <span className="mx-2">•</span>
+          <Calendar className="w-4 h-4 mr-2" />
+          <span>
+            Date : {new Date().toLocaleDateString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/react/SimpleLicenseActivation.tsx

@@ -0,0 +1,273 @@
+"use client";
+import { useState } from 'react';
+import { Shield, CheckCircle, XCircle, AlertTriangle, Loader2, Key, Download } from 'lucide-react';
+import { useLicenseUi } from './LicenseProvider';
+
+interface SimpleLicenseActivationProps {
+  onActivationSuccess?: (licenseInfo: any) => void;
+  onBack?: () => void;
+  onSwitchToManual?: () => void;
+}
+
+export default function SimpleLicenseActivation({ 
+  onActivationSuccess, 
+  onBack,
+  onSwitchToManual 
+}: SimpleLicenseActivationProps) {
+  const { serverUrl } = useLicenseUi(); // config .env
+  const [activationCode, setActivationCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [progress, setProgress] = useState<string | null>(null);
+
+  const validateActivationCode = (code: string): boolean => {
+    // Format attendu: XXXX-XXXX-XXXX-XXXX (16 caractères + 3 tirets)
+    const codeRegex = /^[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/;
+    return codeRegex.test(code.toUpperCase());
+  };
+
+  const handleActivation = async () => {
+    if (!activationCode.trim()) {
+      setError('Veuillez entrer votre code d\'activation');
+      return;
+    }
+
+    if (!validateActivationCode(activationCode)) {
+      setError('Format de code d\'activation invalide (attendu: XXXX-XXXX-XXXX-XXXX)');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setSuccess(null);
+    setProgress('Connexion au serveur de licences...');
+
+    try {
+      // Étape 1: Télécharger la licence depuis le serveur
+      setProgress('Téléchargement de la licence et de la clé publique...');
+      
+      const downloadResponse = await fetch('/api/license/download-by-code', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          activationCode: activationCode.toUpperCase(),
+          downloadPublicKey: true // Télécharger automatiquement le public.pem
+        }),
+      });
+
+      if (!downloadResponse.ok) {
+        const errorData = await downloadResponse.json();
+        throw new Error(errorData.error || 'Impossible de télécharger la licence');
+      }
+
+      const { licenseData, licenseInfo, publicKeyDownloaded, verificationInfo } = await downloadResponse.json();
+      
+      setProgress('Vérification de la licence...');
+      
+      // La licence est maintenant en état PENDING
+      // Sauvegarder les données pour l'activation ultérieure
+      const pendingLicense = {
+        licenseData,
+        licenseInfo: {
+          ...licenseInfo,
+          status: 'PENDING'
+        },
+        activationCode: activationCode.toUpperCase(),
+        verificationInfo,
+        publicKeyDownloaded,
+        downloadedAt: new Date().toISOString()
+      };
+
+      // Sauvegarder dans le localStorage comme licence en attente
+      localStorage.setItem('pending_license', JSON.stringify(pendingLicense));
+      
+      setSuccess('Licence téléchargée et vérifiée avec succès !');
+      setProgress(null);
+      
+      // Informer le parent que la licence est prête pour activation
+      setTimeout(() => {
+        onActivationSuccess?.({
+          ...licenseInfo,
+          status: 'PENDING',
+          pendingData: pendingLicense
+        });
+      }, 1500);
+
+    } catch (err: any) {
+      console.error('Erreur d\'activation:', err);
+      setProgress(null);
+      
+      if (err.message.includes('fetch')) {
+        setError('Impossible de se connecter au serveur. Vérifiez votre connexion internet.');
+      } else if (err.message.includes('404')) {
+        setError('Code d\'activation non trouvé. Vérifiez votre code.');
+      } else if (err.message.includes('expired')) {
+        setError('Ce code d\'activation a expiré.');
+      } else if (err.message.includes('used')) {
+        setError('Ce code a déjà été utilisé le nombre maximum de fois.');
+      } else {
+        setError(err.message || 'Erreur lors de l\'activation de la licence');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearForm = () => {
+    setActivationCode('');
+    setError(null);
+    setSuccess(null);
+    setProgress(null);
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-8 bg-white rounded-xl shadow-lg">
+      <div className="text-center mb-8">
+        <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 Rapide</h2>
+        <p className="text-gray-600">
+          Entrez votre code d'activation pour télécharger et activer automatiquement votre licence
+        </p>
+      </div>
+
+      {/* Messages d'état */}
+      {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 flex-shrink-0" />
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {success && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+          <div className="flex items-center">
+            <CheckCircle className="w-5 h-5 text-green-500 mr-2 flex-shrink-0" />
+            <p className="text-green-700 text-sm">{success}</p>
+          </div>
+        </div>
+      )}
+
+      {progress && (
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <div className="flex items-center">
+            <Loader2 className="w-5 h-5 text-blue-500 mr-2 animate-spin flex-shrink-0" />
+            <p className="text-blue-700 text-sm">{progress}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Code d'activation */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          <Key className="w-4 h-4 inline mr-2" />
+          Code d'activation
+        </label>
+        <input
+          type="text"
+          value={activationCode}
+          onChange={(e) => {
+            // Auto-format with dashes
+            let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
+            if (value.length > 4) value = value.slice(0, 4) + '-' + value.slice(4);
+            if (value.length > 9) value = value.slice(0, 9) + '-' + value.slice(9);
+            if (value.length > 14) value = value.slice(0, 14) + '-' + value.slice(14);
+            if (value.length > 19) value = value.slice(0, 19);
+            setActivationCode(value);
+          }}
+          placeholder="XXXX-XXXX-XXXX-XXXX"
+          maxLength={19}
+          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 font-mono text-center tracking-widest text-lg"
+          disabled={loading}
+        />
+        <p className="text-xs text-gray-500 mt-2">
+          Entrez le code d'activation fourni lors de l'achat
+        </p>
+      </div>
+
+      {/* Info box */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div className="flex items-start">
+          <Download className="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" />
+          <div>
+            <h4 className="text-sm font-medium text-blue-800 mb-1">Activation automatique</h4>
+            <p className="text-xs text-blue-700">
+              La licence sera automatiquement téléchargée depuis nos serveurs et activée sur cette machine.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Boutons d'action */}
+      <div className="space-y-3">
+        <button
+          onClick={handleActivation}
+          disabled={!activationCode.trim() || loading}
+          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 flex items-center justify-center"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin mr-2" />
+              Activation en cours...
+            </>
+          ) : (
+            <>
+              <Download className="w-5 h-5 mr-2" />
+              Télécharger et Activer
+            </>
+          )}
+        </button>
+
+        <div className="flex space-x-3">
+          <button
+            onClick={clearForm}
+            disabled={loading}
+            className="flex-1 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 transition-colors"
+          >
+            Effacer
+          </button>
+          
+          {onBack && (
+            <button
+              onClick={onBack}
+              disabled={loading}
+              className="flex-1 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 transition-colors"
+            >
+              Retour
+            </button>
+          )}
+        </div>
+
+        {/* Lien vers activation manuelle */}
+        {onSwitchToManual && (
+          <button
+            onClick={onSwitchToManual}
+            disabled={loading}
+            className="w-full text-sm text-blue-500 hover:text-blue-700 font-medium transition-colors"
+          >
+            Activation manuelle avec fichier de licence →
+          </button>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="mt-6 pt-6 border-t border-gray-200 text-center">
+        <p className="text-xs text-gray-500">
+          Vous n'avez pas de code d'activation ?
+        </p>
+        <a
+          href={serverUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-blue-500 hover:text-blue-700 font-medium"
+        >
+          Obtenir une licence →
+        </a>
+      </div>
+    </div>
+  );
+}