@prosopo/client-bundle-example 2.5.5 → 2.8.0

package/package.json

@@ -13,9 +13,9 @@
 		"start": "vite serve ./src --port 9232 --config vite.config.ts",
 		"clean": "echo 'nothing to clean'"
 	},
-	"version": "2.5.5",
+	"version": "2.8.0",
 	"devDependencies": {
-		"@prosopo/dotenv": "2.5.5",
+		"@prosopo/dotenv": "2.6.0",
 		"@types/node": "22.5.5",
 		"@vitest/coverage-v8": "3.0.9",
 		"concurrently": "9.0.1",
@@ -26,5 +26,10 @@
 		"typescript": "5.6.2",
 		"vite": "6.2.3",
 		"vitest": "3.0.9"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/prosopo/captcha.git",
+		"directory": "demos/client-bundle-example"
 	}
 }

package/vite.config.ts

@@ -16,7 +16,10 @@ import fs from "node:fs";
 import path from "node:path";
 import { loadEnv } from "@prosopo/dotenv";
 import { type UserConfig, defineConfig } from "vite";
+import explanationInjector from "./src/plugins/explanation-injector.js";
+import formFillerInjector from "./src/plugins/form-filler-injector.js";
 import navigationInjector from "./src/plugins/navigation-injector.js";
