@prosopo/client-bundle-example 2.5.5 → 2.8.0

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.
Files changed (137) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/assets/ProcaptchaWidget-DrBDhP6X.js +636 -0
  3. package/dist/assets/ProcaptchaWidget-rAM-9Rap.js +360 -0
  4. package/dist/assets/Signer-DP9drQ55.js +23 -0
  5. package/dist/assets/_commonjsHelpers-DaMA6jEr.js +8 -0
  6. package/dist/assets/asU8a-CJdNkNEq.js +9 -0
  7. package/dist/assets/bip39-Du2cANEV.js +365 -0
  8. package/dist/assets/browser-ponyfill-Dy1JBTMg.js +339 -0
  9. package/dist/assets/captcha-BhkVCEXM.css +1 -0
  10. package/dist/assets/captchaComponentProvider-DmV1WTrT.js +1242 -0
  11. package/dist/assets/captchaRenderer-RIsSZXCC.js +70 -0
  12. package/dist/assets/components.d.ts +5 -0
  13. package/dist/assets/components.d.ts.map +1 -0
  14. package/dist/assets/emotion-element-5486c51c.browser.esm-C3u8NMUC.js +1807 -0
  15. package/dist/assets/fp.esm-DYWeNGcH.js +1654 -0
  16. package/dist/assets/frictionless-explicit-Dq_sNGRK.js +1 -0
  17. package/dist/assets/frictionless-implicit-Dq_sNGRK.js +1 -0
  18. package/dist/assets/hash-_rWungeW.js +1268 -0
  19. package/dist/assets/i18nFrontend-CsPT71ro.js +2273 -0
  20. package/dist/assets/image-explicit-DQvfVB7-.js +4 -0
  21. package/dist/assets/image-implicit-Bwa9QJO5.js +1 -0
  22. package/dist/assets/index-BVr9fC_3.js +4386 -0
  23. package/dist/assets/index-BjRdPnnE.js +1198 -0
  24. package/dist/assets/index-Cu5oL_7b.js +81 -0
  25. package/dist/assets/index-Dpt_5E72.js +1 -0
  26. package/dist/assets/index-DxIFpl6U.js +5416 -0
  27. package/dist/assets/index-QVME9Prx.js +32 -0
  28. package/dist/assets/index-Wgw2GQWq.js +596 -0
  29. package/dist/assets/index.d.ts +16 -0
  30. package/dist/assets/index.d.ts.map +1 -0
  31. package/dist/assets/invisible-frictionless-explicit-DugBtRe4.js +4 -0
  32. package/dist/assets/invisible-frictionless-implicit-DYYos8W9.js +1 -0
  33. package/dist/assets/invisible-image-explicit-C5Z4gSb1.js +4 -0
  34. package/dist/assets/invisible-image-implicit-DfNFNlFj.js +1 -0
  35. package/dist/assets/invisible-pow-explicit-DjqGWFUb.js +4 -0
  36. package/dist/assets/invisible-pow-implicit-BRXL14FH.js +4 -0
  37. package/dist/assets/locales/ar/translation.json +56 -0
  38. package/dist/assets/locales/az/translation.json +56 -0
  39. package/dist/assets/locales/cs/translation.json +56 -0
  40. package/dist/assets/locales/de/translation.json +56 -0
  41. package/dist/assets/locales/el/translation.json +56 -0
  42. package/dist/assets/locales/en/translation.json +56 -0
  43. package/dist/assets/locales/es/translation.json +56 -0
  44. package/dist/assets/locales/fi/translation.json +56 -0
  45. package/dist/assets/locales/fr/translation.json +56 -0
  46. package/dist/assets/locales/hi/translation.json +56 -0
  47. package/dist/assets/locales/hu/translation.json +56 -0
  48. package/dist/assets/locales/id/translation.json +56 -0
  49. package/dist/assets/locales/it/translation.json +56 -0
  50. package/dist/assets/locales/ja/translation.json +56 -0
  51. package/dist/assets/locales/jv/translation.json +56 -0
  52. package/dist/assets/locales/ko/translation.json +56 -0
  53. package/dist/assets/locales/ml/translation.json +56 -0
  54. package/dist/assets/locales/ms/translation.json +56 -0
  55. package/dist/assets/locales/nl/translation.json +56 -0
  56. package/dist/assets/locales/no/translation.json +56 -0
  57. package/dist/assets/locales/pl/translation.json +56 -0
  58. package/dist/assets/locales/pt/translation.json +56 -0
  59. package/dist/assets/locales/pt-br/translation.json +56 -0
  60. package/dist/assets/locales/ro/translation.json +56 -0
  61. package/dist/assets/locales/ru/translation.json +56 -0
  62. package/dist/assets/locales/sr/translation.json +56 -0
  63. package/dist/assets/locales/sv/translation.json +56 -0
  64. package/dist/assets/locales/th/translation.json +56 -0
  65. package/dist/assets/locales/tr/translation.json +56 -0
  66. package/dist/assets/locales/uk/translation.json +56 -0
  67. package/dist/assets/locales/vi/translation.json +56 -0
  68. package/dist/assets/locales/zh-cn/translation.json +56 -0
  69. package/dist/assets/pow-explicit-BexxbnHM.js +4 -0
  70. package/dist/assets/pow-implicit-Dpt_5E72.js +1 -0
  71. package/dist/assets/procaptcha.bundle.js +7 -0
  72. package/dist/assets/spread-DEmVz7RJ.js +15 -0
  73. package/dist/assets/tests/util/captchaType.test.d.ts +2 -0
  74. package/dist/assets/tests/util/captchaType.test.d.ts.map +1 -0
  75. package/dist/assets/tests/util/config.test.d.ts +2 -0
  76. package/dist/assets/tests/util/config.test.d.ts.map +1 -0
  77. package/dist/assets/tests/util/renderLogic.test.d.ts +2 -0
  78. package/dist/assets/tests/util/renderLogic.test.d.ts.map +1 -0
  79. package/dist/assets/toU8a-C68WUzs_.js +24 -0
  80. package/dist/assets/translations-DEL070wJ.js +2918 -0
  81. package/dist/assets/useTranslation-CJplXtqb.js +158 -0
  82. package/dist/assets/util/captcha/captchaComponentProvider.d.ts +8 -0
  83. package/dist/assets/util/captcha/captchaComponentProvider.d.ts.map +1 -0
  84. package/dist/assets/util/captcha/captchaComponentsList.d.ts +6 -0
  85. package/dist/assets/util/captcha/captchaComponentsList.d.ts.map +1 -0
  86. package/dist/assets/util/captcha/captchaProps.d.ts +9 -0
  87. package/dist/assets/util/captcha/captchaProps.d.ts.map +1 -0
  88. package/dist/assets/util/captcha/captchaRenderer.d.ts +24 -0
  89. package/dist/assets/util/captcha/captchaRenderer.d.ts.map +1 -0
  90. package/dist/assets/util/captcha/captchaType.d.ts +2 -0
  91. package/dist/assets/util/captcha/captchaType.d.ts.map +1 -0
  92. package/dist/assets/util/captcha/components/frictionlessCaptcha.d.ts +4 -0
  93. package/dist/assets/util/captcha/components/frictionlessCaptcha.d.ts.map +1 -0
  94. package/dist/assets/util/captcha/components/imageCaptcha.d.ts +4 -0
  95. package/dist/assets/util/captcha/components/imageCaptcha.d.ts.map +1 -0
  96. package/dist/assets/util/captcha/components/powCaptcha.d.ts +4 -0
  97. package/dist/assets/util/captcha/components/powCaptcha.d.ts.map +1 -0
  98. package/dist/assets/util/config.d.ts +6 -0
  99. package/dist/assets/util/config.d.ts.map +1 -0
  100. package/dist/assets/util/configCreator.d.ts +5 -0
  101. package/dist/assets/util/configCreator.d.ts.map +1 -0
  102. package/dist/assets/util/language.d.ts +3 -0
  103. package/dist/assets/util/language.d.ts.map +1 -0
  104. package/dist/assets/util/timeout.d.ts +3 -0
  105. package/dist/assets/util/timeout.d.ts.map +1 -0
  106. package/dist/assets/util/widgetFactory.d.ts +18 -0
  107. package/dist/assets/util/widgetFactory.d.ts.map +1 -0
  108. package/dist/assets/util/widgetThemeResolver.d.ts +9 -0
  109. package/dist/assets/util/widgetThemeResolver.d.ts.map +1 -0
  110. package/dist/frictionless-explicit.html +881 -0
  111. package/dist/frictionless-implicit.html +874 -0
  112. package/dist/image-explicit.html +877 -0
  113. package/dist/index.html +575 -74
  114. package/dist/invisible-frictionless-explicit.html +626 -283
  115. package/dist/invisible-frictionless-implicit.html +631 -173
  116. package/dist/invisible-image-explicit.html +627 -284
  117. package/dist/invisible-image-implicit.html +631 -173
  118. package/dist/invisible-pow-explicit.html +627 -284
  119. package/dist/invisible-pow-implicit.html +629 -177
  120. package/dist/plugins/explanation-injector.ts +250 -0
  121. package/dist/plugins/form-filler-injector.ts +233 -0
  122. package/dist/plugins/navigation-injector.ts +237 -89
  123. package/dist/plugins/status-log-injector.ts +199 -0
  124. package/dist/pow-explicit.html +877 -0
  125. package/dist/pow-implicit.html +881 -0
  126. package/package.json +7 -2
  127. package/vite.config.ts +32 -3
  128. package/dist/assets/captchaType-CYBmmAZe.js +0 -1
  129. package/dist/assets/frictionless-BVSPLzWe.js +0 -1
  130. package/dist/assets/index-BWsu-rGU.js +0 -1
  131. package/dist/assets/invisible-frictionless-explicit-DgCaJtPg.js +0 -1
  132. package/dist/assets/invisible-image-explicit-DgCaJtPg.js +0 -1
  133. package/dist/assets/invisible-pow-explicit-DgCaJtPg.js +0 -1
  134. package/dist/assets/pow-O0V5Dqo9.js +0 -1
  135. package/dist/frictionless.html +0 -344
  136. package/dist/pow.html +0 -324
  137. /package/dist/assets/{modulepreload-polyfill-B5Qt9EMX.js → captcha-ByKnSsbG.js} +0 -0
