From 2f36f3b1a61b48119a135e52940c794c4bb6114d Mon Sep 17 00:00:00 2001 From: Georg Pfuetzenreuter Date: Wed, 18 Jun 2025 19:33:20 +0200 Subject: [PATCH] feat(web): toggle bootstrap elements For custom entrypoints using bootstrap based theming, it can be desirable to alter the appearance based on whether the challenge succeeded or failed - whilst at it, also set a more useful display text on failure. Signed-off-by: Georg Pfuetzenreuter --- web/src/challange/loader.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/web/src/challange/loader.js b/web/src/challange/loader.js index 1b3a83a..37351bb 100644 --- a/web/src/challange/loader.js +++ b/web/src/challange/loader.js @@ -6,6 +6,8 @@ * Start the countdown. */ export function start(){ + const container = /** @type {HTMLDivElement} */ (document.querySelector(".captcha-container")); + container.classList.add("alert-warning"); const loader = /** @type {HTMLDivElement} */ (document.querySelector(".circle-loader")); loader.style.visibility = "visible"; } @@ -29,18 +31,25 @@ export function setChallengeInfo(text){ export function stop(countdown, failed = false){ const loader = /** @type {HTMLDivElement} */ (document.querySelector(".circle-loader")); const checkmark = /** @type {HTMLDivElement} */ (document.querySelector(".checkmark")); + const container = /** @type {HTMLDivElement} */ (document.querySelector(".captcha-container")); const cross = /** @type {HTMLDivElement} */ (document.querySelector(".cross")); loader.classList.add("load-complete"); + container.classList.remove("alert-warning"); failed ? cross.style.display = "block" : checkmark.style.display = "block"; if (failed){ + container.classList.add("alert-danger"); + setChallengeInfo("Challenge failed."); return; } + setChallengeInfo("Challenge succeeded."); + container.classList.add("alert-success"); + const interval = setInterval(() => { setChallengeInfo(`Reloading in ${countdown}...`); if (countdown === 0){