@descope/flow-components 3.9.2 → 3.10.1

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.9.2",
+      "buildVersion": "3.10.1",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.9.2",
+      "buildVersion": "3.10.1",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -97739,6 +97739,8 @@ descope-enriched-text {
 	  'data-password-policy-value-minlength',
 	  'data-password-policy-value-passwordstrength',
 	  'data-password-policy-actual-passwordstrength',
+	  'data-password-policy-value-disallowedchars',
+	  'data-password-policy-value-email',
 	];
 	const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 	const policyAttrs = ['label', 'value', ...dataAttrs];
@@ -97857,6 +97859,46 @@ descope-enriched-text {
 	            };
 	          }
 	        }
+
+	        // disallowedchars: this stores the configured char list in
+	        // overrides.disallowedchars.value so the message can interpolate
+	        // `{{value}}`. The regex pattern itself is built upstream (orchestrator
+	        // or caller) and shipped on the policy entry — it is not derived from
+	        // this override. When the attribute is cleared, drop the override so
+	        // the panel doesn't keep stale data.
+	        if (attrName === 'data-password-policy-value-disallowedchars') {
+	          if (newValue) {
+	            this.#overrides = {
+	              ...this.#overrides,
+	              disallowedchars: {
+	                ...this.#overrides?.disallowedchars,
+	                value: newValue,
+	              },
+	            };
+	          } else if (this.#overrides?.disallowedchars) {
+	            const { disallowedchars: _drop, ...rest } = this.#overrides;
+	            this.#overrides = rest;
+	          }
+	        }
+
+	        // disallowemail: stash the user's email so the STR_NEQ_CI comparator
+	        // has an `expected` to compare against the live password value. Clear
+	        // the override when the attribute is removed/empty so we don't keep
+	        // blocking against a previous user's email.
+	        if (attrName === 'data-password-policy-value-email') {
+	          if (newValue) {
+	            this.#overrides = {
+	              ...this.#overrides,
+	              disallowemail: {
+	                ...this.#overrides?.disallowemail,
+	                expected: newValue,
+	              },
+	            };
+	          } else if (this.#overrides?.disallowemail) {
+	            const { disallowemail: _drop, ...rest } = this.#overrides;
+	            this.#overrides = rest;
+	          }
+	        }
 	      }
 
 	      this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
@@ -97921,6 +97963,7 @@ descope-enriched-text {
 	      }
 
 	      const { pattern, message, data, compare } = policy;
