@descope/web-components-ui 3.9.1 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -52,10 +52,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.9.1",
-    "test-drivers": "3.9.1",
-    "webpack-extract-font-loader": "3.9.1",
-    "webpack-replace-plugin": "3.9.1"
+    "rollup-replace-plugin": "3.10.0",
+    "test-drivers": "3.10.0",
+    "webpack-extract-font-loader": "3.10.0",
+    "webpack-replace-plugin": "3.10.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -79,36 +79,36 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.9.1",
-    "@descope-ui/descope-address-field": "3.9.1",
-    "@descope-ui/descope-country-subdivision-city-field": "3.9.1",
-    "@descope-ui/descope-apps-list": "3.9.1",
-    "@descope-ui/descope-autocomplete-field": "3.9.1",
-    "@descope-ui/descope-avatar": "3.9.1",
-    "@descope-ui/descope-badge": "3.9.1",
-    "@descope-ui/descope-button": "3.9.1",
-    "@descope-ui/descope-collapsible-container": "3.9.1",
-    "@descope-ui/descope-combo-box": "3.9.1",
-    "@descope-ui/descope-enriched-text": "3.9.1",
-    "@descope-ui/descope-icon": "3.9.1",
-    "@descope-ui/descope-image": "3.9.1",
-    "@descope-ui/descope-link": "3.9.1",
-    "@descope-ui/descope-list": "3.9.1",
-    "@descope-ui/descope-list-item": "3.9.1",
-    "@descope-ui/descope-multi-line-mappings": "3.9.1",
-    "@descope-ui/descope-multi-select-combo-box": "3.9.1",
-    "@descope-ui/descope-outbound-app-button": "3.9.1",
-    "@descope-ui/descope-outbound-apps": "3.9.1",
-    "@descope-ui/descope-password-strength": "3.9.1",
-    "@descope-ui/descope-ponyhot": "3.9.1",
-    "@descope-ui/descope-recovery-codes": "3.9.1",
-    "@descope-ui/descope-text": "3.9.1",
-    "@descope-ui/descope-timer": "3.9.1",
-    "@descope-ui/descope-timer-button": "3.9.1",
-    "@descope-ui/descope-tooltip": "3.9.1",
-    "@descope-ui/descope-trusted-devices": "3.9.1",
-    "@descope-ui/descope-attachment": "3.9.1",
-    "@descope-ui/descope-anchored": "3.9.1"
+    "@descope-ui/descope-country-subdivision-city-field": "3.10.0",
+    "@descope-ui/descope-address-field": "3.10.0",
+    "@descope-ui/common": "3.10.0",
+    "@descope-ui/descope-autocomplete-field": "3.10.0",
+    "@descope-ui/descope-apps-list": "3.10.0",
+    "@descope-ui/descope-avatar": "3.10.0",
+    "@descope-ui/descope-badge": "3.10.0",
+    "@descope-ui/descope-button": "3.10.0",
+    "@descope-ui/descope-collapsible-container": "3.10.0",
+    "@descope-ui/descope-combo-box": "3.10.0",
+    "@descope-ui/descope-enriched-text": "3.10.0",
+    "@descope-ui/descope-icon": "3.10.0",
+    "@descope-ui/descope-image": "3.10.0",
+    "@descope-ui/descope-link": "3.10.0",
+    "@descope-ui/descope-list": "3.10.0",
+    "@descope-ui/descope-multi-line-mappings": "3.10.0",
+    "@descope-ui/descope-list-item": "3.10.0",
+    "@descope-ui/descope-outbound-app-button": "3.10.0",
+    "@descope-ui/descope-outbound-apps": "3.10.0",
+    "@descope-ui/descope-multi-select-combo-box": "3.10.0",
+    "@descope-ui/descope-password-strength": "3.10.0",
+    "@descope-ui/descope-ponyhot": "3.10.0",
+    "@descope-ui/descope-recovery-codes": "3.10.0",
+    "@descope-ui/descope-text": "3.10.0",
+    "@descope-ui/descope-timer": "3.10.0",
+    "@descope-ui/descope-tooltip": "3.10.0",
+    "@descope-ui/descope-timer-button": "3.10.0",
+    "@descope-ui/descope-trusted-devices": "3.10.0",
+    "@descope-ui/descope-attachment": "3.10.0",
+    "@descope-ui/descope-anchored": "3.10.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-new-password/NewPasswordClass.js

@@ -58,6 +58,8 @@ const customMixin = (superclass) =>
           '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',
         ],

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -18,6 +18,8 @@ const policyPanelAttrs = [
   'active-policies',
   'data-password-policy-value-minlength',
   'data-password-policy-value-passwordstrength',
+  'data-password-policy-value-disallowedchars',
+  'data-password-policy-value-email',
   'manual-visibility-toggle',
 ];
 const commonAttrs = [

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -11,6 +11,8 @@ const overrideAttrs = [
   '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];
@@ -129,6 +131,46 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
             };
           }
         }
+
+        // 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);
@@ -193,6 +235,7 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
       }
 
       const { pattern, message, data, compare } = policy;
