@prosopo/client-bundle-example 2.11.3 → 2.11.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$cjs.log +3 -6
- package/.turbo/turbo-build$colon$tsc.log +11 -14
- package/.turbo/turbo-build.log +4 -10
- package/CHANGELOG.md +32 -0
- package/LICENSE +201 -0
- package/README.md +6 -6
- package/dist/cjs/plugins/pages.cjs +7 -0
- package/dist/plugins/pages.js +7 -0
- package/env.staging +5 -4
- package/package.json +53 -53
- package/vite.config.ts +52 -1
- package/env.development +0 -7
- package/env.production +0 -6
- package/src/assets/dummy.txt +0 -0
- package/src/frictionless-explicit-web3.html +0 -237
- package/src/frictionless-explicit.html +0 -205
- package/src/frictionless-implicit.html +0 -192
- package/src/frictionless-manual-start.html +0 -204
- package/src/image-explicit-web3.html +0 -182
- package/src/image-explicit.html +0 -151
- package/src/image-implicit.html +0 -192
- package/src/index.html +0 -192
- package/src/index.ts +0 -15
- package/src/invisible-frictionless-explicit.html +0 -123
- package/src/invisible-frictionless-implicit.html +0 -187
- package/src/invisible-image-explicit.html +0 -146
- package/src/invisible-image-implicit.html +0 -187
- package/src/invisible-pow-explicit.html +0 -146
- package/src/invisible-pow-implicit.html +0 -94
- package/src/invisible-puzzle-explicit.html +0 -145
- package/src/invisible-puzzle-implicit.html +0 -94
- package/src/plugins/code-snippet-injector.ts +0 -179
- package/src/plugins/form-filler-injector.ts +0 -148
- package/src/plugins/layout-injector.ts +0 -256
- package/src/plugins/logo.ts +0 -15
- package/src/plugins/pages.ts +0 -219
- package/src/plugins/placement-injector.ts +0 -114
- package/src/plugins/slots.ts +0 -32
- package/src/plugins/status-log-injector.ts +0 -143
- package/src/pow-explicit-web3.html +0 -179
- package/src/pow-explicit.html +0 -143
- package/src/pow-implicit-sessionid.html +0 -209
- package/src/pow-implicit.html +0 -192
- package/src/puzzle-bind-explicit.html +0 -83
- package/src/puzzle-explicit.html +0 -151
- package/src/puzzle-implicit.html +0 -192
- package/src/styles/demo.css +0 -803
- package/src/tests/explicitRender.unit.test.ts +0 -49
- package/src/tests/plugins.unit.test.ts +0 -490
- package/tsconfig.cjs.json +0 -25
- package/tsconfig.json +0 -31
- package/tsconfig.tsbuildinfo +0 -1
- package/tsconfig.types.json +0 -9
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
<title>Procaptcha demo: Frictionless, invisible, implicit rendering</title>
|
|
6
|
-
<script type="module">
|
|
7
|
-
|
|
8
|
-
// Define callbacks directly on window object so they're globally accessible
|
|
9
|
-
window.onCaptchaFailed = function () {
|
|
10
|
-
updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
window.onCaptchaVerified = function(output) {
|
|
14
|
-
updateCaptchaStatus('Challenge passed successfully!', 'success');
|
|
15
|
-
updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
window.onActionHandler = function(token) {
|
|
19
|
-
updateCaptchaStatus('CAPTCHA callback executed with token', 'success');
|
|
20
|
-
|
|
21
|
-
if (!token) {
|
|
22
|
-
updateCaptchaStatus('Error: No token received from CAPTCHA', 'error');
|
|
23
|
-
alert("Must complete captcha");
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
|
|
28
|
-
const payload = {
|
|
29
|
-
email: document.getElementById('email').value,
|
|
30
|
-
name: document.getElementById('name').value,
|
|
31
|
-
password: document.getElementById('password').value,
|
|
32
|
-
siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
|
|
33
|
-
"procaptcha-response": token,
|
|
34
|
-
};
|
|
35
|
-
const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
|
|
36
|
-
console.log("Posting to", url, "with payload", payload);
|
|
37
|
-
fetch(url, {
|
|
38
|
-
method: "POST",
|
|
39
|
-
headers: {
|
|
40
|
-
"Content-Type": "application/json",
|
|
41
|
-
},
|
|
42
|
-
body: JSON.stringify(payload),
|
|
43
|
-
contentType: "application/json",
|
|
44
|
-
}).then((response) => {
|
|
45
|
-
return new Promise((resolve) => response.json()
|
|
46
|
-
.then((json) => resolve({
|
|
47
|
-
status: response.status,
|
|
48
|
-
ok: response.ok,
|
|
49
|
-
json,
|
|
50
|
-
})))
|
|
51
|
-
})
|
|
52
|
-
.then(async ({status, json, ok}) => {
|
|
53
|
-
console.log("Response status:", status, "message:", json.message, "ok:", ok);
|
|
54
|
-
console.log("Full response:", json);
|
|
55
|
-
try {
|
|
56
|
-
if (status !== 200) {
|
|
57
|
-
window.setIsError(true);
|
|
58
|
-
window.setMessage(json.message);
|
|
59
|
-
updateCaptchaStatus(`API Error: ${json.message}`, 'error');
|
|
60
|
-
} else {
|
|
61
|
-
window.setIsError(false);
|
|
62
|
-
window.setMessage(json.message);
|
|
63
|
-
updateCaptchaStatus(`API Success: ${json.message}`, 'success');
|
|
64
|
-
}
|
|
65
|
-
} catch (err) {
|
|
66
|
-
console.log("Error processing response:", err);
|
|
67
|
-
updateCaptchaStatus(`Error processing response: ${err}`, 'error');
|
|
68
|
-
}
|
|
69
|
-
})
|
|
70
|
-
.catch((err) => {
|
|
71
|
-
console.log("Fetch error:", err);
|
|
72
|
-
window.setIsError(true);
|
|
73
|
-
window.setMessage("Error: " + err);
|
|
74
|
-
updateCaptchaStatus(`Fetch error: ${err}`, 'error');
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
window.addEventListener('load', () => {
|
|
79
|
-
|
|
80
|
-
window.setIsError = (isError) => {
|
|
81
|
-
const messageContainer = document.getElementById('messageContainer');
|
|
82
|
-
messageContainer.style.color = isError ? 'red' : 'black';
|
|
83
|
-
messageContainer.style.display = 'block';
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
window.setMessage = (message) => {
|
|
87
|
-
document.getElementById('message').innerText = message;
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
window.onLoggedIn = (token) => {
|
|
91
|
-
const url = new URL("/private", config.serverUrl).href;
|
|
92
|
-
console.log("getting private resource with token ", token, "at", url);
|
|
93
|
-
fetch(url, {
|
|
94
|
-
method: "GET",
|
|
95
|
-
headers: {
|
|
96
|
-
Origin: "http://localhost:9232", // TODO: change this to env var
|
|
97
|
-
"Content-Type": "application/json",
|
|
98
|
-
Authorization: `Bearer ${token}`,
|
|
99
|
-
},
|
|
100
|
-
})
|
|
101
|
-
.then(async (res) => {
|
|
102
|
-
try {
|
|
103
|
-
const jsonRes = await res.json();
|
|
104
|
-
if (res.status === 200) {
|
|
105
|
-
setMessage(jsonRes.message);
|
|
106
|
-
}
|
|
107
|
-
} catch (err) {
|
|
108
|
-
console.log(err);
|
|
109
|
-
}
|
|
110
|
-
})
|
|
111
|
-
.catch((err) => {
|
|
112
|
-
console.log(err);
|
|
113
|
-
});
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
|
|
117
|
-
|
|
118
|
-
// Monitor DOM for CAPTCHA initialization
|
|
119
|
-
const observer = new MutationObserver((mutations) => {
|
|
120
|
-
mutations.forEach((mutation) => {
|
|
121
|
-
if (mutation.addedNodes.length) {
|
|
122
|
-
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
123
|
-
const node = mutation.addedNodes[i];
|
|
124
|
-
if (node.classList && (node.classList.contains('procaptcha') ||
|
|
125
|
-
node.querySelector && node.querySelector('.procaptcha'))) {
|
|
126
|
-
updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
|
|
127
|
-
observer.disconnect();
|
|
128
|
-
break;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
// Create a method to show CAPTCHA execution events
|
|
139
|
-
document.addEventListener('procaptcha:execute', function(e) {
|
|
140
|
-
updateCaptchaStatus(`CAPTCHA execution started: type=frictionless, mode=invisible`, 'info');
|
|
141
|
-
updateCaptchaStatus(`Container: ${e.detail.containerId}, timestamp: ${new Date(e.detail.timestamp).toLocaleTimeString()}`, 'info');
|
|
142
|
-
});
|
|
143
|
-
|
|
144
|
-
// Add custom event listener for CAPTCHA verification stages
|
|
145
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
146
|
-
setTimeout(() => {
|
|
147
|
-
updateCaptchaStatus('CAPTCHA script loaded and initialized', 'info');
|
|
148
|
-
updateCaptchaStatus('Waiting for user interaction...', 'info');
|
|
149
|
-
}, 500);
|
|
150
|
-
});
|
|
151
|
-
</script>
|
|
152
|
-
<script id="procaptchaScript" type="module" src="%VITE_BUNDLE_URL%" async defer></script>
|
|
153
|
-
</head>
|
|
154
|
-
<body>
|
|
155
|
-
|
|
156
|
-
<div class="demo-card">
|
|
157
|
-
|
|
158
|
-
<form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
|
|
159
|
-
<h2>Create an account</h2>
|
|
160
|
-
<div class="demo-field">
|
|
161
|
-
<label for="name">Name</label>
|
|
162
|
-
<input id="name" type="text" name="name" required/>
|
|
163
|
-
</div>
|
|
164
|
-
<div class="demo-field">
|
|
165
|
-
<label for="email">Email Address</label>
|
|
166
|
-
<input id="email" type="email" name="email" required/>
|
|
167
|
-
</div>
|
|
168
|
-
<div class="demo-field">
|
|
169
|
-
<label for="password">Password</label>
|
|
170
|
-
<input id="password" type="password" name="password" required/>
|
|
171
|
-
</div>
|
|
172
|
-
<div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
|
|
173
|
-
<button
|
|
174
|
-
type="button"
|
|
175
|
-
class="demo-button procaptcha"
|
|
176
|
-
data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
|
|
177
|
-
data-callback="onActionHandler"
|
|
178
|
-
data-failed-callback="onCaptchaFailed"
|
|
179
|
-
data-size="invisible"
|
|
180
|
-
data-cy="submit-button">
|
|
181
|
-
Submit
|
|
182
|
-
</button>
|
|
183
|
-
</form>
|
|
184
|
-
|
|
185
|
-
</div>
|
|
186
|
-
</body>
|
|
187
|
-
</html>
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
<title>Procaptcha demo: Image, invisible, explicit rendering</title>
|
|
6
|
-
<script type="module">
|
|
7
|
-
|
|
8
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
9
|
-
|
|
10
|
-
updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
|
|
11
|
-
|
|
12
|
-
// Monitor DOM for CAPTCHA initialization
|
|
13
|
-
const observer = new MutationObserver((mutations) => {
|
|
14
|
-
mutations.forEach((mutation) => {
|
|
15
|
-
if (mutation.addedNodes.length) {
|
|
16
|
-
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
17
|
-
const node = mutation.addedNodes[i];
|
|
18
|
-
if (node.classList && (node.classList.contains('procaptcha') ||
|
|
19
|
-
node.querySelector && node.querySelector('.procaptcha'))) {
|
|
20
|
-
updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
|
|
21
|
-
observer.disconnect();
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
</script>
|
|
33
|
-
</head>
|
|
34
|
-
<body>
|
|
35
|
-
<div class="demo-card">
|
|
36
|
-
|
|
37
|
-
<form id="demo-form" class="demo-form">
|
|
38
|
-
<h2>Create an account</h2>
|
|
39
|
-
|
|
40
|
-
<div class="demo-field">
|
|
41
|
-
<label for="name">Name</label>
|
|
42
|
-
<input type="text" id="name" name="name" required />
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
<div class="demo-field">
|
|
46
|
-
<label for="email">Email</label>
|
|
47
|
-
<input type="email" id="email" name="email" required />
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div id="procaptcha-container"></div>
|
|
51
|
-
|
|
52
|
-
<button type="submit" class="demo-button" data-cy="submit-button">Submit</button>
|
|
53
|
-
|
|
54
|
-
<div id="error"></div>
|
|
55
|
-
</form>
|
|
56
|
-
|
|
57
|
-
<div id="result" class="demo-result" style="display: none;"></div>
|
|
58
|
-
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<script type="module">
|
|
62
|
-
import { render, execute } from "%VITE_BUNDLE_URL%"
|
|
63
|
-
|
|
64
|
-
// Form validation function
|
|
65
|
-
function validateForm() {
|
|
66
|
-
const nameInput = document.getElementById('name');
|
|
67
|
-
const emailInput = document.getElementById('email');
|
|
68
|
-
const errorDisplay = document.getElementById('error');
|
|
69
|
-
|
|
70
|
-
if (!nameInput.value || !emailInput.value) {
|
|
71
|
-
errorDisplay.textContent = 'Please fill out all fields';
|
|
72
|
-
errorDisplay.style.display = 'block';
|
|
73
|
-
window.updateCaptchaStatus('Form validation failed: Empty fields', 'error');
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Basic email validation
|
|
78
|
-
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
79
|
-
if (!emailPattern.test(emailInput.value)) {
|
|
80
|
-
errorDisplay.textContent = 'Please enter a valid email address';
|
|
81
|
-
errorDisplay.style.display = 'block';
|
|
82
|
-
window.updateCaptchaStatus('Form validation failed: Invalid email format', 'error');
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
errorDisplay.style.display = 'none';
|
|
87
|
-
window.updateCaptchaStatus('Form validation passed', 'info');
|
|
88
|
-
return true;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Callback for successful CAPTCHA verification
|
|
92
|
-
function handleCaptchaResponse(token) {
|
|
93
|
-
console.log('Procaptcha verified, token:', token);
|
|
94
|
-
window.updateCaptchaStatus('Challenge passed successfully!', 'success');
|
|
95
|
-
window.updateCaptchaStatus(`Token generated: ${token.substring(0, 15)}...`, 'success');
|
|
96
|
-
|
|
97
|
-
const name = document.getElementById('name').value;
|
|
98
|
-
const email = document.getElementById('email').value;
|
|
99
|
-
|
|
100
|
-
// Display result
|
|
101
|
-
const resultElement = document.getElementById('result');
|
|
102
|
-
resultElement.innerHTML = `<strong>Form submitted with:</strong><br>
|
|
103
|
-
- Name: ${name}<br>
|
|
104
|
-
- Email: ${email}<br>
|
|
105
|
-
- Procaptcha verified: Yes`;
|
|
106
|
-
resultElement.style.display = 'block';
|
|
107
|
-
|
|
108
|
-
window.updateCaptchaStatus('Form submission completed', 'success');
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// Callback for failed CAPTCHA verification
|
|
112
|
-
function handleCaptchaFailed() {
|
|
113
|
-
console.log('Captcha verification failed');
|
|
114
|
-
window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
|
|
115
|
-
document.getElementById('error').textContent = 'CAPTCHA verification failed. Please try again.';
|
|
116
|
-
document.getElementById('error').style.display = 'block';
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Wait for DOM content to be loaded
|
|
120
|
-
document.addEventListener('DOMContentLoaded', async function() {
|
|
121
|
-
window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
|
|
122
|
-
|
|
123
|
-
// Render the CAPTCHA
|
|
124
|
-
const widgetId = await render(document.getElementById('procaptcha-container'), {
|
|
125
|
-
siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
|
|
126
|
-
callback: handleCaptchaResponse,
|
|
127
|
-
"failed-callback": handleCaptchaFailed,
|
|
128
|
-
size: "invisible"
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
|
|
132
|
-
|
|
133
|
-
// Add form submit handler
|
|
134
|
-
document.getElementById('demo-form').addEventListener('submit', function(e) {
|
|
135
|
-
e.preventDefault();
|
|
136
|
-
window.updateCaptchaStatus('Form submission attempted', 'info');
|
|
137
|
-
if (validateForm()) {
|
|
138
|
-
// Form is valid, CAPTCHA verification will be handled by the callback
|
|
139
|
-
window.updateCaptchaStatus('Waiting for CAPTCHA verification', 'info');
|
|
140
|
-
execute();
|
|
141
|
-
}
|
|
142
|
-
});
|
|
143
|
-
});
|
|
144
|
-
</script>
|
|
145
|
-
</body>
|
|
146
|
-
</html>
|
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
<title>Procaptcha demo: Image, invisible, implicit rendering</title>
|
|
6
|
-
<script type="module">
|
|
7
|
-
|
|
8
|
-
// Define callbacks directly on window object so they're globally accessible
|
|
9
|
-
window.onCaptchaFailed = function () {
|
|
10
|
-
updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
window.onCaptchaVerified = function(output) {
|
|
14
|
-
updateCaptchaStatus('Challenge passed successfully!', 'success');
|
|
15
|
-
updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
window.onActionHandler = function(token) {
|
|
19
|
-
updateCaptchaStatus('CAPTCHA callback executed with token', 'success');
|
|
20
|
-
|
|
21
|
-
if (!token) {
|
|
22
|
-
updateCaptchaStatus('Error: No token received from CAPTCHA', 'error');
|
|
23
|
-
alert("Must complete captcha");
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
|
|
28
|
-
const payload = {
|
|
29
|
-
email: document.getElementById('email').value,
|
|
30
|
-
name: document.getElementById('name').value,
|
|
31
|
-
password: document.getElementById('password').value,
|
|
32
|
-
siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
|
|
33
|
-
"procaptcha-response": token,
|
|
34
|
-
};
|
|
35
|
-
const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
|
|
36
|
-
console.log("Posting to", url, "with payload", payload);
|
|
37
|
-
fetch(url, {
|
|
38
|
-
method: "POST",
|
|
39
|
-
headers: {
|
|
40
|
-
"Content-Type": "application/json",
|
|
41
|
-
},
|
|
42
|
-
body: JSON.stringify(payload),
|
|
43
|
-
contentType: "application/json",
|
|
44
|
-
}).then((response) => {
|
|
45
|
-
return new Promise((resolve) => response.json()
|
|
46
|
-
.then((json) => resolve({
|
|
47
|
-
status: response.status,
|
|
48
|
-
ok: response.ok,
|
|
49
|
-
json,
|
|
50
|
-
})))
|
|
51
|
-
})
|
|
52
|
-
.then(async ({status, json, ok}) => {
|
|
53
|
-
console.log("Response status:", status, "message:", json.message, "ok:", ok);
|
|
54
|
-
console.log("Full response:", json);
|
|
55
|
-
try {
|
|
56
|
-
if (status !== 200) {
|
|
57
|
-
window.setIsError(true);
|
|
58
|
-
window.setMessage(json.message);
|
|
59
|
-
updateCaptchaStatus(`API Error: ${json.message}`, 'error');
|
|
60
|
-
} else {
|
|
61
|
-
window.setIsError(false);
|
|
62
|
-
window.setMessage(json.message);
|
|
63
|
-
updateCaptchaStatus(`API Success: ${json.message}`, 'success');
|
|
64
|
-
}
|
|
65
|
-
} catch (err) {
|
|
66
|
-
console.log("Error processing response:", err);
|
|
67
|
-
updateCaptchaStatus(`Error processing response: ${err}`, 'error');
|
|
68
|
-
}
|
|
69
|
-
})
|
|
70
|
-
.catch((err) => {
|
|
71
|
-
console.log("Fetch error:", err);
|
|
72
|
-
window.setIsError(true);
|
|
73
|
-
window.setMessage("Error: " + err);
|
|
74
|
-
updateCaptchaStatus(`Fetch error: ${err}`, 'error');
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
window.addEventListener('load', () => {
|
|
79
|
-
|
|
80
|
-
window.setIsError = (isError) => {
|
|
81
|
-
const messageContainer = document.getElementById('messageContainer');
|
|
82
|
-
messageContainer.style.color = isError ? 'red' : 'black';
|
|
83
|
-
messageContainer.style.display = 'block';
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
window.setMessage = (message) => {
|
|
87
|
-
document.getElementById('message').innerText = message;
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
window.onLoggedIn = (token) => {
|
|
91
|
-
const url = new URL("/private", config.serverUrl).href;
|
|
92
|
-
console.log("getting private resource with token ", token, "at", url);
|
|
93
|
-
fetch(url, {
|
|
94
|
-
method: "GET",
|
|
95
|
-
headers: {
|
|
96
|
-
Origin: "http://localhost:9232", // TODO: change this to env var
|
|
97
|
-
"Content-Type": "application/json",
|
|
98
|
-
Authorization: `Bearer ${token}`,
|
|
99
|
-
},
|
|
100
|
-
})
|
|
101
|
-
.then(async (res) => {
|
|
102
|
-
try {
|
|
103
|
-
const jsonRes = await res.json();
|
|
104
|
-
if (res.status === 200) {
|
|
105
|
-
setMessage(jsonRes.message);
|
|
106
|
-
}
|
|
107
|
-
} catch (err) {
|
|
108
|
-
console.log(err);
|
|
109
|
-
}
|
|
110
|
-
})
|
|
111
|
-
.catch((err) => {
|
|
112
|
-
console.log(err);
|
|
113
|
-
});
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
|
|
117
|
-
|
|
118
|
-
// Monitor DOM for CAPTCHA initialization
|
|
119
|
-
const observer = new MutationObserver((mutations) => {
|
|
120
|
-
mutations.forEach((mutation) => {
|
|
121
|
-
if (mutation.addedNodes.length) {
|
|
122
|
-
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
123
|
-
const node = mutation.addedNodes[i];
|
|
124
|
-
if (node.classList && (node.classList.contains('procaptcha') ||
|
|
125
|
-
node.querySelector && node.querySelector('.procaptcha'))) {
|
|
126
|
-
updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
|
|
127
|
-
observer.disconnect();
|
|
128
|
-
break;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
// Create a method to show CAPTCHA execution events
|
|
139
|
-
document.addEventListener('procaptcha:execute', function(e) {
|
|
140
|
-
updateCaptchaStatus(`CAPTCHA execution started: type=image, mode=invisible`, 'info');
|
|
141
|
-
updateCaptchaStatus(`Container: ${e.detail.containerId}, timestamp: ${new Date(e.detail.timestamp).toLocaleTimeString()}`, 'info');
|
|
142
|
-
});
|
|
143
|
-
|
|
144
|
-
// Add custom event listener for CAPTCHA verification stages
|
|
145
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
146
|
-
setTimeout(() => {
|
|
147
|
-
updateCaptchaStatus('CAPTCHA script loaded and initialized', 'info');
|
|
148
|
-
updateCaptchaStatus('Waiting for user interaction...', 'info');
|
|
149
|
-
}, 500);
|
|
150
|
-
});
|
|
151
|
-
</script>
|
|
152
|
-
<script id="procaptchaScript" type="module" src="%VITE_BUNDLE_URL%" async defer></script>
|
|
153
|
-
</head>
|
|
154
|
-
<body>
|
|
155
|
-
|
|
156
|
-
<div class="demo-card">
|
|
157
|
-
|
|
158
|
-
<form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
|
|
159
|
-
<h2>Create an account</h2>
|
|
160
|
-
<div class="demo-field">
|
|
161
|
-
<label for="name">Name</label>
|
|
162
|
-
<input id="name" type="text" name="name" required/>
|
|
163
|
-
</div>
|
|
164
|
-
<div class="demo-field">
|
|
165
|
-
<label for="email">Email Address</label>
|
|
166
|
-
<input id="email" type="email" name="email" required/>
|
|
167
|
-
</div>
|
|
168
|
-
<div class="demo-field">
|
|
169
|
-
<label for="password">Password</label>
|
|
170
|
-
<input id="password" type="password" name="password" required/>
|
|
171
|
-
</div>
|
|
172
|
-
<div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
|
|
173
|
-
<button
|
|
174
|
-
type="button"
|
|
175
|
-
class="demo-button procaptcha"
|
|
176
|
-
data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
|
|
177
|
-
data-callback="onActionHandler"
|
|
178
|
-
data-failed-callback="onCaptchaFailed"
|
|
179
|
-
data-size="invisible"
|
|
180
|
-
data-cy="submit-button">
|
|
181
|
-
Submit
|
|
182
|
-
</button>
|
|
183
|
-
</form>
|
|
184
|
-
|
|
185
|
-
</div>
|
|
186
|
-
</body>
|
|
187
|
-
</html>
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
<title>Procaptcha demo: Proof of Work, invisible, explicit rendering</title>
|
|
6
|
-
<script type="module">
|
|
7
|
-
|
|
8
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
9
|
-
|
|
10
|
-
updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
|
|
11
|
-
|
|
12
|
-
// Monitor DOM for CAPTCHA initialization
|
|
13
|
-
const observer = new MutationObserver((mutations) => {
|
|
14
|
-
mutations.forEach((mutation) => {
|
|
15
|
-
if (mutation.addedNodes.length) {
|
|
16
|
-
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
17
|
-
const node = mutation.addedNodes[i];
|
|
18
|
-
if (node.classList && (node.classList.contains('procaptcha') ||
|
|
19
|
-
node.querySelector && node.querySelector('.procaptcha'))) {
|
|
20
|
-
updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
|
|
21
|
-
observer.disconnect();
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
</script>
|
|
33
|
-
</head>
|
|
34
|
-
<body>
|
|
35
|
-
<div class="demo-card">
|
|
36
|
-
|
|
37
|
-
<form id="demo-form" class="demo-form">
|
|
38
|
-
<h2>Create an account</h2>
|
|
39
|
-
|
|
40
|
-
<div class="demo-field">
|
|
41
|
-
<label for="name">Name</label>
|
|
42
|
-
<input type="text" id="name" name="name" required />
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
<div class="demo-field">
|
|
46
|
-
<label for="email">Email</label>
|
|
47
|
-
<input type="email" id="email" name="email" required />
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div id="procaptcha-container"></div>
|
|
51
|
-
|
|
52
|
-
<button type="submit" class="demo-button">Submit</button>
|
|
53
|
-
|
|
54
|
-
<div id="error"></div>
|
|
55
|
-
</form>
|
|
56
|
-
|
|
57
|
-
<div id="result" class="demo-result" style="display: none;"></div>
|
|
58
|
-
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<script type="module">
|
|
62
|
-
import { render, execute } from "%VITE_BUNDLE_URL%"
|
|
63
|
-
|
|
64
|
-
// Form validation function
|
|
65
|
-
function validateForm() {
|
|
66
|
-
const nameInput = document.getElementById('name');
|
|
67
|
-
const emailInput = document.getElementById('email');
|
|
68
|
-
const errorDisplay = document.getElementById('error');
|
|
69
|
-
|
|
70
|
-
if (!nameInput.value || !emailInput.value) {
|
|
71
|
-
errorDisplay.textContent = 'Please fill out all fields';
|
|
72
|
-
errorDisplay.style.display = 'block';
|
|
73
|
-
window.updateCaptchaStatus('Form validation failed: Empty fields', 'error');
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Basic email validation
|
|
78
|
-
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
79
|
-
if (!emailPattern.test(emailInput.value)) {
|
|
80
|
-
errorDisplay.textContent = 'Please enter a valid email address';
|
|
81
|
-
errorDisplay.style.display = 'block';
|
|
82
|
-
window.updateCaptchaStatus('Form validation failed: Invalid email format', 'error');
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
errorDisplay.style.display = 'none';
|
|
87
|
-
window.updateCaptchaStatus('Form validation passed', 'info');
|
|
88
|
-
return true;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Callback for successful CAPTCHA verification
|
|
92
|
-
function handleCaptchaResponse(token) {
|
|
93
|
-
console.log('Procaptcha verified, token:', token);
|
|
94
|
-
window.updateCaptchaStatus('Challenge passed successfully!', 'success');
|
|
95
|
-
window.updateCaptchaStatus(`Token generated: ${token.substring(0, 15)}...`, 'success');
|
|
96
|
-
|
|
97
|
-
const name = document.getElementById('name').value;
|
|
98
|
-
const email = document.getElementById('email').value;
|
|
99
|
-
|
|
100
|
-
// Display result
|
|
101
|
-
const resultElement = document.getElementById('result');
|
|
102
|
-
resultElement.innerHTML = `<strong>Form submitted with:</strong><br>
|
|
103
|
-
- Name: ${name}<br>
|
|
104
|
-
- Email: ${email}<br>
|
|
105
|
-
- Procaptcha verified: Yes`;
|
|
106
|
-
resultElement.style.display = 'block';
|
|
107
|
-
|
|
108
|
-
window.updateCaptchaStatus('Form submission completed', 'success');
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// Callback for failed CAPTCHA verification
|
|
112
|
-
function handleCaptchaFailed() {
|
|
113
|
-
console.log('Captcha verification failed');
|
|
114
|
-
window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
|
|
115
|
-
document.getElementById('error').textContent = 'CAPTCHA verification failed. Please try again.';
|
|
116
|
-
document.getElementById('error').style.display = 'block';
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Wait for DOM content to be loaded
|
|
120
|
-
document.addEventListener('DOMContentLoaded', async function() {
|
|
121
|
-
window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
|
|
122
|
-
|
|
123
|
-
// Render the CAPTCHA
|
|
124
|
-
const widgetId = await render(document.getElementById('procaptcha-container'), {
|
|
125
|
-
siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
|
|
126
|
-
callback: handleCaptchaResponse,
|
|
127
|
-
"failed-callback": handleCaptchaFailed,
|
|
128
|
-
size: "invisible"
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
|
|
132
|
-
|
|
133
|
-
// Add form submit handler
|
|
134
|
-
document.getElementById('demo-form').addEventListener('submit', function(e) {
|
|
135
|
-
e.preventDefault();
|
|
136
|
-
window.updateCaptchaStatus('Form submission attempted', 'info');
|
|
137
|
-
if (validateForm()) {
|
|
138
|
-
// Form is valid, CAPTCHA verification will be handled by the callback
|
|
139
|
-
window.updateCaptchaStatus('Waiting for CAPTCHA verification', 'info');
|
|
140
|
-
execute();
|
|
141
|
-
}
|
|
142
|
-
});
|
|
143
|
-
});
|
|
144
|
-
</script>
|
|
145
|
-
</body>
|
|
146
|
-
</html>
|