@prosopo/client-bundle-example 2.5.1 → 2.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/captchaType-CYBmmAZe.js +1 -0
- package/dist/assets/dummy.txt +0 -0
- package/dist/assets/frictionless-BVSPLzWe.js +1 -0
- package/dist/assets/index-BWsu-rGU.js +1 -0
- package/dist/assets/invisible-frictionless-explicit-DgCaJtPg.js +1 -0
- package/dist/assets/invisible-image-explicit-DgCaJtPg.js +1 -0
- package/dist/assets/invisible-pow-explicit-DgCaJtPg.js +1 -0
- package/dist/assets/modulepreload-polyfill-B5Qt9EMX.js +1 -0
- package/dist/assets/pow-O0V5Dqo9.js +1 -0
- package/dist/frictionless.html +344 -0
- package/dist/index.html +349 -0
- package/dist/invisible-frictionless-explicit.html +534 -0
- package/dist/invisible-frictionless-implicit.html +426 -0
- package/dist/invisible-image-explicit.html +535 -0
- package/dist/invisible-image-implicit.html +426 -0
- package/dist/invisible-pow-explicit.html +535 -0
- package/dist/invisible-pow-implicit.html +426 -0
- package/dist/plugins/navigation-injector.ts +454 -0
- package/dist/pow.html +324 -0
- package/package.json +6 -6
- package/vite.config.ts +142 -0
|
@@ -0,0 +1,426 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Procaptcha Invisible POW Mode - Implicit Rendering</title>
|
|
5
|
+
<!-- Load the Procaptcha script -->
|
|
6
|
+
<script type="module" src="https://staging-js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: Arial, sans-serif;
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
}
|
|
13
|
+
form {
|
|
14
|
+
border: 1px solid #ddd;
|
|
15
|
+
padding: 20px;
|
|
16
|
+
border-radius: 5px;
|
|
17
|
+
}
|
|
18
|
+
label {
|
|
19
|
+
display: block;
|
|
20
|
+
margin-bottom: 5px;
|
|
21
|
+
}
|
|
22
|
+
input[type="text"],
|
|
23
|
+
input[type="email"] {
|
|
24
|
+
width: 100%;
|
|
25
|
+
padding: 8px;
|
|
26
|
+
margin-bottom: 15px;
|
|
27
|
+
border: 1px solid #ccc;
|
|
28
|
+
border-radius: 4px;
|
|
29
|
+
}
|
|
30
|
+
button {
|
|
31
|
+
background-color: #4CAF50;
|
|
32
|
+
color: white;
|
|
33
|
+
padding: 10px 15px;
|
|
34
|
+
border: none;
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
}
|
|
38
|
+
button:hover {
|
|
39
|
+
background-color: #45a049;
|
|
40
|
+
}
|
|
41
|
+
#result {
|
|
42
|
+
margin-top: 15px;
|
|
43
|
+
padding: 10px;
|
|
44
|
+
border: 1px solid #ddd;
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
background-color: #f9f9f9;
|
|
47
|
+
display: none;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
<script type="text/javascript">
|
|
51
|
+
function onSubmit(token) {
|
|
52
|
+
console.log('Procaptcha verified, token: ' + token);
|
|
53
|
+
|
|
54
|
+
// Get form values
|
|
55
|
+
const name = document.getElementById('name').value;
|
|
56
|
+
const email = document.getElementById('email').value;
|
|
57
|
+
|
|
58
|
+
const resultElement = document.getElementById('result');
|
|
59
|
+
resultElement.textContent = `Form submitted with:
|
|
60
|
+
- Name: ${name}
|
|
61
|
+
- Email: ${email}
|
|
62
|
+
- Procaptcha verified: Yes`;
|
|
63
|
+
resultElement.style.display = 'block';
|
|
64
|
+
|
|
65
|
+
// Prevent actual form submission
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<style>
|
|
71
|
+
.nav-topbar {
|
|
72
|
+
background-color: #2196F3;
|
|
73
|
+
padding: 0;
|
|
74
|
+
margin-bottom: 20px;
|
|
75
|
+
transition: all 0.3s ease;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
max-height: 500px; /* Initial state - visible */
|
|
78
|
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
79
|
+
}
|
|
80
|
+
.nav-topbar.collapsed {
|
|
81
|
+
max-height: 50px; /* Collapsed state - only show toggle button and title */
|
|
82
|
+
}
|
|
83
|
+
.nav-container {
|
|
84
|
+
max-width: 1200px;
|
|
85
|
+
margin: 0 auto;
|
|
86
|
+
padding: 0 15px;
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
.nav-header {
|
|
90
|
+
display: flex;
|
|
91
|
+
justify-content: space-between;
|
|
92
|
+
align-items: center;
|
|
93
|
+
padding: 10px 0;
|
|
94
|
+
position: relative;
|
|
95
|
+
z-index: 20;
|
|
96
|
+
}
|
|
97
|
+
.nav-title {
|
|
98
|
+
color: white;
|
|
99
|
+
font-size: 18px;
|
|
100
|
+
font-weight: bold;
|
|
101
|
+
margin: 0;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
}
|
|
105
|
+
.nav-title-text {
|
|
106
|
+
margin-right: 10px;
|
|
107
|
+
}
|
|
108
|
+
.nav-title-hint {
|
|
109
|
+
font-size: 14px;
|
|
110
|
+
font-weight: normal;
|
|
111
|
+
opacity: 0;
|
|
112
|
+
transition: opacity 0.3s ease;
|
|
113
|
+
}
|
|
114
|
+
.collapsed .nav-title-hint {
|
|
115
|
+
opacity: 0.8;
|
|
116
|
+
}
|
|
117
|
+
.nav-toggle {
|
|
118
|
+
background-color: rgba(0,0,0,0.1);
|
|
119
|
+
color: white;
|
|
120
|
+
border: none;
|
|
121
|
+
padding: 5px 10px;
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
border-radius: 4px;
|
|
124
|
+
z-index: 10;
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
}
|
|
129
|
+
.nav-toggle:hover {
|
|
130
|
+
background-color: rgba(0,0,0,0.2);
|
|
131
|
+
}
|
|
132
|
+
.nav-toggle-icon {
|
|
133
|
+
width: 24px;
|
|
134
|
+
height: 24px;
|
|
135
|
+
display: inline-block;
|
|
136
|
+
position: relative;
|
|
137
|
+
}
|
|
138
|
+
.nav-toggle-icon svg {
|
|
139
|
+
position: absolute;
|
|
140
|
+
top: 0;
|
|
141
|
+
left: 0;
|
|
142
|
+
transition: opacity 0.3s ease;
|
|
143
|
+
}
|
|
144
|
+
.nav-toggle-icon .icon-collapse {
|
|
145
|
+
opacity: 1;
|
|
146
|
+
}
|
|
147
|
+
.nav-toggle-icon .icon-expand {
|
|
148
|
+
opacity: 0;
|
|
149
|
+
}
|
|
150
|
+
.collapsed .nav-toggle-icon .icon-collapse {
|
|
151
|
+
opacity: 0;
|
|
152
|
+
}
|
|
153
|
+
.collapsed .nav-toggle-icon .icon-expand {
|
|
154
|
+
opacity: 1;
|
|
155
|
+
}
|
|
156
|
+
.nav-content {
|
|
157
|
+
padding: 0 0 15px 0;
|
|
158
|
+
transition: opacity 0.3s ease;
|
|
159
|
+
}
|
|
160
|
+
.collapsed .nav-content {
|
|
161
|
+
opacity: 0;
|
|
162
|
+
}
|
|
163
|
+
.nav-row {
|
|
164
|
+
display: flex;
|
|
165
|
+
flex-wrap: wrap;
|
|
166
|
+
margin-bottom: 15px;
|
|
167
|
+
}
|
|
168
|
+
.nav-group {
|
|
169
|
+
flex: 1;
|
|
170
|
+
min-width: 250px;
|
|
171
|
+
margin-bottom: 10px;
|
|
172
|
+
margin-right: 20px;
|
|
173
|
+
}
|
|
174
|
+
.nav-group-title {
|
|
175
|
+
color: rgba(255,255,255,0.8);
|
|
176
|
+
font-size: 0.9em;
|
|
177
|
+
margin: 0 0 5px 0;
|
|
178
|
+
text-transform: uppercase;
|
|
179
|
+
font-weight: 500;
|
|
180
|
+
}
|
|
181
|
+
.nav-group-links {
|
|
182
|
+
list-style: none;
|
|
183
|
+
margin: 0;
|
|
184
|
+
padding: 0;
|
|
185
|
+
}
|
|
186
|
+
.nav-group-links li {
|
|
187
|
+
margin: 5px 0;
|
|
188
|
+
}
|
|
189
|
+
.nav-group-links a {
|
|
190
|
+
color: white;
|
|
191
|
+
text-decoration: none;
|
|
192
|
+
font-weight: bold;
|
|
193
|
+
padding: 5px 0;
|
|
194
|
+
display: inline-block;
|
|
195
|
+
}
|
|
196
|
+
.nav-group-links a:hover {
|
|
197
|
+
text-decoration: underline;
|
|
198
|
+
}
|
|
199
|
+
.nav-group-links .active {
|
|
200
|
+
border-bottom: 2px solid white;
|
|
201
|
+
}
|
|
202
|
+
.nav-group-links .disabled {
|
|
203
|
+
color: rgba(255,255,255,0.5);
|
|
204
|
+
cursor: not-allowed;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
@media (max-width: 768px) {
|
|
208
|
+
.nav-row {
|
|
209
|
+
flex-direction: column;
|
|
210
|
+
}
|
|
211
|
+
.nav-title-hint {
|
|
212
|
+
display: none;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
</style>
|
|
216
|
+
<script async type="module" crossorigin src="/assets/modulepreload-polyfill-B5Qt9EMX.js"></script>
|
|
217
|
+
</head>
|
|
218
|
+
<body>
|
|
219
|
+
|
|
220
|
+
<div id="nav-topbar" class="nav-topbar">
|
|
221
|
+
<div class="nav-container">
|
|
222
|
+
<div id="nav-header" class="nav-header">
|
|
223
|
+
<h1 class="nav-title">
|
|
224
|
+
<span class="nav-title-text">Procaptcha Demo Playground</span>
|
|
225
|
+
<span class="nav-title-hint">(Click anywhere to see more examples)</span>
|
|
226
|
+
</h1>
|
|
227
|
+
<button id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
|
|
228
|
+
<span class="nav-toggle-icon">
|
|
229
|
+
<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">
|
|
230
|
+
<polyline points="18 15 12 9 6 15"></polyline>
|
|
231
|
+
</svg>
|
|
232
|
+
<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">
|
|
233
|
+
<polyline points="6 9 12 15 18 9"></polyline>
|
|
234
|
+
</svg>
|
|
235
|
+
</span>
|
|
236
|
+
</button>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="nav-content">
|
|
239
|
+
<div class="nav-row">
|
|
240
|
+
|
|
241
|
+
<div class="nav-section">
|
|
242
|
+
<h3 style="color: white; margin: 0 0 10px 0;">Standard Captchas</h3>
|
|
243
|
+
<div class="nav-row">
|
|
244
|
+
|
|
245
|
+
<div class="nav-group">
|
|
246
|
+
<div class="nav-group-title">Image</div>
|
|
247
|
+
<ul class="nav-group-links">
|
|
248
|
+
<li><a href="index.html">Implicit</a></li>
|
|
249
|
+
<li><span class="disabled" title="Coming Soon">Explicit</span></li>
|
|
250
|
+
</ul>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
<div class="nav-group">
|
|
255
|
+
<div class="nav-group-title">Pow</div>
|
|
256
|
+
<ul class="nav-group-links">
|
|
257
|
+
<li><span class="disabled" title="Coming Soon">Implicit</span></li>
|
|
258
|
+
<li><span class="disabled" title="Coming Soon">Explicit</span></li>
|
|
259
|
+
</ul>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
<div class="nav-group">
|
|
264
|
+
<div class="nav-group-title">Frictionless</div>
|
|
265
|
+
<ul class="nav-group-links">
|
|
266
|
+
<li><span class="disabled" title="Coming Soon">Implicit</span></li>
|
|
267
|
+
<li><a href="frictionless-explicit.html">Explicit</a></li>
|
|
268
|
+
</ul>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
<div class="nav-section">
|
|
276
|
+
<h3 style="color: white; margin: 0 0 10px 0;">Invisible Captchas</h3>
|
|
277
|
+
<div class="nav-row">
|
|
278
|
+
|
|
279
|
+
<div class="nav-group">
|
|
280
|
+
<div class="nav-group-title">Image</div>
|
|
281
|
+
<ul class="nav-group-links">
|
|
282
|
+
<li><a href="invisible-image-implicit.html">Implicit</a></li>
|
|
283
|
+
<li><a href="invisible-image-explicit.html">Explicit</a></li>
|
|
284
|
+
</ul>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
<div class="nav-group">
|
|
289
|
+
<div class="nav-group-title">Pow</div>
|
|
290
|
+
<ul class="nav-group-links">
|
|
291
|
+
<li><a href="invisible-pow-implicit.html" class="active">Implicit</a></li>
|
|
292
|
+
<li><a href="invisible-pow-explicit.html">Explicit</a></li>
|
|
293
|
+
</ul>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
<div class="nav-group">
|
|
298
|
+
<div class="nav-group-title">Frictionless</div>
|
|
299
|
+
<ul class="nav-group-links">
|
|
300
|
+
<li><a href="invisible-frictionless-implicit.html">Implicit</a></li>
|
|
301
|
+
<li><a href="invisible-frictionless-explicit.html">Explicit</a></li>
|
|
302
|
+
</ul>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<h1>Procaptcha Invisible POW Mode</h1>
|
|
314
|
+
<p>This example demonstrates how to use Procaptcha in invisible POW mode with implicit rendering.</p>
|
|
315
|
+
|
|
316
|
+
<form id="demo-form" action="javascript:void(0);" method="POST">
|
|
317
|
+
<div>
|
|
318
|
+
<label for="name">Name:</label>
|
|
319
|
+
<input type="text" id="name" name="name" placeholder="Your name" required />
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<div>
|
|
323
|
+
<label for="email">Email:</label>
|
|
324
|
+
<input type="email" id="email" name="email" placeholder="Your email" required />
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<!-- Submit button with Procaptcha attributes -->
|
|
328
|
+
<!-- The p-procaptcha class and data-sitekey attribute are required -->
|
|
329
|
+
<button
|
|
330
|
+
class="p-procaptcha"
|
|
331
|
+
data-sitekey="undefined"
|
|
332
|
+
data-callback="onSubmit"
|
|
333
|
+
data-captcha-type="pow">
|
|
334
|
+
Submit
|
|
335
|
+
</button>
|
|
336
|
+
</form>
|
|
337
|
+
|
|
338
|
+
<div id="result"></div>
|
|
339
|
+
|
|
340
|
+
<div style="margin-top: 20px;">
|
|
341
|
+
<h2>How It Works</h2>
|
|
342
|
+
<p>This example demonstrates how to use Procaptcha in invisible POW mode with implicit rendering:</p>
|
|
343
|
+
<ol>
|
|
344
|
+
<li>Include the Procaptcha script in the head of your document</li>
|
|
345
|
+
<li>Add the <code>p-procaptcha</code> class to your submit button</li>
|
|
346
|
+
<li>Add the <code>data-sitekey</code> attribute with your site key</li>
|
|
347
|
+
<li>Add the <code>data-callback</code> attribute with the name of your callback function</li>
|
|
348
|
+
<li>The CAPTCHA verification happens invisibly when the user clicks the button</li>
|
|
349
|
+
</ol>
|
|
350
|
+
<p>The key elements are:</p>
|
|
351
|
+
<pre>
|
|
352
|
+
<script type="module" src="./assets/procaptcha.bundle.js" async defer></script>
|
|
353
|
+
|
|
354
|
+
<button
|
|
355
|
+
class="p-procaptcha"
|
|
356
|
+
data-sitekey="undefined"
|
|
357
|
+
data-callback="onSubmit"
|
|
358
|
+
data-captcha-type="pow">
|
|
359
|
+
Submit
|
|
360
|
+
</button>
|
|
361
|
+
</pre>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<script>
|
|
365
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
366
|
+
const toggleBtn = document.getElementById('nav-toggle');
|
|
367
|
+
const navBar = document.getElementById('nav-topbar');
|
|
368
|
+
const navHeader = document.getElementById('nav-header');
|
|
369
|
+
|
|
370
|
+
// Check if navigation was previously collapsed
|
|
371
|
+
const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
|
|
372
|
+
if (navCollapsed) {
|
|
373
|
+
navBar.classList.add('collapsed');
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
// Function to expand the navigation
|
|
377
|
+
function expandNav() {
|
|
378
|
+
if (navBar.classList.contains('collapsed')) {
|
|
379
|
+
navBar.classList.remove('collapsed');
|
|
380
|
+
localStorage.setItem('navCollapsed', 'false');
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
// Function to collapse the navigation
|
|
385
|
+
function collapseNav() {
|
|
386
|
+
if (!navBar.classList.contains('collapsed')) {
|
|
387
|
+
navBar.classList.add('collapsed');
|
|
388
|
+
localStorage.setItem('navCollapsed', 'true');
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
// Function to toggle the navigation
|
|
393
|
+
function toggleNav() {
|
|
394
|
+
navBar.classList.toggle('collapsed');
|
|
395
|
+
localStorage.setItem('navCollapsed', navBar.classList.contains('collapsed'));
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
// Toggle on button click
|
|
399
|
+
toggleBtn.addEventListener('click', function(e) {
|
|
400
|
+
e.stopPropagation(); // Prevent header click from firing
|
|
401
|
+
toggleNav();
|
|
402
|
+
});
|
|
403
|
+
|
|
404
|
+
// Expand on toggle button hover when collapsed
|
|
405
|
+
toggleBtn.addEventListener('mouseenter', function() {
|
|
406
|
+
if (navBar.classList.contains('collapsed')) {
|
|
407
|
+
expandNav();
|
|
408
|
+
}
|
|
409
|
+
});
|
|
410
|
+
|
|
411
|
+
// Toggle on header click
|
|
412
|
+
navHeader.addEventListener('click', function(e) {
|
|
413
|
+
// Don't toggle if a link within the header was clicked
|
|
414
|
+
if (e.target.tagName === 'A') {
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
417
|
+
toggleNav();
|
|
418
|
+
});
|
|
419
|
+
|
|
420
|
+
// Make the header appear clickable with cursor style
|
|
421
|
+
navHeader.style.cursor = 'pointer';
|
|
422
|
+
});
|
|
423
|
+
</script>
|
|
424
|
+
|
|
425
|
+
</body>
|
|
426
|
+
</html>
|