@prosopo/client-bundle-example 2.7.0 → 2.8.0

package/dist/plugins/explanation-injector.ts

@@ -0,0 +1,250 @@
+// Copyright 2021-2025 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 explanations into HTML files
+import type { IndexHtmlTransformContext, Plugin } from "vite";
+
+// Utility function to escape HTML special characters
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+export default function explanationInjector(): Plugin {
+	return {
+		name: "explanation-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;
+				}
+
+				// Extract the current page name from the context
+				const url = ctx.filename || "";
+				const pageName = url.split("/").pop()?.split(".")[0] || "";
+
+				// Determine CAPTCHA type from filename
+				const isFrictionless = pageName.includes("frictionless");
+				const isImage = pageName.includes("image");
+				const isPow = pageName.includes("pow");
+				const isInvisible = pageName.includes("invisible");
+				const isExplicit = pageName.includes("explicit");
+
+				// Generate the appropriate explanation based on CAPTCHA type
+				let explanationHtml = "";
+
+				if (isFrictionless) {
+					explanationHtml = generateFrictionlessExplanation(
+						isExplicit,
+						isInvisible,
+					);
+				} else if (isImage) {
+					explanationHtml = generateImageExplanation(isExplicit, isInvisible);
+				} else if (isPow) {
+					explanationHtml = generatePowExplanation(isExplicit, isInvisible);
+				}
+
+				// No explanation needed or couldn't determine type
+				if (!explanationHtml) {
+					return html;
+				}
+
+				// Look for an existing explanation div to replace
+				if (html.includes('<div class="explanation">')) {
+					// Replace the existing explanation
+					const explRegex =
+						/<div class="explanation">[\s\S]*?<\/div>\s*<\/div>/;
+					return html.replace(explRegex, explanationHtml);
+				}
+
+				// Otherwise insert before the closing body tag
+				return html.replace("</body>", `${explanationHtml}</body>`);
+			},
+		},
+	};
+}
+
+// Helper functions to generate explanations for different CAPTCHA types
+function generateFrictionlessExplanation(
+	isExplicit: boolean,
+	isInvisible: boolean,
+): string {
+	const renderType = isExplicit ? "Explicit" : "Implicit";
+	const modeDesc = isInvisible ? "invisible" : "normal";
+
+	// Create code example with proper HTML escaping
+	const codeExample = isExplicit
+		? escapeHtml(`// Import the render function
+import { render } from "%VITE_BUNDLE_URL%"
+import { CaptchaType } from "@prosopo/types";
+
+// Render CAPTCHA
+const widgetId = render(document.getElementById('procaptcha-container'), {
+    siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
+    captchaType: CaptchaType.frictionless,
+    callback: handleCaptchaResponse,
+    "failed-callback": handleCaptchaFailed${isInvisible ? ',\n    size: "invisible"' : ""}
+});`)
+		: escapeHtml(`<div
+    class="procaptcha"
+    data-theme="light"
+    data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
+    data-failed-callback="onCaptchaFailed"
+    data-callback="onCaptchaVerified"
+    data-captcha-type="frictionless"${isInvisible ? '\n    data-size="invisible"' : ""}
+></div>`);
+
+	return `
+	<div class="explanation">
+		<h2>How ${isInvisible ? "Invisible " : ""}Frictionless CAPTCHA Works (${renderType} Rendering)</h2>
+		
+		<h3>Implementation Details</h3>
+		<p>This example demonstrates how to use Procaptcha in frictionless mode with ${renderType.toLowerCase()} rendering:</p>
+		<ol>
+			<li>Import the Procaptcha ${isExplicit ? "render function" : "script"}</li>
+			<li>${escapeHtml(isExplicit ? "Create a container for the CAPTCHA" : "Add a div with the procaptcha class")}</li>
+			<li>${escapeHtml(isExplicit ? "Render the CAPTCHA explicitly" : "Set data-* attributes to configure the CAPTCHA")}</li>
+			<li>Handle the verification result in the callback function</li>
+		</ol>
+		
+		<h3>Key Code Example</h3>
+		<pre>${codeExample}</pre>
+		
+		<h3>Execution Flow</h3>
+		<ol>
+			<li>On page load, ${escapeHtml(isExplicit ? "the render function is called to initialize" : "Procaptcha scans for elements with the procaptcha class")}</li>
+			<li>The CAPTCHA verification happens ${isInvisible ? "invisibly in the background" : "when the user interacts with it"}</li>
+			<li>When verification is complete, the callback function is called with the token</li>
+			<li>On successful verification, the form can be submitted with the token</li>
+		</ol>
+	</div>
+	`;
+}
+
+function generateImageExplanation(
+	isExplicit: boolean,
+	isInvisible: boolean,
+): string {
+	const renderType = isExplicit ? "Explicit" : "Implicit";
+	const modeDesc = isInvisible ? "invisible" : "visible";
+
+	// Create code example with proper HTML escaping
+	const codeExample = isExplicit
+		? escapeHtml(`// Import the render function
+import { render } from "%VITE_BUNDLE_URL%"
+import { CaptchaType } from "@prosopo/types";
+
+// Render CAPTCHA
+const widgetId = render(document.getElementById('procaptcha-container'), {
+    siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
+    captchaType: CaptchaType.image,
+    callback: handleCaptchaResponse,
+    "failed-callback": handleCaptchaFailed${isInvisible ? ',\n    size: "invisible"' : ""}
+});`)
+		: escapeHtml(`<div
+    class="procaptcha"
+    data-theme="light"
+    data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
+    data-failed-callback="onCaptchaFailed"
+    data-callback="onCaptchaVerified"
+    data-captcha-type="image"${isInvisible ? '\n    data-size="invisible"' : ""}
+></div>`);
+
+	return `
+	<div class="explanation">
+		<h2>How ${isInvisible ? "Invisible " : ""}Image CAPTCHA Works (${renderType} Rendering)</h2>
+		
+		<h3>Implementation Details</h3>
+		<p>This example demonstrates how to use Procaptcha in image mode with ${renderType.toLowerCase()} rendering:</p>
+		<ol>
+			<li>Import the Procaptcha ${isExplicit ? "render function" : "script"}</li>
+			<li>${escapeHtml(isExplicit ? "Create a container for the CAPTCHA" : "Add a div with the procaptcha class")}</li>
+			<li>${escapeHtml(isExplicit ? "Render the CAPTCHA explicitly" : "Set data-* attributes to configure the CAPTCHA")}</li>
+			<li>Handle the verification result in the callback function</li>
+		</ol>
+		
+		<h3>Key Code Example</h3>
+		<pre>${codeExample}</pre>
+		
+		<h3>Execution Flow</h3>
+		<ol>
+			<li>On page load, ${escapeHtml(isExplicit ? "the render function is called to initialize" : "Procaptcha scans for elements with the procaptcha class")}</li>
+			<li>The CAPTCHA challenge is rendered ${isInvisible ? "only when needed" : "in the specified container"}</li>
+			<li>When the user completes the challenge, the callback function is called</li>
+			<li>On successful verification, the form can be submitted with the token</li>
+		</ol>
+	</div>
+	`;
+}
+
+function generatePowExplanation(
+	isExplicit: boolean,
+	isInvisible: boolean,
+): string {
+	const renderType = isExplicit ? "Explicit" : "Implicit";
+	const modeDesc = isInvisible ? "invisible" : "visible";
+
+	// Create code example with proper HTML escaping
+	const codeExample = isExplicit
+		? escapeHtml(`// Import the render function
+import { render } from "%VITE_BUNDLE_URL%"
+import { CaptchaType } from "@prosopo/types";
+
+// Render CAPTCHA
+const widgetId = render(document.getElementById('procaptcha-container'), {
+    siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
+    captchaType: CaptchaType.pow,
+    callback: handleCaptchaResponse,
+    "failed-callback": handleCaptchaFailed${isInvisible ? ',\n    size: "invisible"' : ""}
+});`)
+		: escapeHtml(`<div
+    class="procaptcha"
+    data-theme="light"
+    data-sitekey="%PROSOPO_SITE_KEY_POW%"
+    data-failed-callback="onCaptchaFailed"
+    data-callback="onCaptchaVerified"
+    data-captcha-type="pow"${isInvisible ? '\n    data-size="invisible"' : ""}
+></div>`);
+
+	return `
+	<div class="explanation">
+		<h2>How ${isInvisible ? "Invisible " : ""}Proof of Work CAPTCHA Works (${renderType} Rendering)</h2>
+		
+		<h3>Implementation Details</h3>
+		<p>This example demonstrates how to use Procaptcha in Proof of Work mode with ${renderType.toLowerCase()} rendering:</p>
+		<ol>
+			<li>Import the Procaptcha ${isExplicit ? "render function" : "script"}</li>
+			<li>${escapeHtml(isExplicit ? "Create a container for the CAPTCHA" : "Add a div with the procaptcha class")}</li>
+			<li>${escapeHtml(isExplicit ? "Render the CAPTCHA explicitly" : "Set data-* attributes to configure the CAPTCHA")}</li>
+			<li>Handle the verification result in the callback function</li>
+		</ol>
+		
+		<h3>Key Code Example</h3>
+		<pre>${codeExample}</pre>
+		
+		<h3>Execution Flow</h3>
+		<ol>
+			<li>On page load, ${escapeHtml(isExplicit ? "the render function is called to initialize" : "Procaptcha scans for elements with the procaptcha class")}</li>
+			<li>The Proof of Work computation happens in the browser</li>
+			<li>When the computation is complete, the callback function is called</li>
+			<li>On successful verification, the form can be submitted with the token</li>
+		</ol>
+	</div>
+	`;
+}