+      const normalizedCompare = typeof compare === 'string' ? compare.toUpperCase() : compare;
 
       if ((!pattern && !compare) || !message) {
         return results;
@@ -206,9 +249,23 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
       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
         );
@@ -224,13 +281,18 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
     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) {
@@ -238,7 +300,9 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
       return;
     }
 
-    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+    this.list.replaceChildren(
+      ...this.validate().map(this.buildValidationItem.bind(this)),
+    );
   }
 
   updateLabel(val) {

package/stories/descope-new-password.stories.js

@@ -18,6 +18,16 @@ import {
   defaultValueMissingControl,
 } from './commonControls';
 
+// HTML-attribute-escape user-supplied values (and JSON blobs) so quotes in
+// e.g. the disallowedchars pattern don't break out of attribute quoting.
+const escapeAttr = (v) =>
+  String(v ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
 const policyData = [
   {
     id: 'minlength',
@@ -60,6 +70,18 @@ const policyData = [
     message: '1 symbol',
     pattern: '[^a-zA-Z0-9]',
   },
+  {
+    id: 'disallowedchars',
+    message: 'Does not contain: {{value}}',
+    pattern: `^[^'"]*$`,
+    data: { value: `'"` },
+  },
+  {
+    id: 'disallowemail',
+    message: 'Does not match your email',
+    compare: 'STR_NEQ_CI',
+    data: { expected: 'user@example.com' },
+  },
 ];
 
 const Template = ({
@@ -113,7 +135,7 @@ const Template = ({
       data-password-policy-value-minlength="${minLengthDataAttr}"
       data-password-policy-value-passwordstrength="${passwordStrengthDataAttr}"
       st-host-direction="${direction ?? ''}"
-      available-policies='${JSON.stringify(availablePolicies) || ''}'
+      available-policies="${escapeAttr(JSON.stringify(availablePolicies) || '')}"
       active-policies="${activePolicies || ''}"
       policy-label="${policyLabel || ''}"
       st-policy-preview-background-color="${stPolicyPreviewBgColor || ''}"
@@ -202,6 +224,8 @@ Default.args = {
     'number',
     'nonalphanumeric',
     'passwordstrength',
+    'disallowedchars',
+    'disallowemail',
   ],
   'data-password-policy-value-minlength': '8',
   'data-password-policy-value-passwordstrength': '2',

package/stories/descope-policy-validation.stories.js

@@ -35,8 +35,30 @@ const availablePolicies = [
     message: '1 symbol',
     pattern: '[^a-zA-Z0-9]',
   },
+  {
+    id: 'disallowedchars',
+    message: 'Does not contain: {{value}}',
+    pattern: `^[^'"]*$`,
+    data: { value: `'"` },
+  },
+  {
+    id: 'disallowemail',
+    message: 'Does not match your email',
+    compare: 'STR_NEQ_CI',
+    data: { expected: 'user@example.com' },
+  },
 ];
 
+// HTML-attribute-escape any user-supplied string so the template still parses
+// when the value itself contains quotes (eg. the default disallowed-chars `'"`).
+const escapeAttr = (v) =>
+  String(v ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
 const Template = ({
   value,
   label,
@@ -48,7 +70,11 @@ const Template = ({
   useAnyLetter,
   useSymbol,
   useMinLength,
+  useDisallowedChars,
+  useDisallowEmail,
   minLengthValue,
+  disallowedCharsValue,
+  emailValue,
 }) => {
   const policies = [
     useMinLength ? 'minlength' : null,
@@ -57,16 +83,20 @@ const Template = ({
     useAnyLetter ? 'anyletter' : null,
     useNumber ? 'number' : null,
     useSymbol ? 'nonalphanumeric' : null,
+    useDisallowedChars ? 'disallowedchars' : null,
+    useDisallowEmail ? 'disallowemail' : null,
   ].filter(Boolean);
 
   return `
   <descope-policy-validation
-    label="${label}"
-    value="${value}"
-    data='${JSON.stringify(data) || ''}'
+    label="${escapeAttr(label)}"
+    value="${escapeAttr(value)}"
+    data="${escapeAttr(JSON.stringify(data) || '')}"
     active-policies="${policies || ''}"
-    data-password-policy-value-minlength="${minLengthValue || ''}"
-    st-host-direction="${direction ?? ''}"
+    data-password-policy-value-minlength="${escapeAttr(minLengthValue)}"
+    data-password-policy-value-disallowedchars="${escapeAttr(disallowedCharsValue)}"
+    data-password-policy-value-email="${escapeAttr(emailValue)}"
+    st-host-direction="${escapeAttr(direction)}"
   ></descope-policy-validation>
 `;
 };
@@ -96,5 +126,9 @@ Default.args = {
   useAnyLetter: false,
   useSymbol: false,
   useMinLength: false,
+  useDisallowedChars: false,
+  useDisallowEmail: false,
   minLengthValue: undefined,
+  disallowedCharsValue: `'"`,
+  emailValue: 'user@example.com',
 };