@prosopo/client-bundle-example 2.5.0 → 2.5.3
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-xzpEe3JN.js +1 -0
- package/dist/assets/index-DN-EY_8b.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-DpBboekQ.js +1 -0
- package/dist/frictionless.html +344 -0
- package/dist/index.html +351 -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 +3 -3
- package/vite.config.ts +142 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
|
|
5
|
+
<title>Procaptcha demo: Implicit Rendering</title>
|
|
6
|
+
<script id="procaptchaScript" type="module" src="https://staging-js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
|
|
7
|
+
<script type="text/javascript">
|
|
8
|
+
window.onCaptchaFailed = function () {
|
|
9
|
+
console.log('Challenge failed')
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<style>
|
|
15
|
+
.nav-topbar {
|
|
16
|
+
background-color: #2196F3;
|
|
17
|
+
padding: 0;
|
|
18
|
+
margin-bottom: 20px;
|
|
19
|
+
transition: all 0.3s ease;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
max-height: 500px; /* Initial state - visible */
|
|
22
|
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
23
|
+
}
|
|
24
|
+
.nav-topbar.collapsed {
|
|
25
|
+
max-height: 50px; /* Collapsed state - only show toggle button and title */
|
|
26
|
+
}
|
|
27
|
+
.nav-container {
|
|
28
|
+
max-width: 1200px;
|
|
29
|
+
margin: 0 auto;
|
|
30
|
+
padding: 0 15px;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
.nav-header {
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: space-between;
|
|
36
|
+
align-items: center;
|
|
37
|
+
padding: 10px 0;
|
|
38
|
+
position: relative;
|
|
39
|
+
z-index: 20;
|
|
40
|
+
}
|
|
41
|
+
.nav-title {
|
|
42
|
+
color: white;
|
|
43
|
+
font-size: 18px;
|
|
44
|
+
font-weight: bold;
|
|
45
|
+
margin: 0;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
}
|
|
49
|
+
.nav-title-text {
|
|
50
|
+
margin-right: 10px;
|
|
51
|
+
}
|
|
52
|
+
.nav-title-hint {
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
font-weight: normal;
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transition: opacity 0.3s ease;
|
|
57
|
+
}
|
|
58
|
+
.collapsed .nav-title-hint {
|
|
59
|
+
opacity: 0.8;
|
|
60
|
+
}
|
|
61
|
+
.nav-toggle {
|
|
62
|
+
background-color: rgba(0,0,0,0.1);
|
|
63
|
+
color: white;
|
|
64
|
+
border: none;
|
|
65
|
+
padding: 5px 10px;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
z-index: 10;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
}
|
|
73
|
+
.nav-toggle:hover {
|
|
74
|
+
background-color: rgba(0,0,0,0.2);
|
|
75
|
+
}
|
|
76
|
+
.nav-toggle-icon {
|
|
77
|
+
width: 24px;
|
|
78
|
+
height: 24px;
|
|
79
|
+
display: inline-block;
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
.nav-toggle-icon svg {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 0;
|
|
85
|
+
left: 0;
|
|
86
|
+
transition: opacity 0.3s ease;
|
|
87
|
+
}
|
|
88
|
+
.nav-toggle-icon .icon-collapse {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
}
|
|
91
|
+
.nav-toggle-icon .icon-expand {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
}
|
|
94
|
+
.collapsed .nav-toggle-icon .icon-collapse {
|
|
95
|
+
opacity: 0;
|
|
96
|
+
}
|
|
97
|
+
.collapsed .nav-toggle-icon .icon-expand {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
.nav-content {
|
|
101
|
+
padding: 0 0 15px 0;
|
|
102
|
+
transition: opacity 0.3s ease;
|
|
103
|
+
}
|
|
104
|
+
.collapsed .nav-content {
|
|
105
|
+
opacity: 0;
|
|
106
|
+
}
|
|
107
|
+
.nav-row {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-wrap: wrap;
|
|
110
|
+
margin-bottom: 15px;
|
|
111
|
+
}
|
|
112
|
+
.nav-group {
|
|
113
|
+
flex: 1;
|
|
114
|
+
min-width: 250px;
|
|
115
|
+
margin-bottom: 10px;
|
|
116
|
+
margin-right: 20px;
|
|
117
|
+
}
|
|
118
|
+
.nav-group-title {
|
|
119
|
+
color: rgba(255,255,255,0.8);
|
|
120
|
+
font-size: 0.9em;
|
|
121
|
+
margin: 0 0 5px 0;
|
|
122
|
+
text-transform: uppercase;
|
|
123
|
+
font-weight: 500;
|
|
124
|
+
}
|
|
125
|
+
.nav-group-links {
|
|
126
|
+
list-style: none;
|
|
127
|
+
margin: 0;
|
|
128
|
+
padding: 0;
|
|
129
|
+
}
|
|
130
|
+
.nav-group-links li {
|
|
131
|
+
margin: 5px 0;
|
|
132
|
+
}
|
|
133
|
+
.nav-group-links a {
|
|
134
|
+
color: white;
|
|
135
|
+
text-decoration: none;
|
|
136
|
+
font-weight: bold;
|
|
137
|
+
padding: 5px 0;
|
|
138
|
+
display: inline-block;
|
|
139
|
+
}
|
|
140
|
+
.nav-group-links a:hover {
|
|
141
|
+
text-decoration: underline;
|
|
142
|
+
}
|
|
143
|
+
.nav-group-links .active {
|
|
144
|
+
border-bottom: 2px solid white;
|
|
145
|
+
}
|
|
146
|
+
.nav-group-links .disabled {
|
|
147
|
+
color: rgba(255,255,255,0.5);
|
|
148
|
+
cursor: not-allowed;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@media (max-width: 768px) {
|
|
152
|
+
.nav-row {
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
}
|
|
155
|
+
.nav-title-hint {
|
|
156
|
+
display: none;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
</style>
|
|
160
|
+
<script type="module" crossorigin src="/assets/index-DN-EY_8b.js"></script>
|
|
161
|
+
<link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
162
|
+
</head>
|
|
163
|
+
<body>
|
|
164
|
+
|
|
165
|
+
<div id="nav-topbar" class="nav-topbar">
|
|
166
|
+
<div class="nav-container">
|
|
167
|
+
<div id="nav-header" class="nav-header">
|
|
168
|
+
<h1 class="nav-title">
|
|
169
|
+
<span class="nav-title-text">Procaptcha Demo Playground</span>
|
|
170
|
+
<span class="nav-title-hint">(Click anywhere to see more examples)</span>
|
|
171
|
+
</h1>
|
|
172
|
+
<button id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
|
|
173
|
+
<span class="nav-toggle-icon">
|
|
174
|
+
<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">
|
|
175
|
+
<polyline points="18 15 12 9 6 15"></polyline>
|
|
176
|
+
</svg>
|
|
177
|
+
<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">
|
|
178
|
+
<polyline points="6 9 12 15 18 9"></polyline>
|
|
179
|
+
</svg>
|
|
180
|
+
</span>
|
|
181
|
+
</button>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="nav-content">
|
|
184
|
+
<div class="nav-row">
|
|
185
|
+
|
|
186
|
+
<div class="nav-section">
|
|
187
|
+
<h3 style="color: white; margin: 0 0 10px 0;">Standard Captchas</h3>
|
|
188
|
+
<div class="nav-row">
|
|
189
|
+
|
|
190
|
+
<div class="nav-group">
|
|
191
|
+
<div class="nav-group-title">Image</div>
|
|
192
|
+
<ul class="nav-group-links">
|
|
193
|
+
<li><a href="index.html" class="active">Implicit</a></li>
|
|
194
|
+
<li><span class="disabled" title="Coming Soon">Explicit</span></li>
|
|
195
|
+
</ul>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
<div class="nav-group">
|
|
200
|
+
<div class="nav-group-title">Pow</div>
|
|
201
|
+
<ul class="nav-group-links">
|
|
202
|
+
<li><span class="disabled" title="Coming Soon">Implicit</span></li>
|
|
203
|
+
<li><span class="disabled" title="Coming Soon">Explicit</span></li>
|
|
204
|
+
</ul>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
<div class="nav-group">
|
|
209
|
+
<div class="nav-group-title">Frictionless</div>
|
|
210
|
+
<ul class="nav-group-links">
|
|
211
|
+
<li><span class="disabled" title="Coming Soon">Implicit</span></li>
|
|
212
|
+
<li><a href="frictionless-explicit.html">Explicit</a></li>
|
|
213
|
+
</ul>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
<div class="nav-section">
|
|
221
|
+
<h3 style="color: white; margin: 0 0 10px 0;">Invisible Captchas</h3>
|
|
222
|
+
<div class="nav-row">
|
|
223
|
+
|
|
224
|
+
<div class="nav-group">
|
|
225
|
+
<div class="nav-group-title">Image</div>
|
|
226
|
+
<ul class="nav-group-links">
|
|
227
|
+
<li><a href="invisible-image-implicit.html">Implicit</a></li>
|
|
228
|
+
<li><a href="invisible-image-explicit.html">Explicit</a></li>
|
|
229
|
+
</ul>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
<div class="nav-group">
|
|
234
|
+
<div class="nav-group-title">Pow</div>
|
|
235
|
+
<ul class="nav-group-links">
|
|
236
|
+
<li><a href="invisible-pow-implicit.html">Implicit</a></li>
|
|
237
|
+
<li><a href="invisible-pow-explicit.html">Explicit</a></li>
|
|
238
|
+
</ul>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
<div class="nav-group">
|
|
243
|
+
<div class="nav-group-title">Frictionless</div>
|
|
244
|
+
<ul class="nav-group-links">
|
|
245
|
+
<li><a href="invisible-frictionless-implicit.html">Implicit</a></li>
|
|
246
|
+
<li><a href="invisible-frictionless-explicit.html">Explicit</a></li>
|
|
247
|
+
</ul>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
<div class="mui-container">
|
|
260
|
+
<form action="undefined/signup" method="POST" class="mui-form">
|
|
261
|
+
<h1>Example Login Form</h1>
|
|
262
|
+
<div class="mui-textfield mui-textfield--float-label">
|
|
263
|
+
<label for="name">Name</label>
|
|
264
|
+
<input id="name" type="text" name="name" required/>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="mui-textfield mui-textfield--float-label">
|
|
267
|
+
<label for="email">Email Address</label>
|
|
268
|
+
<input id="email" type="email" name="email" required/>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="mui-textfield mui-textfield--float-label">
|
|
271
|
+
<label for="password">Password</label>
|
|
272
|
+
<input id="password" type="password" name="password" required/>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="mui-textfield mui-textfield--float-label">
|
|
275
|
+
<!-- Dev sitekey -->
|
|
276
|
+
<div
|
|
277
|
+
class="procaptcha"
|
|
278
|
+
data-theme="light"
|
|
279
|
+
data-sitekey="undefined"
|
|
280
|
+
data-failed-callback="onCaptchaFailed"
|
|
281
|
+
data-captcha-type="image"
|
|
282
|
+
></div>
|
|
283
|
+
</div>
|
|
284
|
+
<div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
|
|
285
|
+
<button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
|
|
286
|
+
</form>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<script>
|
|
290
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
291
|
+
const toggleBtn = document.getElementById('nav-toggle');
|
|
292
|
+
const navBar = document.getElementById('nav-topbar');
|
|
293
|
+
const navHeader = document.getElementById('nav-header');
|
|
294
|
+
|
|
295
|
+
// Check if navigation was previously collapsed
|
|
296
|
+
const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
|
|
297
|
+
if (navCollapsed) {
|
|
298
|
+
navBar.classList.add('collapsed');
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
// Function to expand the navigation
|
|
302
|
+
function expandNav() {
|
|
303
|
+
if (navBar.classList.contains('collapsed')) {
|
|
304
|
+
navBar.classList.remove('collapsed');
|
|
305
|
+
localStorage.setItem('navCollapsed', 'false');
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
// Function to collapse the navigation
|
|
310
|
+
function collapseNav() {
|
|
311
|
+
if (!navBar.classList.contains('collapsed')) {
|
|
312
|
+
navBar.classList.add('collapsed');
|
|
313
|
+
localStorage.setItem('navCollapsed', 'true');
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// Function to toggle the navigation
|
|
318
|
+
function toggleNav() {
|
|
319
|
+
navBar.classList.toggle('collapsed');
|
|
320
|
+
localStorage.setItem('navCollapsed', navBar.classList.contains('collapsed'));
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Toggle on button click
|
|
324
|
+
toggleBtn.addEventListener('click', function(e) {
|
|
325
|
+
e.stopPropagation(); // Prevent header click from firing
|
|
326
|
+
toggleNav();
|
|
327
|
+
});
|
|
328
|
+
|
|
329
|
+
// Expand on toggle button hover when collapsed
|
|
330
|
+
toggleBtn.addEventListener('mouseenter', function() {
|
|
331
|
+
if (navBar.classList.contains('collapsed')) {
|
|
332
|
+
expandNav();
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
// Toggle on header click
|
|
337
|
+
navHeader.addEventListener('click', function(e) {
|
|
338
|
+
// Don't toggle if a link within the header was clicked
|
|
339
|
+
if (e.target.tagName === 'A') {
|
|
340
|
+
return;
|
|
341
|
+
}
|
|
342
|
+
toggleNav();
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
// Make the header appear clickable with cursor style
|
|
346
|
+
navHeader.style.cursor = 'pointer';
|
|
347
|
+
});
|
|
348
|
+
</script>
|
|
349
|
+
|
|
350
|
+
</body>
|
|
351
|
+
</html>
|