package/dist/invisible-pow-implicit.html CHANGED
@@ -1,71 +1,10 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
+ <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
4
5
  <title>Procaptcha Invisible POW Mode - Implicit Rendering</title>
5
6
  <!-- 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>
7
+ <script type="module" src="http://localhost:9269/procaptcha.bundle.js" async defer></script>
69
8
 
70
9
  <style>
71
10
  .nav-topbar {
@@ -74,60 +13,64 @@
74
13
  margin-bottom: 20px;
75
14
  transition: all 0.3s ease;
76
15
  overflow: hidden;
77
- max-height: 500px; /* Initial state - visible */
16
+ max-height: 500px;
78
17
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
18
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
79
19
  }
80
20
  .nav-topbar.collapsed {
81
- max-height: 50px; /* Collapsed state - only show toggle button and title */
21
+ max-height: 60px;
82
22
  }
83
23
  .nav-container {
84
24
  max-width: 1200px;
85
25
  margin: 0 auto;
86
- padding: 0 15px;
26
+ padding: 0 20px;
87
27
  position: relative;
88
28
  }
89
29
  .nav-header {
90
30
  display: flex;
91
31
  justify-content: space-between;
92
32
  align-items: center;
93
- padding: 10px 0;
33
+ padding: 12px 0;
94
34
  position: relative;
95
35
  z-index: 20;
96
36
  }
