@prosopo/client-bundle-example 2.10.23 → 2.11.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 (51) hide show
  1. package/.turbo/turbo-build$colon$cjs.log +5 -4
  2. package/.turbo/turbo-build$colon$tsc.log +11 -11
  3. package/.turbo/turbo-build.log +6 -5
  4. package/CHANGELOG.md +21 -0
  5. package/dist/cjs/index.cjs +13 -41
  6. package/dist/cjs/plugins/pages.cjs +113 -0
  7. package/dist/index.js +2 -42
  8. package/dist/plugins/pages.js +103 -0
  9. package/package.json +7 -7
  10. package/src/frictionless-explicit-web3.html +10 -23
  11. package/src/frictionless-explicit.html +18 -22
  12. package/src/frictionless-implicit.html +60 -86
  13. package/src/frictionless-manual-start.html +13 -33
  14. package/src/image-explicit-web3.html +8 -24
  15. package/src/image-explicit.html +16 -23
  16. package/src/image-implicit.html +192 -0
  17. package/src/index.html +11 -26
  18. package/src/index.ts +1 -62
  19. package/src/invisible-frictionless-explicit.html +8 -17
  20. package/src/invisible-frictionless-implicit.html +8 -25
  21. package/src/invisible-image-explicit.html +8 -23
  22. package/src/invisible-image-implicit.html +8 -24
  23. package/src/invisible-pow-explicit.html +8 -23
  24. package/src/invisible-pow-implicit.html +9 -21
  25. package/src/invisible-puzzle-explicit.html +8 -23
  26. package/src/invisible-puzzle-implicit.html +9 -21
  27. package/src/plugins/code-snippet-injector.ts +179 -0
  28. package/src/plugins/form-filler-injector.ts +36 -121
  29. package/src/plugins/layout-injector.ts +238 -0
  30. package/src/plugins/logo.ts +15 -0
  31. package/src/plugins/pages.ts +219 -0
  32. package/src/plugins/placement-injector.ts +114 -0
  33. package/src/plugins/slots.ts +32 -0
  34. package/src/plugins/status-log-injector.ts +35 -114
  35. package/src/pow-explicit-web3.html +8 -24
  36. package/src/pow-explicit.html +8 -23
  37. package/src/pow-implicit-sessionid.html +10 -24
  38. package/src/pow-implicit.html +9 -24
  39. package/src/puzzle-bind-explicit.html +83 -0
  40. package/src/puzzle-explicit.html +16 -23
  41. package/src/puzzle-implicit.html +9 -24
  42. package/src/styles/demo.css +803 -0
  43. package/src/tests/plugins.unit.test.ts +285 -118
  44. package/tsconfig.tsbuildinfo +1 -1
  45. package/vite.config.ts +11 -5
  46. package/src/plugins/explanation-injector.ts +0 -294
  47. package/src/plugins/navigation-injector.ts +0 -605
  48. package/src/styles/captcha.css +0 -78
  49. package/src/styles/field.css +0 -12
  50. package/src/tests/floatLabel.unit.test.ts +0 -195
  51. package/src/tests/floatLabelReady.unit.test.ts +0 -36
package/src/index.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha demo: PoW - Implicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Frictionless, implicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  window.addEventListener('load', () => {
14
9
 
@@ -72,7 +67,7 @@
72
67
  email: document.getElementById('email').value,
73
68
  name: document.getElementById('name').value,
74
69
  password: document.getElementById('password').value,
75
- siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
70
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
76
71
  "procaptcha-response": procaptchaToken,
77
72
  };
78
73
  const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
@@ -140,7 +135,6 @@
140
135
  observer.observe(document.body, { childList: true, subtree: true });
141
136
  });
142
137
 
