feat: list all env vars and load in docker-compose

.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

templates/widget/const.ts

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

templates/widget/index.html

@@ -19,15 +19,14 @@ 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 .>" 
@@ -55,8 +54,6 @@ SPDX-License-Identifier: MIT OR Apache-2.0
           </div>
         </div>
       </form>
-      <div class="progress__bar"><div 
+      <div class="progress__bar"><div class="progress__fill"></div></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,12 +25,6 @@ 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) {
@@ -42,9 +36,8 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
     LOCK = true;
     if (CONST.btn().checked == false) {
       width = 0;
-      setWidth(width);
+      PROGRESS_FILL.style.width = `${width}%`;
       CONST.messageText().before();
-      CONST.btn().ariaChecked = <any>false;
       LOCK = false;
       return;
     }
@@ -64,7 +57,7 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
 
       if (resp.type === "work") {
         width = 80;
-        setWidth(width);
+        PROGRESS_FILL.style.width = `${width}%`;
         console.log(
           `Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.value.work.time}`
         );
@@ -79,23 +72,22 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
         };
 
         width = 90;
-        setWidth(width);
+        PROGRESS_FILL.style.width = `${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;
-        setWidth(width);
+        PROGRESS_FILL.style.width = `${width}%`;
         CONST.messageText().after();
         LOCK = false;
       }
       if (resp.type === "progress") {
         if (width < 80) {
           width = (resp.nonce / max_recorded_nonce) * 100;
-          setWidth(width);
+          PROGRESS_FILL.style.width = `${width}%`;
         }
         console.log(`received nonce ${resp.nonce}`);
       }

templates/widget/main.scss

@@ -56,8 +56,7 @@ body {
 
 .widget__verification-container {
 	align-items: center;
-	display: flex;
+	display: none;
-	flex-direction: row-reverse;
 	line-height: 30px;
 	font-size: 1rem;
 }
@@ -68,6 +67,36 @@ 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;

templates/widget/tests/const.test.ts

@@ -17,17 +17,29 @@ it("const works", () => {
 
   // display after
   CONST.messageText().after();
-  expect(TESTElements.Msg.innerText).toBe(CONST.AFTER);
+  expect(TESTElements.afterMsg.style.display).toBe("block");
+  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.Msg.innerText).toBe(CONST.BEFORE);
+  expect(TESTElements.afterMsg.style.display).toBe("none");
+  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.Msg.innerText).toBe(CONST.DURING);
+  expect(TESTElements.afterMsg.style.display).toBe("none");
+  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.Msg.innerText).toBe(CONST.ERROR);
+  expect(TESTElements.afterMsg.style.display).toBe("none");
+  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,19 +11,25 @@ export const checkbox = <HTMLInputElement>document.createElement("input");
 checkbox.type = "checkbox";
 checkbox.id = CONST.btnId;
 
-const getMessages = () => {
+const getMessages = (state: string) => {
   const msg = <HTMLElement>document.createElement("span");
-  msg.id = "widget__verification-text";
+  msg.id = `widget__verification-text--${state}`;
-  msg.innerText = "I'm not a robot";
   return msg;
 };
 
-export const Msg = getMessages();
+export const beforeMsg = getMessages("before");
+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(Msg);
+  form.appendChild(beforeMsg);
+  form.appendChild(duringMsg);
+  form.appendChild(afterMsg);
+  form.appendChild(errorMsg);
+
   return form;
 };