easy-forms-core 1.1.2 → 1.1.5

package/dist/easy-form.d.ts

@@ -5,7 +5,7 @@ type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select
 /**
  * Tipos de validaciones soportadas
  */
-type ValidationType = 'required' | 'email' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'custom';
+type ValidationType = 'required' | 'email' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'custom' | 'noInjection';
 /**
  * Operadores de condición
  */
@@ -50,10 +50,13 @@ interface CustomValidation extends BaseValidation {
     type: 'custom';
     validator: (value: any) => boolean | Promise<boolean>;
 }
+interface NoInjectionValidation extends BaseValidation {
+    type: 'noInjection';
+}
 /**
  * Unión de todas las validaciones
  */
-type Validation = RequiredValidation | EmailValidation | MinLengthValidation | MaxLengthValidation | MinValidation | MaxValidation | PatternValidation | CustomValidation;
+type Validation = RequiredValidation | EmailValidation | MinLengthValidation | MaxLengthValidation | MinValidation | MaxValidation | PatternValidation | CustomValidation | NoInjectionValidation;
 /**
  * Condición individual para campos
  */
@@ -109,6 +112,8 @@ interface BaseField {
     disabled?: boolean;
     hidden?: boolean;
     description?: string;
+    /** Si true, no se aplica validación anti-inyección automática */
+    skipInjectionValidation?: boolean;
     dependencies?: FieldDependencies;
     conditionalValidations?: Array<{
         condition: FieldCondition | FieldCondition[];
@@ -339,6 +344,8 @@ declare class EasyForm extends BrowserHTMLElement {
     protected shadow: ShadowRoot;
     private customComponents;
     private isRendering;
+    private attemptsLock;
+    private lockCountdownInterval;
     static get observedAttributes(): string[];
     constructor();
     /**
@@ -365,6 +372,21 @@ declare class EasyForm extends BrowserHTMLElement {
      * Establece los campos adicionales para extender el template
      */
     set templateExtend(value: Field[] | null);
+    /**
+     * Máximo de intentos antes de bloquear (para AttemptsLock)
+     */
+    get maxAttempts(): number | null;
+    set maxAttempts(value: number | null);
+    /**
+     * Duración del bloqueo en minutos (default: 5)
+     */
+    get blockDurationMinutes(): number | null;
+    set blockDurationMinutes(value: number | null);
+    /**
+     * Clave para persistir intentos en sessionStorage
+     */
+    get attemptsStorageKey(): string | null;
+    set attemptsStorageKey(value: string | null);
     /**
      * Se llama cuando el componente se conecta al DOM
      */
@@ -373,6 +395,10 @@ declare class EasyForm extends BrowserHTMLElement {
      * Se llama cuando un atributo cambia
      */
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Configura el AttemptsLock según los atributos actuales
+     */
+    private setupAttemptsLock;
     /**
      * Maneja el cambio de schema
      */
@@ -385,6 +411,11 @@ declare class EasyForm extends BrowserHTMLElement {
      * Renderiza el formulario
      */
     private render;
+    /**
+     * Actualiza el overlay de bloqueo por intentos
+     */
+    private updateLockOverlay;
+    private stopLockCountdown;
     /**
      * Actualiza el overlay de loading sobre el formulario
      */
@@ -467,6 +498,23 @@ declare class EasyForm extends BrowserHTMLElement {
      * Resetea el formulario a sus valores iniciales
      */
     reset(): void;
+    /**
+     * Incrementa el contador de intentos (para bloqueo por intentos fallidos).
+     * El consumidor debe llamar esto cuando la API/login falle.
+     */
+    incrementAttempts(): void;
+    /**
+     * Resetea el contador de intentos y desbloquea el formulario.
+     */
+    resetAttempts(): void;
+    /**
+     * Retorna true si el formulario está bloqueado por intentos.
+     */
+    isLocked(): boolean;
+    /**
+     * Retorna los milisegundos restantes del bloqueo, o 0 si no está bloqueado.
+     */
+    getRemainingBlockTimeMs(): number;
     /**
      * Limpia todos los valores del formulario
      */

package/dist/easy-form.js

@@ -710,6 +710,28 @@ function getBaseStyles(colors) {
         transform: rotate(360deg);
       }
     }
+    /* Lock Overlay (bloqueo por intentos) */
+    .easy-form-lock-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1001;
+      backdrop-filter: blur(4px);
+      border-radius: inherit;
+      text-align: center;
+      padding: 1.5rem;
+    }
+    .easy-form-lock-message {
+      font-size: 1rem;
+      color: var(--easy-form-text);
+      max-width: 280px;
+    }
     /* Disabled State */
     .easy-form-disabled,
     .easy-form-disabled * {
@@ -1635,6 +1657,191 @@ function getPredefinedMask(type) {
   return PREDEFINED_MASKS[type];
 }
 
+// src/utils/injection-validation.ts
+var INJECTION_VALIDATION_MESSAGE = "El valor contiene caracteres o patrones no permitidos";
+var INJECTION_PATTERNS = [
+  // SQL Injection
+  /\b(union|select|insert|update|delete|drop|exec|execute|declare)\s+(all\s+)?(select|from|into|table)/i,
+  /\b(or|and)\s+['"]?\d+['"]?\s*=\s*['"]?\d+/i,
+  /;\s*(drop|delete|truncate|alter)\s+/i,
+  /--\s*$/,
+  // SQL comment
+  /\/\*[\s\S]*\*\//,
+  // Block comment
+  /'\s*or\s+'1'\s*=\s*'1/i,
+  /"\s*or\s+"1"\s*=\s*"1/i,
+  /\bexec\s*\(/i,
+  /\bxp_\w+/i,
+  // SQL Server extended procedures
+  // XSS / Scripting
+  /<script\b[\s\S]*?>[\s\S]*?<\/script>/i,
+  /<script\b/i,
+  /javascript\s*:/i,
+  /vbscript\s*:/i,
+  /on\w+\s*=\s*["'][^"']*["']/i,
+  // onclick=, onerror=, onload=, etc.
+  /on\w+\s*=\s*[^\s>]+/i,
+  /<iframe\b/i,
+  /<object\b/i,
+  /<embed\b/i,
+  /\beval\s*\(/i,
+  /document\.(cookie|write|location)/i,
+  /window\.(location|open|eval)/i,
+  // Command injection (shell)
+  /[;&|]\s*(ls|cat|rm|wget|curl|nc|bash|sh|python|perl)\s/i,
+  /\$\s*\([^)]+\)/,
+  // $(...)
+  /`[^`]+`/,
+  // Backtick command substitution
+  /\|\s*\w+/,
+  // Pipe to command (with word after)
+  // NoSQL / Template injection
+  /\$\s*where\b/i,
+  /\$\s*gt\b|\$\s*ne\b|\$\s*regex\b/i,
+  /\{\{[^}]*\}\}/,
+  // Template literals
+  /\$\{[^}]*\}/
+  // JS template literals
+];
+function containsInjection(value) {
+  if (typeof value !== "string" || value.length === 0) {
+    return false;
+  }
+  const normalized = value.trim();
+  if (normalized.length === 0) return false;
+  for (const pattern of INJECTION_PATTERNS) {
+    if (pattern.test(value)) {
+      return true;
+    }
+  }
+  return false;
+}
+function isSafeFromInjection(value) {
+  if (value === null || value === void 0) {
+    return true;
+  }
+  if (typeof value === "string") {
+    return !containsInjection(value);
+  }
+  if (Array.isArray(value)) {
+    return value.every((item) => isSafeFromInjection(item));
+  }
+  if (typeof value === "object") {
+    return Object.values(value).every(
+      (v) => isSafeFromInjection(v)
+    );
+  }
+  return true;
+}
+
+// src/utils/attempts-lock.ts
+var AttemptsLock = class {
+  constructor(options) {
+    this.attempts = 0;
+    this.lockedUntil = null;
+    this.unlockCheckInterval = null;
+    this.maxAttempts = Math.max(1, options.maxAttempts);
+    this.blockDurationMs = (options.blockDurationMinutes ?? 5) * 60 * 1e3;
+    this.storageKey = options.storageKey;
+    this.onLocked = options.onLocked;
+    this.onUnlocked = options.onUnlocked;
+    if (this.storageKey && typeof sessionStorage !== "undefined") {
+      this.loadFromStorage();
+    }
+  }
+  loadFromStorage() {
+    if (!this.storageKey || typeof sessionStorage === "undefined") return;
+    try {
+      const stored = sessionStorage.getItem(this.storageKey);
+      if (stored) {
+        const data = JSON.parse(stored);
+        this.attempts = data.attempts ?? 0;
+        this.lockedUntil = data.lockedUntil ?? null;
+        this.checkExpiration();
+      }
+    } catch {
+    }
+  }
+  saveToStorage() {
+    if (!this.storageKey || typeof sessionStorage === "undefined") return;
+    try {
+      const data = {
+        attempts: this.attempts,
+        lockedUntil: this.lockedUntil ?? void 0
+      };
+      sessionStorage.setItem(this.storageKey, JSON.stringify(data));
+    } catch {
+    }
+  }
+  checkExpiration() {
+    if (this.lockedUntil === null) return false;
+    if (Date.now() >= this.lockedUntil) {
+      this.reset();
+      this.onUnlocked?.();
+      return true;
+    }
+    return false;
+  }
+  startUnlockCheck() {
+    if (this.unlockCheckInterval) return;
+    this.unlockCheckInterval = setInterval(() => {
+      if (this.checkExpiration()) {
+        this.stopUnlockCheck();
+      }
+    }, 1e3);
+  }
+  stopUnlockCheck() {
+    if (this.unlockCheckInterval) {
+      clearInterval(this.unlockCheckInterval);
+      this.unlockCheckInterval = null;
+    }
+  }
+  /**
+   * Incrementa el contador de intentos. Si alcanza maxAttempts, bloquea.
+   */
+  incrementAttempts() {
+    this.attempts++;
+    if (this.attempts >= this.maxAttempts) {
+      this.lockedUntil = Date.now() + this.blockDurationMs;
+      this.saveToStorage();
+      this.onLocked?.(this.blockDurationMs);
+      this.startUnlockCheck();
+    } else {
+      this.saveToStorage();
+    }
+  }
+  /**
+   * Retorna true si el lock está activo (aún dentro del período de bloqueo)
+   */
+  isLocked() {
+    if (this.checkExpiration()) return false;
+    return this.lockedUntil !== null && Date.now() < this.lockedUntil;
+  }
+  /**
+   * Retorna los milisegundos restantes del bloqueo, o 0 si no está bloqueado
+   */
+  getRemainingBlockTimeMs() {
+    if (this.checkExpiration()) return 0;
+    if (this.lockedUntil === null) return 0;
+    return Math.max(0, this.lockedUntil - Date.now());
+  }
+  /**
+   * Resetea el contador de intentos y el bloqueo
+   */
+  reset() {
+    this.attempts = 0;
+    this.lockedUntil = null;
+    this.stopUnlockCheck();
+    this.saveToStorage();
+  }
+  /**
+   * Retorna el número actual de intentos
+   */
+  getAttempts() {
+    return this.attempts;
+  }
+};
+
 // src/utils/index.ts
 function attributeValue(value) {
   if (value === null || value === void 0) {
@@ -1722,6 +1929,8 @@ var ValidationEngine = class {
         return this.validatePattern(value, validation.value);
       case "custom":
         return await this.validateCustom(value, validation);
+      case "noInjection":
+        return this.validateNoInjection(value, validation);
       default:
         return { isValid: true };
     }
@@ -1832,6 +2041,19 @@ var ValidationEngine = class {
       message: isValid ? void 0 : "El formato no es v\xE1lido"
     };
   }
+  /**
+   * Valida que el valor no contenga patrones de inyección (SQL, XSS, etc.)
+   */
+  validateNoInjection(value, validation) {
+    if (value === null || value === void 0 || value === "") {
+      return { isValid: true };
+    }
+    const isValid = isSafeFromInjection(value);
+    return {
+      isValid,
+      message: isValid ? void 0 : validation.message || INJECTION_VALIDATION_MESSAGE
+    };
+  }
   /**
    * Valida con función personalizada
    */
@@ -1870,6 +2092,8 @@ var ValidationEngine = class {
         return "El formato no es v\xE1lido";
       case "custom":
         return "Validaci\xF3n fallida";
+      case "noInjection":
+        return INJECTION_VALIDATION_MESSAGE;
       default:
         return "Campo inv\xE1lido";
     }
@@ -2348,6 +2572,11 @@ var StateManager = class {
    */
   getActiveValidations(field) {
     let validations = [...field.validations || []];
+    const textFieldTypes = ["text", "email", "password", "textarea"];
+    const skipInjection = field.skipInjectionValidation ?? field.props?.skipInjectionValidation;
+    if (textFieldTypes.includes(field.type) && !skipInjection && !validations.some((v) => v.type === "noInjection")) {
+      validations = [{ type: "noInjection" }, ...validations];
+    }
     const isRequired = this.getFieldRequired(field.name);
     const hasRequiredValidation = validations.some((v) => v.type === "required");
     if (isRequired && !hasRequiredValidation) {
@@ -4525,12 +4754,26 @@ var EasyForm = class extends BrowserHTMLElement {
     super();
     this.customComponents = {};
     this.isRendering = false;
+    this.attemptsLock = null;
+    this.lockCountdownInterval = null;
     this.dependencyRenderTimeout = null;
     this.stateManager = new StateManager();
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["schema", "template", "template-extend", "theme", "colors", "initialData", "loading", "disabled"];
+    return [
+      "schema",
+      "template",
+      "template-extend",
+      "theme",
+      "colors",
+      "initialData",
+      "loading",
+      "disabled",
+      "max-attempts",
+      "block-duration-minutes",
+      "attempts-storage-key"
+    ];
   }
   /**
    * Obtiene el schema
@@ -4604,10 +4847,56 @@ var EasyForm = class extends BrowserHTMLElement {
       this.removeAttribute("template-extend");
     }
   }
+  /**
+   * Máximo de intentos antes de bloquear (para AttemptsLock)
+   */
+  get maxAttempts() {
+    const attr = this.getAttribute("max-attempts");
+    if (!attr) return null;
+    const n = parseInt(attr, 10);
+    return isNaN(n) ? null : n;
+  }
+  set maxAttempts(value) {
+    if (value != null && value >= 1) {
+      this.setAttribute("max-attempts", String(value));
+    } else {
+      this.removeAttribute("max-attempts");
+    }
+  }
+  /**
+   * Duración del bloqueo en minutos (default: 5)
+   */
+  get blockDurationMinutes() {
+    const attr = this.getAttribute("block-duration-minutes");
+    if (!attr) return null;
+    const n = parseInt(attr, 10);
+    return isNaN(n) ? null : n;
+  }
+  set blockDurationMinutes(value) {
+    if (value != null && value >= 1) {
+      this.setAttribute("block-duration-minutes", String(value));
+    } else {
+      this.removeAttribute("block-duration-minutes");
+    }
+  }
+  /**
+   * Clave para persistir intentos en sessionStorage
+   */
+  get attemptsStorageKey() {
+    return this.getAttribute("attempts-storage-key");
+  }
+  set attemptsStorageKey(value) {
+    if (value) {
+      this.setAttribute("attempts-storage-key", value);
+    } else {
+      this.removeAttribute("attempts-storage-key");
+    }
+  }
   /**
    * Se llama cuando el componente se conecta al DOM
    */
   connectedCallback() {
+    this.setupAttemptsLock();
     this.setupStyles();
     this.render();
   }
@@ -4654,6 +4943,33 @@ var EasyForm = class extends BrowserHTMLElement {
     if (name === "disabled" && newValue !== oldValue) {
       this.render();
     }
+    if ((name === "max-attempts" || name === "block-duration-minutes" || name === "attempts-storage-key") && newValue !== oldValue) {
+      this.setupAttemptsLock();
+      this.updateLockOverlay();
+    }
+  }
+  /**
+   * Configura el AttemptsLock según los atributos actuales
+   */
+  setupAttemptsLock() {
+    const maxAttempts = this.maxAttempts;
+    if (maxAttempts == null || maxAttempts < 1) {
+      this.attemptsLock = null;
+      return;
+    }
+    this.attemptsLock = new AttemptsLock({
+      maxAttempts,
+      blockDurationMinutes: this.blockDurationMinutes ?? 5,
+      storageKey: this.attemptsStorageKey ?? void 0,
+      onLocked: () => {
+        this.updateLockOverlay();
+      },
+      onUnlocked: () => {
+        this.stopLockCountdown();
+        this.updateLockOverlay();
+        this.render();
+      }
+    });
   }
   /**
    * Maneja el cambio de schema
@@ -4768,10 +5084,50 @@ var EasyForm = class extends BrowserHTMLElement {
       if (this.loading) {
         this.updateLoadingOverlay(newFormElement);
       }
+      this.updateLockOverlay(newFormElement);
     } finally {
       this.isRendering = false;
     }
   }
+  /**
+   * Actualiza el overlay de bloqueo por intentos
+   */
+  updateLockOverlay(formElement) {
+    const existingOverlay = this.shadow.querySelector(".easy-form-lock-overlay");
+    if (existingOverlay) {
+      existingOverlay.remove();
+    }
+    this.stopLockCountdown();
+    if (!this.attemptsLock?.isLocked()) return;
+    const form = formElement || this.shadow.querySelector("form");
+    if (!form) return;
+    const overlay = document.createElement("div");
+    overlay.className = "easy-form-lock-overlay";
+    const message = document.createElement("div");
+    message.className = "easy-form-lock-message";
+    message.setAttribute("role", "alert");
+    const updateCountdown = () => {
+      const remainingMs = this.attemptsLock.getRemainingBlockTimeMs();
+      if (remainingMs <= 0) {
+        this.stopLockCountdown();
+        return;
+      }
+      const minutes = Math.floor(remainingMs / 6e4);
+      const seconds = Math.floor(remainingMs % 6e4 / 1e3);
+      const timeStr = minutes > 0 ? `${minutes} min ${seconds} s` : `${seconds} segundos`;
+      message.textContent = `Demasiados intentos. Intenta de nuevo en ${timeStr}.`;
+    };
+    updateCountdown();
+    overlay.appendChild(message);
+    form.appendChild(overlay);
+    this.lockCountdownInterval = setInterval(updateCountdown, 1e3);
+  }
+  stopLockCountdown() {
+    if (this.lockCountdownInterval) {
+      clearInterval(this.lockCountdownInterval);
+      this.lockCountdownInterval = null;
+    }
+  }
   /**
    * Actualiza el overlay de loading sobre el formulario
    */
@@ -5328,6 +5684,9 @@ var EasyForm = class extends BrowserHTMLElement {
    */
   async handleSubmit(event) {
     event.preventDefault();
+    if (this.attemptsLock?.isLocked()) {
+      return;
+    }
     const errors = await this.stateManager.validateForm();
     const state = this.stateManager.getState();
     if (Object.keys(errors).length > 0) {
@@ -5393,6 +5752,37 @@ var EasyForm = class extends BrowserHTMLElement {
     this.stateManager.reset();
     this.render();
   }
+  /**
+   * Incrementa el contador de intentos (para bloqueo por intentos fallidos).
+   * El consumidor debe llamar esto cuando la API/login falle.
+   */
+  incrementAttempts() {
+    this.attemptsLock?.incrementAttempts();
+    if (this.attemptsLock?.isLocked()) {
+      this.updateLockOverlay();
+    }
+  }
+  /**
+   * Resetea el contador de intentos y desbloquea el formulario.
+   */
+  resetAttempts() {
+    this.attemptsLock?.reset();
+    this.stopLockCountdown();
+    this.updateLockOverlay();
+    this.render();
+  }
+  /**
+   * Retorna true si el formulario está bloqueado por intentos.
+   */
+  isLocked() {
+    return this.attemptsLock?.isLocked() ?? false;
+  }
+  /**
+   * Retorna los milisegundos restantes del bloqueo, o 0 si no está bloqueado.
+   */
+  getRemainingBlockTimeMs() {
+    return this.attemptsLock?.getRemainingBlockTimeMs() ?? 0;
+  }
   /**
    * Limpia todos los valores del formulario
    */