@prosopo/client-bundle-example 2.10.11 → 2.10.18

package/.turbo/turbo-build$colon$cjs.log

@@ -1,25 +1,25 @@
 
-> @prosopo/client-bundle-example@2.10.11 build:cjs
+> @prosopo/client-bundle-example@2.10.18 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
 {
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/dotenv/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json'
   ]
 }
 {
   externals: [
     '@prosopo/dotenv',
-    '@prosopo/common',
+    '@prosopo/logger',
+    '@prosopo/util',
     '@prosopo/locale',
     '@prosopo/types',
-    '@prosopo/util',
     '@prosopo/util-crypto'
   ]
 }
@@ -30,4 +30,4 @@ Build end
 ✓ 1 modules transformed.
 rendering chunks...
 dist/cjs/index.cjs  1.62 kB
-✓ built in 144ms
+✓ built in 100ms

package/.turbo/turbo-build$colon$tsc.log

@@ -0,0 +1,32 @@
+
+> @prosopo/client-bundle-example@2.10.18 build:tsc
+> tsc --build --verbose
+
+8:14:27 AM - Projects in this build: 
+    * ../../dev/config/tsconfig.json
+    * ../../packages/util/tsconfig.json
+    * ../../packages/logger/tsconfig.json
+    * ../../packages/dotenv/tsconfig.json
+    * ../../packages/locale/tsconfig.json
+    * ../../packages/util-crypto/tsconfig.json
+    * ../../packages/types/tsconfig.json
+    * tsconfig.json
+
+8:14:27 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
+
+8:14:27 AM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/index.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/env.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/procaptcha/api.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
+
+8:14:28 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+
+8:14:28 AM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
+

package/.turbo/turbo-build.log

@@ -1,25 +1,29 @@
 
-> @prosopo/client-bundle-example@2.10.11 build
-> NODE_ENV=${NODE_ENV:-development}; vite build --config vite.esm.config.ts --mode $NODE_ENV
+> @prosopo/client-bundle-example@2.10.18 build
+> npm run build:cross-env -- --mode ${NODE_ENV:-development}
+
+
+> @prosopo/client-bundle-example@2.10.18 build:cross-env
+> vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
 {
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/dotenv/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json'
   ]
 }
 {
   externals: [
     '@prosopo/dotenv',
-    '@prosopo/common',
+    '@prosopo/logger',
+    '@prosopo/util',
     '@prosopo/locale',
     '@prosopo/types',
-    '@prosopo/util',
     '@prosopo/util-crypto'
   ]
 }
@@ -30,4 +34,4 @@ Build end
 ✓ 1 modules transformed.
 rendering chunks...
 dist/index.js  1.61 kB
-✓ built in 169ms
+✓ built in 98ms

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @prosopo/client-bundle-example
 
+## 2.10.18
+### Patch Changes
+
+- 5d87beb: chore(client-bundle-example): register invisible-puzzle explicit/implicit pages as Vite build entries so they are emitted in `dist` and reachable from the demo navigation.
+
+## 2.10.17
+### Patch Changes
+
+- 273926d: Fix `/captcha/{type}` endpoints looping with "No session found" when the
+  Redis session cache and Mongo diverge: on a session lookup miss the cache
+  entry is now invalidated, so the next `/frictionless` falls through and
+  creates a fresh session instead of resurrecting the dead one.
+  
+  Add invisible-mode support to the puzzle captcha widget: the
+  execute-event handler now drives the full phase transition
+  (`start` → `setChallengeData` → `dragging`), and the puzzle overlay is
+  rendered in invisible mode so the user can still solve the (inherently
+  interactive) drag challenge — only the checkbox UI is hidden.
+  
+  Add `invisible-puzzle-implicit.html` / `invisible-puzzle-explicit.html`
+  demo pages, and surface both standard and invisible puzzle entries in
+  the client-bundle-example navbar.
+- 5335647: Remove the obsolete `captchaType` render option from the client-bundle-example
+  demos; captcha type is now server-driven per site key, so the prop was a no-op.
+
+## 2.10.16
+### Patch Changes
+
+- dbcd098: Fix bug with chrome on ios
+
+## 2.10.15
+### Patch Changes
+
+- f5c8725: Fix bug with chrome on ios
+
+## 2.10.14
+### Patch Changes
+
+- 676c5f2: Use HTTPS in developmentwq
+- c1d738f: Update env for tests
+
+## 2.10.13
+### Patch Changes
+
+- 8148587: Clustering
+
+## 2.10.12
+### Patch Changes
+
+- 0a38892: feat/cross-os-testing
+- a8faa9a: bump license year
+- 3acc333: Release 3.3.0
+
 ## 2.10.11
 ### Patch Changes
 

