fix: typecast BigInt to number in progress computation

closes: https://github.com/mCaptcha/mCaptcha/issues/134

.env.docker-compose

@@ -0,0 +1,43 @@
+MCAPTCHA_debug=false
+MCAPTCHA_commercial=false
+MCAPTCHA_source_code=https://github.com/mCaptcha/mCaptcha
+MCAPTCHA_allow_registration=false
+MCAPTCHA_allow_demo=false
+
+# database
+DATABASE_URL=postgres://postgres:password@mcaptcha_postgres:5432/postgres
+MCAPTCHA_database_POOL=4
+
+# redis
+MCAPTCHA_redis_URL=redis://mcaptcha_redis
+MCAPTCHA_redis_POOL=4
+
+# server
+PORT=7001
+MCAPTCHA_server_DOMAIN=localhost
+MCAPTCHA__server_COOKIE_SECRET=pleasereplacethiswithrandomstring # PLEASE SET RANDOM STRING. MIN LENGTH=32
+MCAPTCHA__server_IP= 0.0.0.0
+
+
+# captcha
+MCAPTCHA_captcha_SALT=pleasereplacethiswithrandomstring # PLEASE SET RANDOM STRING. MIN LENGTH=32
+MCAPTCHA_captcha_GC=30
+MCAPTCHA_captcha_RUNNERS=4
+MCAPTCHA_captcha_QUEUE_LENGTH=2000
+MCAPTCHA_captcha_ENABLE_STATS=true
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_avg_traffic_difficulty=50000 # almost instant solution
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_broke_my_site_traffic_difficulty=3000000 # roughly 1.5s
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_peak_sustainable_traffic_difficulty=5000000  # greater than 3.5s
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_duration=30 # cooldown period in seconds
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_avg_traffic_time=1 # almost instant solution
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_peak_sustainable_traffic_time=3
+MCAPTCHA_captcha_DEFAULT_DIFFICULTY_STRATEGY_broke_my_site_traffic_time=5
+
+
+# SMTP 
+#MCAPTCHA_smtp_FROM=
+#MCAPTCHA_smtp_REPLY=
+#MCAPTCHA_smtp_URL=
+#MCAPTCHA_smtp_USERNAME=
+#MCAPTCHA_smtp_PASSWORD=
+#MCAPTCHA_smtp_PORT=

docker-compose.yml

@@ -9,11 +9,8 @@ services:
     image: mcaptcha/mcaptcha:latest
     ports:
       - 7000:7000
-    environment:
+    env_file:
-      DATABASE_URL: postgres://postgres:password@mcaptcha_postgres:5432/postgres # set password at placeholder
+      - .env.docker-compose
-      MCAPTCHA_redis_URL: "redis://mcaptcha_redis/"
-      RUST_LOG: "debug"
-      PORT: 7000
     depends_on:
       - mcaptcha_postgres
       - mcaptcha_redis

scripts/publish.sh

@@ -44,6 +44,7 @@ copy() {
 	mkdir $TARGET_DIR/docs
 	cp docs/DEPLOYMENT.md $TARGET_DIR/docs
 	cp docs/CONFIGURATION.md $TARGET_DIR/docs
+	cp config/default.toml $TARGET_DIR/config.toml
 
 	get_bin
 }

templates/widget/const.ts

@@ -56,53 +56,41 @@ type messageTextReturn = {
   error: () => void;
 };
 
