diff --git a/templates/widget/const.ts b/templates/widget/const.ts index 45576d28..bd5f79e7 100644 --- a/templates/widget/const.ts +++ b/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); }, }; }; diff --git a/templates/widget/index.html b/templates/widget/index.html index 3db7d637..fad5bd16 100644 --- a/templates/widget/index.html +++ b/templates/widget/index.html @@ -19,14 +19,15 @@ SPDX-License-Identifier: MIT OR Apache-2.0
-
+
<.include!("./footer.html"); .> diff --git a/templates/widget/index.ts b/templates/widget/index.ts index 2fa5123c..142e7a2e 100644 --- a/templates/widget/index.ts +++ b/templates/widget/index.ts @@ -25,6 +25,12 @@ export const registerVerificationEventHandler = (): void => { export const solveCaptchaRunner = async (e: Event): Promise => { const PROGRESS_FILL = document.querySelector(".progress__fill"); + + const setWidth = (width: number) => { + PROGRESS_FILL.style.width = `${width}%`; + PROGRESS_FILL.ariaValueNow = parseInt(width); + }; + let width = 0; if (LOCK) { @@ -36,8 +42,9 @@ export const solveCaptchaRunner = async (e: Event): Promise => { LOCK = true; if (CONST.btn().checked == false) { width = 0; - PROGRESS_FILL.style.width = `${width}%`; + setWidth(width); CONST.messageText().before(); + CONST.btn().ariaChecked = false; LOCK = false; return; } @@ -57,7 +64,7 @@ export const solveCaptchaRunner = async (e: Event): Promise => { 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 => { }; 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 = 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}%`; + setWidth(width); } console.log(`received nonce ${resp.nonce}`); } diff --git a/templates/widget/main.scss b/templates/widget/main.scss index a36a5c26..0b9298da 100644 --- a/templates/widget/main.scss +++ b/templates/widget/main.scss @@ -56,7 +56,8 @@ body { .widget__verification-container { align-items: center; - display: none; + display: flex; + flex-direction: row-reverse; line-height: 30px; font-size: 1rem; } @@ -67,36 +68,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; diff --git a/templates/widget/tests/const.test.ts b/templates/widget/tests/const.test.ts index 72a02d9a..966baab5 100644 --- a/templates/widget/tests/const.test.ts +++ b/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); }); diff --git a/templates/widget/tests/setupTests.ts b/templates/widget/tests/setupTests.ts index c2ec7385..7b6f97a7 100644 --- a/templates/widget/tests/setupTests.ts +++ b/templates/widget/tests/setupTests.ts @@ -11,25 +11,19 @@ export const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = CONST.btnId; -const getMessages = (state: string) => { +const getMessages = () => { const msg = 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 = document.createElement("form"); form.appendChild(checkbox); - form.appendChild(beforeMsg); - form.appendChild(duringMsg); - form.appendChild(afterMsg); - form.appendChild(errorMsg); - + form.appendChild(Msg); return form; };