Skip to content

feat(reactjs-todo-davinci): add ValidatedPasswordCollector support#116

Open
ryanbas21 wants to merge 6 commits into
mainfrom
feat/validated-password-collector
Open

feat(reactjs-todo-davinci): add ValidatedPasswordCollector support#116
ryanbas21 wants to merge 6 commits into
mainfrom
feat/validated-password-collector

Conversation

@ryanbas21

@ryanbas21 ryanbas21 commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

DO NOT MERGE: Pending 2.1 release. Dependencies need to be updated to latest.

Summary

  • Upgrades @forgerock/davinci-client to PR#638 preview build (adds ValidatedPasswordCollector support)
  • Extends the Password component to render a static requirements list, inline validation errors on keystroke, and an optional confirm field (when verify: true) with real-time mismatch feedback
  • Wires ValidatedPasswordCollector into form.js via a new validator function exposed from useDavinci
  • Adds 2 Playwright e2e tests against the 356a254c PingOne tenant (which returns a passwordPolicy on the registration password field)

Changes

File Change
package.json @forgerock/davinci-clientpkg.pr.new PR#638 build
hooks/davinci.hook.js Expose validator(collector) with try/catch safety fallback
password.js Requirements list, inline errors, split visibility state, real-time confirm mismatch
form.js ValidatedPasswordCollector case in mapCollectorsToComponents
e2e/davinci-validated-password.spec.js 2 e2e tests: requirements list visible, inline errors appear/clear
playwright.config.ts 8443 webServer points to 356a254c tenant for ValidatedPassword tests

Notes

  • The pkg.pr.new URL should be replaced with the published npm tag once PR#638 is merged to the SDK
  • The verify: true confirm field is implemented but not reachable in the current PingOne environment (collector.output.verify is false) — the code is correct and will activate automatically when the environment is configured
  • The 356a254c tenant's pingOneSSOConnector/createUser step is returning "requestTimedOut" so a happy-path registration e2e test is not included — covered by the existing davinci-register-user.spec.js against 02fb4743

Test plan

  • npm run e2e -- --grep "ValidatedPasswordCollector" — 4 passing (Chromium + Firefox)
  • npm run e2e -- --grep "Login" — existing login tests still pass
  • Navigate to registration form manually and confirm requirements list and inline errors render

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added password validation with real-time requirements display and password confirmation flow, including inline error messaging for policy violations.
  • Bug Fixes

    • Hardened test request capture logic for more reliable form submission assertions.
  • Documentation

    • Updated supported collectors list to include ValidatedPasswordCollector.
  • Tests

    • Added end-to-end tests validating password requirements and confirmation workflows.

@coderabbitai

coderabbitai Bot commented Jun 3, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

This PR adds password validation support to the DaVinci form integration, enabling inline validation requirements display, error messaging, and optional password confirmation fields. It also updates SDK dependencies to pinned beta versions and upgrades test infrastructure across related packages.

Changes

Password Validation in DaVinci Forms

Layer / File(s) Summary
Validation hook API
javascript/reactjs-todo-davinci/client/components/davinci-client/hooks/davinci.hook.js
The useDavinci hook exposes a new validator(collector) function that wraps davinciClient.validate(collector) and returns validation results for use by form components.
Form integration for ValidatedPasswordCollector
javascript/reactjs-todo-davinci/client/components/davinci-client/form.js
The Form component destructures the validator from useDavinci() and adds a ValidatedPasswordCollector case to the collectors switch, wiring the validator function and verify flag from collector output to the Password component.
Password component enhancement
javascript/reactjs-todo-davinci/client/components/davinci-client/password.js
The Password component is refactored with buildRequirements() helper to display inline validation requirements, manages visibility toggles for primary and confirm inputs, validates on input changes, handles validation errors, and conditionally renders a confirmation password section with mismatch detection.
Feature documentation
javascript/reactjs-todo-davinci/README.md
README updated to include ValidatedPasswordCollector in the list of supported DaVinci collectors.
E2E test coverage and test hardening
javascript/reactjs-todo-davinci/e2e/davinci-validated-password.spec.js, javascript/reactjs-todo-davinci/e2e/davinci-protect.spec.js
New Playwright E2E tests verify password requirements display and inline validation error handling. Existing davinci-protect tests hardened with safe JSON payload access using optional chaining to prevent errors on non-POST or non-JSON requests.
Dependency pinning and configuration updates
javascript/reactjs-todo-davinci/package.json, javascript/reactjs-todo-journey/package.json, javascript/reactjs-todo-journey/playwright.config.js, javascript/reactjs-todo-oidc/package.json, package.json
SDK dependencies pinned to specific beta version across packages; journey Playwright config converted from ES modules to CommonJS; "type": "module" removed from journey package.json; root @playwright/test upgraded from ^1.41.2 to ^1.60.0.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • vatsalparikh
  • SteinGabriel

