@authhero/widget 0.37.0 → 0.38.0

package/dist/esm/authhero-widget.entry.js

@@ -523,6 +523,27 @@ const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-f
  * buttons. Used by long pick-one screens such as tenant selection.
  */
 const CHOICE_LIST_SEARCH_THRESHOLD = 5;
+/**
+ * Component types the widget renders as something the user can actually fill
+ * in. Only these gate the primary action button: types that render nothing
+ * (CARDS, FILE, RECAPTCHA, …) can carry `required` in the schema too, and
+ * gating on them would leave Continue disabled with no way to satisfy it.
+ */
+const FILLABLE_FIELD_TYPES = new Set([
+    "TEXT",
+    "EMAIL",
+    "CODE",
+    "PASSWORD",
+    "NUMBER",
+    "TEL",
+    "URL",
+    "DATE",
+    "BOOLEAN",
+    "LEGAL",
+    "COUNTRY",
+    "DROPDOWN",
+    "CHOICE",
+]);
 const AuthheroWidget = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -615,6 +636,13 @@ const AuthheroWidget = class {
      * @default false (same as autoSubmit when not specified)
      */
     autoNavigate;
+    /**
+     * BCP-47 locale for locale-dependent field layout, e.g. whether a DATE
+     * field reads DD/MM/YYYY, MM/DD/YYYY or YYYY-MM-DD. Resolve it server-side
+     * and pass it in so the server-rendered markup and the hydrated one agree;
+     * screen text itself is already localized by the server.
+     */
+    locale;
     /**
      * Internal parsed screen state.
      */
@@ -715,14 +743,19 @@ const AuthheroWidget = class {
     initFormDataFromDefaults(screen) {
         const defaults = {};
         for (const comp of screen.components || []) {
-            if ("config" in comp &&
-                comp.config &&
-                "default_value" in comp.config &&
-                comp.config.default_value) {
-                const val = comp.config.default_value;
-                if (typeof val === "string" && val !== "") {
-                    defaults[comp.id] = val;
-                }
+            if (!("config" in comp) || !comp.config)
+                continue;
+            if (!("default_value" in comp.config))
+                continue;
+            const val = comp.config.default_value;
+            if (typeof val === "string" && val !== "") {
+                defaults[comp.id] = val;
+            }
+            else if (typeof val === "boolean") {
+                // A BOOLEAN's default decides whether the checkbox renders ticked, so
+                // seed the matching value — otherwise a field the user never touches
+                // submits nothing and the screen's state is lost.
+                defaults[comp.id] = val ? "true" : "false";
             }
         }
         if (Object.keys(defaults).length > 0) {
@@ -1723,6 +1756,11 @@ const AuthheroWidget = class {
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
         if (detail.type === "submit") {
+            // Enter in a text field submits too, so the required-field gate has to
+            // live here and not only on the button's disabled state.
+            if (this._screen && this.hasUnfilledRequiredFields(this._screen)) {
+                return;
+            }
             // For GET screens (or missing method), navigate directly — no form submission needed
             if ((!this._screen?.method ||
                 this._screen.method.toUpperCase() === "GET") &&
@@ -1911,6 +1949,32 @@ const AuthheroWidget = class {
     isDividerComponent(component) {
         return component.type === "DIVIDER";
     }
+    /**
+     * Whether a required component holds a value the user has supplied.
+     */
+    isRequiredFieldFilled(component) {
+        const value = this.formData[component.id];
+        // Checkboxes are only "filled" when ticked. A BOOLEAN's default_value is
+        // seeded into formData, so it needs no separate handling here.
+        if (component.type === "BOOLEAN" || component.type === "LEGAL") {
+            return value === "true";
+        }
+        return typeof value === "string" && value.trim() !== "";
+    }
+    /**
+     * Whether the screen still has required fields the user has not filled in.
+     * Used to hold the primary action button disabled: the widget submits via
+     * its own handler rather than a native form submit, so the browser's
+     * constraint validation never runs and an empty required field would
+     * otherwise only surface as a server error after a round trip.
+     */
+    hasUnfilledRequiredFields(screen) {
+        return (screen.components ?? []).some((component) => component.visible !== false &&
+            "required" in component &&
+            component.required === true &&
+            FILLABLE_FIELD_TYPES.has(component.type) &&
+            !this.isRequiredFieldFilled(component));
+    }
     /**
      * Visible label of a choice button, used to filter searchable choice lists.
      */
@@ -1946,6 +2010,9 @@ const AuthheroWidget = class {
         const choiceButtons = fieldComponents.filter((c) => c.type === "NEXT_BUTTON");
         const isSearchableChoiceList = choiceButtons.length === fieldComponents.length &&
             choiceButtons.length > CHOICE_LIST_SEARCH_THRESHOLD;
+        // Hold the primary action button disabled until every required field has
+        // a value.
+        const requiredFieldsMissing = this.hasUnfilledRequiredFields(screen);
         const filterQuery = this.listFilter.trim().toLowerCase();
         const visibleChoiceButtons = isSearchableChoiceList && filterQuery
             ? choiceButtons.filter((c) => this.getChoiceButtonText(c).toLowerCase().includes(filterQuery))
@@ -1980,7 +2047,7 @@ const AuthheroWidget = class {
         };
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
+        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
             fieldComponents.length > 0 &&
             hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, isSearchableChoiceList && (h("input", { type: "text", class: "choice-list-search", part: "choice-list-search", placeholder: "Search", "aria-label": "Search", autocomplete: "off", value: this.listFilter, onInput: (e) => (this.listFilter = e.target.value), onKeyDown: (e) => {
                 // The search box lives inside the form; Enter would
@@ -1993,7 +2060,9 @@ const AuthheroWidget = class {
                 ? "fields-list fields-list-scroll"
                 : "fields-list" }, (isSearchableChoiceList
             ? visibleChoiceButtons
-            : fieldComponents).map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading }))), isSearchableChoiceList &&
+            : fieldComponents).map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading ||
+                (component.type === "NEXT_BUTTON" &&
+                    requiredFieldsMissing) }))), isSearchableChoiceList &&
             visibleChoiceButtons.length === 0 && (h("div", { class: "choice-list-empty", part: "choice-list-empty" }, "No matches")))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                 id: link.id,
                 href: link.href,

package/dist/esm/authhero-widget.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32],"selectedCountry":[32],"localPhoneNumber":[32],"countryDropdownOpen":[32],"telEmailMode":[32]},null,{"component":[{"componentChanged":0}],"value":[{"valueChanged":0}]}]]],["authhero-widget",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32],"listFilter":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
+  return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"locale":[1],"passwordVisible":[32],"selectedCountry":[32],"localPhoneNumber":[32],"countryDropdownOpen":[32],"telEmailMode":[32],"dateSegments":[32]},null,{"component":[{"componentChanged":0}],"value":[{"valueChanged":0}]}]]],["authhero-widget",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"locale":[1],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32],"listFilter":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
 });