@prosopo/client-bundle-example 2.10.24 → 2.11.0

package/src/plugins/status-log-injector.ts

@@ -11,82 +11,40 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// Vite plugin to inject CAPTCHA status log into HTML files
+
+// Vite plugin that adds the event log. Demo pages report what the widget is
+// doing through window.updateCaptchaStatus.
 import type { IndexHtmlTransformContext, Plugin } from "vite";
+import { fillSlot } from "./slots.js";
 
 export default function statusLogInjector(): Plugin {
-	// CSS for status log styling
-	const statusLogCss = `
-	<style>
-		.captcha-status {
-			margin-top: 20px;
-			padding: 15px;
-			background-color: #f0f8ff;
-			border: 2px solid #2196F3;
-			border-radius: 5px;
-			font-family: monospace;
-			font-size: 14px;
-		}
-		.status-item {
-			margin: 5px 0;
-			padding: 5px;
-		}
-		.status-success {
-			color: #4CAF50;
-			font-weight: bold;
-		}
-		.status-error {
-			color: #F44336;
-			font-weight: bold;
-		}
-		.status-info {
-			color: #2196F3;
-		}
-		.status-warning {
-			color: #FF9800;
-		}
-		.status-title {
-			font-weight: bold;
-			margin-bottom: 10px;
-			border-bottom: 1px solid #2196F3;
-			padding-bottom: 5px;
-		}
-		.console-output {
-			margin-top: 20px;
-			padding: 10px;
-			background-color: #f5f5f5;
-			border: 1px solid #ddd;
-			border-radius: 4px;
-			font-family: monospace;
-			white-space: pre-wrap;
-			max-height: 200px;
-			overflow-y: auto;
-		}
-	</style>
-  `;
-
-	// JavaScript for status log functionality
 	const statusLogJs = `
 	<script type="module">
-		// Function to update CAPTCHA status display
 		function updateCaptchaStatus(message, type = 'info') {
 			const statusContainer = document.getElementById('captcha-status');
 			if (!statusContainer) return;
-			
-			const timestamp = new Date().toLocaleTimeString();
+
+			const time = document.createElement('span');
+			time.className = 'status-item__time';
+			time.textContent = new Date().toLocaleTimeString();
+			const dot = document.createElement('span');
+			dot.className = 'status-item__dot';
+			const text = document.createElement('span');
+			text.className = 'status-item__message';
+			text.textContent = message;
+
 			const statusItem = document.createElement('div');
 			statusItem.className = \`status-item status-\${type}\`;
-			statusItem.innerHTML = \`[\${timestamp}] \${message}\`;
+			statusItem.append(time, dot, text);
 			statusContainer.appendChild(statusItem);
-			
-			// Also log to console
+			statusContainer.scrollTop = statusContainer.scrollHeight;
+
 			console.log(\`CAPTCHA Status: \${message}\`);
 		}
 
-		// Make updateCaptchaStatus available globally
 		window.updateCaptchaStatus = updateCaptchaStatus;
 
-		// Override the original callbacks with enhanced versions that use status logging
+		// Wrap the page's own callbacks so every page logs the same events.
 		const originalOnCaptchaFailed = window.onCaptchaFailed;
 		window.onCaptchaFailed = function() {
 			updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
@@ -101,98 +59,61 @@ export default function statusLogInjector(): Plugin {
 		};
 
 		const originalOnActionHandler = window.onActionHandler;
-		window.onActionHandler = function() {
+		window.onActionHandler = function(token) {
 			const procaptchaElements = document.getElementsByName('procaptcha-response');
-			
+
 			if (!procaptchaElements.length) {
 				updateCaptchaStatus('Error: No CAPTCHA response token found', 'error');
 				alert("Must complete captcha");
 				return;
 			}
-			
+
 			updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
-			if (originalOnActionHandler) originalOnActionHandler();
+			if (originalOnActionHandler) originalOnActionHandler(token);
 		};
 
-		document.addEventListener('DOMContentLoaded', function() {
-			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 });
-		});
-		
-		// Create a method to show CAPTCHA execution events
 		document.addEventListener('procaptcha:execute', function(e) {
-			// Determine captcha type from the page URL
 			const url = window.location.pathname;
 			const isFrictionless = url.includes('frictionless');
 			const isImage = url.includes('image');
 			const isPow = url.includes('pow');
-			
+
 			let captchaType = 'unknown';
 			if (isFrictionless) captchaType = 'frictionless';
 			else if (isImage) captchaType = 'image';
 			else if (isPow) captchaType = 'pow';
-			
+
 			updateCaptchaStatus(\`CAPTCHA execution started: type=\${captchaType}\`, 'info');
 			updateCaptchaStatus(\`Container: \${e.detail.containerId}, timestamp: \${new Date(e.detail.timestamp).toLocaleTimeString()}\`, 'info');
 		});
 	</script>
   `;
 
-	// HTML for status log container
-	const statusLogHtml = `
-	<!-- CAPTCHA Status Display -->
-	<div id="captcha-status" class="captcha-status">
-		<div class="status-title">CAPTCHA Status Log</div>
-	</div>
-	
-	<!-- Console output display area -->
-	<div id="console-output" class="console-output" style="display: none;"></div>
-  `;
+	const statusLogHtml = `<div id="captcha-status" class="captcha-status" aria-live="polite"></div>`;
 
 	return {
 		name: "status-log-injector",
 		transformIndexHtml: {
-			order: "post", // Run after other HTML transforms
-			handler(html: string, ctx: IndexHtmlTransformContext): string {
-				// Skip if no HTML body is found
+			order: "post",
+			handler(html: string, _ctx: IndexHtmlTransformContext): string {
 				if (!html.includes("<body") || !html.includes("</body>")) {
 					return html;
 				}
 
-				// Skip if status log already exists
 				if (html.includes('id="captcha-status"')) {
 					return html;
 				}
 
-				// Add CSS to head
-				let updatedHtml = html.replace("</head>", `${statusLogCss}</head>`);
+				const withJs = html.replace("</head>", () => `${statusLogJs}</head>`);
 
-				// Add JavaScript to head
-				updatedHtml = updatedHtml.replace("</head>", `${statusLogJs}</head>`);
-
-				// Add status log container after the form or before the closing body if no form
-				if (updatedHtml.includes("</form>")) {
-					return updatedHtml.replace("</form>", `</form>${statusLogHtml}`);
+				const inSlot = fillSlot(withJs, "events", statusLogHtml);
+				if (inSlot) {
+					return inSlot;
+				}
+				if (withJs.includes("</form>")) {
+					return withJs.replace("</form>", () => `</form>${statusLogHtml}`);
 				}
-				return updatedHtml.replace("</body>", `${statusLogHtml}</body>`);
+				return withJs.replace("</body>", () => `${statusLogHtml}</body>`);
 			},
 		},
 	};

package/src/pow-explicit-web3.html

@@ -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 Proof of Work Mode - Explicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Proof of Work, 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 Proof of Work Mode - Explicit Rendering</h1>
-        <p>This example demonstrates how to use Procaptcha in Proof of Work 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/pow-explicit.html

@@ -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 Proof of Work Mode - Explicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Proof of Work, 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 Proof of Work Mode - Explicit Rendering</h1>
-        <p>This example demonstrates how to use Procaptcha in Proof of Work 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">

package/src/pow-implicit-sessionid.html

@@ -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: PoW - Client Session Id</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Proof of Work, client session id</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
 
         // The site's own per-user session id. Rendered onto the widget via
         // data-sessionid and sent again at verify as clientSessionId; the
@@ -155,7 +150,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');
@@ -179,28 +173,24 @@
 </head>
 <body>
 
-<div class="mui-container">
-    <h1>Proof of Work CAPTCHA - Client Session Id</h1>
-    <p>Renders with <code>data-sessionid</code> and verifies with the same <code>clientSessionId</code>.</p>
-
-    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+<div class="demo-card">
 
-    <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>
+        <p class="demo-note">Renders with <code>data-sessionid</code> and verifies with the same <code>clientSessionId</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"
@@ -211,13 +201,9 @@
             ></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>
 
-    <!-- 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/pow-implicit.html

@@ -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: PoW - Implicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Proof of Work, implicit rendering</title>
     <script type="module">
-        // Function to update CAPTCHA status display is now provided by status-log-injector
 
         window.addEventListener('load', () => {
 
@@ -140,7 +135,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');
@@ -164,28 +158,23 @@
 </head>
 <body>
 
-<div class="mui-container">
-    <h1>Proof of Work CAPTCHA - Implicit Rendering</h1>
-    <p>This example demonstrates how to use Procaptcha in Proof of Work mode with implicit rendering.</p>
-
-    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+<div class="demo-card">
 
-    <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">
-            <!-- Dev sitekey -->
+        <div class="demo-field">
             <div
                     class="procaptcha"
                     data-theme="light"
@@ -195,13 +184,9 @@
             ></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>
 
-    <!-- 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/puzzle-bind-explicit.html

@@ -1,50 +1,35 @@
 <!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 Puzzle Mode - Bound Button</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Puzzle, bound button</title>
 </head>
 <body>
-    <div class="mui-container">
-        <h1>Procaptcha Puzzle Mode - Bound Button</h1>
-        <p>
-            The widget is rendered once and bound to the form's own submit button with
-            <code>bind: "#verify-btn"</code>. Clicking the button triggers that widget's challenge
-            without ticking the checkbox. Add <code>?placement=float</code> to anchor the
-            challenge to the widget instead of centring it.
-        </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>
+            <p class="demo-note">The widget is bound to the submit button, so pressing it opens the challenge.</p>
 
-        <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" id="verify-btn" class="mui-btn mui-btn--raised mui-btn--primary">Verify &amp; submit</button>
+            <button type="submit" id="verify-btn" class="demo-button">Verify &amp; submit</button>
 
             <div id="error"></div>
         </form>
 
-        <div id="result" class="info-box" style="display: none;"></div>
+        <div id="result" class="demo-result" style="display: none;"></div>
 
-        <!-- Console output display area -->
-        <div id="console-output" class="console-output" style="display: none;"></div>
     </div>
 
     <script type="module">

package/src/puzzle-explicit.html

@@ -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 Puzzle Mode - Explicit Rendering</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Puzzle, 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 Puzzle Mode - Explicit Rendering</h1>
-        <p>This example demonstrates how to use Procaptcha in Puzzle 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">