@prosopo/client-bundle-example 2.5.0 → 2.5.3

package/dist/assets/captchaType-CYBmmAZe.js

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

package/dist/assets/frictionless-xzpEe3JN.js

@@ -0,0 +1 @@
+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("Captcha verified, output: "+JSON.stringify(e))}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-DN-EY_8b.js

@@ -0,0 +1 @@
+import"./modulepreload-polyfill-B5Qt9EMX.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 s=>{try{const n=await s.json();s.status===200&&setMessage(n.message)}catch(n){console.log(n)}}).catch(s=>{console.log(s)})},window.onActionHandler=()=>{const e=document.getElementsByName("procaptcha-response");if(!e.length){alert("Must complete captcha");return}const o=e[0].value,s={email:document.getElementById("email").value,name:document.getElementById("name").value,password:document.getElementById("password").value,"procaptcha-response":o},n=new URL("signup",void 0).href;console.log("posting to",n,"with payload",s),fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s),contentType:"application/json"}).then(t=>new Promise(a=>t.json().then(r=>a({status:t.status,ok:t.ok,json:r})))).then(async({status:t,json:a,ok:r})=>{console.log("status",t,"json",a.message,"ok",r),console.log("json",a);try{t!==200?(setIsError(!0),setMessage(a.message)):(setIsError(!1),setMessage(a.message))}catch(c){console.log(c)}}).catch(t=>{console.log(t),setIsError(!0),setMessage("Error: "+t)})},console.log("here")});

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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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/modulepreload-polyfill-B5Qt9EMX.js

@@ -0,0 +1 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();

package/dist/assets/pow-DpBboekQ.js

@@ -0,0 +1 @@
+import"./modulepreload-polyfill-B5Qt9EMX.js";import{C as h}from"./captchaType-CYBmmAZe.js";const p="modulepreload",y=function(o){return"/"+o},d={},E=function(i,c,g){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=y(n),n in d)return;d[n]=!0;const a=n.endsWith(".css"),u=a?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${n}"]${u}`))return;const r=document.createElement("link");if(r.rel=a?"stylesheet":p,a||(r.as="script"),r.crossOrigin="",r.href=n,t&&r.setAttribute("nonce",t),document.head.appendChild(r),a)return new Promise((m,f)=>{r.addEventListener("load",m),r.addEventListener("error",()=>f(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:w,captchaType:h.pow})}window.captchaLoaded=v;function w(o){console.log("Captcha verified, output: "+JSON.stringify(o))}

package/dist/frictionless.html

@@ -0,0 +1,344 @@
+<!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-xzpEe3JN.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>