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 <mail@georg-pfuetzenreuter.net>

Author: tacerus

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){