97
37
  .nav-title {
98
38
  color: white;
99
- font-size: 18px;
100
- font-weight: bold;
39
+ font-size: 1.25rem;
40
+ font-weight: 600;
101
41
  margin: 0;
102
42
  display: flex;
103
43
  align-items: center;
44
+ gap: 8px;
104
45
  }
105
46
  .nav-title-text {
106
- margin-right: 10px;
47
+ margin-right: 8px;
107
48
  }
108
49
  .nav-title-hint {
109
- font-size: 14px;
50
+ font-size: 0.875rem;
110
51
  font-weight: normal;
111
52
  opacity: 0;
112
53
  transition: opacity 0.3s ease;
54
+ color: rgba(255,255,255,0.8);
113
55
  }
114
56
  .collapsed .nav-title-hint {
115
57
  opacity: 0.8;
116
58
  }
117
59
  .nav-toggle {
118
- background-color: rgba(0,0,0,0.1);
60
+ background-color: rgba(255,255,255,0.1);
119
61
  color: white;
120
62
  border: none;
121
- padding: 5px 10px;
63
+ padding: 8px 12px;
122
64
  cursor: pointer;
123
- border-radius: 4px;
65
+ border-radius: 6px;
124
66
  z-index: 10;
125
67
  display: flex;
126
68
  align-items: center;
127
69
  justify-content: center;
70
+ transition: background-color 0.2s ease;
128
71
  }
129
72
  .nav-toggle:hover {
130
- background-color: rgba(0,0,0,0.2);
73
+ background-color: rgba(255,255,255,0.2);
131
74
  }
132
75
  .nav-toggle-icon {
133
76
  width: 24px;
@@ -154,29 +97,42 @@
154
97
  opacity: 1;
155
98
  }
156
99
  .nav-content {
157
- padding: 0 0 15px 0;
100
+ padding: 0 0 20px 0;
158
101
  transition: opacity 0.3s ease;
159
102
  }
160
103
  .collapsed .nav-content {
161
104
  opacity: 0;
162
105
  }
