diff --git a/web/js/main.mjs b/web/js/main.ts similarity index 84% rename from web/js/main.mjs rename to web/js/main.ts index 1d686270..e37c536c 100644 --- a/web/js/main.mjs +++ b/web/js/main.ts @@ -1,12 +1,21 @@ -import algorithms from "./algorithms/index.mjs"; +import algorithms from "./algorithms"; // from Xeact -const u = (url = "", params = {}) => { +const u = (url: string = "", params: Record = {}) => { let result = new URL(url, window.location.href); Object.entries(params).forEach(([k, v]) => result.searchParams.set(k, v)); return result.toString(); }; +const j = (id: string): any | null => { + const elem = document.getElementById(id); + if (elem === null) { + return null; + } + + return JSON.parse(elem.textContent); +}; + const imageURL = (mood, cacheBuster, basePrefix) => u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, { cacheBuster, @@ -14,9 +23,10 @@ const imageURL = (mood, cacheBuster, basePrefix) => // Detect available languages by loading the manifest const getAvailableLanguages = async () => { - const basePrefix = JSON.parse( - document.getElementById("anubis_base_prefix").textContent, - ); + const basePrefix = j("anubis_base_prefix"); + if (basePrefix === null) { + return; + } try { const response = await fetch(`${basePrefix}/.within.website/x/cmd/anubis/static/locales/manifest.json`); @@ -38,9 +48,11 @@ const getBrowserLanguage = async () => // Load translations from JSON files const loadTranslations = async (lang) => { - const basePrefix = JSON.parse( - document.getElementById("anubis_base_prefix").textContent, - ); + const basePrefix = j("anubis_base_prefix"); + if (basePrefix === null) { + return; + } + try { const response = await fetch(`${basePrefix}/.within.website/x/cmd/anubis/static/locales/${lang}.json`); return await response.json(); @@ -54,9 +66,10 @@ const loadTranslations = async (lang) => { }; const getRedirectUrl = () => { - const publicUrl = JSON.parse( - document.getElementById("anubis_public_url").textContent, - ); + const publicUrl = j("anubis_public_url"); + if (publicUrl === null) { + return; + } if (publicUrl && window.location.href.startsWith(publicUrl)) { const urlParams = new URLSearchParams(window.location.search); return urlParams.get('redir'); @@ -91,16 +104,14 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key; value: navigator.cookieEnabled, }, ]; - const status = document.getElementById("status"); - const image = document.getElementById("image"); - const title = document.getElementById("title"); - const progress = document.getElementById("progress"); - const anubisVersion = JSON.parse( - document.getElementById("anubis_version").textContent, - ); - const basePrefix = JSON.parse( - document.getElementById("anubis_base_prefix").textContent, - ); + + const status: HTMLParagraphElement = document.getElementById("status") as HTMLParagraphElement; + const image: HTMLImageElement = document.getElementById("image") as HTMLImageElement; + const title: HTMLHeadingElement = document.getElementById("title") as HTMLHeadingElement; + const progress: HTMLDivElement = document.getElementById("progress") as HTMLDivElement; + + const anubisVersion = j("anubis_version"); + const basePrefix = j("anubis_base_prefix"); const details = document.querySelector("details"); let userReadDetails = false; @@ -132,9 +143,7 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key; } } - const { challenge, rules } = JSON.parse( - document.getElementById("anubis_challenge").textContent, - ); + const { challenge, rules } = j("anubis_challenge"); const process = algorithms[rules.algorithm]; if (!process) { @@ -182,7 +191,9 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key; const probability = Math.pow(1 - likelihood, iters); const distance = (1 - Math.pow(probability, 2)) * 100; progress["aria-valuenow"] = distance; - progress.firstElementChild.style.width = `${distance}%`; + if (progress.firstElementChild !== null) { + (progress.firstElementChild as HTMLElement).style.width = `${distance}%`; + } if (probability < 0.1 && !showingApology) { status.append( @@ -197,7 +208,7 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key; console.log({ hash, nonce }); if (userReadDetails) { - const container = document.getElementById("progress"); + const container: HTMLDivElement = document.getElementById("progress") as HTMLDivElement; // Style progress bar as a continue button container.style.display = "flex";