npm - @prosopo/client-bundle-example - Versions diffs - 2.10.23 → 2.11.0 - Mend

@prosopo/client-bundle-example 2.10.23 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/.turbo/turbo-build$colon$cjs.log +5 -4
package/.turbo/turbo-build$colon$tsc.log +11 -11
package/.turbo/turbo-build.log +6 -5
package/CHANGELOG.md +21 -0
package/dist/cjs/index.cjs +13 -41
package/dist/cjs/plugins/pages.cjs +113 -0
package/dist/index.js +2 -42
package/dist/plugins/pages.js +103 -0
package/package.json +7 -7
package/src/frictionless-explicit-web3.html +10 -23
package/src/frictionless-explicit.html +18 -22
package/src/frictionless-implicit.html +60 -86
package/src/frictionless-manual-start.html +13 -33
package/src/image-explicit-web3.html +8 -24
package/src/image-explicit.html +16 -23
package/src/image-implicit.html +192 -0
package/src/index.html +11 -26
package/src/index.ts +1 -62
package/src/invisible-frictionless-explicit.html +8 -17
package/src/invisible-frictionless-implicit.html +8 -25
package/src/invisible-image-explicit.html +8 -23
package/src/invisible-image-implicit.html +8 -24
package/src/invisible-pow-explicit.html +8 -23
package/src/invisible-pow-implicit.html +9 -21
package/src/invisible-puzzle-explicit.html +8 -23
package/src/invisible-puzzle-implicit.html +9 -21
package/src/plugins/code-snippet-injector.ts +179 -0
package/src/plugins/form-filler-injector.ts +36 -121
package/src/plugins/layout-injector.ts +238 -0
package/src/plugins/logo.ts +15 -0
package/src/plugins/pages.ts +219 -0
package/src/plugins/placement-injector.ts +114 -0
package/src/plugins/slots.ts +32 -0
package/src/plugins/status-log-injector.ts +35 -114
package/src/pow-explicit-web3.html +8 -24
package/src/pow-explicit.html +8 -23
package/src/pow-implicit-sessionid.html +10 -24
package/src/pow-implicit.html +9 -24
package/src/puzzle-bind-explicit.html +83 -0
package/src/puzzle-explicit.html +16 -23
package/src/puzzle-implicit.html +9 -24
package/src/styles/demo.css +803 -0
package/src/tests/plugins.unit.test.ts +285 -118
package/tsconfig.tsbuildinfo +1 -1
package/vite.config.ts +11 -5
package/src/plugins/explanation-injector.ts +0 -294
package/src/plugins/navigation-injector.ts +0 -605
package/src/styles/captcha.css +0 -78
package/src/styles/field.css +0 -12
package/src/tests/floatLabel.unit.test.ts +0 -195
package/src/tests/floatLabelReady.unit.test.ts +0 -36

package/src/frictionless-implicit.html CHANGED Viewed

@@ -1,23 +1,11 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
-    <link href="styles/field.css" rel="stylesheet" type="text/css"/>
-    <script src="index.js"></script>
-    <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
-    <title>Procaptcha demo: Frictionless CAPTCHA</title>
-    <script type="text/javascript">
-        window.onCaptchaFailed = function () {
-            console.log('Challenge failed');
-            updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
-        }
-    </script>
+    <title>Procaptcha demo: Frictionless, implicit rendering</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
         window.addEventListener('load', () => {
-            updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
             window.setIsError = (isError) => {
                 const messageContainer = document.getElementById('messageContainer');
@@ -32,12 +20,11 @@
             window.onLoggedIn = (token) => {
                 updateCaptchaStatus('Logged in, fetching private resource', 'info');
                 const url = new URL("/private", config.serverUrl).href;
-                const origin = new URL(window.location.href).origin;
                 console.log("getting private resource with token ", token, "at", url);
                 fetch(url, {
                     method: "GET",
                     headers: {
-                        Origin: `${origin}`,
+                        Origin: "http://localhost:9232", // TODO: change this to env var
                         "Content-Type": "application/json",
                         Authorization: `Bearer ${token}`,
                     },
@@ -100,32 +87,34 @@
                             json,
                         })))
                 })
