@prosopo/client-bundle-example 2.10.12 → 2.10.18

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 (42) hide show
  1. package/.turbo/turbo-build$colon$cjs.log +6 -6
  2. package/.turbo/turbo-build$colon$tsc.log +14 -14
  3. package/.turbo/turbo-build.log +7 -7
  4. package/CHANGELOG.md +46 -0
  5. package/README.md +3 -1
  6. package/env.development +7 -0
  7. package/env.production +6 -0
  8. package/env.staging +2 -2
  9. package/package.json +10 -5
  10. package/src/assets/dummy.txt +0 -0
  11. package/src/frictionless-explicit-web3.html +249 -0
  12. package/src/frictionless-explicit.html +208 -0
  13. package/src/frictionless-implicit.html +218 -0
  14. package/src/image-explicit-web3.html +198 -0
  15. package/src/image-explicit.html +158 -0
  16. package/src/index.html +207 -0
  17. package/src/index.ts +76 -0
  18. package/src/invisible-frictionless-explicit.html +132 -0
  19. package/src/invisible-frictionless-implicit.html +204 -0
  20. package/src/invisible-image-explicit.html +161 -0
  21. package/src/invisible-image-implicit.html +203 -0
  22. package/src/invisible-pow-explicit.html +161 -0
  23. package/src/invisible-pow-implicit.html +106 -0
  24. package/src/invisible-puzzle-explicit.html +160 -0
  25. package/src/invisible-puzzle-implicit.html +106 -0
  26. package/src/plugins/explanation-injector.ts +294 -0
  27. package/src/plugins/form-filler-injector.ts +233 -0
  28. package/src/plugins/navigation-injector.ts +602 -0
  29. package/src/plugins/status-log-injector.ts +199 -0
  30. package/src/pow-explicit-web3.html +195 -0
  31. package/src/pow-explicit.html +158 -0
  32. package/src/pow-implicit.html +207 -0
  33. package/src/puzzle-explicit.html +158 -0
  34. package/src/puzzle-implicit.html +207 -0
  35. package/src/styles/captcha.css +78 -0
  36. package/src/styles/field.css +12 -0
  37. package/tsconfig.cjs.json +25 -0
  38. package/tsconfig.json +31 -0
  39. package/tsconfig.tsbuildinfo +1 -0
  40. package/tsconfig.types.json +9 -0
  41. package/vite.cjs.config.ts +1 -1
  42. package/vite.config.ts +37 -4