+import statusLogInjector from "./src/plugins/status-log-injector.js";
 
 // Function to copy contents of a directory to another directory
 function copyDirContents(src: string, dest: string) {
@@ -93,11 +96,24 @@ export default defineConfig(({ command, mode }) => {
 			"import.meta.env.PROSOPO_SITE_KEY": JSON.stringify(
 				process.env.PROSOPO_SITE_KEY,
 			),
+			"import.meta.env.PROSOPO_SITE_KEY_IMAGE": JSON.stringify(
+				process.env.PROSOPO_SITE_KEY_IMAGE,
+			),
+			"import.meta.env.PROSOPO_SITE_KEY_SLIDER": JSON.stringify(
+				process.env.PROSOPO_SITE_KEY_SLIDER,
+			),
+			"import.meta.env.PROSOPO_SITE_KEY_POW": JSON.stringify(
+				process.env.PROSOPO_SITE_KEY_POW,
+			),
+			"import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS": JSON.stringify(
+				process.env.PROSOPO_SITE_KEY_FRICTIONLESS,
+			),
 			"import.meta.env.PROSOPO_SERVER_URL": JSON.stringify(
 				process.env.PROSOPO_SERVER_URL,
 			),
 			"import.meta.env.VITE_BUNDLE_URL": JSON.stringify(
-				process.env.VITE_BUNDLE_URL || "./assets/procaptcha.bundle.js",
+				process.env.VITE_BUNDLE_URL ||
+					"http://localhost:9269/procaptcha.bundle.js",
 			),
 		},
 		optimizeDeps: {
@@ -110,6 +126,18 @@ export default defineConfig(({ command, mode }) => {
 			rollupOptions: {
 				input: {
 					index: path.resolve(__dirname, "src/index.html"),
+					"pow-explicit": path.resolve(__dirname, "src/pow-explicit.html"),
+					"image-explicit": path.resolve(__dirname, "src/image-explicit.html"),
+					"pow-implicit": path.resolve(__dirname, "src/pow-implicit.html"),
+					"image-implicit": path.resolve(__dirname, "src/index.html"),
+					"frictionless-implicit": path.resolve(
+						__dirname,
+						"src/frictionless-implicit.html",
+					),
+					"frictionless-explicit": path.resolve(
+						__dirname,
+						"src/frictionless-explicit.html",
+					),
 					"invisible-pow-explicit": path.resolve(
 						__dirname,
 						"src/invisible-pow-explicit.html",
@@ -126,8 +154,6 @@ export default defineConfig(({ command, mode }) => {
 						__dirname,
 						"src/invisible-image-implicit.html",
 					),
-					pow: path.resolve(__dirname, "src/pow.html"),
-					frictionless: path.resolve(__dirname, "src/frictionless.html"),
 					"invisible-frictionless-implicit": path.resolve(
 						__dirname,
 						"src/invisible-frictionless-implicit.html",
@@ -141,6 +167,9 @@ export default defineConfig(({ command, mode }) => {
 		},
 		plugins: [
 			navigationInjector(),
+			formFillerInjector(),
+			explanationInjector(),
+			statusLogInjector(),
 			{
 				name: "copy-files",
 				closeBundle() {

package/dist/assets/captchaType-CYBmmAZe.js

@@ -1 +0,0 @@
-var o;(function(i){i.image="image",i.pow="pow",i.frictionless="frictionless"})(o||(o={}));export{o as C};

package/dist/assets/frictionless-BVSPLzWe.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";import{render as l}from"https://staging-js.prosopo.io/js/procaptcha.bundle.js";import{C as i}from"./captchaType-CYBmmAZe.js";window.addEventListener("load",()=>{window.setIsError=e=>{const o=document.getElementById("messageContainer");o.style.color=e?"red":"black",o.style.display="block"},window.setMessage=e=>{document.getElementById("message").innerText=e},window.onLoggedIn=e=>{const o=new URL("/private",config.serverUrl).href;console.log("getting private resource with token ",e,"at",o),fetch(o,{method:"GET",headers:{Origin:"http://localhost:9232","Content-Type":"application/json",Authorization:`Bearer ${e}`}}).then(async n=>{try{const s=await n.json();n.status===200&&setMessage(s.message)}catch(s){console.log(s)}}).catch(n=>{console.log(n)})},window.onActionHandler=()=>{const e=document.getElementsByName("procaptcha-response");if(!e.length){alert("Must complete captcha");return}const o=e[0].value,n={email:document.getElementById("email").value,name:document.getElementById("name").value,password:document.getElementById("password").value,"procaptcha-response":o},s=new URL("signup",void 0).href;console.log("posting to",s,"with payload",n),fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n),contentType:"application/json"}).then(t=>new Promise(a=>t.json().then(c=>a({status:t.status,ok:t.ok,json:c})))).then(async({status:t,json:a,ok:c})=>{console.log("status",t,"json",a.message,"ok",c),console.log("json",a);try{t!==200?(setIsError(!0),setMessage(a.message)):(setIsError(!1),setMessage(a.message))}catch(r){console.log(r)}}).catch(t=>{console.log(t),setIsError(!0),setMessage("Error: "+t)})},console.log("here")});function d(e){console.log("Challenge passed")}const g=document.getElementById("procaptcha-container");l(g,{siteKey:void 0,captchaType:i.frictionless,theme:"dark",callback:d,"failed-callback":function(){console.log("Challenge failed")}});

package/dist/assets/index-BWsu-rGU.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";window.addEventListener("load",()=>{window.setIsError=e=>{const t=document.getElementById("messageContainer");t.style.color=e?"red":"black",t.style.display="block"},window.setMessage=e=>{document.getElementById("message").innerText=e},window.onLoggedIn=e=>{const t=new URL("/private",config.serverUrl).href;console.log("getting private resource with token ",e,"at",t),fetch(t,{method:"GET",headers:{Origin:"http://localhost:9232","Content-Type":"application/json",Authorization:`Bearer ${e}`}}).then(async n=>{try{const s=await n.json();n.status===200&&setMessage(s.message)}catch(s){console.log(s)}}).catch(n=>{console.log(n)})},window.onActionHandler=()=>{const e=document.getElementsByName("procaptcha-response");if(!e.length){alert("Must complete captcha");return}const t=e[0].value,n={email:document.getElementById("email").value,name:document.getElementById("name").value,password:document.getElementById("password").value,"procaptcha-response":t},s=new URL("signup",void 0).href;console.log("posting to",s,"with payload",n),fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n),contentType:"application/json"}).then(o=>new Promise(a=>o.json().then(l=>a({status:o.status,ok:o.ok,json:l})))).then(async({status:o,json:a,ok:l})=>{console.log("status",o,"json",a.message,"ok",l),console.log("json",a);try{o!==200?(setIsError(!0),setMessage(a.message)):(setIsError(!1),setMessage(a.message))}catch(c){console.log(c)}}).catch(o=>{console.log(o),setIsError(!0),setMessage("Error: "+o)})}});window.onCaptchaFailed=function(){console.log("Challenge failed")};window.onCaptchaVerified=e=>{console.log("Challenge passed")};

package/dist/assets/invisible-frictionless-explicit-DgCaJtPg.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";import"https://staging-js.prosopo.io/js/procaptcha.bundle.js";document.addEventListener("DOMContentLoaded",function(){if(window.procaptcha&&typeof window.procaptcha.render=="function")onloadCallback();else{const o=document.querySelector('script[src*="procaptcha.bundle.js"]');o&&o.addEventListener("load",onloadCallback)}});

package/dist/assets/invisible-image-explicit-DgCaJtPg.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";import"https://staging-js.prosopo.io/js/procaptcha.bundle.js";document.addEventListener("DOMContentLoaded",function(){if(window.procaptcha&&typeof window.procaptcha.render=="function")onloadCallback();else{const o=document.querySelector('script[src*="procaptcha.bundle.js"]');o&&o.addEventListener("load",onloadCallback)}});

package/dist/assets/invisible-pow-explicit-DgCaJtPg.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";import"https://staging-js.prosopo.io/js/procaptcha.bundle.js";document.addEventListener("DOMContentLoaded",function(){if(window.procaptcha&&typeof window.procaptcha.render=="function")onloadCallback();else{const o=document.querySelector('script[src*="procaptcha.bundle.js"]');o&&o.addEventListener("load",onloadCallback)}});

package/dist/assets/pow-O0V5Dqo9.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-B5Qt9EMX.js";import{C as p}from"./captchaType-CYBmmAZe.js";const y="modulepreload",w=function(o){return"/"+o},d={},E=function(i,c,C){let s=Promise.resolve();if(c&&c.length>0){document.getElementsByTagName("link");const e=document.querySelector("meta[property=csp-nonce]"),t=(e==null?void 0:e.nonce)||(e==null?void 0:e.getAttribute("nonce"));s=Promise.allSettled(c.map(n=>{if(n=w(n),n in d)return;d[n]=!0;const a=n.endsWith(".css"),f=a?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${n}"]${f}`))return;const r=document.createElement("link");if(r.rel=a?"stylesheet":y,a||(r.as="script"),r.crossOrigin="",r.href=n,t&&r.setAttribute("nonce",t),document.head.appendChild(r),a)return new Promise((h,m)=>{r.addEventListener("load",h),r.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${n}`)))})}))}function l(e){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return s.then(e=>{for(const t of e||[])t.status==="rejected"&&l(t.reason);return i().catch(l)})};async function v(){const o=(await E(async()=>{const{render:c}=await import("https://staging-js.prosopo.io/js/procaptcha.bundle.js");return{render:c}},[])).render;console.log("Captcha loaded");const i=document.getElementById("procaptcha-container");o(i,{siteKey:void 0,theme:"dark",callback:u,captchaType:p.pow})}window.captchaLoaded=v;function u(o){console.log("Captcha verified, output: "+JSON.stringify(o))}window.onCaptchaVerified=u;

package/dist/frictionless.html

@@ -1,344 +0,0 @@
-<!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"/>
-    <title>Procaptcha demo: Simple page</title>
-    <script type="text/javascript">
-        window.onCaptchaFailed = function () {
-            console.log('Challenge failed')
-        }
-    </script>
-
-
-    <style>
-      .nav-topbar {
-        background-color: #2196F3;
-        padding: 0;
-        margin-bottom: 20px;
-        transition: all 0.3s ease;
-        overflow: hidden;
-        max-height: 500px; /* Initial state - visible */
-        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-      }
-      .nav-topbar.collapsed {
-        max-height: 50px; /* Collapsed state - only show toggle button and title */
-      }
-      .nav-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 15px;
-        position: relative;
-      }
-      .nav-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 0;
-        position: relative;
-        z-index: 20;
-      }
-      .nav-title {
-        color: white;
-        font-size: 18px;
-        font-weight: bold;
-        margin: 0;
-        display: flex;
-        align-items: center;
-      }
-      .nav-title-text {
-        margin-right: 10px;
-      }
-      .nav-title-hint {
-        font-size: 14px;
-        font-weight: normal;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-      }
-      .collapsed .nav-title-hint {
-        opacity: 0.8;
-      }
-      .nav-toggle {
-        background-color: rgba(0,0,0,0.1);
-        color: white;
-        border: none;
-        padding: 5px 10px;
-        cursor: pointer;
-        border-radius: 4px;
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .nav-toggle:hover {
-        background-color: rgba(0,0,0,0.2);
-      }
-      .nav-toggle-icon {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        position: relative;
-      }
-      .nav-toggle-icon svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transition: opacity 0.3s ease;
-      }
-      .nav-toggle-icon .icon-collapse {
-        opacity: 1;
-      }
-      .nav-toggle-icon .icon-expand {
-        opacity: 0;
-      }
-      .collapsed .nav-toggle-icon .icon-collapse {
-        opacity: 0;
-      }
-      .collapsed .nav-toggle-icon .icon-expand {
-        opacity: 1;
-      }
-      .nav-content {
-        padding: 0 0 15px 0;
-        transition: opacity 0.3s ease;
-      }
-      .collapsed .nav-content {
-        opacity: 0;
-      }
-      .nav-row {
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 15px;
-      }
-      .nav-group {
-        flex: 1;
-        min-width: 250px;
-        margin-bottom: 10px;
-        margin-right: 20px;
-      }
-      .nav-group-title {
-        color: rgba(255,255,255,0.8);
-        font-size: 0.9em;
-        margin: 0 0 5px 0;
-        text-transform: uppercase;
-        font-weight: 500;
-      }
-      .nav-group-links {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      .nav-group-links li {
-        margin: 5px 0;
-      }
-      .nav-group-links a {
-        color: white;
-        text-decoration: none;
-        font-weight: bold;
-        padding: 5px 0;
-        display: inline-block;
-      }
-      .nav-group-links a:hover {
-        text-decoration: underline;
-      }
-      .nav-group-links .active {
-        border-bottom: 2px solid white;
-      }
-      .nav-group-links .disabled {
-        color: rgba(255,255,255,0.5);
-        cursor: not-allowed;
-      }
-      
-      @media (max-width: 768px) {
-        .nav-row {
-          flex-direction: column;
-        }
-        .nav-title-hint {
-          display: none;
-        }
-      }
-    </style>
-    <script type="module" crossorigin src="/assets/frictionless-BVSPLzWe.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
-    <link rel="modulepreload" crossorigin href="/assets/captchaType-CYBmmAZe.js">
-  </head>
-<body>
-
-          <div id="nav-topbar" class="nav-topbar">
-            <div class="nav-container">
-              <div id="nav-header" class="nav-header">
-                <h1 class="nav-title">
-                  <span class="nav-title-text">Procaptcha Demo Playground</span>
-                  <span class="nav-title-hint">(Click anywhere to see more examples)</span>
-                </h1>
-                <button id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
-                  <span class="nav-toggle-icon">
-                    <svg class="icon-collapse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <polyline points="18 15 12 9 6 15"></polyline>
-                    </svg>
-                    <svg class="icon-expand" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                  </span>
-                </button>
-              </div>
-              <div class="nav-content">
-                <div class="nav-row">
-                  
-      <div class="nav-section">
-        <h3 style="color: white; margin: 0 0 10px 0;">Standard Captchas</h3>
-        <div class="nav-row">
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Image</div>
-          <ul class="nav-group-links">
-            <li><a href="index.html">Implicit</a></li>
-            <li><span class="disabled" title="Coming Soon">Explicit</span></li>
-          </ul>
-        </div>
-      
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Pow</div>
-          <ul class="nav-group-links">
-            <li><span class="disabled" title="Coming Soon">Implicit</span></li>
-            <li><span class="disabled" title="Coming Soon">Explicit</span></li>
-          </ul>
-        </div>
-      
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Frictionless</div>
-          <ul class="nav-group-links">
-            <li><span class="disabled" title="Coming Soon">Implicit</span></li>
-            <li><a href="frictionless-explicit.html">Explicit</a></li>
-          </ul>
-        </div>
-      
-        </div>
-      </div>
-    
-                  
-      <div class="nav-section">
-        <h3 style="color: white; margin: 0 0 10px 0;">Invisible Captchas</h3>
-        <div class="nav-row">
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Image</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-image-implicit.html">Implicit</a></li>
-            <li><a href="invisible-image-explicit.html">Explicit</a></li>
-          </ul>
-        </div>
-      
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Pow</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-pow-implicit.html">Implicit</a></li>
-            <li><a href="invisible-pow-explicit.html">Explicit</a></li>
-          </ul>
-        </div>
-      
-          
-        <div class="nav-group">
-          <div class="nav-group-title">Frictionless</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-frictionless-implicit.html">Implicit</a></li>
-            <li><a href="invisible-frictionless-explicit.html">Explicit</a></li>
-          </ul>
-        </div>
-      
-        </div>
-      </div>
-    
-                </div>
-              </div>
-            </div>
-          </div>
-        
-
-<div class="mui-container">
-    <form action="undefined/signup" method="POST" class="mui-form">
-        <h1>Example Login Form</h1>
-        <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>
-</div>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const toggleBtn = document.getElementById('nav-toggle');
-        const navBar = document.getElementById('nav-topbar');
-        const navHeader = document.getElementById('nav-header');
-        
-        // Check if navigation was previously collapsed
-        const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
-        if (navCollapsed) {
-          navBar.classList.add('collapsed');
-        }
-        
-        // Function to expand the navigation
-        function expandNav() {
-          if (navBar.classList.contains('collapsed')) {
-            navBar.classList.remove('collapsed');
-            localStorage.setItem('navCollapsed', 'false');
-          }
-        }
-        
-        // Function to collapse the navigation
-        function collapseNav() {
-          if (!navBar.classList.contains('collapsed')) {
-            navBar.classList.add('collapsed');
-            localStorage.setItem('navCollapsed', 'true');
-          }
-        }
-        
-        // Function to toggle the navigation
-        function toggleNav() {
-          navBar.classList.toggle('collapsed');
-          localStorage.setItem('navCollapsed', navBar.classList.contains('collapsed'));
-        }
-        
-        // Toggle on button click
-        toggleBtn.addEventListener('click', function(e) {
-          e.stopPropagation(); // Prevent header click from firing
-          toggleNav();
-        });
-        
-        // Expand on toggle button hover when collapsed
-        toggleBtn.addEventListener('mouseenter', function() {
-          if (navBar.classList.contains('collapsed')) {
-            expandNav();
-          }
-        });
-        
-        // Toggle on header click
-        navHeader.addEventListener('click', function(e) {
-          // Don't toggle if a link within the header was clicked
-          if (e.target.tagName === 'A') {
-            return;
-          }
-          toggleNav();
-        });
-        
-        // Make the header appear clickable with cursor style
-        navHeader.style.cursor = 'pointer';
-      });
-    </script>
-  
-</body>
-</html>