SDKS-4147: React DV - Handle Protect collector with module

javascript/angular-todo-davinci/e2e/davinci-login.spec.js

@@ -7,7 +7,7 @@ test.describe('Angular - DaVinci Login', () => {
     await page.goto(BASE_URL);
     await page.getByRole('link', { name: 'Sign In', exact: true }).click();
     await page.getByLabel('Username').fill('[email protected]');
-    await page.getByLabel('Password').fill('FakePassword#123');
+    await page.getByLabel('Password').fill('Demo_12345!');
     await page.getByRole('button', { name: 'Sign On' }).click();
     await expect(page.getByText('Welcome back, JS DaVinci Sample Apps E2E!')).toBeVisible();
     await expect(page.getByText('Protect with Ping')).toBeVisible();

javascript/angular-todo-davinci/e2e/davinci-logout.spec.js

@@ -8,7 +8,7 @@ test.describe('Angular - DaVinci Logout', () => {
     await page.goto(BASE_URL);
     await page.getByRole('link', { name: 'Sign In', exact: true }).click();
     await page.getByLabel('Username').fill('[email protected]');
-    await page.getByLabel('Password').fill('FakePassword#123');
+    await page.getByLabel('Password').fill('Demo_12345!');
     await page.getByRole('button', { name: 'Sign On' }).click();
     await expect(page.getByText('Welcome back, JS DaVinci Sample Apps E2E!')).toBeVisible();
     await expect(page.getByText('Protect with Ping')).toBeVisible();

javascript/angular-todo-davinci/e2e/davinci-register-user.spec.js

@@ -14,7 +14,7 @@ test.describe('Angular - DaVinci Register New User', () => {
     await page.getByLabel('First Name').fill('Test');
     await page.getByLabel('Last Name').fill(`Test-${randomUUID}`);
     await page.getByLabel('Email').fill(`test-${randomUUID}@user.com`);
-    await page.getByLabel('Password').fill('FakePassword#123');
+    await page.getByLabel('Password').fill('Demo_12345!');
     await page.getByRole('button', { name: 'Save' }).click();
 
     // Check for verification form

javascript/angular-todo-davinci/e2e/davinci-todo.spec.js

@@ -10,7 +10,7 @@ test.describe.skip('Angular - Davinci Todo', () => {
     await page.goto(BASE_URL);
     await page.getByRole('link', { name: 'Sign In', exact: true }).click();
     await page.getByLabel('Username').fill('[email protected]');
-    await page.getByLabel('Password').fill('FakePassword#123');
+    await page.getByLabel('Password').fill('Demo_12345!');
     await page.getByRole('button', { name: 'Sign On' }).click();
     await page.getByRole('link', { name: 'Todos', exact: true }).click();
     await page.waitForURL(BASE_URL + '/todos');

javascript/angular-todo-davinci/src/app/features/davinci/form/form.component.html

@@ -50,54 +50,45 @@
     The node to render has collectors, so we need to collect additional
     data from user.
     -->
-    @if (formName && shouldRenderTitle()) {
-      <h1 class="text-center fs-2 mb-3">{{ formName }}</h1>
-    }
+
+    <h1 class="text-center fs-2 mb-3">{{ formName }}</h1>
 
     <!--
     Iterate over the collectors and render the appropriate
     component for each one.
     -->
     @for (collector of collectors; track collector) {
-      @if (collector.type === 'TextCollector' && collector.name === 'protectsdk') {
-        <app-protect
-          [label]="collector.output.label"
-          [update]="client?.update(collector)"
-          (submitHandler)="submitHandler()"
-        />
-      } @else {
-        @switch (collector.type) {
-          @case ('TextCollector') {
-            <app-text-input
-              [key]="collector.output.key"
-              [label]="collector.output.label"
-              [update]="client?.update(collector)"
-            />
-          }
-          @case ('PasswordCollector') {
-            <app-password
-              [key]="collector.output.key"
-              [label]="collector.output.label"
-              [update]="client?.update(collector)"
-            />
-          }
-          @case ('SubmitCollector') {
-            <app-submit-button
-              [key]="collector.output.key"
-              [label]="collector.output.label"
-              [submittingForm]="isSubmittingForm"
-            />
-          }
-          @case ('FlowCollector') {
-            <app-flow-link
-              [collector]="collector"
-              [flow]="client?.flow({ action: collector.output.key })"
-              (renderForm)="renderForm()"
-            />
-          }
-          @default {
-            <app-unknown [collector]="collector" />
-          }
+      @switch (collector.type) {
+        @case ('TextCollector') {
+          <app-text-input
+            [key]="collector.output.key"
+            [label]="collector.output.label"
+            [update]="client?.update(collector)"
+          />
+        }
+        @case ('PasswordCollector') {
+          <app-password
+            [key]="collector.output.key"
+            [label]="collector.output.label"
+            [update]="client?.update(collector)"
+          />
+        }
+        @case ('SubmitCollector') {
+          <app-submit-button
+            [key]="collector.output.key"
+            [label]="collector.output.label"
+            [submittingForm]="isSubmittingForm"
+          />
+        }
+        @case ('FlowCollector') {
+          <app-flow-link
+            [collector]="collector"
+            [flow]="client?.flow({ action: collector.output.key })"
+            (renderForm)="renderForm()"
+          />
+        }
+        @default {
+          <app-unknown [collector]="collector" />
         }
       }
     }

javascript/angular-todo-davinci/src/app/features/davinci/form/form.component.ts

@@ -11,7 +11,6 @@ import { Component, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { ProtectComponent } from '../protect/protect.component';
 import { TextInputComponent } from '../text-input/text-input.component';
 import { PasswordComponent } from '../password/password.component';
 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
@@ -32,7 +31,6 @@ import { SdkService } from '../../../services/sdk.service';
   standalone: true,
   imports: [
     FormsModule,
-    ProtectComponent,
     TextInputComponent,
     PasswordComponent,
     SubmitButtonComponent,
@@ -142,14 +140,6 @@ export class DavinciFormComponent implements OnInit {
     }
   }
 
-  /**
-   * @function shouldRenderTitle - Determines if the form title should be displayed
-   * @returns {boolean} - True if there is a Protect SDK collector otherwise false
-   */
-  shouldRenderTitle(): boolean {
-    return !this.collectors?.some((collector) => collector.name === 'protectsdk');
-  }
-
   /**
    * @function submitHandler - The function to call when the form is submitted
    * @param {Object} event - The event object from the form submission

javascript/angular-todo-davinci/src/app/features/davinci/password/password.component.ts

@@ -10,7 +10,7 @@
 
 import { Component, Input } from '@angular/core';
 import { EyeIconComponent } from '../../../icons/eye-icon/eye-icon.component';
-import { Updater } from '@forgerock/davinci-client/types';
+import { PasswordCollector, Updater } from '@forgerock/davinci-client/types';
 
 @Component({
   selector: 'app-password',
@@ -21,7 +21,7 @@ import { Updater } from '@forgerock/davinci-client/types';
 export class PasswordComponent {
   @Input() key: string = '';
   @Input() label: string = '';
-  @Input() update: Updater | undefined = undefined;
+  @Input() update: Updater<PasswordCollector> | undefined = undefined;
 
   isVisible = false;
 

javascript/angular-todo-davinci/src/app/features/davinci/text-input/text-input.component.ts

@@ -9,7 +9,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { Updater } from '@forgerock/davinci-client/types';
+import { TextCollector, Updater, ValidatedTextCollector } from '@forgerock/davinci-client/types';
 
 @Component({
   selector: 'app-text-input',
@@ -19,7 +19,7 @@ import { Updater } from '@forgerock/davinci-client/types';
 export class TextInputComponent {
   @Input() key: string = '';
   @Input() label: string = '';
-  @Input() update: Updater | undefined = undefined;
+  @Input() update: Updater<TextCollector | ValidatedTextCollector> | undefined = undefined;
 
   onBlur(event: Event): void {
     this.update && this.update((event.target as HTMLInputElement).value);

javascript/angular-todo/e2e/centralized-login.spec.ts

@@ -1,18 +1,19 @@
 import { test, expect } from '@playwright/test';
+import { displayName, password, username } from './utils/demo-user';
 
 test('Angular - Login with centralized login', async ({ page }) => {
   await page.goto('https://localhost:8443/home?centralLogin=true');
 
   await page.getByRole('link', { name: 'Sign In', exact: true }).click();
   await expect(page.getByText('Redirecting ...')).toBeVisible();
 
-  await page.getByLabel('User Name').fill('user01');
-  await page.getByLabel('Password').first().fill('Password1!');
+  await page.getByLabel('User Name').fill(username);
+  await page.getByLabel('Password').first().fill(password);
   await page.getByRole('button', { name: 'Next' }).click();
 
   await page.waitForTimeout(3000);
 
   await page.reload();
 
-  await expect(page.getByText('Welcome back, user01 user01!')).toBeVisible();
+  await expect(page.getByText(`Welcome back, ${displayName}!`)).toBeVisible();
 });

javascript/angular-todo/e2e/embedded-login.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { displayName, password, username } from './utils/demo-user';
 
 test('Angular - Login with embedded login', async ({ page }) => {
   await page.goto('https://localhost:8443/');
@@ -15,9 +16,9 @@ test('Angular - Login with embedded login', async ({ page }) => {
   await page.goto('https://localhost:8443/home');
   await page.getByRole('link', { name: 'Sign In', exact: true }).click();
 
-  await page.getByLabel('User Name').fill('user01');
-  await page.getByLabel('Password').fill('Password1!');
+  await page.getByLabel('User Name').fill(username);
+  await page.getByLabel('Password').fill(password);
   await page.getByLabel('Password').press('Enter');
 
-  await expect(page.getByText('Welcome back, user01 user01!')).toBeVisible();
+  await expect(page.getByText(`Welcome back, ${displayName}!`)).toBeVisible();
 });

javascript/angular-todo/e2e/utils/demo-user.ts

@@ -0,0 +1,10 @@
+/*
+ *
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ *
+ */
+export  const username = '[email protected]';
+export const password = 'Demo_12345!';
+export const displayName = 'Demo User';

javascript/angular-todo/e2e/virtual-authenticator.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { displayName, password, username } from './utils/demo-user';
 
 test('Angular - Login with WebAuthn', async ({ browser, page }) => {
   let authenticator;
@@ -19,11 +20,11 @@ test('Angular - Login with WebAuthn', async ({ browser, page }) => {
     await page.goto('https://localhost:8443/home?journey=TEST_WebAuthn-Registration');
     await page.getByRole('link', { name: 'Sign In', exact: true }).click();
 
-    await page.getByLabel('User Name').fill('user01');
-    await page.getByLabel('Password').fill('Password1!');
-    await page.getByPlaceholder('Password').press('Enter');
+    await page.getByLabel('User Name').fill(username);
+    await page.getByLabel('Password').fill(password);
+    await page.getByLabel('Password').press('Enter');
 
-    await expect(page.getByText('Welcome back, user01 user01!')).toBeVisible();
+    await expect(page.getByText(`Welcome back, ${displayName}!`)).toBeVisible();
 
     await cdpSession.send('WebAuthn.removeVirtualAuthenticator', {
       authenticatorId: authenticator.authenticatorId,

javascript/embedded-login-davinci/main.ts

@@ -6,7 +6,6 @@ import { davinci } from '@forgerock/davinci-client';
 import usernameComponent from './components/text.js';
 import passwordComponent from './components/password.js';
 import submitButtonComponent from './components/submit-button.js';
-import protect from './components/protect.js';
 import flowLinkComponent from './components/flow-link.js';
 import idpCollectorButton from './components/social-login-button.js';
 import { InternalErrorResponse, NodeStates } from '@forgerock/davinci-client/types';
@@ -122,9 +121,7 @@ const continueToken = urlParams.get('continueToken');
 
     const collectors = davinciClient.getCollectors();
     collectors.forEach((collector) => {
-      if (collector.type === 'TextCollector' && collector.name === 'protectsdk') {
-        protect(formEl, collector, davinciClient.update(collector));
-      } else if (collector.type === 'TextCollector') {
+      if (collector.type === 'TextCollector') {
         usernameComponent(formEl, collector, davinciClient.update(collector));
       } else if (collector.type === 'PasswordCollector') {
         passwordComponent(formEl, collector, davinciClient.update(collector));
@@ -141,10 +138,6 @@ const continueToken = urlParams.get('continueToken');
         );
       }
     });
-
-    if (davinciClient.getCollectors().find((collector) => collector.name === 'protectsdk')) {
-      mapRenderer(await davinciClient.next());
-    }
   }
 
   function mapRenderer(node) {