@prosopo/client-bundle-example 2.10.12 → 2.10.18

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

@@ -0,0 +1,199 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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
+import type { IndexHtmlTransformContext, Plugin } from "vite";
+
+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 statusItem = document.createElement('div');
+			statusItem.className = \`status-item status-\${type}\`;
+			statusItem.innerHTML = \`[\${timestamp}] \${message}\`;
+			statusContainer.appendChild(statusItem);
+			
+			// Also log to console
+			console.log(\`CAPTCHA Status: \${message}\`);
+		}
+
+		// Make updateCaptchaStatus available globally
+		window.updateCaptchaStatus = updateCaptchaStatus;
+
+		// Override the original callbacks with enhanced versions that use status logging
+		const originalOnCaptchaFailed = window.onCaptchaFailed;
+		window.onCaptchaFailed = function() {
+			updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+			if (originalOnCaptchaFailed) originalOnCaptchaFailed();
+		};
+
+		const originalOnCaptchaVerified = window.onCaptchaVerified;
+		window.onCaptchaVerified = function(output) {
+			updateCaptchaStatus('Challenge passed successfully!', 'success');
+			updateCaptchaStatus(\`Token generated: \${output.substring(0, 15)}...\`, 'success');
+			if (originalOnCaptchaVerified) originalOnCaptchaVerified(output);
+		};
+
+		const originalOnActionHandler = window.onActionHandler;
+		window.onActionHandler = function() {
+			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();
+		};
+
+		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>
+  `;
+
+	return {
+		name: "status-log-injector",
+		transformIndexHtml: {
+			enforce: "post", // Run after other HTML transforms
+			transform(html: string, ctx: IndexHtmlTransformContext): string {
+				// Skip if no HTML body is found
+				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>`);
+
+				// 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}`);
+				}
+				return updatedHtml.replace("</body>", `${statusLogHtml}</body>`);
+			},
+		},
+	};
+}

package/src/pow-explicit-web3.html