🐰 A rabbit hops through validation fields so bright,
Confirming passwords match with all its might,
Requirements glow like carrots in the night,
While dependencies are pinned so tight! 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and accurately summarizes the main change: adding ValidatedPasswordCollector support to the reactjs-todo-davinci component.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/validated-password-collector

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@javascript/reactjs-todo-davinci/package.json`:
- Line 42: The package.json currently pins `@forgerock/davinci-client` to a
preview pkg.pr.new URL; replace that entry in
javascript/reactjs-todo-davinci/package.json so the dependency references the
published npm version string (e.g. "`@forgerock/davinci-client`":
">=<stable-version>" or a specific semver) instead of the pkg.pr.new URL, then
regenerate the lockfile (run npm install/npm ci locally) so package-lock.json no
longer contains a resolved pkg.pr.new URL; ensure the final package-lock.json
committed to the repo points to the stable registry artifact so CI installs
reliably.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 518e875a-ed2f-4793-b3ca-eb263fe249c5

📥 Commits

Reviewing files that changed from the base of the PR and between bc9ebef and 2745e9a.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (6)
  • javascript/reactjs-todo-davinci/client/components/davinci-client/form.js
  • javascript/reactjs-todo-davinci/client/components/davinci-client/hooks/davinci.hook.js
  • javascript/reactjs-todo-davinci/client/components/davinci-client/password.js
  • javascript/reactjs-todo-davinci/e2e/davinci-validated-password.spec.js
  • javascript/reactjs-todo-davinci/package.json
  • javascript/reactjs-todo-davinci/playwright.config.ts

Comment thread javascript/reactjs-todo-davinci/package.json Outdated
- Upgrades @forgerock/davinci-client to latest (2.0.0) which ships
  ValidatedPasswordCollector with password policy validation support
- Extends the Password component to render a static requirements list
  from the password policy, inline validation errors on keystroke,
  and an optional confirm field with real-time mismatch feedback
- Wires ValidatedPasswordCollector into form.js via a new validator
  function exposed from useDavinci with proper error handling
- Adds a second webServer (port 8444, 356a254c tenant) in playwright
  config for ValidatedPasswordCollector e2e tests; skipped in CI
  where only the 02fb4743 tenant is available
@ryanbas21 ryanbas21 force-pushed the feat/validated-password-collector branch from 41d7602 to cf50b48 Compare June 3, 2026 21:07
ryanbas21 added 3 commits June 8, 2026 13:02
- Add defensive null check in request listener to handle non-JSON requests
- Use optional chaining for safe property access
- Fix swapped assertions in collector test (was checking bootstrap log instead of collector log)
- Tests now pass with beta packages which have different request patterns

These bugs were pre-existing but masked by original package's request order.
Beta package's different request pattern exposed them.
- Upgrade @playwright/test from 1.41.2 to 1.60.0 for better ESM support
- Remove 'type: module' from reactjs-todo-journey/package.json
- Convert playwright.config.js to CommonJS (require/module.exports)
- Journey e2e tests now run (5 passed, 7 failed due to pre-existing backend issues)

The ESM config issue was caused by Playwright 1.41.2 not properly handling
ESM configs when package.json has 'type: module'. Upgrading Playwright and
using CommonJS config resolves the issue.

@ancheetah ancheetah left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments about error handling.

Comment on lines +14 to +29
/**
* Override configs keyed by clientId URL param — allows tests to target a
* different PingOne tenant without recompiling the app.
*/
const CLIENT_CONFIGS = {
'fb456db5-2e08-46d3-adf0-05bf8d26ad60': {
clientId: 'fb456db5-2e08-46d3-adf0-05bf8d26ad60',
redirectUri: `${window.location.origin}/callback.html`,
scope: 'openid profile email phone name revoke',
serverConfig: {
wellknown:
'https://auth.pingone.ca/356a254c-cba3-4ade-be1a-860136e8df01/as/.well-known/openid-configuration',
},
},
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we hardcoding a tenant here? I feel like this should be moved into a test and not something exposed to the customer.

Comment on lines +104 to +107
} catch (error) {
console.error('Error creating validator for collector:', error);
return () => [];
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe validate can throw. Can we remove this? If we want to handle errors then we should look for them like if (error) in validateResult {}.


if (validator) {
const errors = validator(value);
setValidationErrors(Array.isArray(errors) ? errors : []);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to do the Array.isArray check? Validators should always return an array even if it's empty.

Comment on lines +72 to +82
const result = updater(value);
if (result && result.error) {
console.error('Error updating password collector:', result.error.message);
}

// Keep confirm error in sync as the primary value changes
if (confirmValue && value !== confirmValue) {
setConfirmError('Passwords do not match');
} else if (confirmValue) {
setConfirmError('');
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there anything blocking the user from submitting the form if there is an error? Or are these just UI hints?

@ancheetah ancheetah added the do not merge Do not merge label Jun 11, 2026
- Remove hardcoded CLIENT_CONFIGS from create-client.utils.js (production code should not contain test-specific config)
- Remove unnecessary try/catch from validator function (davinciClient.validate doesn't throw)
- Remove redundant Array.isArray check in password.js (validators always return arrays)
- Update e2e test to use standard CONFIG instead of clientId URL param override

@ancheetah ancheetah left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved. I added a do not merge label. Let's remember to update the deps to latest once we release and this is ready.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

do not merge Do not merge

Development

Successfully merging this pull request may close these issues.

3 participants