Merge pull request #142 from mCaptcha/release-ci

feat: publish tagged docker images and bins

.github/workflows/release.yml

@@ -0,0 +1,125 @@
+name: Publish release
+
+on:
+  release:
+    type: [published]
+
+jobs:
+  build_and_test:
+    strategy:
+      fail-fast: false
+
+    name: x86_64-unknown-linux-gnu
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres
+        env:
+          POSTGRES_PASSWORD: password
+          POSTGRES_USER: postgres
+          POSTGRES_DB: postgres
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+
+      mcaptcha-redis:
+        image: mcaptcha/cache
+        ports:
+          - 6379:6379
+      mcaptcha-smtp:
+        image: maildev/maildev
+        env:
+          MAILDEV_WEB_PORT: "1080"
+          MAILDEV_INCOMING_USER: "admin"
+          MAILDEV_INCOMING_PASS: "password"
+        ports:
+          - 1080:1080
+          - 10025:1025
+
+      maria:
+        image: mariadb:10
+        env:
+          MARIADB_USER: "maria"
+          MARIADB_PASSWORD: "password"
+          MARIADB_ROOT_PASSWORD: "password"
+          MARIADB_DATABASE: "maria"
+        options: >-
+          --health-cmd="mysqladmin ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=10
+        ports:
+          - 3306:3306
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: configure GPG key
+        run: echo -n "$RELEASE_BOT_GPG_SIGNING_KEY" | gpg --batch --import --pinentry-mode loopback
+        env:
+          RELEASE_BOT_GPG_SIGNING_KEY: ${{ secrets.RELEASE_BOT_GPG_SIGNING_KEY }}
+
+      - name: Set release version
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+      - name: load env
+        run: |
+          source .env_sample \
+            && echo "POSTGRES_DATABASE_URL=$POSTGRES_DATABASE_URL" >> $GITHUB_ENV \
+            && echo "MARIA_DATABASE_URL=$MARIA_DATABASE_URL" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "20.0.0"
+
+      - uses: actions-rust-lang/setup-rust-toolchain@v1
+
+      - name: install nightwatch dep
+        run: sudo apt-get install xvfb
+
+      - name: Run migrations
+        run: make migrate
+        env:
+          POSTGRES_DATABASE_URL: "${{ env.POSTGRES_DATABASE_URL }}"
+          MARIA_DATABASE_URL: "${{ env.MARIA_DATABASE_URL }}"
+
+      - name: build
+        run: make
+        env:
+          POSTGRES_DATABASE_URL: "${{ env.POSTGRES_DATABASE_URL }}"
+          MARIA_DATABASE_URL: "${{ env.MARIA_DATABASE_URL }}"
+
+      - name: lint frontend
+        run: yarn lint
+
+      - name: run tests
+        run: make test
+        env:
+          POSTGRES_DATABASE_URL: "${{ env.POSTGRES_DATABASE_URL }}"
+          MARIA_DATABASE_URL: "${{ env.MARIA_DATABASE_URL }}"
+
+      - name: run integration tests
+        run: make test.integration
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: mcaptcha
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: build docker images
+        run: docker build -t mcaptcha/mcaptcha:${RELEASE_VERSION} .
+
+      - name: publish docker images
+        run: docker push mcaptcha/mcaptcha:${RELEASE_VERSION}
+
+      - name: publish bins
+        run: ./scripts/publish.sh publish $RELEASE_VERSION latest $DUMBSERVE_PASSWORD
+        env:
+          DUMBSERVE_PASSWORD: ${{ secrets.DUMBSERVE_PASSWORD }}
+          GPG_PASSWORD: ${{ secrets.GPG_PASSWORD }}

.github/workflows/tagged-release.yml

@@ -1,32 +1,32 @@
-name: Create binary for release
-
-# Only on tags that start with a "v"
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - target: x86_64-pc-windows-gnu
-            archive: zip
-          - target: x86_64-unknown-linux-musl
-            archive: tar.gz tar.xz
-          - target: x86_64-apple-darwin
-            archive: zip
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Compile and release
-        uses: rust-build/rust-build.action@v1.3.2
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          RUSTTARGET: ${{ matrix.target }}
-          ARCHIVE_TYPES: ${{ matrix.archive }}
+#name: Create binary for release
+#
+## Only on tags that start with a "v"
+#on:
+#  push:
+#    tags:
+#      - "v*"
+#
+#jobs:
+#  build:
+#    runs-on: ubuntu-latest
+#    strategy:
+#      fail-fast: false
+#      matrix:
+#        include:
+#          - target: x86_64-pc-windows-gnu
+#            archive: zip
+#          - target: x86_64-unknown-linux-musl
+#            archive: tar.gz tar.xz
+#          - target: x86_64-apple-darwin
+#            archive: zip
+#    steps:
+#      - name: Checkout
+#        uses: actions/checkout@v3
+#
+#      - name: Compile and release
+#        uses: rust-build/rust-build.action@v1.3.2
+#        env:
+#          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#        with:
+#          RUSTTARGET: ${{ matrix.target }}
+#          ARCHIVE_TYPES: ${{ matrix.archive }}

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

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;
-          PROGRESS_FILL.style.width = `${width}%`;
+          width = Number(resp.nonce / max_recorded_nonce) * 100;
+          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.beforeMsg.style.display).toBe("none");
-  expect(TESTElements.duringMsg.style.display).toBe("none");
-  expect(TESTElements.errorMsg.style.display).toBe("none");
+  expect(TESTElements.Msg.innerText).toBe(CONST.AFTER);
 
   // display before
   CONST.messageText().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");
+  expect(TESTElements.Msg.innerText).toBe(CONST.BEFORE);
 
   // display during
   CONST.messageText().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");
+  expect(TESTElements.Msg.innerText).toBe(CONST.DURING);
 
   // display error
   CONST.messageText().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");
+  expect(TESTElements.Msg.innerText).toBe(CONST.ERROR);
 });

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 afterMsg = getMessages("after");
-export const duringMsg = getMessages("during");
-export const errorMsg = getMessages("error");
+export const Msg = getMessages();
 
 /** 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(duringMsg);
-  form.appendChild(afterMsg);
-  form.appendChild(errorMsg);
-
+  form.appendChild(Msg);
   return form;
 };