chore: pr-comments-add-validation

Author: ryanbas21

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

@@ -2,4 +2,8 @@
 '@forgerock/davinci-client': minor
 ---
 
-Add PasswordVerifyCollector to support password policy embedded in PASSWORD_VERIFY field components. The DaVinci API now returns passwordPolicy inside the PASSWORD_VERIFY field (DV-16053) instead of at the response root. The new PasswordVerifyCollector exposes the policy via output.passwordPolicy, enabling consumers to render password requirements directly from the collector.
+Add `ValidatedPasswordCollector` alongside `PasswordCollector`. The new collector is emitted whenever a password field carries a `passwordPolicy` — the presence of the policy is the sole discriminator between the two types, regardless of the server-side field tag (`PASSWORD` vs `PASSWORD_VERIFY`). `ValidatedPasswordCollector.output.passwordPolicy` is required; 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.

.nxignore

@@ -0,0 +1 @@
+.opensource/

.opensource/forgerock-javascript-sdk

@@ -0,0 +1 @@
+Subproject commit 1e3f0d7de2572ae5a0433525c5af65c73c031e67

e2e/davinci-app/components/password.ts

@@ -6,48 +6,65 @@
  */
 import type {
   PasswordCollector,
-  PasswordVerifyCollector,
+  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 | PasswordVerifyCollector,
-  updater: Updater<PasswordCollector | PasswordVerifyCollector>,
+  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);
 
-  // Render password policy requirements if available
-  if (collector.type === 'PasswordVerifyCollector' && collector.output.passwordPolicy) {
-    const policy = collector.output.passwordPolicy;
+  if (collector.type === 'ValidatedPasswordCollector') {
+    const passwordPolicy = collector.output.passwordPolicy;
     const requirementsList = document.createElement('ul');
     requirementsList.className = 'password-requirements';
 
-    if (policy.length) {
-      const li = document.createElement('li');
-      li.textContent = `${policy.length.min}–${policy.length.max} characters`;
-      requirementsList.appendChild(li);
+    if (passwordPolicy.length) {
+      const { min, max } = passwordPolicy.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 (policy.minCharacters) {
-      for (const [charset, count] of Object.entries(policy.minCharacters)) {
+    if (passwordPolicy.minCharacters) {
+      for (const [charset, count] of Object.entries(passwordPolicy.minCharacters)) {
         const li = document.createElement('li');
-        if (charset.match(/^[A-Z]+$/)) {
+        if (UPPERCASE_RE.test(charset)) {
           li.textContent = `At least ${count} uppercase letter(s)`;
-        } else if (charset.match(/^[a-z]+$/)) {
+        } else if (LOWERCASE_RE.test(charset)) {
           li.textContent = `At least ${count} lowercase letter(s)`;
-        } else if (charset.match(/^[0-9]+$/)) {
+        } else if (DIGIT_RE.test(charset)) {
           li.textContent = `At least ${count} number(s)`;
         } else {
           li.textContent = `At least ${count} special character(s)`;
@@ -61,12 +78,35 @@ export default function passwordComponent(
     }
   }
 
-  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);
+  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

@@ -239,12 +239,15 @@ const urlParams = new URLSearchParams(window.location.search);
         );
       } else if (
         collector.type === 'PasswordCollector' ||
-        collector.type === 'PasswordVerifyCollector'
+        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(