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

@@ -236,12 +236,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(

packages/davinci-client/api-report/davinci-client.api.md

@@ -147,13 +147,13 @@ export interface CollectorErrors {
 }
 
 // @public (undocumented)
-export type Collectors = FlowCollector | PasswordCollector | PasswordVerifyCollector | TextCollector | SingleSelectCollector | IdpCollector | SubmitCollector | ActionCollector<'ActionCollector'> | SingleValueCollector<'SingleValueCollector'> | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | ReadOnlyCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | QrCodeCollector | UnknownCollector;
+export type Collectors = FlowCollector | PasswordCollector | ValidatedPasswordCollector | TextCollector | SingleSelectCollector | IdpCollector | SubmitCollector | ActionCollector<'ActionCollector'> | SingleValueCollector<'SingleValueCollector'> | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | ReadOnlyCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | QrCodeCollector | UnknownCollector;
 
 // @public
 export type CollectorValueType<T> = T extends {
     type: 'PasswordCollector';
 } ? string : T extends {
-    type: 'PasswordVerifyCollector';
+    type: 'ValidatedPasswordCollector';
 } ? string : T extends {
     type: 'TextCollector';
     category: 'SingleValueCollector';
@@ -651,8 +651,6 @@ export interface DaVinciNextResponse extends DaVinciBaseResponse {
     };
     // (undocumented)
     _links?: Links;
-    // (undocumented)
-    passwordPolicy?: PasswordPolicy;
 }
 
 // @public
@@ -1005,7 +1003,7 @@ export type InferMultiValueCollectorType<T extends MultiValueCollectorTypes> = T
 export type InferNoValueCollectorType<T extends NoValueCollectorTypes> = T extends 'ReadOnlyCollector' ? NoValueCollectorBase<'ReadOnlyCollector'> : T extends 'QrCodeCollector' ? QrCodeCollectorBase : NoValueCollectorBase<'NoValueCollector'>;
 
 // @public
-export type InferSingleValueCollectorType<T extends SingleValueCollectorTypes> = T extends 'TextCollector' ? TextCollector : T extends 'SingleSelectCollector' ? SingleSelectCollector : T extends 'ValidatedTextCollector' ? ValidatedTextCollector : T extends 'PasswordCollector' ? PasswordCollector : T extends 'PasswordVerifyCollector' ? PasswordVerifyCollector : SingleValueCollectorWithValue<'SingleValueCollector'> | SingleValueCollectorNoValue<'SingleValueCollector'>;
+export type InferSingleValueCollectorType<T extends SingleValueCollectorTypes> = T extends 'TextCollector' ? TextCollector : T extends 'SingleSelectCollector' ? SingleSelectCollector : T extends 'ValidatedTextCollector' ? ValidatedTextCollector : T extends 'PasswordCollector' ? PasswordCollector : T extends 'ValidatedPasswordCollector' ? ValidatedPasswordCollector : SingleValueCollectorWithValue<'SingleValueCollector'> | SingleValueCollectorNoValue<'SingleValueCollector'>;
 
 // @public (undocumented)
 export type InferValueObjectCollectorType<T extends ObjectValueCollectorTypes> = T extends 'DeviceAuthenticationCollector' ? DeviceAuthenticationCollector : T extends 'DeviceRegistrationCollector' ? DeviceRegistrationCollector : T extends 'PhoneNumberCollector' ? PhoneNumberCollector : ObjectOptionsCollectorWithObjectValue<'ObjectValueCollector'> | ObjectOptionsCollectorWithStringValue<'ObjectValueCollector'>;
@@ -1140,12 +1138,11 @@ fields: DaVinciField[];
 formData: {
 value: Record<string, unknown>;
 };
-passwordPolicy?: PasswordPolicy;
 }, string>;
 
 // @public
