@descope/web-components-ui 3.25.0 → 3.26.1

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

@@ -13,6 +13,7 @@ const overrideAttrs = [
   'data-password-policy-actual-passwordstrength',
   'data-password-policy-value-disallowedchars',
   'data-password-policy-value-email',
+  'data-password-policy-value-reuse',
 ];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
@@ -109,6 +110,13 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
           }
         }
 
+        if (attrName === 'data-password-policy-value-reuse') {
+          const ln = Number(newValue);
+          if (!Number.isNaN(ln) && ln > 0) {
+            this.#overrides = { ...this.#overrides, reuse: { value: `${ln}` } };
+          }
+        }
+
         if (attrName === 'data-password-policy-value-passwordstrength') {
           const passwordStrength = parseInt(newValue);
           if (!Number.isNaN(passwordStrength) && passwordStrength >= 0) {
@@ -227,17 +235,17 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
       });
     }
 
-    return this.#activePolicies.reduce((results, id) => {
+    const items = this.#activePolicies.reduce((results, id) => {
       const policy = policies.find((p) => p.id === id);
 
       if (!policy) {
         return results;
       }
 
-      const { pattern, message, data, compare } = policy;
+      const { pattern, message, data, compare, info } = policy;
       const normalizedCompare = typeof compare === 'string' ? compare.toUpperCase() : compare;
 
-      if ((!pattern && !compare) || !message) {
+      if ((!pattern && !compare && !info) || !message) {
         return results;
       }
 
@@ -246,7 +254,11 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
         id,
       };
 
-      if (pattern) {
+      if (info) {
+        // informational rule the client can't check (e.g. password reuse):
+        // `valid` stays undefined, so it renders neutral and never blocks `isValid`
+        validationResult.info = true;
+      } else if (pattern) {
         const exp = new RegExp(interpolateString(pattern, data));
         validationResult.valid = exp.test(this.value);
       } else if (normalizedCompare === 'STR_NEQ_CI') {
@@ -275,14 +287,17 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
 
       return results;
     }, []);
+
+    // informational rules always render last
+    return items.sort((a, b) => Number(!!a.info) - Number(!!b.info));
   }
 
   get isValid() {
     return !this.validate().some(({ valid }) => valid === false);
   }
 
-  buildValidationItem({ valid, message }) {
-    const status = !this.value ? 'none' : valid;
+  buildValidationItem({ valid, message, info }) {
+    const status = !this.value || info ? 'none' : valid;
     const li = document.createElement('li');
     li.className = 'item';
     li.dataset.valid = status;

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

@@ -47,6 +47,12 @@ const availablePolicies = [
     compare: 'STR_NEQ_CI',
     data: { expected: 'user@example.com' },
   },
+  {
+    id: 'reuse',
+    message: 'Cannot be one of your last {{value}} passwords',
+    info: true,
+    data: { value: 3 },
+  },
 ];
 
 // HTML-attribute-escape any user-supplied string so the template still parses
@@ -72,10 +78,21 @@ const Template = ({
   useMinLength,
   useDisallowedChars,
   useDisallowEmail,
+  useReuse,
   minLengthValue,
   disallowedCharsValue,
   emailValue,
+  useCustomReuseMessage,
 }) => {
+  // custom reuse message, as a Descoper would set it on the screen
+  const policiesData = useCustomReuseMessage
+    ? data.map((p) =>
+        p.id === 'reuse'
+          ? { ...p, message: 'Must differ from your previous {{value}} passwords' }
+          : p
+      )
+    : data;
+
   const policies = [
     useMinLength ? 'minlength' : null,
     useLowercase ? 'lowercase' : null,
@@ -85,13 +102,14 @@ const Template = ({
     useSymbol ? 'nonalphanumeric' : null,
     useDisallowedChars ? 'disallowedchars' : null,
     useDisallowEmail ? 'disallowemail' : null,
+    useReuse ? 'reuse' : null,
   ].filter(Boolean);
 
   return `
   <descope-policy-validation
     label="${escapeAttr(label)}"
     value="${escapeAttr(value)}"
-    data="${escapeAttr(JSON.stringify(data) || '')}"
+    data="${escapeAttr(JSON.stringify(policiesData) || '')}"
     active-policies="${policies || ''}"
     data-password-policy-value-minlength="${escapeAttr(minLengthValue)}"
     data-password-policy-value-disallowedchars="${escapeAttr(disallowedCharsValue)}"
@@ -128,7 +146,9 @@ Default.args = {
   useMinLength: false,
   useDisallowedChars: false,
   useDisallowEmail: false,
+  useReuse: false,
   minLengthValue: undefined,
   disallowedCharsValue: `'"`,
   emailValue: 'user@example.com',
+  useCustomReuseMessage: false,
 };