frontend js translations

haproxy/haproxy.cfg

@@ -78,7 +78,7 @@ frontend http-in
 	# serve challenge page scripts directly from haproxy
 	http-request return file /etc/haproxy/js/auto.min.js status 200 content-type "application/javascript; charset=utf-8" hdr "cache-control" "public, max-age=86400" if { path /.basedflare/js/auto.min.js }
 	http-request return file /etc/haproxy/js/argon2.min.js status 200 content-type "application/javascript; charset=utf-8" hdr "cache-control" "public, max-age=86400" if { path /.basedflare/js/argon2.min.js }
-	http-request return file /etc/haproxy/js/challenge.min.js status 200 content-type "application/javascript; charset=utf-8" hdr "cache-control" "public, max-age=86400" if { path /.basedflare/js/challenge.min.js }
+	http-request return file /etc/haproxy/js/challenge.js status 200 content-type "application/javascript; charset=utf-8" hdr "cache-control" "public, max-age=86400" if { path /.basedflare/js/challenge.min.js }
 	http-request return file /etc/haproxy/js/worker.min.js status 200 content-type "application/javascript; charset=utf-8" hdr "cache-control" "public, max-age=86400" if { path /.basedflare/js/worker.min.js }
 
 	# acl for domains in maintenance mode to return maintenance page (after challenge page htp-request return rules, for the footerlogo)

src/js/challenge.js

@@ -1,3 +1,10 @@
+let TRANSLATIONS;
+
+function __(key, replacement=null) {
+	const translation = TRANSLATIONS[key] || key;
+	return replacement !== null ? translation.replace('%s', replacement) : translation;
+}
+
 function updateElem(selector, text, color) {
 	const updateElem = document.querySelector(selector);
 	if (updateElem) {
@@ -87,14 +94,14 @@ function postResponse(powResponse, captchaResponse) {
 	}).then((res) => {
 		const s = res.status;
 		if (s >= 400 && s < 500) {
-			return insertError("Server rejected your submission.");
+			return insertError(__("Server rejected your submission."));
 		} else if (s >= 500) {
-			return insertError("Server encountered an error.");
+			return insertError(__("Server encountered an error."));
 		}
 		window.localStorage.setItem("_basedflare-redirect", Math.random());
 		finishRedirect();
 	}).catch(() => {
-		insertError("Failed to send request to server.");
+		insertError(__("Failed to send request to server."));
 	});
 }
 
@@ -106,9 +113,9 @@ const powFinished = new Promise((resolve) => {
 		finished = true;
 		const hasCaptcha = document.getElementById("captcha");
 		if (hasCaptcha) {
-			updateElem(".powstatus", "Waiting for captcha.", "#31cc31");
+			updateElem(".powstatus", __("Waiting for captcha."), "#31cc31");
 		} else {
-			updateElem(".powstatus", "Submitting...", "#31cc31");
+			updateElem(".powstatus", __("Submitting..."), "#31cc31");
 			makeLoaderGreen();
 		}
 		workers.forEach((w) => w.terminate());
@@ -125,6 +132,7 @@ const powFinished = new Promise((resolve) => {
 	};
 
 	window.addEventListener("DOMContentLoaded", async () => {
+		TRANSLATIONS = JSON.parse(document.head.dataset.langjson);
 		// registerServiceWorker();
 		const {
 			time,
@@ -149,7 +157,7 @@ const powFinished = new Promise((resolve) => {
 		});
 
 		if (!wasmSupported) {
-			return insertError("Browser does not support WebAssembly.");
+			return insertError(__("Browser does not support WebAssembly."));
 		}
 		const powOpts = {
 			time: time,
@@ -185,7 +193,7 @@ const powFinished = new Promise((resolve) => {
 					console.log(`${hps}H/s, ≈${remainingSec}s remaining`);
 					return updateElem(
 						".powstatus",
-						`Working,  ≈${remainingSec}s remaining`,
+						__('Working, ≈%ss remaining', remainingSec),
 					);
 				}
 				if (finished) return;
@@ -219,7 +227,7 @@ const powFinished = new Promise((resolve) => {
 				]);
 			}
 		} else {
-			return insertError("Browser does not support Web Workers.");
+			return insertError(__("Browser does not support Web Workers."));
 		}
 	});
 }).then((powResponse) => {
@@ -241,7 +249,7 @@ function onCaptchaSubmit(captchaResponse) {
 	);
 	captchaElem.remove();
 	powFinished.then((powResponse) => {
-		updateElem(".powstatus", "Submitting...", "#31cc31");
+		updateElem(".powstatus", __("Submitting..."), "#31cc31");
 		makeLoaderGreen();
 		postResponse(powResponse, captchaResponse);
 	});

src/lua/scripts/bot-check.lua

@@ -13,7 +13,7 @@ local randbytes = require("randbytes")
 local templates = require("templates")
 local locales_path = "/etc/haproxy/locales/"
 local locales_table = {}
--- local locales_strings = {}
+local locales_strings = {}
 for file_name in io.popen('ls "'..locales_path..'"*.json'):lines() do
 	local file_name_with_path = utils.split(file_name, "/")
 	local file_name_without_ext = utils.split(file_name_with_path[#file_name_with_path], ".")[1]
@@ -22,7 +22,7 @@ for file_name in io.popen('ls "'..locales_path..'"*.json'):lines() do
 	local json_object = json.decode(json_contents)
 	file:close()
 	locales_table[file_name_without_ext] = json_object
-	-- locales_strings[file_name_without_ext] = json_contents
+	locales_strings[file_name_without_ext] = json_contents
 end
 
 -- POW
@@ -104,13 +104,14 @@ end
 
 function _M.view(applet)
 
-	-- set the ll language var based off header or default to en-US
+	-- set the ll and ls language var based off header or default to en-US
 	local lang = _M.get_first_language(applet)
 	local ll = locales_table[lang]
 	if ll == nil then
 		ll = locales_table[default_lang]
 		lang = default_lang
 	end
+	local ls = locales_strings[lang]
 
 	-- set response body and declare status code
 	local response_body = ""
@@ -198,6 +199,7 @@ function _M.view(applet)
 		response_body = string.format(
 			templates.body,
 			lang,
+			ls,
 			ll["Hold on..."],
 			combined_challenge,
 			pow_difficulty,

src/lua/scripts/templates.lua

@@ -4,7 +4,7 @@ local _M = {}
 _M.body = [[
 <!DOCTYPE html>
 <html>
-	<head lang="%s">
+	<head lang="%s" data-langjson='%s'>
 		<meta name='viewport' content='width=device-width initial-scale=1'>
 		<title>%s</title>
 		<style>
@@ -111,6 +111,7 @@ _M.pow_section = [[
 			<div id="loader"><div class="b"></div><div class="b"></div><div class="b"></div></div>
 		</div>
 ]]
+
 -- alternative, spinner animation
 -- .loader{display:inline-block;position:relative;width:80px;height:80px}
 -- .loader div{box-sizing:border-box;display:block;position:absolute;width:32px;height:32px;margin:10px;border:5px solid var(--text-color);border-radius:50%%;animation:loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--text-color) transparent transparent transparent}