Merge pull request #572 from ForgeRock/password-rules-toplevel

feat(davinci-client): add ValidatedPasswordCollector with embedded password policy

Author: ryanbas21

.changeset/embed-password-policy-in-component.md

@@ -0,0 +1,9 @@
+---
+'@forgerock/davinci-client': minor
+---
+
+Add `ValidatedPasswordCollector` alongside `PasswordCollector`. The reducer routes by `field.type`: `PASSWORD` always produces a `PasswordCollector`, `PASSWORD_VERIFY` always produces a `ValidatedPasswordCollector`. `ValidatedPasswordCollector.output.passwordPolicy` carries the embedded policy from the field; when the field has no policy, an empty policy object is emitted and the validator treats it as no rules. Consumers can render password requirements directly from the collector.
+
+Both collectors now expose a `verify: boolean` on `output` (defaults to `false`), propagated from the field when the server sends `verify: true`.
+
+`store.validate(collector)` accepts a `ValidatedPasswordCollector` and returns a validator that enforces the policy's length, unique-character, repeated-character, and per-charset minimum rules. Passing a `PasswordCollector` returns the standard "cannot be validated" error.

e2e/davinci-app/components/password.ts

@@ -4,32 +4,109 @@
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
  */
-import type { PasswordCollector, Updater } from '@forgerock/davinci-client/types';
+import type {
+  PasswordCollector,
+  ValidatedPasswordCollector,
+  Updater,
+  Validator,
+} from '@forgerock/davinci-client/types';
 import { dotToCamelCase } from '../helper.js';
 
+const UPPERCASE_RE = /^[A-Z]+$/;
+const LOWERCASE_RE = /^[a-z]+$/;
+const DIGIT_RE = /^[0-9]+$/;
+
 export default function passwordComponent(
   formEl: HTMLFormElement,
-  collector: PasswordCollector,
-  updater: Updater<PasswordCollector>,
+  collector: PasswordCollector | ValidatedPasswordCollector,
+  updater: Updater<PasswordCollector | ValidatedPasswordCollector>,
+  validator?: Validator,
 ) {
+  const collectorKey = dotToCamelCase(collector.output.key);
   const label = document.createElement('label');
   const input = document.createElement('input');
 
-  label.htmlFor = dotToCamelCase(collector.output.key);
+  label.htmlFor = collectorKey;
   label.innerText = collector.output.label;
   input.type = 'password';
-  input.id = dotToCamelCase(collector.output.key);
-  input.name = dotToCamelCase(collector.output.key);
+  input.id = collectorKey;
+  input.name = collectorKey;
 
   formEl?.appendChild(label);
   formEl?.appendChild(input);
 
-  formEl
-    ?.querySelector(`#${dotToCamelCase(collector.output.key)}`)
-    ?.addEventListener('blur', (event: Event) => {
-      const error = updater((event.target as HTMLInputElement).value);
-      if (error && 'error' in error) {
-        console.error(error.error.message);
+  if (collector.type === 'ValidatedPasswordCollector') {
+    const validation = collector.input.validation;
+    const requirementsList = document.createElement('ul');
+    requirementsList.className = 'password-requirements';
+
+    if (validation.length) {
+      const { min, max } = validation.length;
+      let lengthMessage: string | null = null;
+      if (min != null && max != null) {
+        lengthMessage = `${min}–${max} characters`;
+      } else if (min != null) {
+        lengthMessage = `At least ${min} characters`;
+      } else if (max != null) {
+        lengthMessage = `At most ${max} characters`;
+      }
+      if (lengthMessage) {
+        const li = document.createElement('li');
+        li.textContent = lengthMessage;
+        requirementsList.appendChild(li);
+      }
+    }
+
+    if (validation.minCharacters) {
+      for (const [charset, count] of Object.entries(validation.minCharacters)) {
+        const li = document.createElement('li');
+        if (UPPERCASE_RE.test(charset)) {
+          li.textContent = `At least ${count} uppercase letter(s)`;
+        } else if (LOWERCASE_RE.test(charset)) {
+          li.textContent = `At least ${count} lowercase letter(s)`;
+        } else if (DIGIT_RE.test(charset)) {
+          li.textContent = `At least ${count} number(s)`;
+        } else {
+          li.textContent = `At least ${count} special character(s)`;
+        }
+        requirementsList.appendChild(li);
       }
-    });
+    }
+
+    if (requirementsList.children.length > 0) {
+      formEl?.appendChild(requirementsList);
+    }
+  }
+
+  const inputEl = formEl?.querySelector(`#${collectorKey}`);
+  const shouldValidate = collector.type === 'ValidatedPasswordCollector' && !!validator;
+
+  inputEl?.addEventListener('input', (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
+
+    if (shouldValidate) {
+      const result = validator(value);
+      if (Array.isArray(result) && result.length) {
+        let errorEl = formEl?.querySelector<HTMLUListElement>(`.${collectorKey}-error`);
+        if (!errorEl) {
+          errorEl = document.createElement('ul');
+          errorEl.className = `${collectorKey}-error`;
+          inputEl.after(errorEl);
+        }
+        const items = result.map((msg) => {
+          const li = document.createElement('li');
+          li.textContent = msg;
+          return li;
+        });
+        errorEl.replaceChildren(...items);
+        return;
+      }
+      formEl?.querySelector(`.${collectorKey}-error`)?.remove();
+    }
+
+    const error = updater(value);
+    if (error && 'error' in error) {
+      console.error(error.error.message);
+    }
+  });
 }

e2e/davinci-app/main.ts

@@ -237,13 +237,17 @@ const urlParams = new URLSearchParams(window.location.search);
           davinciClient.update(collector), // Returns an update function for this collector
           davinciClient.validate(collector), // Returns a validate function for this collector
         );
-      } else if (collector.type === 'PasswordCollector') {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        collector;
+      } else if (
+        collector.type === 'PasswordCollector' ||
+        collector.type === 'ValidatedPasswordCollector'
+      ) {
         passwordComponent(
           formEl, // You can ignore this; it's just for rendering
           collector, // This is the plain object of the collector
           davinciClient.update(collector), // Returns an update function for this collector
+          collector.type === 'ValidatedPasswordCollector'
+            ? davinciClient.validate(collector)
+            : undefined,
         );
       } else if (collector.type === 'SubmitCollector') {
         submitButtonComponent(