chore(web): port main.mjs to typescript

Signed-off-by: Xe Iaso <me@xeiaso.net>

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<string, any> = {}) => {
   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(
+  const basePrefix = j("anubis_base_prefix");
-    document.getElementById("anubis_base_prefix").textContent,
+  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(
+  const basePrefix = j("anubis_base_prefix");
-    document.getElementById("anubis_base_prefix").textContent,
+  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(
+  const publicUrl = j("anubis_public_url");
-    document.getElementById("anubis_public_url").textContent,
+  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 status: HTMLParagraphElement = document.getElementById("status") as HTMLParagraphElement;
-  const title = document.getElementById("title");
+  const image: HTMLImageElement = document.getElementById("image") as HTMLImageElement;
-  const progress = document.getElementById("progress");
+  const title: HTMLHeadingElement = document.getElementById("title") as HTMLHeadingElement;
-  const anubisVersion = JSON.parse(
+  const progress: HTMLDivElement = document.getElementById("progress") as HTMLDivElement;
-    document.getElementById("anubis_version").textContent,
+
-  );
+  const anubisVersion = j("anubis_version");
-  const basePrefix = JSON.parse(
+  const basePrefix = j("anubis_base_prefix");
-    document.getElementById("anubis_base_prefix").textContent,
-  );
   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(
+  const { challenge, rules } = j("anubis_challenge");
-    document.getElementById("anubis_challenge").textContent,
-  );
 
   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";