Show pow speed, and estimate remaining time

haproxy/js/challenge.js

@@ -1,9 +1,15 @@
+function updateElem(selector, text) {
+	document.querySelector(selector)
+		.innerText = text;
+}
+
 function insertError(str) {
 	const ring = document.querySelector('.lds-ring');
 	const captcha = document.querySelector('#captcha');
 	(ring || captcha).insertAdjacentHTML('afterend', `<p class="red">Error: ${str}</p>`);
 	ring && ring.remove();
 	captcha && captcha.remove();
+	updateElem('.powstatus', '');
 }
 
 function finishRedirect() {
@@ -65,6 +71,7 @@ const powFinished = new Promise((resolve, reject) => {
 			type: argon2.ArgonType.Argon2id,
 		};
 		console.log('Got pow', pow, 'with difficulty', diff);
+		const eHashes = Math.pow(16, Math.floor(diff/8)) * ((diff%8)*2);
 		const diffString = '0'.repeat(Math.floor(diff/8));
 		const combined = pow;
 		const [userkey, challenge, signature] = combined.split("#");
@@ -77,8 +84,17 @@ const powFinished = new Promise((resolve, reject) => {
 			const workerThreads = isTor ? cpuThreads : Math.max(Math.ceil(cpuThreads/2),cpuThreads-1);
 			let finished = false;
 			const messageHandler = (e) => {
+				if (e.data.length === 1) {
+					const totalHashes = e.data[0]*workerThreads; //assumes all worker threads are same speed
+					const elapsedSec = Math.floor((Date.now()-start)/1000);
+					const hps = Math.floor(totalHashes/elapsedSec);
+					const requiredSec = Math.floor(eHashes/hps) * 1.5; //estimate 1.5x time
+					return updateElem('.powstatus', `Proof-of-work: ${hps}H/s, ~${requiredSec-elapsedSec}s remaining.`);
+				}
 				if (finished) { return; }
 				finished = true;
+				const hasCaptcha = document.getElementById('captcha');
+				updateElem('.powstatus', `Found proof-of-work solution.${!hasCaptcha?' Submitting...':''}`);
 				workers.forEach(w => w.terminate());
 				const [workerId, answer] = e.data;
 				console.log('Worker', workerId, 'returned answer', answer, 'in', Date.now()-start+'ms');

haproxy/js/worker.js

@@ -4,6 +4,11 @@ onmessage = async function(e) {
 	const [userkey, challenge, diff, diffString, argonOpts, id, threads] = e.data;
 	console.log('Worker thread', id, 'started');
 	let i = id;
+	if (id === 0) {
+		setInterval(() => {
+			postMessage([i/threads]);
+		}, 500);
+	}
 	while(true) {
 		const hash = await argon2.hash({
 			pass: challenge + i.toString(),

src/scripts/hcaptcha.lua

@@ -87,6 +87,7 @@ local body_template = [[
 			@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#EEE}}
 			.h-captcha,.g-recaptcha{min-height:85px;display:block}
 			.red{color:red;font-weight:bold}
+			.powstatus{color:green;font-weight:bold}
 			a,a:visited{color:var(--text-color)}
 			body,html{height:100%%}
 			body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Helvetica,Arial,sans-serif;max-width:1200px;margin:0 auto;padding: 0 20px}
@@ -115,6 +116,7 @@ local body_template = [[
 			<p class="red">JavaScript is required on this page.</p>
 			%s
 		</noscript>
+		<div class="powstatus"></div>
 		<footer>
 			<p>Security and Performance by <a href="https://gitgud.io/fatchan/haproxy-protection/">haproxy-protection</a></p>
 			<p>Node: <code>%s</code></p>
@@ -144,7 +146,7 @@ local noscript_extra_template = [[
 -- title with favicon and hostname
 local site_name_section_template = [[
 		<h3 class="pt">
-			<img src="/favicon.ico" width="32" height="32" alt="favicon">
+			<img src="/favicon.ico" width="32" height="32" alt="icon">
 			%s
 		</h3>
 ]]