package/README.md

@@ -9,6 +9,8 @@ This project is a _minimal_ example demonstrating how to include the Prosopo Pro
 Run these commands from the root of the [captcha](https://github.com/prosopo/captcha) repo:
 
 ```bash
+./setup-certs.sh && \
+./install_cert.sh && \
 cp dev/scripts/env.development dev/scripts/.env.development && \
 cp dev/scripts/env.development packages/procaptcha-bundle/.env.development && \
 docker compose --file ./docker/docker-compose.development.yml up -d && \
@@ -22,5 +24,5 @@ NODE_ENV=development npm run start:all
 
 ### 2. Visit the App
 
-The app is now running in development mode. Open [http://localhost:9232](http://localhost:9232) to view it in the
+The app is now running in development mode. Open [https://localhost:9232](http://localhost:9232) to view it in the
 browser.

package/env.development

@@ -0,0 +1,7 @@
+PROSOPO_SITE_KEY=5DszzmqThZQCcPoJGZdyeL82FQWfrPAAbXLq1o3t6hTo2xAf
+PROSOPO_SITE_KEY_FRICTIONLESS=5GCP69mhanZqJqnTvaaGvJCJZWSahz6xE2c7bTGETqSB5KDK
+PROSOPO_SITE_KEY_POW=5Esjpa4ogV3CnkueyiXet7LL5z5mhvEyi5XJnDGbD2kjzD8W
+PROSOPO_SITE_KEY_IMAGE=5DszzmqThZQCcPoJGZdyeL82FQWfrPAAbXLq1o3t6hTo2xAf
+PROSOPO_SITE_KEY_PUZZLE=5CQ3QeyY82R8h8VWFKTic3FMB3WsbSJExZgbaUqfVJtAFPnb
+PROSOPO_SERVER_URL=https://localhost:9228
+VITE_BUNDLE_URL=https://localhost:9269/procaptcha.bundle.js

package/env.production

@@ -0,0 +1,6 @@
+PROSOPO_SITE_KEY=5E7QGuzYgLJMH6qXQiCw62AUuLxPXRs1E6jitV4w8zTjDcKr
+PROSOPO_SITE_KEY_FRICTIONLESS=5CcNvLUdiXFpzKDMjThGLSK9rhWHA1H4EF3zrgkpkjAdqmuP
+PROSOPO_SITE_KEY_POW=5EoDBDkJscwosTHhHgGf4hqoU5s3WLwAjh8yTCQh72YYjVEt
+PROSOPO_SITE_KEY_IMAGE=5E7QGuzYgLJMH6qXQiCw62AUuLxPXRs1E6jitV4w8zTjDcKr
+PROSOPO_SERVER_URL=https://localhost:9228
+VITE_BUNDLE_URL=https://js.prosopo.io/js/procaptcha.bundle.js

package/env.staging

@@ -1,6 +1,6 @@
 PROSOPO_SITE_KEY=5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
-PROSOPO_SERVER_URL=http://localhost:9228
-VITE_BUNDLE_URL=http://staging-js.prosopo.io/js/procaptcha.bundle.js
+PROSOPO_SERVER_URL=https://localhost:9228
+VITE_BUNDLE_URL=https://staging-js.prosopo.io/js/procaptcha.bundle.js
 PROSOPO_SITE_KEY_POW=5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
 PROSOPO_SITE_KEY_IMAGE=5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
 PROSOPO_SITE_KEY_FRICTIONLESS=5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw

package/package.json

@@ -16,20 +16,21 @@
 	},
 	"scripts": {
 		"clean": "del-cli --verbose dist tsconfig.tsbuildinfo",
-		"build": "NODE_ENV=${NODE_ENV:-development}; vite build --config vite.esm.config.ts --mode $NODE_ENV",
+		"build": "npm run build:cross-env -- --mode ${NODE_ENV:-development}",
+		"build:cross-env": "vite build --config vite.esm.config.ts",
 		"build:tsc": "tsc --build --verbose",
 		"build:cjs": "NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV",
 		"bundle": "NODE_ENV=${NODE_ENV:-development}; vite build --config vite.config.ts --mode $NODE_ENV",
 		"typecheck": "tsc --project tsconfig.types.json",
 		"start": "NODE_ENV=${NODE_ENV:-development}; vite serve ./src --port 9232 --config vite.config.ts --mode=$NODE_ENV"
 	},
-	"version": "2.10.11",
+	"version": "2.10.18",
 	"devDependencies": {
 		"@emotion/cache": "11.11.0",
-		"@prosopo/config": "3.1.26",
-		"@prosopo/dotenv": "3.0.31",
-		"@prosopo/locale": "3.1.26",
-		"@prosopo/types": "3.6.4",
+		"@prosopo/config": "3.3.1",
+		"@prosopo/dotenv": "3.0.43",
+		"@prosopo/locale": "3.2.4",
+		"@prosopo/types": "4.3.0",
 		"@types/node": "22.5.5",
 		"@vitest/coverage-v8": "3.2.4",
 		"concurrently": "9.0.1",
@@ -42,5 +43,10 @@
 		"typescript": "5.6.2",
 		"vite": "6.4.1",
 		"vitest": "3.2.4"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/prosopo/captcha.git",
+		"directory": "demos/client-bundle-example"
 	}
 }

package/src/frictionless-explicit-web3.html

@@ -0,0 +1,249 @@
+<!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 CAPTCHA</title>
+<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <script type="module">
+        window.onCaptchaFailed = function () {
+            console.log('Challenge failed');
+            updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+        }
+
+        window.addEventListener('load', () => {
+            updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
+
+            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_FRICTIONLESS,
+                    "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);
+                });
+            };
+
+            // 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 });
+        });
+
+        // updateCaptchaStatus is now provided by status-log-injector
+    </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>
+
+    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form" id="demo-form">
+        <h2>Example Login Form</h2>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="name">Name</label>
+            <input id="name" type="text" name="name" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="email">Email Address</label>
+            <input id="email" type="email" name="email" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <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>
+        <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>
+    </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>
+<script type="module">
+    // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
+    import { render } from "%VITE_BUNDLE_URL%"
+    import { web3AccountsSubscribe, web3Enable } from "@polkadot/extension-dapp";
+
+    // 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');
+    }
+
+    // Get web3 accounts and create select element
+    async function getWeb3Accounts() {
+        return new Promise((resolve) =>{ web3AccountsSubscribe((accounts) => {
+            if (accounts.length === 0) {
+                window.updateCaptchaStatus('No accounts found. Please connect your wallet.', 'error');
+            } else {
+                window.updateCaptchaStatus(`Connected to ${accounts.length} account(s).`, 'info');
+                                    // 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');
+                    option.value = account.address;
+                    option.textContent = `${account.meta.name} (${account.address})`;
+                    accountSelect.appendChild(option);
+                });
+                const accountContainer = document.createElement('div');
+                accountContainer.innerHTML = '<label for="account-select"><h2>Select Account:</h2></label>';
+                accountContainer.appendChild(accountSelect);
+                document.getElementById('demo-form').prepend(accountContainer);
+                window.updateCaptchaStatus('Accounts loaded successfully', 'info');
+            }
+            resolve(accounts);
+        })});
+    }
+        // Wait for DOM content to be loaded
+        document.addEventListener('DOMContentLoaded', async function() {
+            await web3Enable("Procaptcha Demo");
+
+            await getWeb3Accounts();
+
+            // Get the selected account from the dropdown
+            const account = document.getElementById('account-select') ? document.getElementById('account-select').value : null;
+            window.updateCaptchaStatus(`Rendering the CAPTCHA for account ${account}`, 'info');
+
+            // Get the Element using elementId
+            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');
+                },
+                web3: true,
+                userAccountAddress: account
+            });
+        })
+
+</script>
+</body>
+</html>