143
-
144
138
  window.onCaptchaFailed = function () {
145
139
  console.log('Challenge failed');
146
140
  updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
@@ -164,44 +158,35 @@
164
158
  </head>
165
159
  <body>
166
160
 
167
- <div class="mui-container">
168
- <h1>Image CAPTCHA - Implicit Rendering</h1>
169
- <p>This example demonstrates how to use Procaptcha in Proof of Work mode with implicit rendering.</p>
170
-
171
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
161
+ <div class="demo-card">
172
162
 
173
- <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
174
- <h2>Example Login Form</h2>
175
- <div class="mui-textfield mui-textfield--float-label">
163
+ <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
164
+ <h2>Create an account</h2>
165
+ <div class="demo-field">
176
166
  <label for="name">Name</label>
177
167
  <input id="name" type="text" name="name" required/>
178
168
  </div>
179
- <div class="mui-textfield mui-textfield--float-label">
169
+ <div class="demo-field">
180
170
  <label for="email">Email Address</label>
181
171
  <input id="email" type="email" name="email" required/>
182
172
  </div>
183
- <div class="mui-textfield mui-textfield--float-label">
173
+ <div class="demo-field">
184
174
  <label for="password">Password</label>
185
175
  <input id="password" type="password" name="password" required/>
186
176
  </div>
187
- <div class="mui-textfield mui-textfield--float-label">
188
- <!-- Dev sitekey -->
177
+ <div class="demo-field">
189
178
  <div
190
179
  class="procaptcha"
191
180
  data-theme="light"
192
- data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
181
+ data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
193
182
  data-failed-callback="onCaptchaFailed"
194
183
  data-callback="onCaptchaVerified"
195
184
  ></div>
196
185
  </div>
197
186
  <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
198
- <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
187
+ <button type="button" class="demo-button" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
199
188
  </form>
200
189
 
201
- <!-- Console output display area -->
202
- <div id="console-output" class="console-output" style="display: none;"></div>
203
-
204
- <!-- Explanation will be injected by the explanation-injector plugin -->
205
190
  </div>
206
191
  </body>
207
192
  </html>
package/src/index.ts CHANGED
@@ -11,66 +11,5 @@
11
11
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
12
  // See the License for the specific language governing permissions and
13
13
  // limitations under the License.
14
- //@ts-nocheck
15
- (() => {
16
- function whenDOMReady(fn: () => void) {
17
- if (document.readyState !== "loading") fn();
18
- else document.addEventListener("DOMContentLoaded", fn);
19
- }
20
14
 
21
- whenDOMReady(() => {
22
- const wrappers = Array.from(
23
- document.querySelectorAll(".mui-textfield--float-label"),
24
- );
25
-
26
- for (const wrapper of wrappers) {
27
- const input = wrapper.querySelector("input, textarea, select");
28
- const label = wrapper.querySelector("label");
29
- if (!input || !label) return;
30
-
31
- // ensure screen-reader accessibility if label is hidden
32
- if (!input.getAttribute("aria-label") && label.textContent) {
33
- input.setAttribute("aria-label", label.textContent.trim());
34
- }
35
-
36
- const update = () => {
37
- const isChecked = input.type === "checkbox" || input.type === "radio";
38
- const hasValue = isChecked
39
- ? input.checked
40
- : input.value && input.value.trim() !== "";
41
- if (document.activeElement === input || hasValue) {
42
- wrapper.classList.add("label-hidden");
43
- } else {
44
- wrapper.classList.remove("label-hidden");
45
- }
46
- };
47
-
48
- // respond to common input events
49
- for (const evt of [
50
- "focus",
51
- "input",
52
- "blur",
53
- "change",
54
- "keyup",
55
- "paste",
56
- ]) {
57
- input.addEventListener(evt, update, { passive: true });
58
- }
59
-
60
- // initial run (handles pre-filled values)
61
- update();
62
- }
63
-
64
- // short polling window to detect autofill (stops after ~3s)
65
- const maxChecks = 12;
66
- let checks = 0;
67
- const iv = setInterval(() => {
68
- checks++;
69
- for (const w of wrappers) {
70
- const input = w.querySelector("input,textarea,select");
71
- if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
72
- }
73
- if (checks >= maxChecks) clearInterval(iv);
74
- }, 250);
75
- });
76
- })();
15
+ export * from "./plugins/pages.js";
package/src/invisible-frictionless-explicit.html CHANGED
@@ -1,46 +1,37 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha Frictionless Mode - Explicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Frictionless, invisible, explicit rendering</title>
10
6
  <!-- Status log will be injected by the status-log-injector plugin -->
11
7
  </head>
12
8
  <body>
13
- <div class="mui-container">
14
- <h1>Procaptcha Frictionless Mode - Explicit Rendering</h1>
15
- <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
9
+ <div class="demo-card">
16
10
 
17
11
  <!-- Status log will be injected by the status-log-injector plugin -->
18
12
 
19
- <form id="demo-form" class="mui-form">
20
- <h2>Example Form</h2>
13
+ <form id="demo-form" class="demo-form">
14
+ <h2>Create an account</h2>
21
15
 
22
- <div class="mui-textfield mui-textfield--float-label">
16
+ <div class="demo-field">
23
17
  <label for="name">Name</label>
24
18
  <input type="text" id="name" name="name" required />
25
19
  </div>
26
20
 
27
- <div class="mui-textfield mui-textfield--float-label">
21
+ <div class="demo-field">
28
22
  <label for="email">Email</label>
29
23
  <input type="email" id="email" name="email" required />
30
24
  </div>
31
25
 
32
- <!-- The container for the CAPTCHA -->
33
26
  <div id="procaptcha-container"></div>
34
27
 
35
- <button type="submit" class="mui-btn mui-btn--raised" data-cy="submit-button">Submit</button>
28
+ <button type="submit" class="demo-button" data-cy="submit-button">Submit</button>
36
29
 
37
30
  <div id="error"></div>
38
31
  </form>
39
32
 
40
- <div id="result" class="info-box" style="display: none;"></div>
33
+ <div id="result" class="demo-result" style="display: none;"></div>
41
34
 
42
-
43
- <!-- Explanation will be injected by the explanation-injector plugin -->
44
35
  </div>
45
36
 
46
37
  <script type="module">
package/src/invisible-frictionless-implicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha demo: Invisible Frictionless - Implicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Frictionless, invisible, implicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  // Define callbacks directly on window object so they're globally accessible
14
9
  window.onCaptchaFailed = function () {
@@ -82,7 +77,6 @@
82
77
 
83
78
  window.addEventListener('load', () => {
84
79
 
85
-
86
80
  window.setIsError = (isError) => {
87
81
  const messageContainer = document.getElementById('messageContainer');
88
82
  messageContainer.style.color = isError ? 'red' : 'black';
@@ -159,33 +153,26 @@
159
153
  </head>
160
154
  <body>
161
155
 
162
- <div class="mui-container">
163
- <h1>Invisible Frictionless CAPTCHA - Implicit Rendering</h1>
164
- <p>This example demonstrates how to use Procaptcha in invisible frictionless mode with implicit rendering directly on a button.</p>
165
-
166
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
156
+ <div class="demo-card">
167
157
 
168
- <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
169
- <h2>Example Login Form</h2>
170
- <div class="mui-textfield mui-textfield--float-label">
158
+ <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
159
+ <h2>Create an account</h2>
160
+ <div class="demo-field">
171
161
  <label for="name">Name</label>
172
162
  <input id="name" type="text" name="name" required/>
173
163
  </div>
174
- <div class="mui-textfield mui-textfield--float-label">
164
+ <div class="demo-field">
175
165
  <label for="email">Email Address</label>
176
166
  <input id="email" type="email" name="email" required/>
177
167
  </div>
178
- <div class="mui-textfield mui-textfield--float-label">
168
+ <div class="demo-field">
179
169
  <label for="password">Password</label>
180
170
  <input id="password" type="password" name="password" required/>
181
171
  </div>
182
- <div class="mui-textfield mui-textfield--float-label">
183
- <!-- The div here was empty, we don't need it for invisible mode -->
184
- </div>
185
172
  <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
186
173
  <button
187
174
  type="button"
188
- class="mui-btn mui-btn--raised procaptcha"
175
+ class="demo-button procaptcha"
189
176
  data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
190
177
  data-callback="onActionHandler"
191
178
  data-failed-callback="onCaptchaFailed"
@@ -195,10 +182,6 @@
195
182
  </button>
196
183
  </form>
197
184
 
198
- <!-- Console output display area -->
199
- <div id="console-output" class="console-output" style="display: none;"></div>
200
-
201
- <!-- Explanation will be injected by the explanation-injector plugin -->
202
185
  </div>
203
186
  </body>
204
187
  </html>
package/src/invisible-image-explicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha Image Mode - Explicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Image, invisible, explicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  document.addEventListener('DOMContentLoaded', function() {
14
9
 
@@ -34,43 +29,33 @@
34
29
  observer.observe(document.body, { childList: true, subtree: true });
35
30
  });
36
31
 
37
- // updateCaptchaStatus is now provided by status-log-injector
38
32
  </script>
39
33
  </head>
40
34
  <body>
41
- <div class="mui-container">
42
- <h1>Procaptcha Image Mode - Explicit Rendering</h1>
43
- <p>This example demonstrates how to use Procaptcha in image mode with explicit rendering.</p>
35
+ <div class="demo-card">
44
36
 
45
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
37
+ <form id="demo-form" class="demo-form">
38
+ <h2>Create an account</h2>
46
39
 
47
- <form id="demo-form" class="mui-form">
48
- <h2>Example Form</h2>
49
-
50
- <div class="mui-textfield mui-textfield--float-label">
40
+ <div class="demo-field">
51
41
  <label for="name">Name</label>
52
42
  <input type="text" id="name" name="name" required />
53
43
  </div>
54
44
 
55
- <div class="mui-textfield mui-textfield--float-label">
45
+ <div class="demo-field">
56
46
  <label for="email">Email</label>
57
47
  <input type="email" id="email" name="email" required />
58
48
  </div>
59
49
 
60
- <!-- The container for the CAPTCHA -->
61
50
  <div id="procaptcha-container"></div>
62
51
 
63
- <button type="submit" class="mui-btn mui-btn--raised" data-cy="submit-button">Submit</button>
52
+ <button type="submit" class="demo-button" data-cy="submit-button">Submit</button>
64
53
 
65
54
  <div id="error"></div>
66
55
  </form>
67
56
 
68
- <div id="result" class="info-box" style="display: none;"></div>
69
-
70
- <!-- Console output display area -->
71
- <div id="console-output" class="console-output" style="display: none;"></div>
57
+ <div id="result" class="demo-result" style="display: none;"></div>
72
58
 
73
- <!-- Explanation will be injected by the explanation-injector plugin -->
74
59
  </div>
75
60
 
76
61
  <script type="module">
package/src/invisible-image-implicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha demo: Invisible image - Implicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Image, invisible, implicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  // Define callbacks directly on window object so they're globally accessible
14
9
  window.onCaptchaFailed = function () {
@@ -158,33 +153,26 @@
158
153
  </head>
159
154
  <body>
160
155
 
161
- <div class="mui-container">
162
- <h1>Invisible image CAPTCHA - Implicit Rendering</h1>
163
- <p>This example demonstrates how to use Procaptcha in invisible image mode with implicit rendering directly on a button.</p>
156
+ <div class="demo-card">
164
157
 
165
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
166
-
167
- <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
168
- <h2>Example Login Form</h2>
169
- <div class="mui-textfield mui-textfield--float-label">
158
+ <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
159
+ <h2>Create an account</h2>
160
+ <div class="demo-field">
170
161
  <label for="name">Name</label>
171
162
  <input id="name" type="text" name="name" required/>
172
163
  </div>
173
- <div class="mui-textfield mui-textfield--float-label">
164
+ <div class="demo-field">
174
165
  <label for="email">Email Address</label>
175
166
  <input id="email" type="email" name="email" required/>
176
167
  </div>
177
- <div class="mui-textfield mui-textfield--float-label">
168
+ <div class="demo-field">
178
169
  <label for="password">Password</label>
179
170
  <input id="password" type="password" name="password" required/>
180
171
  </div>
181
- <div class="mui-textfield mui-textfield--float-label">
182
- <!-- The div here was empty, we don't need it for invisible mode -->
183
- </div>
184
172
  <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
185
173
  <button
186
174
  type="button"
187
- class="mui-btn mui-btn--raised procaptcha"
175
+ class="demo-button procaptcha"
188
176
  data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
189
177
  data-callback="onActionHandler"
190
178
  data-failed-callback="onCaptchaFailed"
@@ -194,10 +182,6 @@
194
182
  </button>
195
183
  </form>
196
184
 
197
- <!-- Console output display area -->
198
- <div id="console-output" class="console-output" style="display: none;"></div>
199
-
200
- <!-- Explanation will be injected by the explanation-injector plugin -->
201
185
  </div>
202
186
  </body>
203
187
  </html>
package/src/invisible-pow-explicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha POW Mode - Explicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Proof of Work, invisible, explicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  document.addEventListener('DOMContentLoaded', function() {
14
9
 
@@ -34,43 +29,33 @@
34
29
  observer.observe(document.body, { childList: true, subtree: true });
35
30
  });
36
31
 
37
- // updateCaptchaStatus is now provided by status-log-injector
38
32
  </script>
39
33
  </head>
40
34
  <body>
41
- <div class="mui-container">
42
- <h1>Procaptcha PoW Mode - Explicit Rendering</h1>
43
- <p>This example demonstrates how to use Procaptcha in pow mode with explicit rendering.</p>
35
+ <div class="demo-card">
44
36
 
45
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
37
+ <form id="demo-form" class="demo-form">
38
+ <h2>Create an account</h2>
46
39
 
47
- <form id="demo-form" class="mui-form">
48
- <h2>Example Form</h2>
49
-
50
- <div class="mui-textfield mui-textfield--float-label">
40
+ <div class="demo-field">
51
41
  <label for="name">Name</label>
52
42
  <input type="text" id="name" name="name" required />
53
43
  </div>
54
44
 
55
- <div class="mui-textfield mui-textfield--float-label">
45
+ <div class="demo-field">
56
46
  <label for="email">Email</label>
57
47
  <input type="email" id="email" name="email" required />
58
48
  </div>
59
49
 
60
- <!-- The container for the CAPTCHA -->
61
50
  <div id="procaptcha-container"></div>
62
51
 
63
- <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
52
+ <button type="submit" class="demo-button">Submit</button>
64
53
 
65
54
  <div id="error"></div>
66
55
  </form>
67
56
 
68
- <div id="result" class="info-box" style="display: none;"></div>
69
-
70
- <!-- Console output display area -->
71
- <div id="console-output" class="console-output" style="display: none;"></div>
57
+ <div id="result" class="demo-result" style="display: none;"></div>
72
58
 
73
- <!-- Explanation will be injected by the explanation-injector plugin -->
74
59
  </div>
75
60
 
76
61
  <script type="module">
package/src/invisible-pow-implicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha Invisible POW Mode - Implicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Proof of Work, invisible, implicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  document.addEventListener('DOMContentLoaded', function() {
14
9
  updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
@@ -67,27 +62,24 @@
67
62
  <script type="module" src="%VITE_BUNDLE_URL%" async defer></script>
68
63
  </head>
69
64
  <body>
70
- <div class="mui-container">
71
- <h1>Invisible Proof of Work CAPTCHA - Implicit Rendering</h1>
72
- <p>This example demonstrates how to use Procaptcha in invisible Proof of Work mode with implicit rendering directly on a button.</p>
65
+ <div class="demo-card">
73
66
 
74
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
75
-
76
- <form id="demo-form" action="javascript:void(0);" method="POST" class="mui-form">
77
- <h2>Example Form</h2>
78
- <div class="mui-textfield mui-textfield--float-label">
67
+ <!-- nosemgrep: python.django.security.django-no-csrf-token.django-no-csrf-token -->
68
+ <form id="demo-form" action="javascript:void(0);" method="POST" class="demo-form">
69
+ <h2>Create an account</h2>
70
+ <div class="demo-field">
79
71
  <label for="name">Name</label>
80
72
  <input type="text" id="name" name="name" required />
81
73
  </div>
82
74
 
83
- <div class="mui-textfield mui-textfield--float-label">
75
+ <div class="demo-field">
84
76
  <label for="email">Email</label>
85
77
  <input type="email" id="email" name="email" required />
86
78
  </div>
87
79
 
88
80
  <!-- Submit button with Procaptcha attributes -->
89
81
  <button
90
- class="mui-btn mui-btn--raised procaptcha"
82
+ class="demo-button procaptcha"
91
83
  data-sitekey="%PROSOPO_SITE_KEY_POW%"
92
84
  data-callback="onSubmit"
93
85
  data-size="invisible">
@@ -95,12 +87,8 @@
95
87
  </button>
96
88
  </form>
97
89
 
98
- <div id="result" class="info-box" style="display: none;"></div>
99
-
100
- <!-- Console output display area -->
101
- <div id="console-output" class="console-output" style="display: none;"></div>
90
+ <div id="result" class="demo-result" style="display: none;"></div>
102
91
 
103
- <!-- Explanation will be injected by the explanation-injector plugin -->
104
92
  </div>
105
93
  </body>
106
94
  </html>
package/src/invisible-puzzle-explicit.html CHANGED
@@ -1,14 +1,9 @@
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"/>
5
- <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
4
 
7
- <script src="index.js"></script>
8
- <title>Procaptcha Invisible Puzzle Mode - Explicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Puzzle, invisible, explicit rendering</title>
10
6
  <script type="module">
11
- // Function to update CAPTCHA status display is now provided by status-log-injector
12
7
 
13
8
  document.addEventListener('DOMContentLoaded', function() {
14
9
 
@@ -34,43 +29,33 @@
34
29
  observer.observe(document.body, { childList: true, subtree: true });
35
30
  });
36
31
 
37
- // updateCaptchaStatus is now provided by status-log-injector
38
32
  </script>
39
33
  </head>
40
34
  <body>
41
- <div class="mui-container">
42
- <h1>Procaptcha Invisible Puzzle Mode - Explicit Rendering</h1>
43
- <p>This example demonstrates how to use Procaptcha in invisible Puzzle mode with explicit rendering. The puzzle overlay appears after the form is submitted.</p>
35
+ <div class="demo-card">
44
36
 
45
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
37
+ <form id="demo-form" class="demo-form">
38
+ <h2>Create an account</h2>
46
39
 
47
- <form id="demo-form" class="mui-form">
48
- <h2>Example Form</h2>
49
-
50
- <div class="mui-textfield mui-textfield--float-label">
40
+ <div class="demo-field">
51
41
  <label for="name">Name</label>
52
42
  <input type="text" id="name" name="name" required />
53
43
  </div>
54
44
 
55
- <div class="mui-textfield mui-textfield--float-label">
45
+ <div class="demo-field">
56
46
  <label for="email">Email</label>
57
47
  <input type="email" id="email" name="email" required />
58
48
  </div>
59
49
 
60
- <!-- The container for the CAPTCHA -->
61
50
  <div id="procaptcha-container"></div>
62
51
 
63
- <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
52
+ <button type="submit" class="demo-button">Submit</button>
64
53
 
65
54
  <div id="error"></div>
66
55
  </form>
67
56
 
68
- <div id="result" class="info-box" style="display: none;"></div>
69
-
70
- <!-- Console output display area -->
71
- <div id="console-output" class="console-output" style="display: none;"></div>
57
+ <div id="result" class="demo-result" style="display: none;"></div>
72
58
 
73
- <!-- Explanation will be injected by the explanation-injector plugin -->
74
59
  </div>
75
60
 
76
61
  <script type="module">