-                .then(async ({status, json, ok}) => {
-                    console.log("status", status, "json", json.message, "ok", ok);
-                    console.log("json", json)
-                    try {
-                        if (status !== 200) {
-                            updateCaptchaStatus(`API Error: ${json.message}`, 'error');
-                            setIsError(true);
-                            setMessage(json.message);
-                        } else {
-                            updateCaptchaStatus(`API Success: ${json.message}`, 'success');
-                            setIsError(false);
-                            setMessage(json.message);
+                    .then(async ({status, json, ok}) => {
+                        console.log("status", status, "json", json.message, "ok", ok);
+                        console.log("json", json)
+                        try {
+                            if (status !== 200) {
+                                updateCaptchaStatus(`API Error: ${json.message}`, 'error');
+                                setIsError(true);
+                                setMessage(json.message);
+                            } else {
+                                updateCaptchaStatus(`API Success: ${json.message}`, 'success');
+                                setIsError(false);
+                                setMessage(json.message);
+                            }
+                        } catch (err) {
+                            console.log(err);
+                            updateCaptchaStatus(`Error processing response: ${err}`, 'error');
                         }
-                    } catch (err) {
+                    })
+                    .catch((err) => {
                         console.log(err);
-                        updateCaptchaStatus(`Error processing response: ${err}`, 'error');
-                    }
-                })
-                .catch((err) => {
-                    console.log(err);
-                    updateCaptchaStatus(`Fetch error: ${err}`, 'error');
-                    setIsError(true);
-                    setMessage("Error: " + err);
-                });
+                        updateCaptchaStatus(`Fetch error: ${err}`, 'error');
+                        setIsError(true);
+                        setMessage("Error: " + err);
+                    });
             };
+            updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
             // Monitor DOM for CAPTCHA initialization
             const observer = new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
@@ -146,73 +135,58 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
-        // updateCaptchaStatus is now provided by status-log-injector
+        window.onCaptchaFailed = function () {
+            console.log('Challenge failed');
+            updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+        }
+        window.onCaptchaVerified = (output) => {
+            console.log('Challenge passed');
+            updateCaptchaStatus('Challenge passed successfully!', 'success');
+            updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
+        }
+        // Add custom event listener for CAPTCHA verification stages
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(() => {
+                updateCaptchaStatus('CAPTCHA script loaded and initialized', 'info');
+                updateCaptchaStatus('Waiting for user interaction...', 'info');
+            }, 500);
+        });
     </script>
+    <script id="procaptchaScript" type="module" src="%VITE_BUNDLE_URL%" async defer></script>
 </head>
 <body>
-<div class="mui-container">
-    <h1>Frictionless CAPTCHA - Explicit Rendering</h1>
-    <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
+<div class="demo-card">
-    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
-    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
-        <h2>Example Login Form</h2>
-        <div class="mui-textfield mui-textfield--float-label">
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
+        <h2>Create an account</h2>
+        <div class="demo-field">
             <label for="name">Name</label>
             <input id="name" type="text" name="name" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="email">Email Address</label>
             <input id="email" type="email" name="email" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
-            <div id="procaptcha-container"></div>
+        <div class="demo-field">
+            <div
+                    class="procaptcha"
+                    data-theme="light"
+                    data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
+                    data-failed-callback="onCaptchaFailed"
+                    data-callback="onCaptchaVerified"
+            ></div>
         </div>
         <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
-        <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
+        <button type="button" class="demo-button" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
     </form>
 </div>
-<script type="module">
-    (async () => {
-        const host = new URL(window.location.href).host;
-        // Use predefined VITE_BUNDLE_URL or default to localhost with the same host as the page, to ensure we load the
-        // bundle from the correct location in different environments
-        const bundleUrl = import.meta.env.VITE_BUNDLE_URL || 'https://localhost:9269/procaptcha.bundle.js'.replace('localhost', host);
-        // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
-        const {render} = await import(bundleUrl);
-        // Define a callback function to be called when the CAPTCHA is verified
-        function onCaptchaVerified(output) {
-            console.log('Challenge passed');
-            window.updateCaptchaStatus('Challenge passed successfully!', 'success');
-            window.updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
-        }
-        const captchaContainer = document.getElementById('procaptcha-container');
-        // Render the CAPTCHA
-        const widgetId = render(captchaContainer, {
-            siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
-            callback: onCaptchaVerified,
-            "failed-callback": function () {
-                console.log('Challenge failed');
-                window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
-            }
-        });
-        window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
-    })();
-</script>
 </body>
 </html>