@@ -0,0 +1,195 @@
+<!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"/>
+    <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');
+
+            // 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>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>
+
+        <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+
+        <form id="demo-form" class="mui-form">
+            <h2>Example Form</h2>
+
+            <div class="mui-textfield mui-textfield--float-label">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required />
+            </div>
+
+            <div class="mui-textfield mui-textfield--float-label">
+                <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>
+
+            <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>
+
+        <!-- Explanation will be injected by the explanation-injector plugin -->
+    </div>
+
+    <script type="module">
+        import { render } from "%VITE_BUNDLE_URL%"
+        import { web3AccountsSubscribe, web3Enable } from "@polkadot/extension-dapp";
+
+        // Form validation function
+        function validateForm() {
+            const nameInput = document.getElementById('name');
+            const emailInput = document.getElementById('email');
+            const errorDisplay = document.getElementById('error');
+
+            if (!nameInput.value || !emailInput.value) {
+                errorDisplay.textContent = 'Please fill out all fields';
+                errorDisplay.style.display = 'block';
+                window.updateCaptchaStatus('Form validation failed: Empty fields', 'error');
+                return false;
+            }
+
+            // Basic email validation
+            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailPattern.test(emailInput.value)) {
+                errorDisplay.textContent = 'Please enter a valid email address';
+                errorDisplay.style.display = 'block';
+                window.updateCaptchaStatus('Form validation failed: Invalid email format', 'error');
+                return false;
+            }
+
+            errorDisplay.style.display = 'none';
+            window.updateCaptchaStatus('Form validation passed', 'info');
+            return true;
+        }
+
+        // Callback for successful CAPTCHA verification
+        function handleCaptchaResponse(token) {
+            console.log('Procaptcha verified, token:', token);
+            window.updateCaptchaStatus('Challenge passed successfully!', 'success');
+            window.updateCaptchaStatus(`Token generated: ${token.substring(0, 15)}...`, 'success');
+
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+
+            // Display result
+            const resultElement = document.getElementById('result');
+            resultElement.innerHTML = `<strong>Form submitted with:</strong><br>
+- Name: ${name}<br>
+- Email: ${email}<br>
+- Procaptcha verified: Yes`;
+            resultElement.style.display = 'block';
+
+            window.updateCaptchaStatus('Form submission completed', 'success');
+        }
+
+        // Callback for failed CAPTCHA verification
+        function handleCaptchaFailed() {
+            console.log('Captcha verification failed');
+            window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+            document.getElementById('error').textContent = 'CAPTCHA verification failed. Please try again.';
+            document.getElementById('error').style.display = 'block';
+        }
+
+        // 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() {
+            window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
+
+            await web3Enable("Procaptcha Demo");
+
+            await getWeb3Accounts();
+
+            // Render the CAPTCHA
+            const account = document.getElementById('account-select') ? document.getElementById('account-select').value : null;
+            window.updateCaptchaStatus(`Rendering the CAPTCHA for account ${account}`, 'info');
+            const widgetId = render(document.getElementById('procaptcha-container'), {
+                siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
+                callback: handleCaptchaResponse,
+                "failed-callback": handleCaptchaFailed,
+                web3:true,
+                userAccountAddress: account
+            });
+
+            window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
+
+            // Add form submit handler
+            document.getElementById('demo-form').addEventListener('submit', function(e) {
+                e.preventDefault();
+                window.updateCaptchaStatus('Form submission attempted', 'info');
+                if (validateForm()) {
+                    // Form is valid, CAPTCHA verification will be handled by the callback
+                    window.updateCaptchaStatus('Waiting for CAPTCHA verification', 'info');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

package/src/pow-explicit.html

@@ -0,0 +1,158 @@
+<!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"/>
+    <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');
+
+            // 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>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>
+
+        <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+
+        <form id="demo-form" class="mui-form">
+            <h2>Example Form</h2>
+
+            <div class="mui-textfield mui-textfield--float-label">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required />
+            </div>
+
+            <div class="mui-textfield mui-textfield--float-label">
+                <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>
+
+            <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>
+
+        <!-- Explanation will be injected by the explanation-injector plugin -->
+    </div>
+
+    <script type="module">
+        import { render } from "%VITE_BUNDLE_URL%"
+
+        // Form validation function
+        function validateForm() {
+            const nameInput = document.getElementById('name');
+            const emailInput = document.getElementById('email');
+            const errorDisplay = document.getElementById('error');
+
+            if (!nameInput.value || !emailInput.value) {
+                errorDisplay.textContent = 'Please fill out all fields';
+                errorDisplay.style.display = 'block';
+                window.updateCaptchaStatus('Form validation failed: Empty fields', 'error');
+                return false;
+            }
+
+            // Basic email validation
+            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailPattern.test(emailInput.value)) {
+                errorDisplay.textContent = 'Please enter a valid email address';
+                errorDisplay.style.display = 'block';
+                window.updateCaptchaStatus('Form validation failed: Invalid email format', 'error');
+                return false;
+            }
+
+            errorDisplay.style.display = 'none';
+            window.updateCaptchaStatus('Form validation passed', 'info');
+            return true;
+        }
+
+        // Callback for successful CAPTCHA verification
+        function handleCaptchaResponse(token) {
+            console.log('Procaptcha verified, token:', token);
+            window.updateCaptchaStatus('Challenge passed successfully!', 'success');
+            window.updateCaptchaStatus(`Token generated: ${token.substring(0, 15)}...`, 'success');
+
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+
+            // Display result
+            const resultElement = document.getElementById('result');
+            resultElement.innerHTML = `<strong>Form submitted with:</strong><br>
+- Name: ${name}<br>
+- Email: ${email}<br>
+- Procaptcha verified: Yes`;
+            resultElement.style.display = 'block';
+
+            window.updateCaptchaStatus('Form submission completed', 'success');
+        }
+
+        // Callback for failed CAPTCHA verification
+        function handleCaptchaFailed() {
+            console.log('Captcha verification failed');
+            window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+            document.getElementById('error').textContent = 'CAPTCHA verification failed. Please try again.';
+            document.getElementById('error').style.display = 'block';
+        }
+
+        // Wait for DOM content to be loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
+
+            // Render the CAPTCHA
+            const widgetId = render(document.getElementById('procaptcha-container'), {
+                siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
+                callback: handleCaptchaResponse,
+                "failed-callback": handleCaptchaFailed
+            });
+
+            window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
+
+            // Add form submit handler
+            document.getElementById('demo-form').addEventListener('submit', function(e) {
+                e.preventDefault();
+                window.updateCaptchaStatus('Form submission attempted', 'info');
+                if (validateForm()) {
+                    // Form is valid, CAPTCHA verification will be handled by the callback
+                    window.updateCaptchaStatus('Waiting for CAPTCHA verification', 'info');
+                }
+            });
+        });
+    </script>
+</body>
+</html>