-export const messageText = (): messageTextReturn => {
+export const BEFORE = "I'm not a robot";
-  const beforeID = "widget__verification-text--before";
+export const DURING = "Processing...";
-  const duringID = "widget__verification-text--during";
+export const AFTER = "Verified!";
-  const errorID = "widget__verification-text--error";
+export const ERROR = "Something went wrong";
-  const afterID = "widget__verification-text--after";
 
-  const before = new LazyElement(beforeID);
+export const messageText = (): messageTextReturn => {
-  const after = new LazyElement(afterID);
+  const conatinerID = "widget__verification-text";
-  const during = new LazyElement(duringID);
+
-  const error = new LazyElement(errorID);
+  const container = new LazyElement(conatinerID);
 
   /** runner fn to display HTMLElement **/
-  const showMsg = (e: HTMLElement) => (e.style.display = "block");
+  const showMsg = (value: string) => {
-  /** runner fn to hide HTMLElement **/
+    container.get().innerText = value;
-  const hideMsg = (e: HTMLElement) => (e.style.display = "none");
+    btn().ariaValueText = value;
+  };
 
   return {
     /** display "before" message **/
     before: () => {
-      showMsg(before.get());
+      showMsg(BEFORE);
-      hideMsg(after.get());
-      hideMsg(during.get());
-      hideMsg(error.get());
     },
 
     /** display "after" message **/
     after: () => {
-      hideMsg(before.get());
+      showMsg(AFTER);
-      showMsg(after.get());
-      hideMsg(during.get());
-      hideMsg(error.get());
     },
 
     /** display "during" message **/
     during: () => {
-      hideMsg(before.get());
+      showMsg(DURING);
-      hideMsg(after.get());
-      showMsg(during.get());
-      hideMsg(error.get());
     },
 
     /** display "error" message **/
     error: () => {
-      hideMsg(before.get());
+      showMsg(ERROR);
-      hideMsg(after.get());
-      hideMsg(during.get());
-      showMsg(error.get());
     },
   };
 };

templates/widget/index.html

@@ -19,14 +19,15 @@ SPDX-License-Identifier: MIT OR Apache-2.0
            </div>
         </noscript>
         <label class="widget__verification-container" for="widget__verification-checkbox">
+          <span id="widget__verification-text"
+            >I'm not a robot</span>
           <input 
               id="widget__verification-checkbox"
+              aria-valuenow="I'm not a robot"
+                aria-checked="false"
+                role="checkbox"
               class="widget__verification-checkbox"
           type="checkbox" />
-          <span id="widget__verification-text--before">I'm not a robot</span>
-          <span id="widget__verification-text--during">Processing...</span>
-          <span id="widget__verification-text--after">Verified!</span>
-          <span id="widget__verification-text--error">Something went wrong</span>
         </label>
         <div class="widget__mcaptcha-details">
           <a href="<.= crate::PKG_HOMEPAGE .>" 
@@ -54,6 +55,8 @@ SPDX-License-Identifier: MIT OR Apache-2.0
           </div>
         </div>
       </form>
-      <div class="progress__bar"><div class="progress__fill"></div></div>
+      <div class="progress__bar"><div 
+             aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+             role="progressbar" class="progress__fill"></div></div>
     </main>
 <.include!("./footer.html"); .>

templates/widget/index.ts

@@ -25,6 +25,12 @@ export const registerVerificationEventHandler = (): void => {
 
 export const solveCaptchaRunner = async (e: Event): Promise<void> => {
   const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
+
+  const setWidth = (width: number) => {
+    PROGRESS_FILL.style.width = `${width}%`;
+    PROGRESS_FILL.ariaValueNow = <any>parseInt(<any>width);
+  };
+
   let width = 0;
 
   if (LOCK) {
@@ -36,8 +42,9 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
     LOCK = true;
     if (CONST.btn().checked == false) {
       width = 0;
-      PROGRESS_FILL.style.width = `${width}%`;
+      setWidth(width);
       CONST.messageText().before();
+      CONST.btn().ariaChecked = <any>false;
       LOCK = false;
       return;
     }
@@ -57,7 +64,7 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
 
       if (resp.type === "work") {
         width = 80;
-        PROGRESS_FILL.style.width = `${width}%`;
+        setWidth(width);
         console.log(
           `Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.value.work.time}`
         );
@@ -72,22 +79,23 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
         };
 
         width = 90;
-        PROGRESS_FILL.style.width = `${width}%`;
+        setWidth(width);
         // 3. submit work
         const token = await sendWork(proof);
         // 4. send token
         sendToParent(token);
         // 5. mark checkbox checked
         CONST.btn().checked = true;
+        CONST.btn().ariaChecked = <any>true;
         width = 100;
-        PROGRESS_FILL.style.width = `${width}%`;
+        setWidth(width);
         CONST.messageText().after();
         LOCK = false;
       }
       if (resp.type === "progress") {
         if (width < 80) {
-          width = (resp.nonce / max_recorded_nonce) * 100;
+          width = Number(resp.nonce / max_recorded_nonce) * 100;
-          PROGRESS_FILL.style.width = `${width}%`;
+          setWidth(width);
         }
         console.log(`received nonce ${resp.nonce}`);
       }

templates/widget/main.scss

@@ -28,6 +28,8 @@ body {
 	display: flex;
 	height: 100%;
 	width: 100%;
+	background-color: #f6f6f6;
+	border: 2px solid #e5e5e5;
 }
 
 .widget__noscript-container {
@@ -56,7 +58,8 @@ body {
 
 .widget__verification-container {
 	align-items: center;
-	display: none;
+	display: flex;
+	flex-direction: row-reverse;
 	line-height: 30px;
 	font-size: 1rem;
 }
@@ -67,36 +70,6 @@ body {
 	margin: 0 10px;
 }
 
-#widget__verification-text--during {
-	display: none;
-}
-
-#widget__verification-text--after {
-	display: none;
-	color: green;
-}
-
-#widget__verification-text--error {
-	display: none;
-	color: red;
-}
-
-.widget__verification-checkbox:checked ~ #widget__verification-text--before {
-	display: none;
-}
-
-.widget__verification-checkbox:checked ~ #widget__verification-text--during {
-	display: none;
-}
-
-.widget__verification-checkbox:checked ~ #widget__verification-text--error {
-	display: none;
-}
-
-.widget__verification-checkbox:checked ~ #widget__verification-text--after {
-	display: block;
-}
-
 .widget__mcaptcha-details {
 	display: flex;
 	flex-direction: column;
@@ -127,6 +100,29 @@ body {
 	margin: 2px;
 }
 
+@media (prefers-color-scheme: dark) {
+	.widget__container {
+		background-color: #1c1c1c;
+	}
+
+	.widget__inner-container {
+		background-color: #1c1c1c;
+		border: 2px solid #656569;
+	}
+
+	.widget__verification-container {
+		color: rgb(232, 230, 227);
+	}
+
+	.widget__mcaptcha-brand-name {
+		color: #7d94f9;
+	}
+
+	.widget__mcaptcha-info-link {
+		color: #7d94f9;
+	}
+}
+
 /* progress bar courtesy of https://codepen.io/Bizzy-Coding/pen/poOymVJ?editors=1111 */
 .progress__bar {
 	position: relative;
@@ -142,3 +138,9 @@ body {
 	height: 100%;
 	width: 0%;
 }
+
+@media (prefers-color-scheme: dark) {
+	.progress__bar {
+		background: unset;
+	}
+}

templates/widget/tests/const.test.ts

@@ -5,7 +5,7 @@
 
 import * as CONST from "../const";
 
-import {getBaseHtml, sitekey, checkbox} from "./setupTests";
+import { getBaseHtml, sitekey, checkbox } from "./setupTests";
 import * as TESTElements from "./setupTests";
 
 it("const works", () => {
@@ -17,29 +17,17 @@ it("const works", () => {
 
   // display after
   CONST.messageText().after();
-  expect(TESTElements.afterMsg.style.display).toBe("block");
+  expect(TESTElements.Msg.innerText).toBe(CONST.AFTER);
-  expect(TESTElements.beforeMsg.style.display).toBe("none");
-  expect(TESTElements.duringMsg.style.display).toBe("none");
-  expect(TESTElements.errorMsg.style.display).toBe("none");
 
   // display before
   CONST.messageText().before();
-  expect(TESTElements.afterMsg.style.display).toBe("none");
+  expect(TESTElements.Msg.innerText).toBe(CONST.BEFORE);
-  expect(TESTElements.beforeMsg.style.display).toBe("block");
-  expect(TESTElements.duringMsg.style.display).toBe("none");
-  expect(TESTElements.errorMsg.style.display).toBe("none");
 
   // display during
   CONST.messageText().during();
-  expect(TESTElements.afterMsg.style.display).toBe("none");
+  expect(TESTElements.Msg.innerText).toBe(CONST.DURING);
-  expect(TESTElements.beforeMsg.style.display).toBe("none");
-  expect(TESTElements.duringMsg.style.display).toBe("block");
-  expect(TESTElements.errorMsg.style.display).toBe("none");
 
   // display error
   CONST.messageText().error();
-  expect(TESTElements.afterMsg.style.display).toBe("none");
+  expect(TESTElements.Msg.innerText).toBe(CONST.ERROR);
-  expect(TESTElements.beforeMsg.style.display).toBe("none");
-  expect(TESTElements.duringMsg.style.display).toBe("none");
-  expect(TESTElements.errorMsg.style.display).toBe("block");
 });

templates/widget/tests/setupTests.ts

@@ -11,25 +11,19 @@ export const checkbox = <HTMLInputElement>document.createElement("input");
 checkbox.type = "checkbox";
 checkbox.id = CONST.btnId;
 
-const getMessages = (state: string) => {
+const getMessages = () => {
   const msg = <HTMLElement>document.createElement("span");
-  msg.id = `widget__verification-text--${state}`;
+  msg.id = "widget__verification-text";
+  msg.innerText = "I'm not a robot";
   return msg;
 };
 
-export const beforeMsg = getMessages("before");
+export const Msg = getMessages();
-export const afterMsg = getMessages("after");
-export const duringMsg = getMessages("during");
-export const errorMsg = getMessages("error");
 
 /** get base HTML with empty mCaptcha container */
 export const getBaseHtml = (): HTMLFormElement => {
   const form = <HTMLFormElement>document.createElement("form");
   form.appendChild(checkbox);
-  form.appendChild(beforeMsg);
+  form.appendChild(Msg);
-  form.appendChild(duringMsg);
-  form.appendChild(afterMsg);
-  form.appendChild(errorMsg);
-
   return form;
 };