package/src/frictionless-manual-start.html CHANGED Viewed

@@ -1,14 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
-    <link href="styles/field.css" rel="stylesheet" type="text/css"/>
-    <script src="index.js"></script>
-    <title>Procaptcha demo: Frictionless - Manual Start</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Frictionless, manual start</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
         window.onStartCaptcha = () => {
             updateCaptchaStatus('window.procaptcha.start() called - frictionless flow starting', 'info');
@@ -145,7 +140,6 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
         window.onCaptchaFailed = function () {
             console.log('Challenge failed');
             updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
@@ -169,34 +163,24 @@
 </head>
 <body>
-<div class="mui-container">
-    <h1>Frictionless CAPTCHA - Manual Start</h1>
-    <p>
-        This example renders the widget with <code>data-start-mode="manual"</code>. The checkbox appears
-        immediately at its final size, but no bot detection, behavioural collection or provider request runs
-        until either the page calls <code>window.procaptcha.start()</code> (the button below) or the visitor
-        clicks the checkbox. A click that starts the flow also opens whichever challenge the provider picks,
-        so the visitor never has to click twice.
-    </p>
-    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
-    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
-        <h2>Example Login Form</h2>
-        <div class="mui-textfield mui-textfield--float-label">
+<div class="demo-card">
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
+        <h2>Create an account</h2>
+        <p class="demo-note">Nothing runs until you tick the box or press <strong>Start CAPTCHA now</strong>, which calls <code>window.procaptcha.start()</code>.</p>
+        <div class="demo-field">
             <label for="name">Name</label>
             <input id="name" type="text" name="name" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="email">Email Address</label>
             <input id="email" type="email" name="email" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
-            <!-- Dev sitekey -->
+        <div class="demo-field">
             <div
                     class="procaptcha"
                     data-theme="light"
@@ -206,19 +190,15 @@
                     data-callback="onCaptchaVerified"
             ></div>
         </div>
-        <div class="mui-textfield">
-            <button type="button" class="mui-btn mui-btn--flat" onclick="onStartCaptcha()" data-cy="start-captcha-button">
+        <div class="demo-field">
+            <button type="button" class="demo-button demo-button--secondary" onclick="onStartCaptcha()" data-cy="start-captcha-button">
                 Start CAPTCHA now
             </button>
         </div>
         <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
-        <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
+        <button type="button" class="demo-button" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
     </form>
-    <!-- Console output display area -->
-    <div id="console-output" class="console-output" style="display: none;"></div>
-    <!-- Explanation will be injected by the explanation-injector plugin -->
 </div>
 </body>
 </html>

package/src/image-explicit-web3.html CHANGED Viewed

@@ -1,14 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
-    <link href="styles/field.css" rel="stylesheet" type="text/css"/>
-    <script src="index.js"></script>
-    <title>Procaptcha Image Mode - Explicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Image, explicit rendering, web3</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
         document.addEventListener('DOMContentLoaded', function() {
             updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
@@ -33,43 +28,33 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
-        // updateCaptchaStatus is now provided by status-log-injector
     </script>
 </head>
 <body>
-    <div class="mui-container">
-        <h1>Procaptcha Image Mode - Explicit Rendering</h1>
-        <p>This example demonstrates how to use Procaptcha in image mode with explicit rendering.</p>
+    <div class="demo-card">
-        <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+        <form id="demo-form" class="demo-form">
+            <h2>Create an account</h2>
-        <form id="demo-form" class="mui-form">
-            <h2>Example Form</h2>
-            <div class="mui-textfield mui-textfield--float-label">
+            <div class="demo-field">
                 <label for="name">Name</label>
                 <input type="text" id="name" name="name" required />
             </div>
-            <div class="mui-textfield mui-textfield--float-label">
+            <div class="demo-field">
                 <label for="email">Email</label>
                 <input type="email" id="email" name="email" required />
             </div>
-            <!-- The container for the CAPTCHA -->
             <div id="procaptcha-container"></div>
-            <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
+            <button type="submit" class="demo-button">Submit</button>
             <div id="error"></div>
         </form>
-        <div id="result" class="info-box" style="display: none;"></div>
-        <!-- Console output display area -->
-        <div id="console-output" class="console-output" style="display: none;"></div>
+        <div id="result" class="demo-result" style="display: none;"></div>
-        <!-- Explanation will be injected by the explanation-injector plugin -->
     </div>
     <script type="module">
@@ -141,7 +126,6 @@
                                         // render a modal and get the user to select 1 account
                     const accountSelect = document.createElement('select');
                     accountSelect.id = 'account-select';
-                    accountSelect.classList.add('mui-select');
                     accountSelect.classList.add('account-select');
                     accounts.forEach((account) => {
                         const option = document.createElement('option');

package/src/image-explicit.html CHANGED Viewed

@@ -1,14 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
-    <link href="styles/field.css" rel="stylesheet" type="text/css"/>
-    <script src="index.js"></script>
-    <title>Procaptcha Image Mode - Explicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Image, explicit rendering</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
         document.addEventListener('DOMContentLoaded', function() {
             updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
@@ -33,43 +28,33 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
-        // updateCaptchaStatus is now provided by status-log-injector
     </script>
 </head>
 <body>
-    <div class="mui-container">
-        <h1>Procaptcha Image Mode - Explicit Rendering</h1>
-        <p>This example demonstrates how to use Procaptcha in image mode with explicit rendering.</p>
+    <div class="demo-card">
-        <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+        <form id="demo-form" class="demo-form">
+            <h2>Create an account</h2>
-        <form id="demo-form" class="mui-form">
-            <h2>Example Form</h2>
-            <div class="mui-textfield mui-textfield--float-label">
+            <div class="demo-field">
                 <label for="name">Name</label>
                 <input type="text" id="name" name="name" required />
             </div>
-            <div class="mui-textfield mui-textfield--float-label">
+            <div class="demo-field">
                 <label for="email">Email</label>
                 <input type="email" id="email" name="email" required />
             </div>
-            <!-- The container for the CAPTCHA -->
             <div id="procaptcha-container"></div>
-            <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
+            <button type="submit" class="demo-button">Submit</button>
             <div id="error"></div>
         </form>
-        <div id="result" class="info-box" style="display: none;"></div>
-        <!-- Console output display area -->
-        <div id="console-output" class="console-output" style="display: none;"></div>
+        <div id="result" class="demo-result" style="display: none;"></div>
-        <!-- Explanation will be injected by the explanation-injector plugin -->
     </div>
     <script type="module">
@@ -135,8 +120,16 @@
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
             // Render the CAPTCHA
+            // ?placement=float anchors the challenge to the widget; the default is popup.
+            const placement =
+                new URLSearchParams(window.location.search).get("placement") === "float"
+                    ? "float"
+                    : "popup";
+            window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
             const widgetId = render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
+                placement,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed
             });

package/src/image-implicit.html ADDED Viewed

@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Procaptcha demo: Image, implicit rendering</title>
+    <script type="module">
+        window.addEventListener('load', () => {
+            window.setIsError = (isError) => {
+                const messageContainer = document.getElementById('messageContainer');
+                messageContainer.style.color = isError ? 'red' : 'black';
+                messageContainer.style.display = 'block';
+            };
+            window.setMessage = (message) => {
+                document.getElementById('message').innerText = message;
+            };
+            window.onLoggedIn = (token) => {
+                updateCaptchaStatus('Logged in, fetching private resource', 'info');
+                const url = new URL("/private", config.serverUrl).href;
+                console.log("getting private resource with token ", token, "at", url);
+                fetch(url, {
+                    method: "GET",
+                    headers: {
+                        Origin: "http://localhost:9232", // TODO: change this to env var
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                })
+                    .then(async (res) => {
+                        try {
+                            const jsonRes = await res.json();
+                            if (res.status === 200) {
+                                updateCaptchaStatus(`Successfully accessed private resource`, 'success');
+                                setMessage(jsonRes.message);
+                            } else {
+                                updateCaptchaStatus(`Failed to access private resource: ${res.status}`, 'error');
+                            }
+                        } catch (err) {
+                            console.log(err);
+                            updateCaptchaStatus(`Error parsing response: ${err}`, 'error');
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        updateCaptchaStatus(`Fetch error: ${err}`, 'error');
+                    });
+            };
+            window.onActionHandler = () => {
+                updateCaptchaStatus('Form submission initiated', 'info');
+                const procaptchaElements = document.getElementsByName('procaptcha-response');
+                if (!procaptchaElements.length) {
+                    updateCaptchaStatus('Error: No CAPTCHA response found', 'error');
+                    alert("Must complete captcha");
+                    return
+                }
+                const procaptchaToken = procaptchaElements[0].value;
+                updateCaptchaStatus(`Token received: ${procaptchaToken.substring(0, 15)}...`, 'success');
+                const payload = {
+                    email: document.getElementById('email').value,
+                    name: document.getElementById('name').value,
+                    password: document.getElementById('password').value,
+                    siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
+                    "procaptcha-response": procaptchaToken,
+                };
+                const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
+                console.log("posting to", url, "with payload", payload);
+                fetch(url, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(payload),
+                    contentType: "application/json",
+                }).then((response) => {
+                    return new Promise((resolve) => response.json()
+                        .then((json) => resolve({
+                            status: response.status,
+                            ok: response.ok,
+                            json,
+                        })))
+                })
+                    .then(async ({status, json, ok}) => {
+                        console.log("status", status, "json", json.message, "ok", ok);
+                        console.log("json", json)
+                        try {
+                            if (status !== 200) {
+                                updateCaptchaStatus(`API Error: ${json.message}`, 'error');
+                                setIsError(true);
+                                setMessage(json.message);
+                            } else {
+                                updateCaptchaStatus(`API Success: ${json.message}`, 'success');
+                                setIsError(false);
+                                setMessage(json.message);
+                            }
+                        } catch (err) {
+                            console.log(err);
+                            updateCaptchaStatus(`Error processing response: ${err}`, 'error');
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        updateCaptchaStatus(`Fetch error: ${err}`, 'error');
+                        setIsError(true);
+                        setMessage("Error: " + err);
+                    });
+            };
+            updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
+            // Monitor DOM for CAPTCHA initialization
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.addedNodes.length) {
+                        for (let i = 0; i < mutation.addedNodes.length; i++) {
+                            const node = mutation.addedNodes[i];
+                            if (node.classList && (node.classList.contains('procaptcha') ||
+                                  node.querySelector && node.querySelector('.procaptcha'))) {
+                                updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
+                                observer.disconnect();
+                                break;
+                            }
+                        }
+                    }
+                });
+            });
+            observer.observe(document.body, { childList: true, subtree: true });
+        });
+        window.onCaptchaFailed = function () {
+            console.log('Challenge failed');
+            updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+        }
+        window.onCaptchaVerified = (output) => {
+            console.log('Challenge passed');
+            updateCaptchaStatus('Challenge passed successfully!', 'success');
+            updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
+        }
+        // Add custom event listener for CAPTCHA verification stages
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(() => {
+                updateCaptchaStatus('CAPTCHA script loaded and initialized', 'info');
+                updateCaptchaStatus('Waiting for user interaction...', 'info');
+            }, 500);
+        });
+    </script>
+    <script id="procaptchaScript" type="module" src="%VITE_BUNDLE_URL%" async defer></script>
+</head>
+<body>
+<div class="demo-card">
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
+        <h2>Create an account</h2>
+        <div class="demo-field">
+            <label for="name">Name</label>
+            <input id="name" type="text" name="name" required/>
+        </div>
+        <div class="demo-field">
+            <label for="email">Email Address</label>
+            <input id="email" type="email" name="email" required/>
+        </div>
+        <div class="demo-field">
+            <label for="password">Password</label>
+            <input id="password" type="password" name="password" required/>
+        </div>
+        <div class="demo-field">
+            <div
+                    class="procaptcha"
+                    data-theme="light"
+                    data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
+                    data-failed-callback="onCaptchaFailed"
+                    data-callback="onCaptchaVerified"
+            ></div>
+        </div>
+        <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
+        <button type="button" class="demo-button" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
+    </form>
+</div>
+</body>
+</html>