@inputdev/sdk 1.0.0 → 1.0.2

package/README.md

@@ -17,12 +17,16 @@ Un SDK moderne et intelligent qui facilite l'intégration de formulaires avec vo
 
 ### **CDN (recommandé)**
 ```html
-<script src="https://cdn.jsdelivr.net/npm/inputdev-sdk@latest/dist/inputdev-sdk.min.js"></script>
+<!-- UNPKG -->
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
+
+<!-- JSDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
 ```
 
 ### **NPM**
 ```bash
-npm install inputdev-sdk
+npm install @inputdev/sdk
 ```
 
 ## 📖 **Utilisation rapide**
@@ -211,7 +215,7 @@ document.addEventListener('inputdev:error', (event) => {
 
 ### **React**
 ```jsx
-import { InputDevSDK } from 'inputdev-sdk';
+import { InputDevSDK } from '@inputdev/sdk';
 
 const dev = new InputDevSDK();
 
@@ -227,7 +231,7 @@ const handleSubmit = async (data) => {
 
 ### **Vanilla JS**
 ```html
-<script src="inputdev-sdk.min.js"></script>
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
 <script>
     const dev = new InputDevSDK();
     
@@ -259,10 +263,8 @@ MIT License - libre pour usage commercial et personnel
 
 ## 🔗 **Liens utiles**
 
-- 📖 **Documentation complète** : [docs.inputdev.com](https://docs.inputdev.com)
-- 🚀 **Démo en ligne** : [demo.inputdev.com](https://demo.inputdev.com)
-- 🐛 **Issues** : [GitHub Issues](https://github.com/inputdev/sdk/issues)
-- 💬 **Support** : [Discord](https://discord.gg/inputdev)
+- 📖 **Documentation complète** : [docs.inputdev.com](https://inputdev.pages.dev/documentation)
+
 
 ---
 
@@ -329,29 +331,19 @@ document.addEventListener('inputdev:error', (event) => {
 | SRV_001 | Erreur serveur | Erreur interne du serveur |
 | SRV_004 | Trop de requêtes | Rate limit dépassé (10 req/min par clé) |
 
-## Configuration avancée
+## Configuration
 
-### Personnaliser la configuration
+### Configuration actuelle
 
-```javascript
-// Mettre à jour la configuration
-dev.updateConfig({
-  apiEndpoint: 'https://votre-serveur-personnalisé.com/submit',
-  timeout: 15000,
-  retries: 3
-});
+Le SDK utilise une configuration de production optimisée :
 
-// Voir la configuration actuelle
+```javascript
+// Voir la configuration actuelle (lecture seule)
 console.log(dev.getConfig());
 ```
 
-### Options de configuration
 
-| Option | Défaut | Description |
-|--------|--------|-------------|
-| `apiEndpoint` | `https://votre-serveur.com/submit` | URL de l'API InputDev |
-| `timeout` | `10000` | Timeout en millisecondes |
-| `retries` | `2` | Nombre de tentatives en cas d'échec |
+**Note :** La configuration est optimisée pour la production et n'est pas modifiable pour garantir la sécurité et la stabilité.
 
 ## Exemples pratiques
 
@@ -381,7 +373,7 @@ console.log(dev.getConfig());
   <button type="submit">Envoyer</button>
 </form>
 
-<script src="https://cdn.inputdev.dev/latest.js"></script>
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
 ```
 
 ### Formulaire avec validation personnalisée
@@ -399,7 +391,7 @@ document.addEventListener('inputdev:error', (event) => {
 
 ### Intégration React
 ```jsx
-import { dev } from "@inputdev/sdk";
+import { InputDevSDK } from "@inputdev/sdk";
 
 function ContactForm() {
   const [formData, setFormData] = useState({
@@ -407,6 +399,7 @@ function ContactForm() {
     message: ''
   });
   const [loading, setLoading] = useState(false);
+  const dev = new InputDevSDK();
 
   const handleSubmit = async (e) => {
     e.preventDefault();

package/inputdev-sdk.prod.js

@@ -0,0 +1,495 @@
+/**
+ * InputDev SDK - Version Production Simplifiée
+ * Backend de formulaires sans code
+ * 
+ * @version 1.0.0
+ * @author InputDev
+ */
+
+(function(global) {
+    'use strict';
+
+    // Configuration de production (non modifiable)
+    const CONFIG = {
+        apiEndpoint: 'https://server-g4xx.onrender.com/inputdev/submit',
+        timeout: 10000
+    };
+
+    // Codes d'erreur
+    const ERROR_CODES = {
+        API_001: 'Clé API invalide',
+        API_003: 'Clé API désactivée',
+        DOM_001: 'Domaine non autorisé',
+        QUO_001: 'Quota de soumissions épuisé',
+        STO_001: 'Quota de stockage épuisé',
+        SRV_001: 'Erreur serveur',
+        SRV_004: 'Trop de requêtes'
+    };
+
+    /**
+     * SDK InputDev - Version simplifiée
+     */
+    class InputDevSDK {
+        constructor() {
+            this.messagesEnabled = true;
+            this.logsEnabled = true;
+            this.init();
+        }
+
+        init() {
+            // Log de démarrage pour vérifier que le SDK est bien chargé
+            if (this.logsEnabled) {
+                console.log('%c🚀 INPUTDEV SDK CHARGÉ', 'color: #8b5cf6; font-weight: bold; font-size: 12px;');
+                console.log('⏱️ Timeout:', CONFIG.timeout + 'ms');
+            }
+            
+            // Masquer les logs XHR du navigateur pour réduire le bruit
+            this.hideXHRLogs();
+            
+            this.setupAutoFormHandling();
+        }
+        
+        hideXHRLogs() {
+            // Masquer les logs XHR/Fetch du navigateur dans la console
+            const originalFetch = window.fetch;
+            window.fetch = function(...args) {
+                const result = originalFetch.apply(this, args);
+                
+                // Masquer les logs de fetch dans la console et les erreurs non critiques
+                result.catch(() => {});
+                
+                return result;
+            };
+            
+            // Masquer les erreurs de favicon et autres erreurs non critiques
+            const originalError = console.error;
+            console.error = function(...args) {
+                // Filtrer les erreurs de favicon et autres erreurs non critiques
+                const message = args[0];
+                if (typeof message === 'string' && (
+                    message.includes('favicon.ico') ||
+                    message.includes('404') && message.includes('File not found')
+                )) {
+                    return; // Ignorer ces erreurs
+                }
+                return originalError.apply(console, args);
+            };
+        }
+
+        /**
+         * Désactive/active les messages
+         */
+        disableMessages() {
+            this.messagesEnabled = false;
+        }
+
+        enableMessages() {
+            this.messagesEnabled = true;
+        }
+        
+        /**
+         * Désactive/active les logs
+         */
+        disableLogs() {
+            this.logsEnabled = false;
+        }
+
+        enableLogs() {
+            this.logsEnabled = true;
+        }
+
+        setupAutoFormHandling() {
+            document.addEventListener('DOMContentLoaded', () => {
+                const forms = document.querySelectorAll('form[data-inputdev], form[data-inputdev-silence]');
+                
+                forms.forEach(form => {
+                    // Ajouter la validation automatique des emails
+                    this.setupEmailValidation(form);
+                    
+                    form.addEventListener('submit', (e) => {
+                        e.preventDefault();
+                        
+                        // Vérifier si c'est un formulaire silencieux
+                        const isSilent = form.hasAttribute('data-inputdev-silence');
+                        const apiKey = isSilent ? form.getAttribute('data-inputdev-silence') : form.getAttribute('data-inputdev');
+                        
+                        // Convertir FormData en objet
+                        const data = {};
+                        for (let [key, value] of new FormData(form).entries()) {
+                            data[key] = value;
+                        }
+
+                        const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
+                        if (submitButton) {
+                            submitButton.disabled = true;
+                            const originalText = submitButton.textContent || submitButton.value;
+                            submitButton.textContent = 'Envoi en cours...';
+                            
+                            setTimeout(() => {
+                                submitButton.disabled = false;
+                                submitButton.textContent = originalText;
+                            }, 3000);
+                        }
+
+                        this.submit(apiKey, isSilent ? 'silence' : undefined, data)
+                            .then(response => {
+                                this.handleSuccess(form, response);
+                            })
+                            .catch(error => {
+                                this.handleError(form, error);
+                            });
+                    });
+                });
+            });
+        }
+        
+        setupEmailValidation(form) {
+            const emailInputs = form.querySelectorAll('input[type="email"]');
+            
+            emailInputs.forEach(input => {
+                // Ajouter un écouteur pour la validation en temps réel
+                input.addEventListener('blur', () => {
+                    this.validateEmail(input);
+                });
+                
+                input.addEventListener('input', () => {
+                    // Retirer le style d'erreur quand l'utilisateur tape
+                    if (input.classList.contains('inputdev-email-error')) {
+                        input.classList.remove('inputdev-email-error');
+                        this.removeEmailError(input);
+                    }
+                });
+            });
+        }
+        
+        validateEmail(emailInput) {
+            const email = emailInput.value.trim();
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            
+            if (!email) {
+                // Champ vide - pas d'erreur
+                this.removeEmailError(emailInput);
+                return true;
+            }
+            
+            if (!emailRegex.test(email)) {
+                // Email invalide
+                this.showEmailError(emailInput);
+                return false;
+            }
+            
+            // Email valide
+            this.removeEmailError(emailInput);
+            return true;
+        }
+        
+        showEmailError(emailInput) {
+            emailInput.classList.add('inputdev-email-error');
+            
+            // Ajouter un style CSS si pas déjà présent
+            if (!document.getElementById('inputdev-email-styles')) {
+                const style = document.createElement('style');
+                style.id = 'inputdev-email-styles';
+                style.textContent = `
+                    .inputdev-email-error {
+                        border: 2px solid #ef4444 !important;
+                        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
+                        outline: none !important;
+                    }
+                    .inputdev-email-error-message {
+                        color: #ef4444;
+                        font-size: 12px;
+                        margin-top: 4px;
+                        display: block;
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+            
+            // Retirer l'ancien message d'erreur s'il existe
+            this.removeEmailError(emailInput);
+            
+            // Ajouter le message d'erreur
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'inputdev-email-error-message';
+            errorDiv.innerHTML = '<span style="text-decoration: underline; font-weight: bold;">InputDev SDK</span> : <span style="font-weight: bold;">Veuillez entrer une adresse email valide</span>';
+            errorDiv.setAttribute('data-inputdev-error-for', emailInput.id || emailInput.name);
+            
+            // Insérer après l'input
+            emailInput.parentNode.insertBefore(errorDiv, emailInput.nextSibling);
+        }
+        
+        removeEmailError(emailInput) {
+            emailInput.classList.remove('inputdev-email-error');
+            
+            // Retirer le message d'erreur
+            const errorMessage = emailInput.parentNode.querySelector(`[data-inputdev-error-for="${emailInput.id || emailInput.name}"]`);
+            if (errorMessage) {
+                errorMessage.remove();
+            }
+        }
+        
+        validateEmailsInData(data) {
+            const errors = [];
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            
+            // Parcourir toutes les propriétés de l'objet data
+            for (const [key, value] of Object.entries(data)) {
+                // Vérifier si le nom de la clé contient "email" (insensible à la casse)
+                if (key.toLowerCase().includes('email') && typeof value === 'string') {
+                    const email = value.trim();
+                    if (email && !emailRegex.test(email)) {
+                        errors.push(`L'email "${key}" est invalide: ${email}`);
+                    }
+                }
+            }
+            
+            return {
+                valid: errors.length === 0,
+                errors: errors
+            };
+        }
+        
+        logEmailValidationError(errors) {
+            // Afficher les erreurs de validation email dans la console
+            console.warn('%c📧 VALIDATION EMAIL', 'color: #f97316; font-weight: bold; font-size: 14px;');
+            console.warn('%cErreurs trouvées:', 'color: #f97316; font-weight: bold; font-size: 12px;');
+            errors.forEach((error, index) => {
+                console.warn('%c• ' + error, 'color: #f97316; font-size: 11px;');
+            });
+            console.warn('%c💡 Corrigez les emails avant de soumettre à nouveau', 'color: #6b7280; font-size: 11px;');
+        }
+
+        async submit(apiKey, silence, data) {
+            if (!apiKey || typeof apiKey !== 'string') {
+                throw new Error('Clé API invalide');
+            }
+
+            // Gérer le paramètre silence
+            if (typeof silence === 'object') {
+                // Cas: submit(apiKey, data) - ancienne signature
+                data = silence;
+                silence = undefined;
+            }
+
+            if (!data || typeof data !== 'object') {
+                throw new Error('Données invalides');
+            }
+
+            // Validation des emails dans les données JSON
+            const emailValidation = this.validateEmailsInData(data);
+            if (!emailValidation.valid) {
+                // Afficher l'erreur dans la console
+                this.logEmailValidationError(emailValidation.errors);
+                throw new Error('EMAIL_INVALID: ' + emailValidation.errors.join(', '));
+            }
+
+            // Désactiver temporairement les logs si mode silencieux
+            const originalLogsEnabled = this.logsEnabled;
+            if (silence === 'silence') {
+                this.logsEnabled = false;
+            }
+
+            const url = `${CONFIG.apiEndpoint}/${apiKey}`;
+            
+            // Log automatique de la soumission
+            this.logInfo('📤 Envoi du formulaire...', { 
+                apiKey: '***masqué***', 
+                data 
+            });
+            
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), CONFIG.timeout);
+
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ data }),
+                    signal: controller.signal
+                });
+
+                clearTimeout(timeoutId);
+                const result = await response.json();
+                
+                // Log automatique de la réponse brute du backend
+                this.logInfo('📨 Réponse du backend:', {
+                    status: response.status,
+                    statusText: response.statusText,
+                    result: result
+                });
+
+                if (!response.ok) {
+                    const errorCode = result.error?.code || 'SRV_001';
+                    const errorMessage = result.error?.message || ERROR_CODES[errorCode] || 'Erreur inconnue';
+                    
+                    // Log détaillé de l'erreur
+                    this.logError(`❌ Erreur ${errorCode}`, {
+                        code: errorCode,
+                        message: errorMessage,
+                        status: response.status,
+                        fullResponse: result
+                    });
+                    
+                    // Message spécial pour l'erreur de domaine
+                    if (errorCode === 'DOM_001') {
+                        this.logDomainError();
+                    }
+                    
+                    // Message spécial pour l'erreur de clé désactivée
+                    if (errorCode === 'API_003') {
+                        this.logApiKeyDisabledError();
+                    }
+                    
+                    throw new Error(`${errorCode}: ${errorMessage}`);
+                }
+                
+                // Log de succès avec détails
+                this.logSuccess('✅ Formulaire envoyé avec succès !', {
+                    submissionId: result.submissionId,
+                    message: result.message,
+                    response: result
+                });
+
+                return result;
+            } catch (error) {
+                // Log automatique de l'erreur
+                this.logError('💥 Erreur lors de la soumission:', {
+                    error: error.message,
+                    stack: error.stack,
+                    apiKey: '***masqué***'
+                });
+                
+                // Message spécial pour l'erreur de domaine
+                if (this.extractErrorCode(error.message) === 'DOM_001') {
+                    this.logDomainError();
+                }
+                
+                // Message spécial pour l'erreur de clé désactivée
+                if (this.extractErrorCode(error.message) === 'API_003') {
+                    this.logApiKeyDisabledError();
+                }
+                
+                throw error;
+            } finally {
+                // Restaurer l'état des logs
+                this.logsEnabled = originalLogsEnabled;
+            }
+        }
+
+        handleSuccess(form, response) {
+            form.reset();
+            
+            // Log automatique du succès
+            this.logSuccess('🎉 Formulaire traité avec succès !', {
+                form: form.tagName + (form.id ? '#' + form.id : ''),
+                submissionId: response.submissionId,
+                message: response.message,
+                timestamp: new Date().toISOString(),
+                response: response
+            });
+            
+            const event = new CustomEvent('inputdev:success', {
+                detail: { form, response }
+            });
+            document.dispatchEvent(event);
+        }
+
+        handleError(form, error) {
+            // Message spécial pour l'erreur de domaine
+            if (this.extractErrorCode(error.message) === 'DOM_001') {
+                this.logDomainError();
+            }
+            
+            // Message spécial pour l'erreur de clé désactivée
+            if (this.extractErrorCode(error.message) === 'API_003') {
+                this.logApiKeyDisabledError();
+            }
+            
+            const event = new CustomEvent('inputdev:error', {
+                detail: { form, error }
+            });
+            document.dispatchEvent(event);
+        }
+        
+        logSuccess(message, data) {
+            // Forcer l'affichage avec console.log direct - texte en vert sans contour
+            if (this.logsEnabled) {
+                console.log('%c🟢 INPUTDEV SUCCESS: ' + message, 'color: #10b981; font-weight: bold; font-size: 12px;');
+                console.log('📊 Détails:', data);
+            }
+        }
+
+        logError(message, error) {
+            // Forcer l'affichage avec console.error direct - texte en rouge sans contour
+            if (this.logsEnabled) {
+                console.error('%c🔴 INPUTDEV ERROR: ' + message, 'color: #ef4444; font-weight: bold; font-size: 12px;');
+                console.error('📊 Détails:', error);
+            }
+        }
+        
+        logInfo(message, data) {
+            // Forcer l'affichage avec console.info direct - texte en bleu sans contour
+            if (this.logsEnabled) {
+                console.info('%c🔵 INPUTDEV INFO: ' + message, 'color: #3b82f6; font-weight: bold; font-size: 12px;');
+                console.info('📊 Détails:', data);
+            }
+        }
+        
+        logDomainError() {
+            // Message spécial pour l'erreur de domaine DOM_001
+            if (this.logsEnabled) {
+                console.warn('%c⚠️ DOMAINE NON AUTORISÉ (DOM_001)', 'color: #f97316; font-weight: bold; font-size: 14px;');
+                console.warn('%c🔧 SOLUTIONS DISPONIBLES:', 'color: #f97316; font-weight: bold; font-size: 12px;');
+                console.warn('%c📍 LOCALHOST: Activez le mode TEST pour votre clé API', 'color: #f97316; font-size: 11px;');
+                console.warn('%c🌐 PRODUCTION: Seul le domaine configuré est accepté', 'color: #f97316; font-size: 11px;');
+            }
+        }
+        
+        logApiKeyDisabledError() {
+            // Message spécial pour l'erreur de clé désactivée API_003
+            if (this.logsEnabled) {
+                console.warn('%c🔑 CLÉ API DÉSACTIVÉE (API_003)', 'color: #f97316; font-weight: bold; font-size: 14px;');
+                console.warn('%c🔧 ACTION REQUISE:', 'color: #f97316; font-weight: bold; font-size: 12px;');
+                console.warn('%c👤 Veuillez vous rendre dans votre compte et activer la clé', 'color: #f97316; font-size: 11px;');
+                console.warn('%c⚠️ La clé a été désactivée manuellement ou automatiquement', 'color: #f97316; font-size: 11px;');
+            }
+        }
+        
+        extractErrorCode(errorMessage) {
+            const match = errorMessage.match(/^([A-Z_0-9]+):/);
+            return match ? match[1] : 'UNKNOWN';
+        }
+        
+        getErrorMessage(errorMessage) {
+            const errorCode = this.extractErrorCode(errorMessage);
+            const cleanMessage = errorMessage.replace(/^[A-Z_0-9]+:\s*/, '');
+            return ERROR_CODES[errorCode] || cleanMessage;
+        }
+
+        // Méthodes pour compatibilité (ne font rien)
+        updateConfig() {
+            this.logError('⚠️ La configuration n\'est pas modifiable en production');
+        }
+
+        getConfig() {
+            return { ...CONFIG };
+        }
+    }
+
+    // Créer l'instance globale
+    const inputDevSDK = new InputDevSDK();
+
+    // Exporter
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { dev: inputDevSDK, InputDevSDK };
+    } else if (typeof define === 'function' && define.amd) {
+        define(function() { return { dev: inputDevSDK, InputDevSDK }; });
+    } else {
+        global.dev = inputDevSDK;
+        global.InputDevSDK = InputDevSDK;
+    }
+
+})(typeof window !== 'undefined' ? window : this);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@inputdev/sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Backend de formulaires sans code - SDK JavaScript",
-  "main": "inputdev-sdk.js",
+  "main": "inputdev-sdk.prod.js",
   "types": "inputdev-sdk.d.ts",
   "scripts": {
     "build": "webpack --mode=production",
@@ -33,14 +33,13 @@
   },
   "homepage": "https://inputdev.dev",
   "files": [
-    "inputdev-sdk.js",
-    "inputdev-sdk.min.js",
+    "inputdev-sdk.prod.js",
     "inputdev-sdk.d.ts",
     "README.md",
     "LICENSE"
   ],
-  "browser": "inputdev-sdk.js",
-  "module": "inputdev-sdk.js",
-  "unpkg": "inputdev-sdk.min.js",
-  "jsdelivr": "inputdev-sdk.min.js"
+  "browser": "inputdev-sdk.prod.js",
+  "module": "inputdev-sdk.prod.js",
+  "unpkg": "inputdev-sdk.prod.js",
+  "jsdelivr": "inputdev-sdk.prod.js"
 }