chore: pass-form-el

Author: ryanbas21

e2e/journey-app/callback-map.ts

@@ -60,11 +60,13 @@ import {
  * @param journeyEl - The container element to append the component to
  * @param callback - The callback instance
  * @param idx - Index for generating unique IDs
+ * @param onSubmit - Optional callback to trigger form submission
  */
 export function renderCallback(
   journeyEl: HTMLDivElement,
   callback: BaseCallback,
   idx: number,
+  onSubmit?: () => void,
 ): void {
   switch (callback.getType()) {
     case 'BooleanAttributeInputCallback':
@@ -83,7 +85,7 @@ export function renderCallback(
       confirmationComponent(journeyEl, callback as ConfirmationCallback, idx);
       break;
     case 'DeviceProfileCallback':
-      deviceProfileComponent(journeyEl, callback as DeviceProfileCallback, idx);
+      deviceProfileComponent(journeyEl, callback as DeviceProfileCallback, idx, onSubmit);
       break;
     case 'HiddenValueCallback':
       hiddenValueComponent(journeyEl, callback as HiddenValueCallback, idx);
@@ -101,10 +103,20 @@ export function renderCallback(
       passwordComponent(journeyEl, callback as PasswordCallback, idx);
       break;
     case 'PingOneProtectEvaluationCallback':
-      pingProtectEvaluationComponent(journeyEl, callback as PingOneProtectEvaluationCallback, idx);
+      pingProtectEvaluationComponent(
+        journeyEl,
+        callback as PingOneProtectEvaluationCallback,
+        idx,
+        onSubmit,
+      );
       break;
     case 'PingOneProtectInitializeCallback':
-      pingProtectInitializeComponent(journeyEl, callback as PingOneProtectInitializeCallback, idx);
+      pingProtectInitializeComponent(
+        journeyEl,
+        callback as PingOneProtectInitializeCallback,
+        idx,
+        onSubmit,
+      );
       break;
     case 'PollingWaitCallback':
       pollingWaitComponent(journeyEl, callback as PollingWaitCallback, idx);
@@ -149,9 +161,14 @@ export function renderCallback(
  * Renders all callbacks in a step
  * @param journeyEl - The container element to append components to
  * @param callbacks - Array of callback instances
+ * @param onSubmit - Optional callback to trigger form submission
  */
-export function renderCallbacks(journeyEl: HTMLDivElement, callbacks: BaseCallback[]): void {
+export function renderCallbacks(
+  journeyEl: HTMLDivElement,
+  callbacks: BaseCallback[],
+  onSubmit?: () => void,
+): void {
   callbacks.forEach((callback, idx) => {
-    renderCallback(journeyEl, callback, idx);
+    renderCallback(journeyEl, callback, idx, onSubmit);
   });
 }

e2e/journey-app/components/device-profile.ts

@@ -15,6 +15,7 @@ export default function deviceProfileComponent(
   journeyEl: HTMLDivElement,
   callback: DeviceProfileCallback,
   idx: number,
+  onSubmit?: () => void,
 ) {
   const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
   const message = document.createElement('p');
@@ -46,13 +47,9 @@ export default function deviceProfileComponent(
       message.innerText = 'Device profile collected successfully!';
       message.style.color = 'green';
 
-      // Auto-submit the form after successful collection
-      setTimeout(() => {
-        const form = document.getElementById('form') as HTMLFormElement;
-        if (form) {
-          form.requestSubmit();
-        }
-      }, 500);
+      if (onSubmit) {
+        setTimeout(() => onSubmit(), 500);
+      }
     } catch (error) {
       console.error('Device profile collection failed:', error);
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';

e2e/journey-app/components/ping-protect-evaluation.ts

@@ -15,6 +15,7 @@ export default function pingProtectEvaluationComponent(
   journeyEl: HTMLDivElement,
   callback: PingOneProtectEvaluationCallback,
   idx: number,
+  onSubmit?: () => void,
 ) {
   const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
   const message = document.createElement('p');
@@ -56,13 +57,9 @@ export default function pingProtectEvaluationComponent(
       message.innerText = 'Risk assessment completed successfully!';
       message.style.color = 'green';
 
-      // Auto-submit the form after successful data collection
-      setTimeout(() => {
-        const form = document.getElementById('form') as HTMLFormElement;
-        if (form) {
-          form.requestSubmit();
-        }
-      }, 500);
+      if (onSubmit) {
+        setTimeout(() => onSubmit(), 500);
+      }
     } catch (error) {
       console.error('Protect evaluation failed:', error);
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';

e2e/journey-app/components/ping-protect-initialize.ts

@@ -26,6 +26,7 @@ export default function pingProtectInitializeComponent(
   journeyEl: HTMLDivElement,
   callback: PingOneProtectInitializeCallback,
   idx: number,
+  onSubmit?: () => void,
 ) {
   const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
   const message = document.createElement('p');
@@ -74,13 +75,9 @@ export default function pingProtectInitializeComponent(
       message.innerText = 'PingOne Protect initialized successfully!';
       message.style.color = 'green';
 
-      // Auto-submit the form after successful initialization
-      setTimeout(() => {
-        const form = document.getElementById('form') as HTMLFormElement;
-        if (form) {
-          form.requestSubmit();
-        }
-      }, 500);
+      if (onSubmit) {
+        setTimeout(() => onSubmit(), 500);
+      }
     } catch (error) {
       console.error('Protect initialization failed:', error);
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';

e2e/journey-app/main.ts

@@ -117,12 +117,14 @@ if (searchParams.get('middleware') === 'true') {
     header.innerText = formName || '';
     journeyEl.appendChild(header);
 
+    const submitForm = () => formEl.requestSubmit();
+
     const stepRendered =
       renderQRCodeStep(journeyEl, step) || renderRecoveryCodesStep(journeyEl, step);
 
     if (!stepRendered) {
       const callbacks = step.callbacks;
-      renderCallbacks(journeyEl, callbacks);
+      renderCallbacks(journeyEl, callbacks, submitForm);
     }
 
     const submitBtn = document.createElement('button');