+	      const normalizedCompare = typeof compare === 'string' ? compare.toUpperCase() : compare;
 
 	      if ((!pattern && !compare) || !message) {
 	        return results;
@@ -97934,9 +97977,23 @@ descope-enriched-text {
 	      if (pattern) {
 	        const exp = new RegExp(interpolateString(pattern, data));
 	        validationResult.valid = exp.test(this.value);
+	      } else if (normalizedCompare === 'STR_NEQ_CI') {
+	        // Compare the live password against the configured string AND its
+	        // local-part (before '@'), case-insensitively. Used by the
+	        // disallowemail policy.
+	        const expected = (data?.expected ?? '').toLowerCase();
+	        const actual = (this.value ?? '').toLowerCase();
+	        if (!expected || !actual) {
+	          // nothing to compare → mark valid so we don't block the flow
+	          validationResult.valid = true;
+	        } else {
+	          const at = expected.indexOf('@');
+	          const localPart = at > 0 ? expected.slice(0, at) : expected;
+	          validationResult.valid = actual !== expected && actual !== localPart;
+	        }
 	      } else if (compare) {
 	        validationResult.valid = this.compareValues(
-	          compare,
+	          normalizedCompare,
 	          data?.expected ?? -1,
 	          data?.actual ?? -1
 	        );
@@ -97952,13 +98009,18 @@ descope-enriched-text {
 	    return !this.validate().some(({ valid }) => valid === false);
 	  }
 
-	  getValidationItemTemplate({ valid, message }) {
+	  buildValidationItem({ valid, message }) {
 	    const status = !this.value ? 'none' : valid;
-	    return `
-      <li class="item" data-valid="${status}">
-        <span class="message">${message}</span>
-      </li>
-    `;
+	    const li = document.createElement('li');
+	    li.className = 'item';
+	    li.dataset.valid = status;
+	    const span = document.createElement('span');
+	    span.className = 'message';
+	    // `textContent` handles any tenant-configured string in `message` safely
+	    // (e.g. the disallowedchars list) without needing to escape HTML.
+	    span.textContent = message ?? '';
+	    li.appendChild(span);
+	    return li;
 	  }
 
 	  renderItems(availablePolicies, activePolicies) {
@@ -97966,7 +98028,9 @@ descope-enriched-text {
 	      return;
 	    }
 
-	    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+	    this.list.replaceChildren(
+	      ...this.validate().map(this.buildValidationItem.bind(this)),
+	    );
 	  }
 
 	  updateLabel(val) {
@@ -98067,6 +98131,8 @@ descope-enriched-text {
 	          'available-policies',
 	          'data-password-policy-value-minlength',
 	          'data-password-policy-value-passwordstrength',
+	          'data-password-policy-value-disallowedchars',
+	          'data-password-policy-value-email',
 	          'label-type',
 	          'manual-visibility-toggle',
 	        ],
@@ -106481,8 +106547,6 @@ descope-enriched-text {
     `;
 
 	    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
-
-	    this.#syncComponentState();
 	  }
 
 	  init() {
@@ -106540,7 +106604,7 @@ descope-enriched-text {
 	  // To support conditional components in flow, we need to sync the 'hidden' className to the root of the component.
 	  // Ideally, this would happen in the SDK, but we resolved to this patch to fix the issue without forcing users to update SDKs.
 	  #syncComponentState() {
-	    const hasHidden = this.#anchor.classList.contains('hidden');
+	    const hasHidden = this.#anchor?.classList?.contains('hidden');
 	    this.classList.toggle('hidden', hasHidden);
 	  }
 
@@ -106605,6 +106669,7 @@ descope-enriched-text {
 	  // empty host rather than reserving its layout box.
 	  #onAnchorChanged() {
 	    this.toggleAttribute('has-anchor', !!this.#anchor);
+	    this.#syncComponentState();
 	  }
 	}
 
@@ -107117,6 +107182,11 @@ const Loader = React__default.default.forwardRef(({ variant, color, ...restProps
 
 const Logo = React__default.default.forwardRef(({ width, height, ...props }, ref) => (React__default.default.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
+// Escape characters that have a special meaning inside a JS regex character
+// class so they appear as literals (used to build the disallowedchars regex
+// from a tenant-configured chars list).
+const escapeRegexClassChars = (s) => s.replace(/[\\\]\-^]/g, '\\$&');
+const buildDisallowedCharsPattern = (chars) => chars ? `^[^${escapeRegexClassChars(chars)}]*$` : '';
 const defaultProps = {
     'has-validation': false,
     'policy-label': 'Passwords must have:',
@@ -107134,6 +107204,7 @@ const defaultProps = {
     'data-password-policy-pattern-nonalphanumeric': '[^a-zA-Z0-9]',
     // non-user-editable comparisons
     'data-password-policy-compare-passwordstrength': 'GTE',
+    'data-password-policy-compare-disallowemail': 'STR_NEQ_CI',
     // props to override with data from policy
     'data-password-policy-value-minlength': '8',
     // translatable props
@@ -107144,30 +107215,50 @@ const defaultProps = {
     'data-password-policy-message-number': '1 number',
     'data-password-policy-message-nonalphanumeric': '1 symbol',
     'data-password-policy-message-passwordstrength': 'Password strength',
+    'data-password-policy-message-disallowedchars': 'Does not contain: {{value}}',
+    'data-password-policy-message-disallowemail': 'Does not match your email',
     'st-policy-preview-background-color': 'transparent',
     'st-policy-preview-padding': '0'
 };
 const NewPassword = React__default.default.forwardRef((props, ref) => {
     const mergedProps = { ...defaultProps, ...props };
+    // Dynamic key lookups (`data-password-policy-${kind}-${id}`) below sit
+    // outside the typed Props surface, so we read them through a narrow
+    // Record alias rather than widening the whole mergedProps to `any`.
+    const mergedPropsByKey = mergedProps;
     /* this logic is cloned in the orchestration service (context.go file)
-    * make sure to update both places when changing it
-    */
-    const availablePolicies = [
+     * make sure to update both places when changing it
+     */
+    const availablePolicies = JSON.stringify([
         'minlength',
         'lowercase',
         'uppercase',
         'anyletter',
         'number',
         'nonalphanumeric',
-        'passwordstrength'
-    ].map((id) => ({
-        id,
-        message: mergedProps[`data-password-policy-message-${id}`],
-        pattern: mergedProps[`data-password-policy-pattern-${id}`],
-        compare: mergedProps[`data-password-policy-compare-${id}`],
-        data: mergedProps[`data-password-policy-data-${id}`]
+        'passwordstrength',
+        'disallowedchars',
+        'disallowemail'
+    ].map((id) => {
+        const entry = {
+            id,
+            message: mergedPropsByKey[`data-password-policy-message-${id}`],
+            pattern: mergedPropsByKey[`data-password-policy-pattern-${id}`],
+            compare: mergedPropsByKey[`data-password-policy-compare-${id}`],
+            data: mergedPropsByKey[`data-password-policy-data-${id}`]
+        };
+        // disallowedchars: the pattern is `^[^<escaped chars>]*$`, built from
+        // the configured chars list. Done here (rather than as a static
+        // pattern with a `{{value}}` placeholder) so chars like `]`, `^`, `-`,
+        // `\` are escaped instead of breaking the character class.
+        if (id === 'disallowedchars') {
+            const chars = mergedPropsByKey['data-password-policy-value-disallowedchars'] || '';
+            entry.pattern = buildDisallowedCharsPattern(chars);
+            entry.data = { value: chars };
+        }
+        return entry;
     }));
-    return (React__default.default.createElement("descope-new-password", { ...mergedProps, ref: ref, "available-policies": JSON.stringify(availablePolicies || []) }));
+    return (React__default.default.createElement("descope-new-password", { ...mergedProps, ref: ref, "available-policies": availablePolicies }));
 });
 
 const PhoneCountrySelection = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-phone-field", { ...props, ref: ref }));

package/dist/index.d.ts

@@ -355,7 +355,11 @@ type Props$H = {
     'data-password-policy-message-number'?: string;
     'data-password-policy-message-nonalphanumeric'?: string;
     'data-password-policy-message-passwordstrength'?: string;
+    'data-password-policy-message-disallowedchars'?: string;
+    'data-password-policy-message-disallowemail'?: string;
     'data-password-policy-value-minlength'?: string;
+    'data-password-policy-value-disallowedchars'?: string;
+    'data-password-policy-value-email'?: string;
     'st-policy-preview-background-color'?: string;
     'st-policy-preview-padding'?: string;
 };

package/dist/index.esm.js

@@ -283,6 +283,11 @@ const Loader = React.forwardRef(({ variant, color, ...restProps }, ref) => {
 
 const Logo = React.forwardRef(({ width, height, ...props }, ref) => (React.createElement("descope-logo", { "st-width": width, "st-height": height, ref: ref, ...props })));
 
+// Escape characters that have a special meaning inside a JS regex character
+// class so they appear as literals (used to build the disallowedchars regex
+// from a tenant-configured chars list).
+const escapeRegexClassChars = (s) => s.replace(/[\\\]\-^]/g, '\\$&');
+const buildDisallowedCharsPattern = (chars) => chars ? `^[^${escapeRegexClassChars(chars)}]*$` : '';
 const defaultProps = {
     'has-validation': false,
     'policy-label': 'Passwords must have:',
@@ -300,6 +305,7 @@ const defaultProps = {
     'data-password-policy-pattern-nonalphanumeric': '[^a-zA-Z0-9]',
     // non-user-editable comparisons
     'data-password-policy-compare-passwordstrength': 'GTE',
+    'data-password-policy-compare-disallowemail': 'STR_NEQ_CI',
     // props to override with data from policy
     'data-password-policy-value-minlength': '8',
     // translatable props
@@ -310,30 +316,50 @@ const defaultProps = {
     'data-password-policy-message-number': '1 number',
     'data-password-policy-message-nonalphanumeric': '1 symbol',
     'data-password-policy-message-passwordstrength': 'Password strength',
+    'data-password-policy-message-disallowedchars': 'Does not contain: {{value}}',
+    'data-password-policy-message-disallowemail': 'Does not match your email',
     'st-policy-preview-background-color': 'transparent',
     'st-policy-preview-padding': '0'
 };
 const NewPassword = React.forwardRef((props, ref) => {
     const mergedProps = { ...defaultProps, ...props };
+    // Dynamic key lookups (`data-password-policy-${kind}-${id}`) below sit
+    // outside the typed Props surface, so we read them through a narrow
+    // Record alias rather than widening the whole mergedProps to `any`.
+    const mergedPropsByKey = mergedProps;
     /* this logic is cloned in the orchestration service (context.go file)
-    * make sure to update both places when changing it
-    */
-    const availablePolicies = [
+     * make sure to update both places when changing it
+     */
+    const availablePolicies = JSON.stringify([
         'minlength',
         'lowercase',
         'uppercase',
         'anyletter',
         'number',
         'nonalphanumeric',
-        'passwordstrength'
-    ].map((id) => ({
-        id,
-        message: mergedProps[`data-password-policy-message-${id}`],
-        pattern: mergedProps[`data-password-policy-pattern-${id}`],
-        compare: mergedProps[`data-password-policy-compare-${id}`],
-        data: mergedProps[`data-password-policy-data-${id}`]
+        'passwordstrength',
+        'disallowedchars',
+        'disallowemail'
+    ].map((id) => {
+        const entry = {
+            id,
+            message: mergedPropsByKey[`data-password-policy-message-${id}`],
+            pattern: mergedPropsByKey[`data-password-policy-pattern-${id}`],
+            compare: mergedPropsByKey[`data-password-policy-compare-${id}`],
+            data: mergedPropsByKey[`data-password-policy-data-${id}`]
+        };
+        // disallowedchars: the pattern is `^[^<escaped chars>]*$`, built from
+        // the configured chars list. Done here (rather than as a static
+        // pattern with a `{{value}}` placeholder) so chars like `]`, `^`, `-`,
+        // `\` are escaped instead of breaking the character class.
+        if (id === 'disallowedchars') {
+            const chars = mergedPropsByKey['data-password-policy-value-disallowedchars'] || '';
+            entry.pattern = buildDisallowedCharsPattern(chars);
+            entry.data = { value: chars };
+        }
+        return entry;
     }));
-    return (React.createElement("descope-new-password", { ...mergedProps, ref: ref, "available-policies": JSON.stringify(availablePolicies || []) }));
+    return (React.createElement("descope-new-password", { ...mergedProps, ref: ref, "available-policies": availablePolicies }));
 });
 
 const PhoneCountrySelection = React.forwardRef((props, ref) => React.createElement("descope-phone-field", { ...props, ref: ref }));

package/dist/types/NewPassword/NewPassword.d.ts

@@ -22,7 +22,11 @@ export type Props = {
     'data-password-policy-message-number'?: string;
     'data-password-policy-message-nonalphanumeric'?: string;
     'data-password-policy-message-passwordstrength'?: string;
+    'data-password-policy-message-disallowedchars'?: string;
+    'data-password-policy-message-disallowemail'?: string;
     'data-password-policy-value-minlength'?: string;
+    'data-password-policy-value-disallowedchars'?: string;
+    'data-password-policy-value-email'?: string;
     'st-policy-preview-background-color'?: string;
     'st-policy-preview-padding'?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.9.2",
+  "version": "3.10.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -97,7 +97,7 @@
     "webpack-subresource-integrity": "5.2.0-rc.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "3.9.2"
+    "@descope/web-components-ui": "3.10.1"
   },
   "peerDependencies": {
     "react": ">= 18"