-export const nodeCollectorReducer: Reducer<(TextCollector | SingleSelectCollector | ValidatedTextCollector | PasswordCollector | PasswordVerifyCollector | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | IdpCollector | SubmitCollector | FlowCollector | QrCodeCollectorBase | ReadOnlyCollector | UnknownCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[]> & {
-    getInitialState: () => (TextCollector | SingleSelectCollector | ValidatedTextCollector | PasswordCollector | PasswordVerifyCollector | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | IdpCollector | SubmitCollector | FlowCollector | QrCodeCollectorBase | ReadOnlyCollector | UnknownCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[];
+export const nodeCollectorReducer: Reducer<(TextCollector | SingleSelectCollector | ValidatedTextCollector | PasswordCollector | ValidatedPasswordCollector | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | IdpCollector | SubmitCollector | FlowCollector | QrCodeCollectorBase | ReadOnlyCollector | UnknownCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[]> & {
+    getInitialState: () => (TextCollector | SingleSelectCollector | ValidatedTextCollector | PasswordCollector | ValidatedPasswordCollector | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | IdpCollector | SubmitCollector | FlowCollector | QrCodeCollectorBase | ReadOnlyCollector | UnknownCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[];
 };
 
 // @public (undocumented)
@@ -1297,7 +1294,41 @@ export interface OutgoingQueryParams {
 }
 
 // @public (undocumented)
-export type PasswordCollector = SingleValueCollectorNoValue<'PasswordCollector'>;
+export interface PasswordCollector {
+    // (undocumented)
+    category: 'SingleValueCollector';
+    // (undocumented)
+    error: string | null;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    input: {
+        key: string;
+        value: string | number | boolean;
+        type: string;
+    };
+    // (undocumented)
+    name: string;
+    // (undocumented)
+    output: {
+        key: string;
+        label: string;
+        type: string;
+        verify: boolean;
+    };
+    // (undocumented)
+    type: 'PasswordCollector';
+}
+
+// @public
+export type PasswordField = {
+    type: 'PASSWORD' | 'PASSWORD_VERIFY';
+    key: string;
+    label: string;
+    required?: boolean;
+    verify?: boolean;
+    passwordPolicy?: PasswordPolicy;
+};
 
 // @public (undocumented)
 export interface PasswordPolicy {
@@ -1348,42 +1379,6 @@ export interface PasswordPolicy {
     updatedAt?: string;
 }
 
-// @public (undocumented)
-export interface PasswordVerifyCollector {
-    // (undocumented)
-    category: 'SingleValueCollector';
-    // (undocumented)
-    error: string | null;
-    // (undocumented)
-    id: string;
-    // (undocumented)
-    input: {
-        key: string;
-        value: string | number | boolean;
-        type: string;
-    };
-    // (undocumented)
-    name: string;
-    // (undocumented)
-    output: {
-        key: string;
-        label: string;
-        type: string;
-        passwordPolicy?: PasswordPolicy;
-    };
-    // (undocumented)
-    type: 'PasswordVerifyCollector';
-}
-
-// @public (undocumented)
-export type PasswordVerifyField = {
-    type: 'PASSWORD_VERIFY';
-    key: string;
-    label: string;
-    required?: boolean;
-    passwordPolicy?: PasswordPolicy;
-};
-
 // @public (undocumented)
 export type PhoneNumberCollector = ObjectValueCollectorWithObjectValue<'PhoneNumberCollector', PhoneNumberInputValue, PhoneNumberOutputValue>;
 
@@ -1647,10 +1642,10 @@ export interface SingleValueCollectorNoValue<T extends SingleValueCollectorTypes
 }
 
 // @public (undocumented)
-export type SingleValueCollectors = SingleValueCollectorNoValue<'PasswordCollector'> | PasswordVerifyCollector | SingleSelectCollectorWithValue<'SingleSelectCollector'> | SingleValueCollectorWithValue<'SingleValueCollector'> | SingleValueCollectorWithValue<'TextCollector'> | ValidatedSingleValueCollectorWithValue<'TextCollector'>;
+export type SingleValueCollectors = PasswordCollector | ValidatedPasswordCollector | SingleSelectCollectorWithValue<'SingleSelectCollector'> | SingleValueCollectorWithValue<'SingleValueCollector'> | SingleValueCollectorWithValue<'TextCollector'> | ValidatedSingleValueCollectorWithValue<'TextCollector'>;
 
 // @public
-export type SingleValueCollectorTypes = 'PasswordCollector' | 'PasswordVerifyCollector' | 'SingleValueCollector' | 'SingleSelectCollector' | 'SingleSelectObjectCollector' | 'TextCollector' | 'ValidatedTextCollector';
+export type SingleValueCollectorTypes = 'PasswordCollector' | 'ValidatedPasswordCollector' | 'SingleValueCollector' | 'SingleSelectCollector' | 'SingleSelectObjectCollector' | 'TextCollector' | 'ValidatedTextCollector';
 
 // @public (undocumented)
 export interface SingleValueCollectorWithValue<T extends SingleValueCollectorTypes> {
@@ -1680,11 +1675,11 @@ export interface SingleValueCollectorWithValue<T extends SingleValueCollectorTyp
 }
 
 // @public (undocumented)
-export type SingleValueFields = StandardField | PasswordVerifyField | ValidatedField | SingleSelectField | ProtectField;
+export type SingleValueFields = StandardField | PasswordField | ValidatedField | SingleSelectField | ProtectField;
 
 // @public (undocumented)
 export type StandardField = {
-    type: 'PASSWORD' | 'TEXT' | 'SUBMIT_BUTTON' | 'FLOW_BUTTON' | 'FLOW_LINK' | 'BUTTON';
+    type: 'TEXT' | 'SUBMIT_BUTTON' | 'FLOW_BUTTON' | 'FLOW_LINK' | 'BUTTON';
     key: string;
     label: string;
     required?: boolean;
@@ -1802,6 +1797,34 @@ export type ValidatedField = {
     };
 };
 
+// @public (undocumented)
+export interface ValidatedPasswordCollector {
+    // (undocumented)
+    category: 'SingleValueCollector';
+    // (undocumented)
+    error: string | null;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    input: {
+        key: string;
+        value: string | number | boolean;
+        type: string;
+    };
+    // (undocumented)
+    name: string;
+    // (undocumented)
+    output: {
+        key: string;
+        label: string;
+        type: string;
+        verify: boolean;
+        passwordPolicy: PasswordPolicy;
+    };
+    // (undocumented)
+    type: 'ValidatedPasswordCollector';
+}
+
 // @public (undocumented)
 export interface ValidatedSingleValueCollectorWithValue<T extends SingleValueCollectorTypes> {
     // (undocumented)