Dwelling/homepage/static/assets/js/captcha_refresh.js

const g_captcha_timeout_seconds = 600;

const captcha_hidden_field = document.forms[0].children[4].children[0];

let g_captcha_timeout_remain = g_captcha_timeout_seconds;
let g_current_captcha_id = captcha_hidden_field.value;

function getColorScheme() {
    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}

async function getNewCaptcha() {
    const id = await fetch("/captcha/").then(r => r.text());
    g_current_captcha_id = id;
    captcha_hidden_field.value = id;
    setTimeout(() => { captcha_img.src = `/captcha/${id}/image?style=${getColorScheme()}` }, 600);
    g_captcha_timeout_remain = g_captcha_timeout_seconds;
}

const captcha_span = document.getElementsByClassName("captcha")[0];
const captcha_img = captcha_span.children[1];

captcha_span.classList.toggle("refresh");
captcha_span.children[3].innerHTML =
    `<button id="refresh">Refresh</button>ed in <b><span id="remain">600</span></b> seconds.`;

const captcha_refresh = document.getElementById("refresh");
const captcha_remain = document.getElementById("remain");

captcha_refresh.classList.toggle("refresh");
captcha_refresh.addEventListener("click", async e => {
    e.preventDefault();
    captcha_refresh.disabled = true;
    setTimeout(async () => {
        captcha_refresh.disabled = false;
        await fetch(`/captcha/${g_current_captcha_id}?remove`); }, 3000);
    document.getElementsByName("captcha_answer")[0].value = "";
    await getNewCaptcha();
});

// Remove unused CAPTCHA on a server.
window.addEventListener("unload", () => fetch(`/captcha/${g_current_captcha_id}?remove`));

setInterval(async () => {
    captcha_remain.innerText = --g_captcha_timeout_remain;
    if (g_captcha_timeout_remain == 0)
        await getNewCaptcha();
}, 1000);