163
- .nav-row {
106
+ .nav-sections {
164
107
  display: flex;
165
108
  flex-wrap: wrap;
166
- margin-bottom: 15px;
109
+ gap: 20px;
167
110
  }
168
- .nav-group {
111
+ .nav-section {
169
112
  flex: 1;
170
- min-width: 250px;
171
- margin-bottom: 10px;
172
- margin-right: 20px;
113
+ min-width: 280px;
114
+ }
115
+ .nav-section h3 {
116
+ color: white;
117
+ font-size: 1rem;
118
+ font-weight: 600;
119
+ margin: 0 0 12px 0;
120
+ padding-bottom: 8px;
121
+ border-bottom: 1px solid rgba(255,255,255,0.2);
122
+ }
123
+ .nav-group {
124
+ background: rgba(255,255,255,0.1);
125
+ border-radius: 8px;
126
+ padding: 12px;
127
+ margin-bottom: 12px;
173
128
  }
174
129
  .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;
130
+ color: rgba(255,255,255,0.9);
131
+ font-size: 0.875rem;
179
132
  font-weight: 500;
133
+ margin: 0 0 8px 0;
134
+ text-transform: uppercase;
135
+ letter-spacing: 0.5px;
180
136
  }
181
137
  .nav-group-links {
182
138
  list-style: none;
@@ -184,36 +140,348 @@
184
140
  padding: 0;
185
141
  }
186
142
  .nav-group-links li {
187
- margin: 5px 0;
143
+ margin: 6px 0;
188
144
  }
189
145
  .nav-group-links a {
190
146
  color: white;
191
147
  text-decoration: none;
192
- font-weight: bold;
193
- padding: 5px 0;
148
+ font-weight: 500;
149
+ padding: 6px 8px;
194
150
  display: inline-block;
151
+ border-radius: 4px;
152
+ transition: background-color 0.2s ease;
195
153
  }
196
154
  .nav-group-links a:hover {
197
- text-decoration: underline;
155
+ background-color: rgba(255,255,255,0.2);
198
156
  }
199
157
  .nav-group-links .active {
200
- border-bottom: 2px solid white;
158
+ background-color: rgba(255,255,255,0.2);
159
+ font-weight: 600;
201
160
  }
202
161
  .nav-group-links .disabled {
203
162
  color: rgba(255,255,255,0.5);
204
163
  cursor: not-allowed;
164
+ opacity: 0.7;
205
165
  }
206
166
 
207
167
  @media (max-width: 768px) {
208
- .nav-row {
209
- flex-direction: column;
168
+ .nav-container {
169
+ padding: 0 16px;
170
+ }
171
+ .nav-title {
172
+ font-size: 1.125rem;
210
173
  }
211
174
  .nav-title-hint {
212
175
  display: none;
213
176
  }
177
+ .nav-sections {
178
+ flex-direction: column;
179
+ gap: 16px;
180
+ }
181
+ .nav-section {
182
+ min-width: 100%;
183
+ }
184
+ .nav-section h3 {
185
+ font-size: 0.875rem;
186
+ }
187
+ .nav-group {
188
+ padding: 10px;
189
+ }
190
+ .nav-group-title {
191
+ font-size: 0.8125rem;
192
+ }
193
+ .nav-group-links a {
194
+ padding: 8px 10px;
195
+ width: 100%;
196
+ }
197
+ }
198
+
199
+ @media (max-width: 480px) {
200
+ .nav-topbar {
201
+ max-height: 60px;
202
+ }
203
+ .nav-topbar.collapsed {
204
+ max-height: 60px;
205
+ }
206
+ .nav-title {
207
+ font-size: 1rem;
208
+ }
209
+ .nav-toggle {
210
+ padding: 6px 10px;
211
+ }
212
+ }
213
+
214
+ .nav-group-dropdown {
215
+ position: relative;
216
+ display: inline-block;
217
+ }
218
+
219
+ .nav-group-dropdown-btn {
220
+ background: none;
221
+ border: none;
222
+ color: white;
223
+ font-weight: 500;
224
+ padding: 6px 8px;
225
+ cursor: pointer;
226
+ display: flex;
227
+ align-items: center;
228
+ gap: 4px;
229
+ border-radius: 4px;
230
+ transition: background-color 0.2s ease;
231
+ }
232
+
233
+ .nav-group-dropdown-btn:hover {
234
+ background-color: rgba(255,255,255,0.2);
235
+ }
236
+
237
+ .nav-group-dropdown-btn svg {
238
+ width: 16px;
239
+ height: 16px;
240
+ transition: transform 0.2s ease;
241
+ }
242
+
243
+ .nav-group-dropdown-btn.open svg {
244
+ transform: rotate(180deg);
245
+ }
246
+
247
+ .nav-group-dropdown-content {
248
+ display: none;
249
+ position: absolute;
250
+ background-color: rgba(33, 150, 243, 0.95);
251
+ min-width: 160px;
252
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
253
+ z-index: 1;
254
+ border-radius: 4px;
255
+ padding: 8px 0;
256
+ margin-top: 4px;
257
+ }
258
+
259
+ .nav-group-dropdown-btn.open + .nav-group-dropdown-content {
260
+ display: block;
261
+ }
262
+
263
+ .nav-group-dropdown-content a {
264
+ color: white;
265
+ padding: 8px 16px;
266
+ text-decoration: none;
267
+ display: block;
268
+ transition: background-color 0.2s ease;
269
+ }
270
+
271
+ .nav-group-dropdown-content a:hover {
272
+ background-color: rgba(255,255,255,0.2);
273
+ }
274
+
275
+ .nav-group-dropdown-content a.active {
276
+ background-color: rgba(255,255,255,0.2);
277
+ font-weight: 600;
278
+ }
279
+
280
+ @media (max-width: 768px) {
281
+ .nav-group-dropdown-content {
282
+ position: static;
283
+ box-shadow: none;
284
+ background-color: rgba(255,255,255,0.1);
285
+ margin-top: 8px;
286
+ }
214
287
  }
215
288
  </style>
216
- <script async type="module" crossorigin src="/assets/modulepreload-polyfill-B5Qt9EMX.js"></script>
289
+ <script type="module" crossorigin src="/assets/invisible-pow-implicit-BRXL14FH.js"></script>
290
+ <link rel="modulepreload" crossorigin href="/assets/captcha-ByKnSsbG.js">
291
+ <link rel="stylesheet" crossorigin href="/assets/captcha-BhkVCEXM.css">
292
+
293
+ <style>
294
+ .form-filler-button {
295
+ position: fixed;
296
+ bottom: 20px;
297
+ right: 20px;
298
+ background-color: #2196F3;
299
+ color: white;
300
+ border: none;
301
+ border-radius: 30px;
302
+ padding: 12px 20px;
303
+ font-size: 14px;
304
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
305
+ cursor: pointer;
306
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
307
+ z-index: 9999;
308
+ display: flex;
309
+ align-items: center;
310
+ gap: 8px;
311
+ transition: all 0.2s ease;
312
+ outline: none;
313
+ }
314
+
315
+ .form-filler-button:hover {
316
+ background-color: #1976D2;
317
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
318
+ transform: translateY(-2px);
319
+ }
320
+
321
+ .form-filler-button:active {
322
+ transform: translateY(1px);
323
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
324
+ }
325
+
326
+ .form-filler-button svg {
327
+ width: 18px;
328
+ height: 18px;
329
+ fill: white;
330
+ }
331
+
332
+ .form-filler-button span {
333
+ font-weight: 500;
334
+ }
335
+
336
+ @media (max-width: 768px) {
337
+ .form-filler-button {
338
+ bottom: 15px;
339
+ right: 15px;
340
+ padding: 10px 15px;
341
+ font-size: 12px;
342
+ }
343
+
344
+ .form-filler-button svg {
345
+ width: 14px;
346
+ height: 14px;
347
+ }
348
+ }
349
+ </style>
350
+
351
+ <style>
352
+ .captcha-status {
353
+ margin-top: 20px;
354
+ padding: 15px;
355
+ background-color: #f0f8ff;
356
+ border: 2px solid #2196F3;
357
+ border-radius: 5px;
358
+ font-family: monospace;
359
+ font-size: 14px;
360
+ }
361
+ .status-item {
362
+ margin: 5px 0;
363
+ padding: 5px;
364
+ }
365
+ .status-success {
366
+ color: #4CAF50;
367
+ font-weight: bold;
368
+ }
369
+ .status-error {
370
+ color: #F44336;
371
+ font-weight: bold;
372
+ }
373
+ .status-info {
374
+ color: #2196F3;
375
+ }
376
+ .status-warning {
377
+ color: #FF9800;
378
+ }
379
+ .status-title {
380
+ font-weight: bold;
381
+ margin-bottom: 10px;
382
+ border-bottom: 1px solid #2196F3;
383
+ padding-bottom: 5px;
384
+ }
385
+ .console-output {
386
+ margin-top: 20px;
387
+ padding: 10px;
388
+ background-color: #f5f5f5;
389
+ border: 1px solid #ddd;
390
+ border-radius: 4px;
391
+ font-family: monospace;
392
+ white-space: pre-wrap;
393
+ max-height: 200px;
394
+ overflow-y: auto;
395
+ }
396
+ </style>
397
+
398
+ <script type="module">
399
+ // Function to update CAPTCHA status display
400
+ function updateCaptchaStatus(message, type = 'info') {
401
+ const statusContainer = document.getElementById('captcha-status');
402
+ if (!statusContainer) return;
403
+
404
+ const timestamp = new Date().toLocaleTimeString();
405
+ const statusItem = document.createElement('div');
406
+ statusItem.className = `status-item status-${type}`;
407
+ statusItem.innerHTML = `[${timestamp}] ${message}`;
408
+ statusContainer.appendChild(statusItem);
409
+
410
+ // Also log to console
411
+ console.log(`CAPTCHA Status: ${message}`);
412
+ }
413
+
414
+ // Make updateCaptchaStatus available globally
415
+ window.updateCaptchaStatus = updateCaptchaStatus;
416
+
417
+ // Override the original callbacks with enhanced versions that use status logging
418
+ const originalOnCaptchaFailed = window.onCaptchaFailed;
419
+ window.onCaptchaFailed = function() {
420
+ updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
421
+ if (originalOnCaptchaFailed) originalOnCaptchaFailed();
422
+ };
423
+
424
+ const originalOnCaptchaVerified = window.onCaptchaVerified;
425
+ window.onCaptchaVerified = function(output) {
426
+ updateCaptchaStatus('Challenge passed successfully!', 'success');
427
+ updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
428
+ if (originalOnCaptchaVerified) originalOnCaptchaVerified(output);
429
+ };
430
+
431
+ const originalOnActionHandler = window.onActionHandler;
432
+ window.onActionHandler = function() {
433
+ const procaptchaElements = document.getElementsByName('procaptcha-response');
434
+
435
+ if (!procaptchaElements.length) {
436
+ updateCaptchaStatus('Error: No CAPTCHA response token found', 'error');
437
+ alert("Must complete captcha");
438
+ return;
439
+ }
440
+
441
+ updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
442
+ if (originalOnActionHandler) originalOnActionHandler();
443
+ };
444
+
445
+ document.addEventListener('DOMContentLoaded', function() {
446
+ updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
447
+
448
+ // Monitor DOM for CAPTCHA initialization
449
+ const observer = new MutationObserver((mutations) => {
450
+ mutations.forEach((mutation) => {
451
+ if (mutation.addedNodes.length) {
452
+ for (let i = 0; i < mutation.addedNodes.length; i++) {
453
+ const node = mutation.addedNodes[i];
454
+ if (node.classList && (node.classList.contains('procaptcha') ||
455
+ node.querySelector && node.querySelector('.procaptcha'))) {
456
+ updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
457
+ observer.disconnect();
458
+ break;
459
+ }
460
+ }
461
+ }
462
+ });
463
+ });
464
+
465
+ observer.observe(document.body, { childList: true, subtree: true });
466
+ });
467
+
468
+ // Create a method to show CAPTCHA execution events
469
+ document.addEventListener('procaptcha:execute', function(e) {
470
+ // Determine captcha type from the page URL
471
+ const url = window.location.pathname;
472
+ const isFrictionless = url.includes('frictionless');
473
+ const isImage = url.includes('image');
474
+ const isPow = url.includes('pow');
475
+
476
+ let captchaType = 'unknown';
477
+ if (isFrictionless) captchaType = 'frictionless';
478
+ else if (isImage) captchaType = 'image';
479
+ else if (isPow) captchaType = 'pow';
480
+
481
+ updateCaptchaStatus(`CAPTCHA execution started: type=${captchaType}`, 'info');
482
+ updateCaptchaStatus(`Container: ${e.detail.containerId}, timestamp: ${new Date(e.detail.timestamp).toLocaleTimeString()}`, 'info');
483
+ });
484
+ </script>
217
485
  </head>
218
486
  <body>
219
487
 
@@ -236,36 +504,36 @@
236
504
  </button>
237
505
  </div>
238
506
  <div class="nav-content">
239
- <div class="nav-row">
507
+ <div class="nav-sections">
240
508
 
241
509
  <div class="nav-section">
242
- <h3 style="color: white; margin: 0 0 10px 0;">Standard Captchas</h3>
510
+ <h3>Standard Captchas</h3>
243
511
  <div class="nav-row">
244
512
 
245
513
  <div class="nav-group">
246
514
  <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>
515
+ <div class="nav-group-links">
516
+ <a href="image-implicit.html">Implicit</a>
517
+ <a href="image-explicit.html">Explicit</a>
518
+ </div>
251
519
  </div>
252
520
 
253
521
 
254
522
  <div class="nav-group">
255
523
  <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>
524
+ <div class="nav-group-links">
525
+ <a href="pow-implicit.html">Implicit</a>
526
+ <a href="pow-explicit.html">Explicit</a>
527
+ </div>
260
528
  </div>
261
529
 
262
530
 
263
531
  <div class="nav-group">
264
532
  <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>
533
+ <div class="nav-group-links">
534
+ <a href="frictionless-implicit.html">Implicit</a>
535
+ <a href="frictionless-explicit.html">Explicit</a>
536
+ </div>
269
537
  </div>
270
538
 
271
539
  </div>
@@ -273,33 +541,33 @@
273
541
 
274
542
 
275
543
  <div class="nav-section">
276
- <h3 style="color: white; margin: 0 0 10px 0;">Invisible Captchas</h3>
544
+ <h3>Invisible Captchas</h3>
277
545
  <div class="nav-row">
278
546
 
279
547
  <div class="nav-group">
280
548
  <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>
549
+ <div class="nav-group-links">
550
+ <a href="invisible-image-implicit.html">Implicit</a>
551
+ <a href="invisible-image-explicit.html">Explicit</a>
552
+ </div>
285
553
  </div>
286
554
 
287
555
 
288
556
  <div class="nav-group">
289
557
  <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>
558
+ <div class="nav-group-links">
559
+ <a href="invisible-pow-implicit.html" class="active">Implicit</a>
560
+ <a href="invisible-pow-explicit.html">Explicit</a>
561
+ </div>
294
562
  </div>
295
563
 
296
564
 
297
565
  <div class="nav-group">
298
566
  <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>
567
+ <div class="nav-group-links">
568
+ <a href="invisible-frictionless-implicit.html">Implicit</a>
569
+ <a href="invisible-frictionless-explicit.html">Explicit</a>
570
+ </div>
303
571
  </div>
304
572
 
305
573
  </div>
@@ -310,55 +578,49 @@
310
578
  </div>
311
579
  </div>
312
580
 
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>
581
+ <div class="mui-container">
582
+ <h1>Invisible Proof of Work CAPTCHA - Implicit Rendering</h1>
583
+ <p>This example demonstrates how to use Procaptcha in invisible Proof of Work mode with implicit rendering directly on a button.</p>
321
584
 
322
- <div>
323
- <label for="email">Email:</label>
324
- <input type="email" id="email" name="email" placeholder="Your email" required />
325
- </div>
585
+ <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
326
586
 
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
- &lt;script type="module" src="./assets/procaptcha.bundle.js" async defer&gt;&lt;/script&gt;
353
-
354
- &lt;button
355
- class="p-procaptcha"
356
- data-sitekey="undefined"
357
- data-callback="onSubmit"
358
- data-captcha-type="pow"&gt;
359
- Submit
360
- &lt;/button&gt;
361
- </pre>
587
+ <form id="demo-form" action="javascript:void(0);" method="POST" class="mui-form">
588
+ <h2>Example Form</h2>
589
+ <div class="mui-textfield mui-textfield--float-label">
590
+ <label for="name">Name</label>
591
+ <input type="text" id="name" name="name" required />
592
+ </div>
593
+
594
+ <div class="mui-textfield mui-textfield--float-label">
595
+ <label for="email">Email</label>
596
+ <input type="email" id="email" name="email" required />
597
+ </div>
598
+
599
+ <!-- Submit button with Procaptcha attributes -->
600
+ <button
601
+ class="mui-btn mui-btn--raised procaptcha"
602
+ data-sitekey="undefined"
603
+ data-callback="onSubmit"
604
+ data-captcha-type="pow"
605
+ data-size="invisible">
606
+ Submit
607
+ </button>
608
+ </form>
609
+ <!-- CAPTCHA Status Display -->
610
+ <div id="captcha-status" class="captcha-status">
611
+ <div class="status-title">CAPTCHA Status Log</div>
612
+ </div>
613
+
614
+ <!-- Console output display area -->
615
+ <div id="console-output" class="console-output" style="display: none;"></div>
616
+
617
+
618
+ <div id="result" class="info-box" style="display: none;"></div>
619
+
620
+ <!-- Console output display area -->
621
+ <div id="console-output" class="console-output" style="display: none;"></div>
622
+
623
+ <!-- Explanation will be injected by the explanation-injector plugin -->
362
624
  </div>
363
625
 
364
626
  <script>
@@ -366,6 +628,7 @@
366
628
  const toggleBtn = document.getElementById('nav-toggle');
367
629
  const navBar = document.getElementById('nav-topbar');
368
630
  const navHeader = document.getElementById('nav-header');
631
+ const isMobile = window.innerWidth <= 768;
369
632
 
370
633
  // Check if navigation was previously collapsed
371
634
  const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
@@ -397,20 +660,21 @@
397
660
 
398
661
  // Toggle on button click
399
662
  toggleBtn.addEventListener('click', function(e) {
400
- e.stopPropagation(); // Prevent header click from firing
663
+ e.stopPropagation();
401
664
  toggleNav();
402
665
  });
403
666
 
404
- // Expand on toggle button hover when collapsed
405
- toggleBtn.addEventListener('mouseenter', function() {
406
- if (navBar.classList.contains('collapsed')) {
407
- expandNav();
408
- }
409
- });
667
+ // Expand on toggle button hover when collapsed (desktop only)
668
+ if (!isMobile) {
669
+ toggleBtn.addEventListener('mouseenter', function() {
670
+ if (navBar.classList.contains('collapsed')) {
671
+ expandNav();
672
+ }
673
+ });
674
+ }
410
675
 
411
676
  // Toggle on header click
412
677
  navHeader.addEventListener('click', function(e) {
413
- // Don't toggle if a link within the header was clicked
414
678
  if (e.target.tagName === 'A') {
415
679
  return;
416
680
  }
@@ -419,8 +683,196 @@
419
683
 
420
684
  // Make the header appear clickable with cursor style
421
685
  navHeader.style.cursor = 'pointer';
686
+
687
+ // Handle window resize
688
+ window.addEventListener('resize', function() {
689
+ const newIsMobile = window.innerWidth <= 768;
690
+ if (newIsMobile !== isMobile) {
691
+ if (newIsMobile) {
692
+ // On mobile, collapse the nav by default
693
+ collapseNav();
694
+ } else {
695
+ // On desktop, expand the nav by default
696
+ expandNav();
697
+ }
698
+ }
699
+ });
700
+
701
+ // Handle dropdown toggles
702
+ document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
703
+ button.addEventListener('click', function(e) {
704
+ e.stopPropagation();
705
+ this.classList.toggle('open');
706
+ });
707
+ });
708
+
709
+ // Close dropdowns when clicking outside
710
+ document.addEventListener('click', function(e) {
711
+ if (!e.target.closest('.nav-group-dropdown')) {
712
+ document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
713
+ button.classList.remove('open');
714
+ });
715
+ }
716
+ });
717
+ });
718
+ </script>
719
+
720
+
721
+ <button id="form-filler-button" class="form-filler-button" title="Fill all form fields with default values">
722
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
723
+ <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"/>
724
+ </svg>
725
+ <span>Fill Form</span>
726
+ </button>
727
+
728
+ <script>
729
+ document.addEventListener('DOMContentLoaded', function() {
730
+ // Create a function to fill the form with sensible default values
731
+ function fillFormWithDefaults() {
732
+ // Get all input elements
733
+ const inputs = document.querySelectorAll('input, select, textarea');
734
+
735
+ // Record which elements were filled for status feedback
736
+ const filledElements = [];
737
+
738
+ // Process each input
739
+ inputs.forEach(input => {
740
+ let filled = true;
741
+
742
+ // Skip hidden inputs and those with existing values
743
+ if (input.type === 'hidden' || (input.value && input.value.trim() !== '')) {
744
+ filled = false;
745
+ }
746
+ // Handle different input types
747
+ else if (input.type === 'text') {
748
+ if (input.id.toLowerCase().includes('name') || input.name.toLowerCase().includes('name')) {
749
+ input.value = 'John Doe';
750
+ } else {
751
+ input.value = 'Default Text';
752
+ }
753
+ }
754
+ else if (input.type === 'email') {
755
+ input.value = 'test@example.com';
756
+ }
757
+ else if (input.type === 'password') {
758
+ input.value = 'Password123!';
759
+ }
760
+ else if (input.type === 'tel') {
761
+ input.value = '+1234567890';
762
+ }
763
+ else if (input.type === 'number') {
764
+ input.value = '42';
765
+ }
766
+ else if (input.type === 'url') {
767
+ input.value = 'https://example.com';
768
+ }
769
+ else if (input.type === 'date') {
770
+ const today = new Date();
771
+ const yyyy = today.getFullYear();
772
+ const mm = String(today.getMonth() + 1).padStart(2, '0');
773
+ const dd = String(today.getDate()).padStart(2, '0');
774
+ input.value = `${yyyy}-${mm}-${dd}`;
775
+ }
776
+ else if (input.type === 'time') {
777
+ input.value = '12:00';
778
+ }
779
+ else if (input.type === 'checkbox' || input.type === 'radio') {
780
+ input.checked = true;
781
+ }
782
+ else if (input.tagName === 'SELECT') {
783
+ if (input.options.length > 0) {
784
+ input.selectedIndex = 1 >= input.options.length ? 0 : 1; // Select second option if available, first otherwise
785
+ }
786
+ }
787
+ else if (input.tagName === 'TEXTAREA') {
788
+ input.value = 'This is a sample text for the textarea field.';
789
+ }
790
+ else {
791
+ // For any other input types
792
+ input.value = 'Default Value';
793
+ }
794
+
795
+ // Add to filled elements if we actually filled it
796
+ if (filled) {
797
+ filledElements.push(input);
798
+
799
+ // Dispatch input event to trigger any listeners
800
+ const event = new Event('input', { bubbles: true });
801
+ input.dispatchEvent(event);
802
+
803
+ // For select elements, also dispatch change event
804
+ if (input.tagName === 'SELECT') {
805
+ const changeEvent = new Event('change', { bubbles: true });
806
+ input.dispatchEvent(changeEvent);
807
+ }
808
+ }
809
+ });
810
+
811
+ // Show a notification about what was filled
812
+ if (filledElements.length > 0) {
813
+ // If an updateCaptchaStatus function exists (from our other demos), use it
814
+ if (typeof window.updateCaptchaStatus === 'function') {
815
+ window.updateCaptchaStatus(`Filled ${filledElements.length} form fields with default values`, 'info');
816
+ } else {
817
+ console.log(`Filled ${filledElements.length} form fields with default values`);
818
+ }
819
+
820
+ // Highlight the filled fields briefly
821
+ filledElements.forEach(el => {
822
+ const originalBackground = el.style.backgroundColor;
823
+ const originalTransition = el.style.transition;
824
+
825
+ el.style.transition = 'background-color 1.5s ease';
826
+ el.style.backgroundColor = '#e3f2fd';
827
+
828
+ setTimeout(() => {
829
+ el.style.backgroundColor = originalBackground;
830
+ setTimeout(() => {
831
+ el.style.transition = originalTransition;
832
+ }, 1500);
833
+ }, 500);
834
+ });
835
+ }
836
+ }
837
+
838
+ // Add the click event listener to the form filler button
839
+ const formFillerButton = document.getElementById('form-filler-button');
840
+ if (formFillerButton) {
841
+ formFillerButton.addEventListener('click', fillFormWithDefaults);
842
+ }
422
843
  });