package/src/frictionless-explicit.html ADDED
@@ -0,0 +1,208 @@
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
+ <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
+
7
+ <script src="index.js"></script>
8
+ <title>Procaptcha demo: Frictionless CAPTCHA</title>
9
+ <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
10
+ <script type="module">
11
+ window.onCaptchaFailed = function () {
12
+ console.log('Challenge failed');
13
+ updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
14
+ }
15
+
16
+ window.addEventListener('load', () => {
17
+ updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
18
+
19
+ window.setIsError = (isError) => {
20
+ const messageContainer = document.getElementById('messageContainer');
21
+ messageContainer.style.color = isError ? 'red' : 'black';
22
+ messageContainer.style.display = 'block';
23
+ };
24
+
25
+ window.setMessage = (message) => {
26
+ document.getElementById('message').innerText = message;
27
+ };
28
+
29
+ window.onLoggedIn = (token) => {
30
+ updateCaptchaStatus('Logged in, fetching private resource', 'info');
31
+ const url = new URL("/private", config.serverUrl).href;
32
+ console.log("getting private resource with token ", token, "at", url);
33
+ fetch(url, {
34
+ method: "GET",
35
+ headers: {
36
+ Origin: "http://localhost:9232", // TODO: change this to env var
37
+ "Content-Type": "application/json",
38
+ Authorization: `Bearer ${token}`,
39
+ },
40
+ })
41
+ .then(async (res) => {
42
+ try {
43
+ const jsonRes = await res.json();
44
+ if (res.status === 200) {
45
+ updateCaptchaStatus(`Successfully accessed private resource`, 'success');
46
+ setMessage(jsonRes.message);
47
+ } else {
48
+ updateCaptchaStatus(`Failed to access private resource: ${res.status}`, 'error');
49
+ }
50
+ } catch (err) {
51
+ console.log(err);
52
+ updateCaptchaStatus(`Error parsing response: ${err}`, 'error');
53
+ }
54
+ })
55
+ .catch((err) => {
56
+ console.log(err);
57
+ updateCaptchaStatus(`Fetch error: ${err}`, 'error');
58
+ });
59
+ };
60
+
61
+ window.onActionHandler = () => {
62
+ updateCaptchaStatus('Form submission initiated', 'info');
63
+
64
+ const procaptchaElements = document.getElementsByName('procaptcha-response');
65
+
66
+ if (!procaptchaElements.length) {
67
+ updateCaptchaStatus('Error: No CAPTCHA response found', 'error');
68
+ alert("Must complete captcha");
69
+ return
70
+ }
71
+
72
+ const procaptchaToken = procaptchaElements[0].value;
73
+ updateCaptchaStatus(`Token received: ${procaptchaToken.substring(0, 15)}...`, 'success');
74
+
75
+ const payload = {
76
+ email: document.getElementById('email').value,
77
+ name: document.getElementById('name').value,
78
+ password: document.getElementById('password').value,
79
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
80
+ "procaptcha-response": procaptchaToken,
81
+ };
82
+ const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
83
+ console.log("posting to", url, "with payload", payload);
84
+ fetch(url, {
85
+ method: "POST",
86
+ headers: {
87
+ "Content-Type": "application/json",
88
+ },
89
+ body: JSON.stringify(payload),
90
+ contentType: "application/json",
91
+ }).then((response) => {
92
+ return new Promise((resolve) => response.json()
93
+ .then((json) => resolve({
94
+ status: response.status,
95
+ ok: response.ok,
96
+ json,
97
+ })))
98
+ })
99
+ .then(async ({status, json, ok}) => {
100
+ console.log("status", status, "json", json.message, "ok", ok);
101
+ console.log("json", json)
102
+ try {
103
+ if (status !== 200) {
104
+ updateCaptchaStatus(`API Error: ${json.message}`, 'error');
105
+ setIsError(true);
106
+ setMessage(json.message);
107
+ } else {
108
+ updateCaptchaStatus(`API Success: ${json.message}`, 'success');
109
+ setIsError(false);
110
+ setMessage(json.message);
111
+ }
112
+ } catch (err) {
113
+ console.log(err);
114
+ updateCaptchaStatus(`Error processing response: ${err}`, 'error');
115
+ }
116
+ })
117
+ .catch((err) => {
118
+ console.log(err);
119
+ updateCaptchaStatus(`Fetch error: ${err}`, 'error');
120
+ setIsError(true);
121
+ setMessage("Error: " + err);
122
+ });
123
+ };
124
+
125
+ // Monitor DOM for CAPTCHA initialization
126
+ const observer = new MutationObserver((mutations) => {
127
+ mutations.forEach((mutation) => {
128
+ if (mutation.addedNodes.length) {
129
+ for (let i = 0; i < mutation.addedNodes.length; i++) {
130
+ const node = mutation.addedNodes[i];
131
+ if (node.classList && (node.classList.contains('procaptcha') ||
132
+ node.querySelector && node.querySelector('.procaptcha'))) {
133
+ updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
134
+ observer.disconnect();
135
+ break;
136
+ }
137
+ }
138
+ }
139
+ });
140
+ });
141
+
142
+ observer.observe(document.body, { childList: true, subtree: true });
143
+ });
144
+
145
+ // updateCaptchaStatus is now provided by status-log-injector
146
+ </script>
147
+ </head>
148
+ <body>
149
+
150
+ <div class="mui-container">
151
+ <h1>Frictionless CAPTCHA - Explicit Rendering</h1>
152
+ <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
153
+
154
+ <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
155
+
156
+ <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
157
+ <h2>Example Login Form</h2>
158
+ <div class="mui-textfield mui-textfield--float-label">
159
+ <label for="name">Name</label>
160
+ <input id="name" type="text" name="name" required/>
161
+ </div>
162
+ <div class="mui-textfield mui-textfield--float-label">
163
+ <label for="email">Email Address</label>
164
+ <input id="email" type="email" name="email" required/>
165
+ </div>
166
+ <div class="mui-textfield mui-textfield--float-label">
167
+ <label for="password">Password</label>
168
+ <input id="password" type="password" name="password" required/>
169
+ </div>
170
+ <div class="mui-textfield mui-textfield--float-label">
171
+ <div id="procaptcha-container"></div>
172
+ </div>
173
+ <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
174
+ <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
175
+ </form>
176
+
177
+ <!-- Console output display area -->
178
+ <div id="console-output" class="console-output" style="display: none;"></div>
179
+
180
+ <!-- Explanation will be injected by the explanation-injector plugin -->
181
+ </div>
182
+ <script type="module">
183
+ // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
184
+ import { render } from "%VITE_BUNDLE_URL%"
185
+
186
+ // Define a callback function to be called when the CAPTCHA is verified
187
+ function onCaptchaVerified(output) {
188
+ console.log('Challenge passed');
189
+ window.updateCaptchaStatus('Challenge passed successfully!', 'success');
190
+ window.updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
191
+ }
192
+
193
+ // Get the Element using elementId
194
+ const captchaContainer = document.getElementById('procaptcha-container');
195
+
196
+ // Render the CAPTCHA
197
+ const widgetId = render(captchaContainer, {
198
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
199
+ callback: onCaptchaVerified,
200
+ "failed-callback": function () {
201
+ console.log('Challenge failed');
202
+ window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
203
+ }
204
+ });
205
+
206
+ </script>
207
+ </body>
208
+ </html>
package/src/frictionless-implicit.html ADDED
@@ -0,0 +1,218 @@
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
+ <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
+
7
+ <script src="index.js"></script>
8
+ <link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
9
+ <title>Procaptcha demo: Frictionless CAPTCHA</title>
10
+ <script type="text/javascript">
11
+ window.onCaptchaFailed = function () {
12
+ console.log('Challenge failed');
13
+ updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
14
+ }
15
+ </script>
16
+ <script type="module">
17
+ // Function to update CAPTCHA status display is now provided by status-log-injector
18
+
19
+ window.addEventListener('load', () => {
20
+ updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
21
+
22
+ window.setIsError = (isError) => {
23
+ const messageContainer = document.getElementById('messageContainer');
24
+ messageContainer.style.color = isError ? 'red' : 'black';
25
+ messageContainer.style.display = 'block';
26
+ };
27
+
28
+ window.setMessage = (message) => {
29
+ document.getElementById('message').innerText = message;
30
+ };
31
+
32
+ window.onLoggedIn = (token) => {
33
+ updateCaptchaStatus('Logged in, fetching private resource', 'info');
34
+ const url = new URL("/private", config.serverUrl).href;
35
+ const origin = new URL(window.location.href).origin;
36
+ console.log("getting private resource with token ", token, "at", url);
37
+ fetch(url, {
38
+ method: "GET",
39
+ headers: {
40
+ Origin: `${origin}`,
41
+ "Content-Type": "application/json",
42
+ Authorization: `Bearer ${token}`,
43
+ },
44
+ })
45
+ .then(async (res) => {
46
+ try {
47
+ const jsonRes = await res.json();
48
+ if (res.status === 200) {
49
+ updateCaptchaStatus(`Successfully accessed private resource`, 'success');
50
+ setMessage(jsonRes.message);
51
+ } else {
52
+ updateCaptchaStatus(`Failed to access private resource: ${res.status}`, 'error');
53
+ }
54
+ } catch (err) {
55
+ console.log(err);
56
+ updateCaptchaStatus(`Error parsing response: ${err}`, 'error');
57
+ }
58
+ })
59
+ .catch((err) => {
60
+ console.log(err);
61
+ updateCaptchaStatus(`Fetch error: ${err}`, 'error');
62
+ });
63
+ };
64
+
65
+ window.onActionHandler = () => {
66
+ updateCaptchaStatus('Form submission initiated', 'info');
67
+
68
+ const procaptchaElements = document.getElementsByName('procaptcha-response');
69
+
70
+ if (!procaptchaElements.length) {
71
+ updateCaptchaStatus('Error: No CAPTCHA response found', 'error');
72
+ alert("Must complete captcha");
73
+ return
74
+ }
75
+
76
+ const procaptchaToken = procaptchaElements[0].value;
77
+ updateCaptchaStatus(`Token received: ${procaptchaToken.substring(0, 15)}...`, 'success');
78
+
79
+ const payload = {
80
+ email: document.getElementById('email').value,
81
+ name: document.getElementById('name').value,
82
+ password: document.getElementById('password').value,
83
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
84
+ "procaptcha-response": procaptchaToken,
85
+ };
86
+ const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
87
+ console.log("posting to", url, "with payload", payload);
88
+ fetch(url, {
89
+ method: "POST",
90
+ headers: {
91
+ "Content-Type": "application/json",
92
+ },
93
+ body: JSON.stringify(payload),
94
+ contentType: "application/json",
95
+ }).then((response) => {
96
+ return new Promise((resolve) => response.json()
97
+ .then((json) => resolve({
98
+ status: response.status,
99
+ ok: response.ok,
100
+ json,
101
+ })))
102
+ })
103
+ .then(async ({status, json, ok}) => {
104
+ console.log("status", status, "json", json.message, "ok", ok);
105
+ console.log("json", json)
106
+ try {
107
+ if (status !== 200) {
108
+ updateCaptchaStatus(`API Error: ${json.message}`, 'error');
109
+ setIsError(true);
110
+ setMessage(json.message);
111
+ } else {
112
+ updateCaptchaStatus(`API Success: ${json.message}`, 'success');
113
+ setIsError(false);
114
+ setMessage(json.message);
115
+ }
116
+ } catch (err) {
117
+ console.log(err);
118
+ updateCaptchaStatus(`Error processing response: ${err}`, 'error');
119
+ }
120
+ })
121
+ .catch((err) => {
122
+ console.log(err);
123
+ updateCaptchaStatus(`Fetch error: ${err}`, 'error');
124
+ setIsError(true);
125
+ setMessage("Error: " + err);
126
+ });
127
+ };
128
+
129
+ // Monitor DOM for CAPTCHA initialization
130
+ const observer = new MutationObserver((mutations) => {
131
+ mutations.forEach((mutation) => {
132
+ if (mutation.addedNodes.length) {
133
+ for (let i = 0; i < mutation.addedNodes.length; i++) {
134
+ const node = mutation.addedNodes[i];
135
+ if (node.classList && (node.classList.contains('procaptcha') ||
136
+ node.querySelector && node.querySelector('.procaptcha'))) {
137
+ updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
138
+ observer.disconnect();
139
+ break;
140
+ }
141
+ }
142
+ }
143
+ });
144
+ });
145
+
146
+ observer.observe(document.body, { childList: true, subtree: true });
147
+ });
148
+
149
+ // updateCaptchaStatus is now provided by status-log-injector
150
+ </script>
151
+ </head>
152
+ <body>
153
+
154
+ <div class="mui-container">
155
+ <h1>Frictionless CAPTCHA - Explicit Rendering</h1>
156
+ <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
157
+
158
+ <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
159
+
160
+ <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
161
+ <h2>Example Login Form</h2>
162
+ <div class="mui-textfield mui-textfield--float-label">
163
+ <label for="name">Name</label>
164
+ <input id="name" type="text" name="name" required/>
165
+ </div>
166
+ <div class="mui-textfield mui-textfield--float-label">
167
+ <label for="email">Email Address</label>
168
+ <input id="email" type="email" name="email" required/>
169
+ </div>
170
+ <div class="mui-textfield mui-textfield--float-label">
171
+ <label for="password">Password</label>
172
+ <input id="password" type="password" name="password" required/>
173
+ </div>
174
+ <div class="mui-textfield mui-textfield--float-label">
175
+ <div id="procaptcha-container"></div>
176
+ </div>
177
+ <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
178
+ <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
179
+ </form>
180
+
181
+ </div>
182
+ <script type="module">
183
+ (async () => {
184
+
185
+ const host = new URL(window.location.href).host;
186
+
187
+ // Use predefined VITE_BUNDLE_URL or default to localhost with the same host as the page, to ensure we load the
188
+ // bundle from the correct location in different environments
189
+ const bundleUrl = import.meta.env.VITE_BUNDLE_URL || 'https://localhost:9269/procaptcha.bundle.js'.replace('localhost', host);
190
+
191
+ // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
192
+ const {render} = await import(bundleUrl);
193
+
194
+ // Define a callback function to be called when the CAPTCHA is verified
195
+ function onCaptchaVerified(output) {
196
+ console.log('Challenge passed');
197
+ window.updateCaptchaStatus('Challenge passed successfully!', 'success');
198
+ window.updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
199
+ }
200
+
201
+ const captchaContainer = document.getElementById('procaptcha-container');
202
+
203
+ // Render the CAPTCHA
204
+ const widgetId = render(captchaContainer, {
205
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
206
+ callback: onCaptchaVerified,
207
+ "failed-callback": function () {
208
+ console.log('Challenge failed');
209
+ window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
210
+ }
211
+ });
212
+
213
+ window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
214
+ })();
215
+ </script>
216
+
217
+ </body>
218
+ </html>
package/src/image-explicit-web3.html ADDED
@@ -0,0 +1,198 @@
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
+ <link href="styles/field.css" rel="stylesheet" type="text/css"/>
6
+
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"/>
10
+ <script type="module">
11
+ // Function to update CAPTCHA status display is now provided by status-log-injector
12
+
13
+ document.addEventListener('DOMContentLoaded', function() {
14
+ updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
15
+
16
+ // Monitor DOM for CAPTCHA initialization
17
+ const observer = new MutationObserver((mutations) => {
18
+ mutations.forEach((mutation) => {
19
+ if (mutation.addedNodes.length) {
20
+ for (let i = 0; i < mutation.addedNodes.length; i++) {
21
+ const node = mutation.addedNodes[i];
22
+ if (node.classList && (node.classList.contains('procaptcha') ||
23
+ node.querySelector && node.querySelector('.procaptcha'))) {
24
+ updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
25
+ observer.disconnect();
26
+ break;
27
+ }
28
+ }
29
+ }
30
+ });
31
+ });
32
+
33
+ observer.observe(document.body, { childList: true, subtree: true });
34
+ });
35
+
36
+ // updateCaptchaStatus is now provided by status-log-injector
37
+ </script>
38
+ </head>
39
+ <body>
40
+ <div class="mui-container">
41
+ <h1>Procaptcha Image Mode - Explicit Rendering</h1>
42
+ <p>This example demonstrates how to use Procaptcha in image mode with explicit rendering.</p>
43
+
44
+ <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
45
+
46
+ <form id="demo-form" class="mui-form">
47
+ <h2>Example Form</h2>
48
+
49
+ <div class="mui-textfield mui-textfield--float-label">
50
+ <label for="name">Name</label>
51
+ <input type="text" id="name" name="name" required />
52
+ </div>
53
+
54
+ <div class="mui-textfield mui-textfield--float-label">
55
+ <label for="email">Email</label>
56
+ <input type="email" id="email" name="email" required />
57
+ </div>
58
+
59
+ <!-- The container for the CAPTCHA -->
60
+ <div id="procaptcha-container"></div>
61
+
62
+ <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
63
+
64
+ <div id="error"></div>
65
+ </form>
66
+
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>
71
+
72
+ <!-- Explanation will be injected by the explanation-injector plugin -->
73
+ </div>
74
+
75
+ <script type="module">
76
+ import { render } from "%VITE_BUNDLE_URL%"
77
+ import { web3AccountsSubscribe, web3Enable } from "@polkadot/extension-dapp";
78
+
79
+ // Form validation function
80
+ function validateForm() {
81
+ const nameInput = document.getElementById('name');
82
+ const emailInput = document.getElementById('email');
83
+ const errorDisplay = document.getElementById('error');
84
+
85
+ if (!nameInput.value || !emailInput.value) {
86
+ errorDisplay.textContent = 'Please fill out all fields';
87
+ errorDisplay.style.display = 'block';
88
+ window.updateCaptchaStatus('Form validation failed: Empty fields', 'error');
89
+ return false;
90
+ }
91
+
92
+ // Basic email validation
93
+ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
94
+ if (!emailPattern.test(emailInput.value)) {
95
+ errorDisplay.textContent = 'Please enter a valid email address';
96
+ errorDisplay.style.display = 'block';
97
+ window.updateCaptchaStatus('Form validation failed: Invalid email format', 'error');
98
+ return false;
99
+ }
100
+
101
+ errorDisplay.style.display = 'none';
102
+ window.updateCaptchaStatus('Form validation passed', 'info');
103
+ return true;
104
+ }
105
+
106
+ // Callback for successful CAPTCHA verification
107
+ function handleCaptchaResponse(token) {
108
+ console.log('Procaptcha verified, token:', token);
109
+ window.updateCaptchaStatus('Challenge passed successfully!', 'success');
110
+ window.updateCaptchaStatus(`Token generated: ${token.substring(0, 15)}...`, 'success');
111
+
112
+ const name = document.getElementById('name').value;
113
+ const email = document.getElementById('email').value;
114
+
115
+ // Display result
116
+ const resultElement = document.getElementById('result');
117
+ resultElement.innerHTML = `<strong>Form submitted with:</strong><br>
118
+ - Name: ${name}<br>
119
+ - Email: ${email}<br>
120
+ - Procaptcha verified: Yes`;
121
+ resultElement.style.display = 'block';
122
+
123
+ window.updateCaptchaStatus('Form submission completed', 'success');
124
+ }
125
+
126
+ // Callback for failed CAPTCHA verification
127
+ function handleCaptchaFailed() {
128
+ console.log('Captcha verification failed');
129
+ window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
130
+ document.getElementById('error').textContent = 'CAPTCHA verification failed. Please try again.';
131
+ document.getElementById('error').style.display = 'block';
132
+ }
133
+
134
+ // Get web3 accounts and create select element
135
+ async function getWeb3Accounts() {
136
+ return new Promise((resolve) =>{ web3AccountsSubscribe((accounts) => {
137
+ if (accounts.length === 0) {
138
+ window.updateCaptchaStatus('No accounts found. Please connect your wallet.', 'error');
139
+ } else {
140
+ window.updateCaptchaStatus(`Connected to ${accounts.length} account(s).`, 'info');
141
+ // render a modal and get the user to select 1 account
142
+ const accountSelect = document.createElement('select');
143
+ accountSelect.id = 'account-select';
144
+ accountSelect.classList.add('mui-select');
145
+ accountSelect.classList.add('account-select');
146
+ accounts.forEach((account) => {
147
+ const option = document.createElement('option');
148
+ option.value = account.address;
149
+ option.textContent = `${account.meta.name} (${account.address})`;
150
+ accountSelect.appendChild(option);
151
+ });
152
+ const accountContainer = document.createElement('div');
153
+ accountContainer.innerHTML = '<label for="account-select"><h2>Select Account:</h2></label>';
154
+ accountContainer.appendChild(accountSelect);
155
+ document.getElementById('demo-form').prepend(accountContainer);
156
+ window.updateCaptchaStatus('Accounts loaded successfully', 'info');
157
+ }
158
+ resolve(accounts);
159
+ })});
160
+ }
161
+
162
+ // Wait for DOM content to be loaded
163
+ document.addEventListener('DOMContentLoaded', async function() {
164
+ window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
165
+
166
+ await web3Enable("Procaptcha Demo");
167
+
168
+ await getWeb3Accounts();
169
+
170
+ // Get the selected account from the dropdown
171
+ const account = document.getElementById('account-select') ? document.getElementById('account-select').value : null;
172
+ window.updateCaptchaStatus(`Rendering the CAPTCHA for account ${account}`, 'info'); window.updateCaptchaStatus(`Rendering the CAPTCHA for account ${account}`, 'info');
173
+
174
+ // Render the CAPTCHA
175
+
176
+ const widgetId = render(document.getElementById('procaptcha-container'), {
177
+ siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
178
+ callback: handleCaptchaResponse,
179
+ "failed-callback": handleCaptchaFailed,
180
+ web3:true,
181
+ userAccountAddress: account
182
+ });
183
+
184
+ window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
185
+
186
+ // Add form submit handler
187
+ document.getElementById('demo-form').addEventListener('submit', function(e) {
188
+ e.preventDefault();
189
+ window.updateCaptchaStatus('Form submission attempted', 'info');
190
+ if (validateForm()) {
191
+ // Form is valid, CAPTCHA verification will be handled by the callback
192
+ window.updateCaptchaStatus('Waiting for CAPTCHA verification', 'info');
193
+ }
194
+ });
195
+ });
196
+ </script>
197
+ </body>
198
+ </html>