@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/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 Puzzle Mode - Explicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Puzzle, 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
  updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
@@ -33,43 +28,33 @@
33
28
  observer.observe(document.body, { childList: true, subtree: true });
34
29
  });
35
30
 
36
- // updateCaptchaStatus is now provided by status-log-injector
37
31
  </script>
38
32
  </head>
39
33
  <body>
40
- <div class="mui-container">
41
- <h1>Procaptcha Puzzle Mode - Explicit Rendering</h1>
42
- <p>This example demonstrates how to use Procaptcha in Puzzle mode with explicit rendering.</p>
34
+ <div class="demo-card">
43
35
 
44
- <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
36
+ <form id="demo-form" class="demo-form">
37
+ <h2>Create an account</h2>
45
38
 
46
- <form id="demo-form" class="mui-form">
47
- <h2>Example Form</h2>
48
-
49
- <div class="mui-textfield mui-textfield--float-label">
39
+ <div class="demo-field">
50
40
  <label for="name">Name</label>
51
41
  <input type="text" id="name" name="name" required />
52
42
  </div>
53
43
 
54
- <div class="mui-textfield mui-textfield--float-label">
44
+ <div class="demo-field">
55
45
  <label for="email">Email</label>
56
46
  <input type="email" id="email" name="email" required />
57
47
  </div>
58
48
 
59
- <!-- The container for the CAPTCHA -->
60
49
  <div id="procaptcha-container"></div>
61
50
 
62
- <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
51
+ <button type="submit" class="demo-button">Submit</button>
63
52
 
64
53
  <div id="error"></div>
65
54
  </form>
66
55
 
67
- <div id="result" class="info-box" style="display: none;"></div>
68
-
69
- <!-- Console output display area -->
70
- <div id="console-output" class="console-output" style="display: none;"></div>
56
+ <div id="result" class="demo-result" style="display: none;"></div>
71
57
 
72
- <!-- Explanation will be injected by the explanation-injector plugin -->
73
58
  </div>
74
59
 
75
60
  <script type="module">
@@ -135,8 +120,16 @@
135
120
  window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
136
121
 
137
122
  // Render the CAPTCHA
123
+ // ?placement=float anchors the challenge to the widget; the default is popup.
124
+ const placement =
125
+ new URLSearchParams(window.location.search).get("placement") === "float"
126
+ ? "float"
127
+ : "popup";
128
+ window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
129
+
138
130
  const widgetId = render(document.getElementById('procaptcha-container'), {
139
131
  siteKey: import.meta.env.PROSOPO_SITE_KEY_PUZZLE,
132
+ placement,
140
133
  callback: handleCaptchaResponse,
141
134
  "failed-callback": handleCaptchaFailed
142
135
  });
package/src/puzzle-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: Puzzle - Implicit Rendering</title>
9
- <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
5
+ <title>Procaptcha demo: Puzzle, 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
 
@@ -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,28 +158,23 @@
164
158
  </head>
165
159
  <body>
166
160
 
167
- <div class="mui-container">
168
- <h1>Puzzle CAPTCHA - Implicit Rendering</h1>
169
- <p>This example demonstrates how to use Procaptcha in Puzzle 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"
@@ -195,13 +184,9 @@
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>