423
844
  </script>
424
845
 
425
- </body>
846
+ <div class="explanation">
847
+ <h2>How Invisible Proof of Work CAPTCHA Works (Implicit Rendering)</h2>
848
+
849
+ <h3>Implementation Details</h3>
850
+ <p>This example demonstrates how to use Procaptcha in Proof of Work mode with implicit rendering:</p>
851
+ <ol>
852
+ <li>Import the Procaptcha script</li>
853
+ <li>Add a div with the procaptcha class</li>
854
+ <li>Set data-* attributes to configure the CAPTCHA</li>
855
+ <li>Handle the verification result in the callback function</li>
856
+ </ol>
857
+
858
+ <h3>Key Code Example</h3>
859
+ <pre>&lt;div
860
+ class=&quot;procaptcha&quot;
861
+ data-theme=&quot;light&quot;
862
+ data-sitekey=&quot;%PROSOPO_SITE_KEY_POW%&quot;
863
+ data-failed-callback=&quot;onCaptchaFailed&quot;
864
+ data-callback=&quot;onCaptchaVerified&quot;
865
+ data-captcha-type=&quot;pow&quot;
866
+ data-size=&quot;invisible&quot;
867
+ &gt;&lt;/div&gt;</pre>
868
+
869
+ <h3>Execution Flow</h3>
870
+ <ol>
871
+ <li>On page load, Procaptcha scans for elements with the procaptcha class</li>
872
+ <li>The Proof of Work computation happens in the browser</li>
873
+ <li>When the computation is complete, the callback function is called</li>
874
+ <li>On successful verification, the form can be submitted with the token</li>
875
+ </ol>
876
+ </div>
877
+ </body>
426
878
  </html>