easy-forms-core 1.1.3 → 1.1.6

package/dist/index.js

@@ -265,6 +265,13 @@ function getBaseStyles(colors) {
     .easy-form-submit:active {
       transform: scale(0.98);
     }
+    .easy-form-submit-wrapper {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    .easy-form-submit-wrapper .easy-form-submit {
+      min-width: 100px;
+    }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       width: 100%;
       padding: 0.5rem;
@@ -710,6 +717,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 +1664,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) {
@@ -1728,6 +1942,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 };
     }
@@ -1838,6 +2054,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
    */
@@ -1876,6 +2105,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";
     }
@@ -2354,6 +2585,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) {
@@ -4534,12 +4770,27 @@ 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",
+      "submit-button"
+    ];
   }
   /**
    * Obtiene el schema
@@ -4613,10 +4864,91 @@ 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");
+    }
+  }
+  /**
+   * Configuración del botón de submit (desde atributo o schema)
+   */
+  get submitButton() {
+    const attr = this.getAttribute("submit-button");
+    if (attr) {
+      try {
+        return parseAttributeValue(attr);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+  set submitButton(value) {
+    if (value && typeof value === "object") {
+      this.setAttribute("submit-button", attributeValue(value));
+    } else {
+      this.removeAttribute("submit-button");
+    }
+  }
+  /**
+   * Obtiene la configuración efectiva del botón submit (atributo > schema > defaults)
+   */
+  getSubmitButtonConfig(schema) {
+    const fromAttr = this.submitButton;
+    const fromSchema = schema?.submitButton;
+    const merged = { ...fromSchema, ...fromAttr };
+    return {
+      visible: merged.visible ?? true,
+      text: merged.text ?? "Enviar",
+      width: merged.width ?? "auto",
+      align: merged.align ?? "left"
+    };
+  }
   /**
    * Se llama cuando el componente se conecta al DOM
    */
   connectedCallback() {
+    this.setupAttemptsLock();
     this.setupStyles();
     this.render();
   }
@@ -4663,6 +4995,36 @@ 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();
+    }
+    if (name === "submit-button" && newValue !== oldValue) {
+      this.render();
+    }
+  }
+  /**
+   * 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
@@ -4753,17 +5115,25 @@ var EasyForm = class extends BrowserHTMLElement {
         newFormElement.classList.add("easy-form-disabled");
       }
       if (finalWizardState) {
-        this.renderWizard(newFormElement);
+        this.renderWizard(newFormElement, schema);
       } else {
         this.renderFields(newFormElement, schema.fields || []);
-        const submitButton = document.createElement("button");
-        submitButton.type = "submit";
-        submitButton.textContent = "Enviar";
-        submitButton.className = "easy-form-submit";
-        if (this.disabled || this.loading) {
-          submitButton.disabled = true;
+        const submitConfig = this.getSubmitButtonConfig(schema);
+        if (submitConfig.visible) {
+          const submitWrapper = document.createElement("div");
+          submitWrapper.className = "easy-form-submit-wrapper";
+          submitWrapper.style.textAlign = submitConfig.align;
+          const submitButton = document.createElement("button");
+          submitButton.type = "submit";
+          submitButton.textContent = submitConfig.text;
+          submitButton.className = "easy-form-submit";
+          submitButton.style.width = submitConfig.width;
+          if (this.disabled || this.loading) {
+            submitButton.disabled = true;
+          }
+          submitWrapper.appendChild(submitButton);
+          newFormElement.appendChild(submitWrapper);
         }
-        newFormElement.appendChild(submitButton);
       }
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
@@ -4777,10 +5147,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
    */
@@ -5085,14 +5495,13 @@ var EasyForm = class extends BrowserHTMLElement {
   /**
    * Renderiza wizard
    */
-  renderWizard(container) {
+  renderWizard(container, schema) {
     const wizardState = this.stateManager.getWizardState();
     if (!wizardState) return;
     const wizardContainer = document.createElement("div");
     wizardContainer.className = "easy-form-wizard";
     const stepsIndicator = document.createElement("div");
     stepsIndicator.className = "easy-form-wizard-steps";
-    const schema = this.schema;
     if (schema?.steps) {
       for (let i = 0; i < schema.steps.length; i++) {
         const stepEl = document.createElement("div");
@@ -5177,11 +5586,13 @@ var EasyForm = class extends BrowserHTMLElement {
       }
       navContainer.appendChild(nextButton);
     }
-    if (wizardState.currentStep === wizardState.totalSteps - 1) {
+    const submitConfig = this.getSubmitButtonConfig(schema);
+    if (wizardState.currentStep === wizardState.totalSteps - 1 && submitConfig.visible) {
       const submitButton = document.createElement("button");
       submitButton.type = "button";
-      submitButton.textContent = "Enviar";
+      submitButton.textContent = submitConfig.text;
       submitButton.className = "easy-form-wizard-next";
+      submitButton.style.width = submitConfig.width;
       if (this.disabled || this.loading) {
         submitButton.disabled = true;
       } else {
@@ -5337,6 +5748,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) {
@@ -5402,6 +5816,48 @@ 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;
+  }
+  /**
+   * Dispara el submit del formulario programáticamente.
+   * Útil cuando el botón submit está oculto (visible: false).
+   */
+  requestSubmit() {
+    const form = this.shadow.querySelector("form");
+    if (form && typeof form.requestSubmit === "function") {
+      ;
+      form.requestSubmit();
+    }
+  }
   /**
    * Limpia todos los valores del formulario
    */
@@ -5609,14 +6065,17 @@ if (typeof window !== "undefined" && typeof customElements !== "undefined" && !c
   customElements.define("easy-form", EasyForm);
 }
 export {
+  AttemptsLock,
   ConditionEngine,
   EasyForm,
+  INJECTION_VALIDATION_MESSAGE,
   MaskEngine,
   PREDEFINED_MASKS,
   SchemaParser,
   StateManager,
   ValidationEngine,
   attributeValue,
+  containsInjection,
   createInput,
   extendTemplate,
   generateId,
@@ -5627,6 +6086,7 @@ export {
   getPredefinedMask,
   getTemplate,
   getThemeStyles,
+  isSafeFromInjection,
   isValidEmail,
   parseAttributeValue,
   registerComponent,