web-mojo 2.1.266 → 2.1.278

package/dist/chunks/{FormView-J-1RnLu0.js → FormView-BCnSXvaY.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Ri8Knc5O.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-_cIASgB0.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -58,6 +58,48 @@ class FormBuilder {
           {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
         </div>
       `,
+      password: `
+        <div class="mojo-form-control">
+          {{#label}}
+          <label for="{{fieldId}}" class="{{labelClass}}">
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+          </label>
+          {{/label}}
+          <div class="input-group">
+            <input type="password" id="{{fieldId}}" name="{{name}}"
+                   class="{{inputClass}}{{#error}} is-invalid{{/error}}"
+                   value="{{fieldValue}}" {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
+                   {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
+                   {{#readonly}}readonly{{/readonly}} data-change-action="validate-field"
+                   data-field-type="password" {{{attrs}}}>
+            {{#showToggle}}
+            <button type="button" class="btn btn-outline-secondary"
+                    data-action="toggle-password"
+                    data-target="{{fieldId}}"
+                    aria-label="Show password" aria-pressed="false">
+              <i class="bi bi-eye"></i>
+            </button>
+            {{/showToggle}}
+          </div>
+          {{#strengthMeter}}
+          <div class="mt-2">
+            <div class="progress" style="height: 4px;">
+              <div class="progress-bar bg-secondary" role="progressbar"
+                   style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                   id="{{fieldId}}_strength_bar"></div>
+            </div>
+            <small class="{{helpClass}}" id="{{fieldId}}_strength_text">Strength</small>
+          </div>
+          {{/strengthMeter}}
+          {{#capsLockWarning}}
+          <div class="{{helpClass}} text-warning d-none" id="{{fieldId}}_caps_warning">
+            Caps Lock is on
+          </div>
+          {{/capsLockWarning}}
+          {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
+          {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
+        </div>
+      `,
       textarea: `
         <div class="mojo-form-control">
           {{#label}}
@@ -589,7 +631,21 @@ class FormBuilder {
    * @returns {string} Field HTML
    */
   renderPasswordField(field) {
-    return this.renderInputField(field, "password");
+    const passwordUsage = field.passwordUsage || "current";
+    const inferredAutocomplete = passwordUsage === "new" || passwordUsage === "new-password" ? "new-password" : "current-password";
+    const attributes = {
+      ...field.attributes || {},
+      autocomplete: field.attributes && field.attributes.autocomplete || inferredAutocomplete
+    };
+    return this.renderInputField(
+      {
+        ...field,
+        showToggle: field.showToggle !== false,
+        // default to showing the toggle unless explicitly disabled
+        attributes
+      },
+      "password"
+    );
   }
   /**
    * Render number input field
@@ -751,6 +807,24 @@ class FormBuilder {
       readonly,
       attrs
     };
+    if (type === "password" && (field.showToggle || field.strengthMeter || field.capsLockWarning)) {
+      const enhancedContext = {
+        ...context,
+        showToggle: !!field.showToggle,
+        strengthMeter: !!field.strengthMeter,
+        capsLockWarning: !!field.capsLockWarning
+      };
+      return Mustache.render(this.templates.password, enhancedContext);
+    }
+    if (type === "password") {
+      const enhancedContext = {
+        ...context,
+        showToggle: field.showToggle !== false,
+        strengthMeter: !!field.strengthMeter,
+        capsLockWarning: !!field.capsLockWarning
+      };
+      return Mustache.render(this.templates.password, enhancedContext);
+    }
     return Mustache.render(this.templates.input, context);
   }
   /**
@@ -4090,6 +4164,7 @@ class FormView extends View {
     await super.onAfterRender();
     this.initializeImageFields();
     this.initializeCustomComponents();
+    this.initializePasswordFields();
   }
   /**
    * Initialize image fields with FileDropMixin
@@ -5210,6 +5285,120 @@ class FormView extends View {
     });
     await super.onBeforeDestroy();
   }
+  /**
+   * Initialize password fields: strength meter, caps lock warning, and hold-to-reveal
+   */
+  initializePasswordFields() {
+    if (!this.element) return;
+    const inputs = this.element.querySelectorAll('input[data-field-type="password"], input[type="password"]');
+    inputs.forEach((input) => {
+      this.updatePasswordStrengthUI(input);
+      const onInput = (e) => {
+        this.updatePasswordStrengthUI(e.target);
+      };
+      input.addEventListener("input", onInput);
+      const capsHandler = (e) => {
+        if (typeof e.getModifierState === "function") {
+          const caps = e.getModifierState("CapsLock");
+          this.updateCapsLockWarning(input, !!caps);
+        }
+      };
+      input.addEventListener("keydown", capsHandler);
+      input.addEventListener("keyup", capsHandler);
+      this.updateCapsLockWarning(input, false);
+    });
+  }
+  /**
+   * Toggle password visibility on click (persistent toggle)
+   * Ignored if currently in press-and-hold mode.
+   */
+  async onActionTogglePassword(event, element) {
+    event.preventDefault();
+    const targetId = element.getAttribute("data-target");
+    let input = null;
+    if (targetId) {
+      input = this.element.querySelector("#" + targetId);
+    }
+    if (!input) {
+      const group = element.closest(".input-group");
+      if (group) {
+        input = group.querySelector('input[type="password"], input[data-field-type="password"], input[type="text"]');
+      }
+    }
+    if (!input) return;
+    const isHidden = input.type === "password";
+    input.type = isHidden ? "text" : "password";
+    element.setAttribute("aria-pressed", isHidden ? "true" : "false");
+    element.setAttribute("aria-label", isHidden ? "Hide password" : "Show password");
+    const icon = element.querySelector("i");
+    if (icon) {
+      icon.classList.toggle("bi-eye", !isHidden);
+      icon.classList.toggle("bi-eye-slash", isHidden);
+    }
+    input.focus();
+    try {
+      const len = input.value?.length ?? 0;
+      input.setSelectionRange(len, len);
+    } catch (_e) {
+    }
+  }
+  /**
+   * Compute a simple password strength score and associated UI metadata
+   */
+  computePasswordStrength(password = "") {
+    const len = password.length;
+    let score = 0;
+    if (len >= 6) score++;
+    if (len >= 8) score++;
+    if (len >= 12) score++;
+    const hasLower = /[a-z]/.test(password);
+    const hasUpper = /[A-Z]/.test(password);
+    const hasDigit = /\d/.test(password);
+    const hasSymbol = /[^A-Za-z0-9]/.test(password);
+    const variety = [hasLower, hasUpper, hasDigit, hasSymbol].filter(Boolean).length;
+    if (variety >= 2) score++;
+    if (variety >= 3) score++;
+    score = Math.max(0, Math.min(4, score));
+    const map = [
+      { percent: 0, label: "Too short", barClass: "bg-secondary" },
+      { percent: 25, label: "Weak", barClass: "bg-danger" },
+      { percent: 50, label: "Fair", barClass: "bg-warning" },
+      { percent: 75, label: "Good", barClass: "bg-info" },
+      { percent: 100, label: "Strong", barClass: "bg-success" }
+    ];
+    return map[score];
+  }
+  /**
+   * Update strength meter UI if present for a given password input
+   */
+  updatePasswordStrengthUI(input) {
+    if (!input || !input.id) return;
+    const bar = this.element.querySelector(`#${input.id}_strength_bar`);
+    const text = this.element.querySelector(`#${input.id}_strength_text`);
+    if (!bar && !text) return;
+    const { percent, label, barClass } = this.computePasswordStrength(input.value || "");
+    if (bar) {
+      bar.className = `progress-bar ${barClass}`;
+      bar.style.width = `${percent}%`;
+      bar.setAttribute("aria-valuenow", String(percent));
+    }
+    if (text) {
+      text.textContent = label;
+    }
+  }
+  /**
+   * Show/Hide a caps lock warning element if present for the given input
+   */
+  updateCapsLockWarning(input, capsOn) {
+    if (!input || !input.id) return;
+    const warn = this.element.querySelector(`#${input.id}_caps_warning`);
+    if (!warn) return;
+    if (capsOn) {
+      warn.classList.remove("d-none");
+    } else {
+      warn.classList.add("d-none");
+    }
+  }
 }
 const FormView$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -5221,4 +5410,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-J-1RnLu0.js.map
+//# sourceMappingURL=FormView-BCnSXvaY.js.map