package/dist/plugins/form-filler-injector.ts

@@ -0,0 +1,233 @@
+// Copyright 2021-2025 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 a form filler button into HTML files
+import type { IndexHtmlTransformContext, Plugin } from "vite";
+
+export default function formFillerInjector(): Plugin {
+	// Style for the form filler button
+	const buttonStyle = `
+    <style>
+      .form-filler-button {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background-color: #2196F3;
+        color: white;
+        border: none;
+        border-radius: 30px;
+        padding: 12px 20px;
+        font-size: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        cursor: pointer;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: all 0.2s ease;
+        outline: none;
+      }
+      
+      .form-filler-button:hover {
+        background-color: #1976D2;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+        transform: translateY(-2px);
+      }
+      
+      .form-filler-button:active {
+        transform: translateY(1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+      
+      .form-filler-button svg {
+        width: 18px;
+        height: 18px;
+        fill: white;
+      }
+      
+      .form-filler-button span {
+        font-weight: 500;
+      }
+      
+      @media (max-width: 768px) {
+        .form-filler-button {
+          bottom: 15px;
+          right: 15px;
+          padding: 10px 15px;
+          font-size: 12px;
+        }
+        
+        .form-filler-button svg {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    </style>
+  `;
+
+	// HTML for the form filler button
+	const buttonHtml = `
+    <button id="form-filler-button" class="form-filler-button" title="Fill all form fields with default values">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+      </svg>
+      <span>Fill Form</span>
+    </button>
+  `;
+
+	// JavaScript for form filling functionality
+	const fillerScript = `
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        // Create a function to fill the form with sensible default values
+        function fillFormWithDefaults() {
+          // Get all input elements
+          const inputs = document.querySelectorAll('input, select, textarea');
+          
+          // Record which elements were filled for status feedback
+          const filledElements = [];
+          
+          // Process each input
+          inputs.forEach(input => {
+            let filled = true;
+            
+            // Skip hidden inputs and those with existing values
+            if (input.type === 'hidden' || (input.value && input.value.trim() !== '')) {
+              filled = false;
+            }
+            // Handle different input types
+            else if (input.type === 'text') {
+              if (input.id.toLowerCase().includes('name') || input.name.toLowerCase().includes('name')) {
+                input.value = 'John Doe';
+              } else {
+                input.value = 'Default Text';
+              }
+            } 
+            else if (input.type === 'email') {
+              input.value = 'test@example.com';
+            } 
+            else if (input.type === 'password') {
+              input.value = 'Password123!';
+            } 
+            else if (input.type === 'tel') {
+              input.value = '+1234567890';
+            } 
+            else if (input.type === 'number') {
+              input.value = '42';
+            } 
+            else if (input.type === 'url') {
+              input.value = 'https://example.com';
+            } 
+            else if (input.type === 'date') {
+              const today = new Date();
+              const yyyy = today.getFullYear();
+              const mm = String(today.getMonth() + 1).padStart(2, '0');
+              const dd = String(today.getDate()).padStart(2, '0');
+              input.value = \`\${yyyy}-\${mm}-\${dd}\`;
+            } 
+            else if (input.type === 'time') {
+              input.value = '12:00';
+            } 
+            else if (input.type === 'checkbox' || input.type === 'radio') {
+              input.checked = true;
+            } 
+            else if (input.tagName === 'SELECT') {
+              if (input.options.length > 0) {
+                input.selectedIndex = 1 >= input.options.length ? 0 : 1; // Select second option if available, first otherwise
+              }
+            } 
+            else if (input.tagName === 'TEXTAREA') {
+              input.value = 'This is a sample text for the textarea field.';
+            } 
+            else {
+              // For any other input types
+              input.value = 'Default Value';
+            }
+            
+            // Add to filled elements if we actually filled it
+            if (filled) {
+              filledElements.push(input);
+              
+              // Dispatch input event to trigger any listeners
+              const event = new Event('input', { bubbles: true });
+              input.dispatchEvent(event);
+              
+              // For select elements, also dispatch change event
+              if (input.tagName === 'SELECT') {
+                const changeEvent = new Event('change', { bubbles: true });
+                input.dispatchEvent(changeEvent);
+              }
+            }
+          });
+          
+          // Show a notification about what was filled
+          if (filledElements.length > 0) {
+            // If an updateCaptchaStatus function exists (from our other demos), use it
+            if (typeof window.updateCaptchaStatus === 'function') {
+              window.updateCaptchaStatus(\`Filled \${filledElements.length} form fields with default values\`, 'info');
+            } else {
+              console.log(\`Filled \${filledElements.length} form fields with default values\`);
+            }
+            
+            // Highlight the filled fields briefly
+            filledElements.forEach(el => {
+              const originalBackground = el.style.backgroundColor;
+              const originalTransition = el.style.transition;
+              
+              el.style.transition = 'background-color 1.5s ease';
+              el.style.backgroundColor = '#e3f2fd';
+              
+              setTimeout(() => {
+                el.style.backgroundColor = originalBackground;
+                setTimeout(() => {
+                  el.style.transition = originalTransition;
+                }, 1500);
+              }, 500);
+            });
+          }
+        }
+        
+        // Add the click event listener to the form filler button
+        const formFillerButton = document.getElementById('form-filler-button');
+        if (formFillerButton) {
+          formFillerButton.addEventListener('click', fillFormWithDefaults);
+        }
+      });
+    </script>
+  `;
+
+	return {
+		name: "form-filler-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;
+				}
+
+				// Inject style into the head
+				let updatedHtml = html.replace("</head>", `${buttonStyle}</head>`);
+
+				// Inject button and script before closing body tag
+				updatedHtml = updatedHtml.replace(
+					"</body>",
+					`${buttonHtml}${fillerScript}</body>`,
+				);
+
+				return updatedHtml;
+			},
+		},
+	};
+}