@mostajs/licensing-ui-react 0.1.0

package/src/react/LicenseActivationForm.tsx

@@ -0,0 +1,365 @@
+"use client";
+import { useState, useRef } from 'react';
+import { Upload, Shield, CheckCircle, XCircle, AlertTriangle, Loader2, Eye, EyeOff } from 'lucide-react';
+import { useLicenseUi } from './LicenseProvider';
+
+interface LicenseActivationFormProps {
+  onActivationSuccess?: (licenseInfo: any) => void;
+  onBack?: () => void;
+}
+
+interface ActivationResponse {
+  success: boolean;
+  message?: string;
+  error?: string;
+  licenseInfo?: {
+    email: string;
+    project: string;
+    expires_at: string;
+    activations: number;
+    max_activations: number;
+    key: string;
+  };
+  remaining_days?: number;
+}
+
+export default function LicenseActivationForm({ 
+  onActivationSuccess, 
+  onBack 
+}: LicenseActivationFormProps) {
+  const { serverUrl } = useLicenseUi(); // config .env (createLicenseUiFromEnv)
+  const [activationCode, setActivationCode] = useState('');
+  const [licenseFile, setLicenseFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [showCode, setShowCode] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Vérifier l'extension
+      if (!file.name.endsWith('.json')) {
+        setError('Veuillez sélectionner un fichier de licence valide (.json)');
+        return;
+      }
+      
+      // Vérifier la taille (max 1MB)
+      if (file.size > 1024 * 1024) {
+        setError('Le fichier de licence est trop volumineux (max 1MB)');
+        return;
+      }
+      
+      setLicenseFile(file);
+      setError(null);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const file = event.dataTransfer.files[0];
+    if (file) {
+      if (!file.name.endsWith('.json')) {
+        setError('Veuillez déposer un fichier de licence valide (.json)');
+        return;
+      }
+      setLicenseFile(file);
+      setError(null);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  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 (!licenseFile) {
+      setError('Veuillez sélectionner un fichier de licence');
+      return;
+    }
+
+    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);
+
+    try {
+      // Lire le fichier de licence
+      const licenseContent = await licenseFile.text();
+      let licenseData;
+      
+      try {
+        licenseData = JSON.parse(licenseContent);
+      } catch {
+        setError('Le fichier de licence n\'est pas au format JSON valide');
+        setLoading(false);
+        return;
+      }
+
+      // Préparer les données d'activation
+      const formData = new FormData();
+      formData.append('activationCode', activationCode.toUpperCase());
+      formData.append('licenseData', JSON.stringify(licenseData));
+
+      // Envoyer la demande d'activation
+      const response = await fetch(`${serverUrl}/api/activate`, {
+        method: 'POST',
+        body: formData,
+      });
+
+      const result: ActivationResponse = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.error || 'Erreur lors de l\'activation');
+      }
+
+      if (result.success) {
+        setSuccess('Licence activée avec succès !');
+        
+        // Sauvegarder localement les informations de licence
+        if (result.licenseInfo) {
+          localStorage.setItem('license_cache', JSON.stringify({
+            licenseInfo: result,
+            timestamp: new Date().toISOString(),
+            valid: true
+          }));
+          
+          // Sauvegarder aussi le fichier de licence localement pour référence future
+          await fetch('/api/license/save-local', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              licenseData,
+              activationCode: activationCode.toUpperCase()
+            }),
+          });
+        }
+
+        // Callback de succès après un court délai
+        setTimeout(() => {
+          onActivationSuccess?.(result.licenseInfo);
+        }, 1500);
+      } else {
+        setError(result.message || result.error || 'Échec de l\'activation');
+      }
+    } catch (err: any) {
+      console.error('Erreur d\'activation:', err);
+      if (err.name === 'TypeError' && err.message.includes('fetch')) {
+        setError('Impossible de se connecter au serveur de licences. Vérifiez votre connexion internet.');
+      } else {
+        setError(err.message || 'Erreur lors de l\'activation de la licence');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearForm = () => {
+    setActivationCode('');
+    setLicenseFile(null);
+    setError(null);
+    setSuccess(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div className="max-w-lg 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">Activer votre licence</h2>
+        <p className="text-gray-600">
+          Uploadez votre fichier de licence et entrez votre code d'activation
+        </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>
+      )}
+
+      {/* Zone d'upload de fichier */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          Fichier de licence *
+        </label>
+        <div
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
+            licenseFile 
+              ? 'border-green-300 bg-green-50' 
+              : 'border-gray-300 hover:border-blue-400 hover:bg-blue-50'
+          }`}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+          
+          {licenseFile ? (
+            <div className="flex items-center justify-center">
+              <CheckCircle className="w-8 h-8 text-green-500 mr-3" />
+              <div className="text-left">
+                <p className="text-sm font-medium text-green-700">{licenseFile.name}</p>
+                <p className="text-xs text-green-600">
+                  {(licenseFile.size / 1024).toFixed(1)} KB
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div>
+              <Upload className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+              <p className="text-sm text-gray-600 mb-2">
+                <span className="font-medium">Cliquez pour sélectionner</span> ou glissez votre fichier de licence
+              </p>
+              <p className="text-xs text-gray-400">
+                Formats supportés: .json (max 1MB)
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Code d'activation */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          Code d'activation *
+        </label>
+        <div className="relative">
+          <input
+            type={showCode ? 'text' : 'password'}
+            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 pr-12 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"
+          />
+          <button
+            type="button"
+            onClick={() => setShowCode(!showCode)}
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+          >
+            {showCode ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 mt-2">
+          Entrez le code fourni avec votre licence (format: XXXX-XXXX-XXXX-XXXX)
+        </p>
+      </div>
+
+      {/* Informations importantes */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div className="flex items-start">
+          <AlertTriangle 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-2">Où trouver vos éléments de licence ?</h4>
+            <div className="text-xs text-blue-700 space-y-1">
+              <p>• <strong>Fichier de licence :</strong> Téléchargé depuis votre espace client sur licences.amia.fr</p>
+              <p>• <strong>Code d'activation :</strong> Fourni par email lors de l'achat de votre licence</p>
+              <p>• <strong>Connexion requise :</strong> Internet nécessaire pour l'activation initiale</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Boutons d'action */}
+      <div className="space-y-3">
+        <button
+          onClick={handleActivation}
+          disabled={!licenseFile || !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...
+            </>
+          ) : (
+            'Activer la licence'
+          )}
+        </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>
+      </div>
+
+      {/* Lien vers le site de licences */}
+      <div className="mt-6 pt-6 border-t border-gray-200 text-center">
+        <p className="text-xs text-gray-500 mb-2">
+          Vous n'avez pas encore de licence ?
+        </p>
+        <a
+          href={serverUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-blue-500 hover:text-blue-700 font-medium"
+        >
+          Visiter licences.amia.fr →
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/react/LicenseConfigForm.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Save, RefreshCw, AlertCircle, CheckCircle, Users } from 'lucide-react';
+
+interface LicenseInfo {
+  valid: boolean;
+  license?: {
+    key: string;
+    email: string;
+    project: string;
+    expires_at: string;
+    activations: any[];
+    max_activations: number;
+  };
+  remaining_days?: number;
+}
+
+export default function LicenseConfigForm() {
+  const [licenseInfo, setLicenseInfo] = useState<LicenseInfo | null>(null);
+  const [maxActivations, setMaxActivations] = useState<number>(4);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  // Charger les informations de licence actuelles
+  const fetchLicenseInfo = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/license/verify');
+      const data = await response.json();
+      setLicenseInfo(data);
+      
+      if (data.license) {
+        setMaxActivations(data.license.max_activations || 4);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement de la licence:', error);
+      setMessage({ type: 'error', text: 'Erreur lors du chargement des informations de licence' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLicenseInfo();
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage(null);
+
+    try {
+      const response = await fetch('/api/admin/license/update-max-activations', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          max_activations: maxActivations
+        })
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        setMessage({ type: 'success', text: 'Configuration mise à jour avec succès' });
+        await fetchLicenseInfo(); // Recharger les informations
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Erreur lors de la mise à jour' });
+      }
+    } catch (error) {
+      console.error('Erreur lors de la sauvegarde:', error);
+      setMessage({ type: 'error', text: 'Erreur réseau lors de la sauvegarde' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Message de statut */}
+      {message && (
+        <div className={`p-4 rounded-lg border flex items-center gap-3 ${
+          message.type === 'success' 
+            ? 'bg-green-50 border-green-200 text-green-800' 
+            : 'bg-red-50 border-red-200 text-red-800'
+        }`}>
+          {message.type === 'success' ? (
+            <CheckCircle className="w-5 h-5" />
+          ) : (
+            <AlertCircle className="w-5 h-5" />
+          )}
+          <span>{message.text}</span>
+        </div>
+      )}
+
+      {/* Informations licence actuelle */}
+      {licenseInfo && licenseInfo.license && (
+        <div className="bg-gray-50 rounded-lg p-6">
+          <h3 className="font-semibold text-gray-900 mb-4">Informations Licence Actuelle</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="font-medium text-gray-700">Email:</span>
+              <span className="ml-2 text-gray-900">{licenseInfo.license.email}</span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Projet:</span>
+              <span className="ml-2 text-gray-900">{licenseInfo.license.project}</span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Clé:</span>
+              <span className="ml-2 text-gray-900 font-mono text-xs">{licenseInfo.license.key}</span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Expire le:</span>
+              <span className="ml-2 text-gray-900">
+                {new Date(licenseInfo.license.expires_at).toLocaleDateString()}
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Postes actifs:</span>
+              <span className="ml-2 text-gray-900">
+                {licenseInfo.license.activations.length} / {licenseInfo.license.max_activations}
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Jours restants:</span>
+              <span className={`ml-2 font-medium ${
+                (licenseInfo.remaining_days || 0) < 30 ? 'text-yellow-600' : 'text-green-600'
+              }`}>
+                {licenseInfo.remaining_days || 0} jours
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Configuration du nombre maximum de postes */}
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Nombre maximum de postes autorisés
+          </label>
+          <div className="flex items-center gap-4">
+            <div className="flex-1 max-w-xs">
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={maxActivations}
+                onChange={(e) => setMaxActivations(Math.max(1, Math.min(10, parseInt(e.target.value) || 1)))}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            <div className="text-sm text-gray-500">
+              <Users className="w-4 h-4 inline mr-1" />
+              postes maximum
+            </div>
+          </div>
+          <p className="text-sm text-gray-600 mt-2">
+            Cette valeur détermine combien de postes clients peuvent être activés simultanément avec cette licence.
+            Recommandé: 4 postes pour un usage normal.
+          </p>
+        </div>
+
+        {/* Indicateur d'utilisation */}
+        {licenseInfo && licenseInfo.license && (
+          <div className="bg-blue-50 rounded-lg p-4">
+            <h4 className="font-medium text-blue-900 mb-2">Utilisation actuelle</h4>
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <div className="w-full bg-blue-200 rounded-full h-2">
+                  <div 
+                    className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                    style={{ 
+                      width: `${Math.min(100, (licenseInfo.license.activations.length / maxActivations) * 100)}%` 
+                    }}
+                  ></div>
+                </div>
+              </div>
+              <div className="text-sm text-blue-700 font-medium">
+                {licenseInfo.license.activations.length} / {maxActivations}
+              </div>
+            </div>
+            <p className="text-sm text-blue-600 mt-2">
+              {maxActivations - licenseInfo.license.activations.length} postes disponibles
+            </p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-4 pt-4">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
+          >
+            {saving ? (
+              <RefreshCw className="w-4 h-4 animate-spin" />
+            ) : (
+              <Save className="w-4 h-4" />
+            )}
+            {saving ? 'Sauvegarde...' : 'Sauvegarder'}
+          </button>
+
+          <button
+            onClick={fetchLicenseInfo}
+            disabled={loading}
+            className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 flex items-center gap-2"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            Actualiser
+          </button>
+        </div>
+
+        {/* Avertissement */}
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5" />
+            <div className="text-sm text-yellow-800">
+              <p className="font-medium mb-1">Important:</p>
+              <ul className="space-y-1 list-disc list-inside">
+                <li>Cette modification affecte le nombre total de postes pouvant utiliser l'application</li>
+                <li>Les postes actuellement connectés ne seront pas déconnectés</li>
+                <li>La nouvelle limite s'appliquera aux nouvelles connexions</li>
+                <li>En cas de problème, contactez le support technique</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}