From 8d6a51c6589c3498ee0d2a5c13c606000a2aec19 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Fri, 2 Jan 2026 11:58:03 +0200
Subject: [PATCH 01/10] Remove jQuery from email-handler

---
 frontend/src/email-handler.html | 540 ++++++++++++++++----------------
 1 file changed, 269 insertions(+), 271 deletions(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 160ad19080de..821652c2d346 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -167,276 +167,274 @@
     </div>
   </body>
   <script type="module">
-    import $ from "jquery";
-    import {
-      applyActionCode,
-      verifyPasswordResetCode,
-      confirmPasswordReset,
-      checkActionCode,
-      sendPasswordResetEmail,
-      signInWithEmailAndPassword,
-      getAuth,
-    } from "firebase/auth";
-    import { initializeApp } from "firebase/app";
-    import { firebaseConfig } from "./ts/constants/firebase-config";
-
-    const app = initializeApp(firebaseConfig);
-    const Auth = getAuth(app);
-
-    function isPasswordStrong(password) {
-      const hasCapital = !!password.match(/[A-Z]/);
-      const hasNumber = !!password.match(/[\d]/);
-      const hasSpecial = !!password.match(
-        /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
-      );
-      const isLong = password.length >= 8;
-      const isShort = password.length <= 64;
-      return hasCapital && hasNumber && hasSpecial && isLong && isShort;
-    }
-
-    function handleVerifyEmail(actionCode, continueUrl) {
-      applyActionCode(Auth, actionCode)
-        .then((resp) => {
-          // Email address has been verified.
-
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
-          $("main .preloader .text").text(
-            `Your email address has been verified`,
-          );
-          $("main .preloader .subText").text(`You can now close this tab`);
-        })
-        .catch((error) => {
-          console.error(error);
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
-          $("main .preloader .text").text(
-            `Fatal error: ${error.message}. If this issue persists, please report it.`,
-          );
-          // Code is invalid or expired. Ask the user to verify their email address
-          // again.
-        });
-    }
-
-    function showResetPassword() {
-      $("main .preloader").addClass("hidden");
-      $("main .resetPassword").removeClass("hidden");
-      $("main .resetPassword input").trigger("focus");
-    }
-
-    function hideResetPassword() {
-      $("main .preloader").removeClass("hidden");
-      $("main .resetPassword").addClass("hidden");
-    }
-
-    function handleResetPassword(actionCode, continueUrl) {
-      // Verify the password reset code is valid.
-      hideResetPassword();
-      verifyPasswordResetCode(Auth, actionCode)
-        .then((email) => {
-          var accountEmail = email;
-
-          var newPassword = $("main .resetPassword .pwd").val();
-          var newPasswordConfirm = $("main .resetPassword .pwd-confirm").val();
-
-          if (newPassword !== newPasswordConfirm) {
-            alert("Passwords do not match");
-            showResetPassword();
-            return;
-          }
-
-          if (!isPasswordStrong(newPassword)) {
-            alert(
-              "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
-            );
-            showResetPassword();
-            return;
-          }
-
-          // Save the new password.
-          confirmPasswordReset(Auth, actionCode, newPassword)
-            .then((resp) => {
-              // Password reset has been confirmed and new password updated.
-              $("main .preloader .icon").html(
-                `<i class="fas fa-fw fa-check"></i>`,
-              );
-              $("main .preloader .text").text(`Your password has been changed`);
-              $("main .preloader .subText").text(`You can now close this tab`);
-
-              signInWithEmailAndPassword(Auth, accountEmail, newPassword);
-            })
-            .catch((error) => {
-              console.error(error);
-              $("main .preloader .icon").html(
-                `<i class="fas fa-fw fa-times"></i>`,
-              );
-              $("main .preloader .text").text(
-                `Fatal error: ${error.message}. If this issue persists, please report it.`,
-              );
-              // Error occurred during confirmation. The code might have expired or the
-              // password is too weak.
-            });
-        })
-        .catch((error) => {
-          console.error(error);
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
-          $("main .preloader .text").text(
-            `Fatal error: ${error.message}. If this issue persists, please report it.`,
-          );
-
-          // $("main .preloader .subText").text(error);
-
-          // Invalid or expired action code. Ask user to try to reset the password
-          // again.
-        });
-    }
-
-    function handleRecoverEmail(auth, actionCode, lang) {
-      // Localize the UI to the selected language as determined by the lang
-      // parameter.
-      var restoredEmail = null;
-      // Confirm the action code is valid.
-      checkActionCode(Auth, actionCode)
-        .then((info) => {
-          // Get the restored email address.
-          restoredEmail = info["data"]["email"];
-
-          // Revert to the old email.
-          return applyActionCode(Auth, actionCode);
-        })
-        .then(() => {
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
-          $("main .preloader .text").text(`Your account email was reverted.`);
-          $("main .preloader .subText").text(``);
-
-          $("main .preloader").append(`
-          <br>
-          In case you believe your account was compromised, please request a password reset email:
-          `);
-          $("main .preloader").append(`
-          <br>
-          <div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
-          `);
-
-          // Account email reverted to restoredEmail
-
-          // TODO: Display a confirmation message to the user.
-
-          // You might also want to give the user the option to reset their password
-          // in case the account was compromised:
-        })
-        .catch((error) => {
-          console.error(error);
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
-          $("main .preloader .text").text(error.message);
-        });
-    }
-
-    function sendPasswordReset(email) {
-      sendPasswordResetEmail(Auth, email)
-        .then(() => {
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
-          $("main .preloader .text").text(`Password reset email sent`);
-          $("main .preloader .subText").text(`Please check your inbox`);
-        })
-        .catch((error) => {
-          console.error(error);
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
-          $("main .preloader .text").text(error.message);
-        });
-    }
-
-    function getParameterByName(name, url = window.location.href) {
-      name = name.replace(/[\[\]]/g, "\\$&");
-      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-        results = regex.exec(url);
-      if (!results) return null;
-      if (!results[2]) return "";
-      return decodeURIComponent(results[2].replace(/\+/g, " "));
-    }
-
-    document.addEventListener(
-      "DOMContentLoaded",
-      () => {
-        try {
-          // Get the action to complete.
-          var mode = getParameterByName("mode");
-          // Get the one-time code from the query parameter.
-          var actionCode = getParameterByName("oobCode");
-          // (Optional) Get the continue URL from the query parameter if available.
-          var continueUrl = getParameterByName("continueUrl");
-          // (Optional) Get the language code if available.
-          var lang = getParameterByName("lang") || "en";
-
-          // Configure the Firebase SDK.
-          // // This is the minimum configuration required for the API to be used.
-          // var config = {
-          //   'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
-          //                           // snippet found in the Firebase console.
-          // };
-          // var app = firebase.initializeApp(config);
-          // var auth = firebase.auth();
-
-          if (!mode) {
-            $("main .preloader .icon").html(
-              `<i class="fas fa-fw fa-times"></i>`,
-            );
-            $("main .preloader .text").text(`Mode parameter not found`);
-            return;
-          }
-
-          if (!actionCode) {
-            $("main .preloader .icon").html(
-              `<i class="fas fa-fw fa-times"></i>`,
-            );
-            $("main .preloader .text").text(`Action code parameter not found`);
-            return;
-          }
-
-          // Handle the user management action.
-          switch (mode) {
-            case "resetPassword":
-              // Display reset password handler and UI.
-              $("#logo .text span").text("Reset Password");
-              document.title = "Reset Password | Monkeytype";
-              showResetPassword();
-              break;
-            case "recoverEmail":
-              // Display email recovery handler and UI.
-              handleRecoverEmail(actionCode);
-              break;
-            case "verifyEmail":
-              $("#logo .text span").text("Verify Email");
-              document.title = "Verify Email | Monkeytype";
-              // Display email verification handler and UI.
-              handleVerifyEmail(actionCode, continueUrl);
-              break;
-            default:
-              $("main .preloader .icon").html(
-                `<i class="fas fa-fw fa-times"></i>`,
-              );
-              $("main .preloader .text").text(`Invalid mode`);
-              console.error("no mode found");
-            // Error: invalid mode.
-          }
-
-          $("main .resetPassword .button").on("click", () => {
-            handleResetPassword(actionCode, continueUrl);
-          });
-
-          $("main .resetPassword input").on("keypress", (e) => {
-            if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
-          });
-        } catch (e) {
-          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
-          $("main .preloader .text").text(
-            `Fatal error: ${e.message}. If this issue persists, please report it.`,
-          );
-        }
-      },
-      false,
-    );
-
-    document.querySelector("header").addEventListener("click", () => {
-      window.location = "/";
-    });
+     import {
+       applyActionCode,
+       verifyPasswordResetCode,
+       confirmPasswordReset,
+       checkActionCode,
+       sendPasswordResetEmail,
+       signInWithEmailAndPassword,
+       getAuth,
+     } from "firebase/auth";
+     import { initializeApp } from "firebase/app";
+     import { firebaseConfig } from "./ts/constants/firebase-config";
+     import { qs, onDOMReady } from "./utils/dom";
+
+     const app = initializeApp(firebaseConfig);
+     const Auth = getAuth(app);
+
+     function isPasswordStrong(password) {
+       const hasCapital = !!password.match(/[A-Z]/);
+       const hasNumber = !!password.match(/[\d]/);
+       const hasSpecial = !!password.match(
+         /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
+       );
+       const isLong = password.length >= 8;
+       const isShort = password.length <= 64;
+       return hasCapital && hasNumber && hasSpecial && isLong && isShort;
+     }
+
+     function handleVerifyEmail(actionCode, continueUrl) {
+       applyActionCode(Auth, actionCode)
+         .then((resp) => {
+           // Email address has been verified.
+
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+           qs("main .preloader .text")?.setText(
+             `Your email address has been verified`,
+           );
+           qs("main .preloader .subText")?.setText(`You can now close this tab`);
+         })
+         .catch((error) => {
+           console.error(error);
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+           qs("main .preloader .text")?.setText(
+             `Fatal error: ${error.message}. If this issue persists, please report it.`,
+           );
+           // Code is invalid or expired. Ask the user to verify their email address
+           // again.
+         });
+     }
+
+     function showResetPassword() {
+       qs("main .preloader")?.hide();
+       qs("main .resetPassword")?.show();
+       qs("main .resetPassword input")?.dispatch("focus");
+     }
+
+     function hideResetPassword() {
+       qs("main .preloader")?.show();
+       qs("main .resetPassword")?.hide();
+     }
+
+     function handleResetPassword(actionCode, continueUrl) {
+       // Verify the password reset code is valid.
+       hideResetPassword();
+       verifyPasswordResetCode(Auth, actionCode)
+         .then((email) => {
+           var accountEmail = email;
+
+    var newPassword = qs<HTMLInputElement>("main .resetPassword .pwd")?.getValue();
+    var newPasswordConfirm = qs<HTMLInputElement>("main .resetPassword .pwd-confirm")?.getValue();
+
+           if (newPassword !== newPasswordConfirm) {
+             alert("Passwords do not match");
+             showResetPassword();
+             return;
+           }
+
+           if (!isPasswordStrong(newPassword)) {
+             alert(
+               "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
+             );
+             showResetPassword();
+             return;
+           }
+
+           // Save the new password.
+           confirmPasswordReset(Auth, actionCode, newPassword)
+             .then((resp) => {
+               // Password reset has been confirmed and new password updated.
+               qs("main .preloader .icon")?.setHtml(
+                 `<i class="fas fa-fw fa-check"></i>`,
+               );
+               qs("main .preloader .text")?.setText(`Your password has been changed`);
+               qs("main .preloader .subText")?.setText(`You can now close this tab`);
+
+               signInWithEmailAndPassword(Auth, accountEmail, newPassword);
+             })
+             .catch((error) => {
+               console.error(error);
+               qs("main .preloader .icon")?.setHtml(
+                 `<i class="fas fa-fw fa-times"></i>`,
+               );
+               qs("main .preloader .text")?.setText(
+                 `Fatal error: ${error.message}. If this issue persists, please report it.`,
+               );
+               // Error occurred during confirmation. The code might have expired or the
+               // password is too weak.
+             });
+         })
+         .catch((error) => {
+           console.error(error);
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+           qs("main .preloader .text")?.setText(
+             `Fatal error: ${error.message}. If this issue persists, please report it.`,
+           );
+
+           // qs("main .preloader .subText")?.setText(error);
+
+           // Invalid or expired action code. Ask user to try to reset the password
+           // again.
+         });
+     }
+
+     function handleRecoverEmail(auth, actionCode, lang) {
+       // Localize the UI to the selected language as determined by the lang
+       // parameter.
+       var restoredEmail = null;
+       // Confirm the action code is valid.
+       checkActionCode(Auth, actionCode)
+         .then((info) => {
+           // Get the restored email address.
+           restoredEmail = info["data"]["email"];
+
+           // Revert to the old email.
+           return applyActionCode(Auth, actionCode);
+         })
+         .then(() => {
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+           qs("main .preloader .text")?.setText(`Your account email was reverted.`);
+           qs("main .preloader .subText")?.setText(``);
+
+           qs("main .preloader").appendHtml(`
+           <br>
+           In case you believe your account was compromised, please request a password reset email:
+           `);
+           qs("main .preloader")?.appendHtml(`
+           <br>
+           <div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
+           `);
+
+           // Account email reverted to restoredEmail
+
+           // TODO: Display a confirmation message to the user.
+
+           // You might also want to give the user the option to reset their password
+           // in case the account was compromised:
+         })
+         .catch((error) => {
+           console.error(error);
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+           qs("main .preloader .text")?.setText(error.message);
+         });
+     }
+
+     function sendPasswordReset(email) {
+       sendPasswordResetEmail(Auth, email)
+         .then(() => {
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+           qs("main .preloader .text")?.setText(`Password reset email sent`);
+           qs("main .preloader .subText")?.setText(`Please check your inbox`);
+         })
+         .catch((error) => {
+           console.error(error);
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+           qs("main .preloader .text")?.setText(error.message);
+         });
+     }
+
+     function getParameterByName(name, url = window.location.href) {
+       name = name.replace(/[\[\]]/g, "\\$&");
+       var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+         results = regex.exec(url);
+       if (!results) return null;
+       if (!results[2]) return "";
+       return decodeURIComponent(results[2].replace(/\+/g, " "));
+     }
+
+     onDOMReady(() => {
+         try {
+           // Get the action to complete.
+           var mode = getParameterByName("mode");
+           // Get the one-time code from the query parameter.
+           var actionCode = getParameterByName("oobCode");
+           // (Optional) Get the continue URL from the query parameter if available.
+           var continueUrl = getParameterByName("continueUrl");
+           // (Optional) Get the language code if available.
+           var lang = getParameterByName("lang") || "en";
+
+           // Configure the Firebase SDK.
+           // // This is the minimum configuration required for the API to be used.
+           // var config = {
+           //   'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
+           //                           // snippet found in the Firebase console.
+           // };
+           // var app = firebase.initializeApp(config);
+           // var auth = firebase.auth();
+
+           if (!mode) {
+             qs("main .preloader .icon")?.setHtml(
+               `<i class="fas fa-fw fa-times"></i>`,
+             );
+             qs("main .preloader .text")?.setText(`Mode parameter not found`);
+             return;
+           }
+
+           if (!actionCode) {
+             qs("main .preloader .icon")?.setHtml(
+               `<i class="fas fa-fw fa-times"></i>`,
+             );
+             qs("main .preloader .text")?.setText(`Action code parameter not found`);
+             return;
+           }
+
+           // Handle the user management action.
+           switch (mode) {
+             case "resetPassword":
+               // Display reset password handler and UI.
+               qs("#logo .text span").text("Reset Password");
+               document.title = "Reset Password | Monkeytype";
+               showResetPassword();
+               break;
+             case "recoverEmail":
+               // Display email recovery handler and UI.
+               handleRecoverEmail(actionCode);
+               break;
+             case "verifyEmail":
+               qs("#logo .text span")?.setText("Verify Email");
+               document.title = "Verify Email | Monkeytype";
+               // Display email verification handler and UI.
+               handleVerifyEmail(actionCode, continueUrl);
+               break;
+             default:
+               qs("main .preloader .icon")?.setHtml(
+                 `<i class="fas fa-fw fa-times"></i>`,
+               );
+               qs("main .preloader .text")?.setText(`Invalid mode`);
+               console.error("no mode found");
+             // Error: invalid mode.
+           }
+
+           qs("main .resetPassword .button")?.on("click", () => {
+             handleResetPassword(actionCode, continueUrl);
+           });
+
+           qs("main .resetPassword input")?.on("keypress", (e) => {
+             if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
+           });
+         } catch (e) {
+           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+           qs("main .preloader .text")?.setText(
+             `Fatal error: ${e.message}. If this issue persists, please report it.`,
+           );
+         }
+       },
+       false,
+     );
+
+     qs("header")?.on("click", () => {
+       window.location = "/";
+     });
   </script>
 </html>

From dc2c98d0b240b6f417e8fec052be68fe19dc0151 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Fri, 2 Jan 2026 11:59:51 +0200
Subject: [PATCH 02/10] Fix path

---
 frontend/src/email-handler.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 821652c2d346..19b655f06fe7 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -178,7 +178,7 @@
      } from "firebase/auth";
      import { initializeApp } from "firebase/app";
      import { firebaseConfig } from "./ts/constants/firebase-config";
-     import { qs, onDOMReady } from "./utils/dom";
+     import { qs, onDOMReady } from "./ts/utils/dom";
 
      const app = initializeApp(firebaseConfig);
      const Auth = getAuth(app);

From 63fe494bcf62fd9781751d4a06c8b1458555c7af Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Fri, 2 Jan 2026 12:01:49 +0200
Subject: [PATCH 03/10] Use setText

---
 frontend/src/email-handler.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 19b655f06fe7..3f92ac45f09c 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -393,7 +393,7 @@
            switch (mode) {
              case "resetPassword":
                // Display reset password handler and UI.
-               qs("#logo .text span").text("Reset Password");
+               qs("#logo .text span")?.setText("Reset Password");
                document.title = "Reset Password | Monkeytype";
                showResetPassword();
                break;

From 73595c43a55eec58b9a6ebde74b02ea6655c8cd4 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Fri, 2 Jan 2026 15:01:25 +0200
Subject: [PATCH 04/10] Add docs for scrollIntoView function

---
 frontend/src/ts/utils/dom.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/ts/utils/dom.ts b/frontend/src/ts/utils/dom.ts
index 9b0d5626302f..c401af3d2cb3 100644
--- a/frontend/src/ts/utils/dom.ts
+++ b/frontend/src/ts/utils/dom.ts
@@ -215,6 +215,10 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
     return this.native.offsetWidth > 0 || this.native.offsetHeight > 0;
   }
 
+  /**
+   * Make element visible by scrolling the element's ancestor containers
+   */
+
   scrollIntoView(options: ScrollIntoViewOptions): this {
     this.native.scrollIntoView(options);
 

From 85b1feaa627485adb06444bc1026a494ea72bb34 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Fri, 2 Jan 2026 21:19:05 +0200
Subject: [PATCH 05/10] use focus()

---
 frontend/src/email-handler.html         | 2 +-
 frontend/src/ts/pages/profile-search.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 3f92ac45f09c..c24e706920e8 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -219,7 +219,7 @@
      function showResetPassword() {
        qs("main .preloader")?.hide();
        qs("main .resetPassword")?.show();
-       qs("main .resetPassword input")?.dispatch("focus");
+       qs("main .resetPassword input")?.focus();
      }
 
      function hideResetPassword() {
diff --git a/frontend/src/ts/pages/profile-search.ts b/frontend/src/ts/pages/profile-search.ts
index e5ca472ef48c..e35d6b4c4041 100644
--- a/frontend/src/ts/pages/profile-search.ts
+++ b/frontend/src/ts/pages/profile-search.ts
@@ -57,7 +57,7 @@ export const page = new Page({
     disableButton();
   },
   afterShow: async (): Promise<void> => {
-    qs(".page.pageProfileSearch input")?.dispatch("focus");
+    qs(".page.pageProfileSearch input")?.focus();
   },
 });
 

From 0ff5a297681cd726f44a32f58ae7432ba1d6f4e7 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Sat, 3 Jan 2026 17:39:13 +0200
Subject: [PATCH 06/10] Remove spaces

---
 frontend/src/ts/utils/dom.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/ts/utils/dom.ts b/frontend/src/ts/utils/dom.ts
index 094f75f72b59..d0525086bb93 100644
--- a/frontend/src/ts/utils/dom.ts
+++ b/frontend/src/ts/utils/dom.ts
@@ -212,7 +212,6 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
   /**
    * Check if element is visible
    */
-
   isVisible(): boolean {
     return this.native.offsetWidth > 0 || this.native.offsetHeight > 0;
   }
@@ -220,7 +219,6 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
   /**
    * Make element visible by scrolling the element's ancestor containers
    */
-
   scrollIntoView(options: ScrollIntoViewOptions): this {
     this.native.scrollIntoView(options);
 

From e7266aed36da62d35d8bd6f0fbbd0cd252c35534 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Sat, 3 Jan 2026 17:47:14 +0200
Subject: [PATCH 07/10] Unindent

---
 frontend/src/email-handler.html | 538 ++++++++++++++++----------------
 1 file changed, 269 insertions(+), 269 deletions(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index c24e706920e8..e8f63096b265 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -167,274 +167,274 @@
     </div>
   </body>
   <script type="module">
-     import {
-       applyActionCode,
-       verifyPasswordResetCode,
-       confirmPasswordReset,
-       checkActionCode,
-       sendPasswordResetEmail,
-       signInWithEmailAndPassword,
-       getAuth,
-     } from "firebase/auth";
-     import { initializeApp } from "firebase/app";
-     import { firebaseConfig } from "./ts/constants/firebase-config";
-     import { qs, onDOMReady } from "./ts/utils/dom";
-
-     const app = initializeApp(firebaseConfig);
-     const Auth = getAuth(app);
-
-     function isPasswordStrong(password) {
-       const hasCapital = !!password.match(/[A-Z]/);
-       const hasNumber = !!password.match(/[\d]/);
-       const hasSpecial = !!password.match(
-         /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
-       );
-       const isLong = password.length >= 8;
-       const isShort = password.length <= 64;
-       return hasCapital && hasNumber && hasSpecial && isLong && isShort;
-     }
-
-     function handleVerifyEmail(actionCode, continueUrl) {
-       applyActionCode(Auth, actionCode)
-         .then((resp) => {
-           // Email address has been verified.
-
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
-           qs("main .preloader .text")?.setText(
-             `Your email address has been verified`,
-           );
-           qs("main .preloader .subText")?.setText(`You can now close this tab`);
-         })
-         .catch((error) => {
-           console.error(error);
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
-           qs("main .preloader .text")?.setText(
-             `Fatal error: ${error.message}. If this issue persists, please report it.`,
-           );
-           // Code is invalid or expired. Ask the user to verify their email address
-           // again.
-         });
-     }
-
-     function showResetPassword() {
-       qs("main .preloader")?.hide();
-       qs("main .resetPassword")?.show();
-       qs("main .resetPassword input")?.focus();
-     }
-
-     function hideResetPassword() {
-       qs("main .preloader")?.show();
-       qs("main .resetPassword")?.hide();
-     }
-
-     function handleResetPassword(actionCode, continueUrl) {
-       // Verify the password reset code is valid.
-       hideResetPassword();
-       verifyPasswordResetCode(Auth, actionCode)
-         .then((email) => {
-           var accountEmail = email;
-
-    var newPassword = qs<HTMLInputElement>("main .resetPassword .pwd")?.getValue();
-    var newPasswordConfirm = qs<HTMLInputElement>("main .resetPassword .pwd-confirm")?.getValue();
-
-           if (newPassword !== newPasswordConfirm) {
-             alert("Passwords do not match");
-             showResetPassword();
-             return;
-           }
-
-           if (!isPasswordStrong(newPassword)) {
-             alert(
-               "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
-             );
-             showResetPassword();
-             return;
-           }
-
-           // Save the new password.
-           confirmPasswordReset(Auth, actionCode, newPassword)
-             .then((resp) => {
-               // Password reset has been confirmed and new password updated.
-               qs("main .preloader .icon")?.setHtml(
-                 `<i class="fas fa-fw fa-check"></i>`,
-               );
-               qs("main .preloader .text")?.setText(`Your password has been changed`);
-               qs("main .preloader .subText")?.setText(`You can now close this tab`);
-
-               signInWithEmailAndPassword(Auth, accountEmail, newPassword);
-             })
-             .catch((error) => {
-               console.error(error);
-               qs("main .preloader .icon")?.setHtml(
-                 `<i class="fas fa-fw fa-times"></i>`,
-               );
-               qs("main .preloader .text")?.setText(
-                 `Fatal error: ${error.message}. If this issue persists, please report it.`,
-               );
-               // Error occurred during confirmation. The code might have expired or the
-               // password is too weak.
-             });
-         })
-         .catch((error) => {
-           console.error(error);
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
-           qs("main .preloader .text")?.setText(
-             `Fatal error: ${error.message}. If this issue persists, please report it.`,
-           );
-
-           // qs("main .preloader .subText")?.setText(error);
-
-           // Invalid or expired action code. Ask user to try to reset the password
-           // again.
-         });
-     }
-
-     function handleRecoverEmail(auth, actionCode, lang) {
-       // Localize the UI to the selected language as determined by the lang
-       // parameter.
-       var restoredEmail = null;
-       // Confirm the action code is valid.
-       checkActionCode(Auth, actionCode)
-         .then((info) => {
-           // Get the restored email address.
-           restoredEmail = info["data"]["email"];
-
-           // Revert to the old email.
-           return applyActionCode(Auth, actionCode);
-         })
-         .then(() => {
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
-           qs("main .preloader .text")?.setText(`Your account email was reverted.`);
-           qs("main .preloader .subText")?.setText(``);
-
-           qs("main .preloader").appendHtml(`
-           <br>
-           In case you believe your account was compromised, please request a password reset email:
-           `);
-           qs("main .preloader")?.appendHtml(`
-           <br>
-           <div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
-           `);
-
-           // Account email reverted to restoredEmail
-
-           // TODO: Display a confirmation message to the user.
-
-           // You might also want to give the user the option to reset their password
-           // in case the account was compromised:
-         })
-         .catch((error) => {
-           console.error(error);
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
-           qs("main .preloader .text")?.setText(error.message);
-         });
-     }
-
-     function sendPasswordReset(email) {
-       sendPasswordResetEmail(Auth, email)
-         .then(() => {
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
-           qs("main .preloader .text")?.setText(`Password reset email sent`);
-           qs("main .preloader .subText")?.setText(`Please check your inbox`);
-         })
-         .catch((error) => {
-           console.error(error);
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
-           qs("main .preloader .text")?.setText(error.message);
-         });
-     }
-
-     function getParameterByName(name, url = window.location.href) {
-       name = name.replace(/[\[\]]/g, "\\$&");
-       var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-         results = regex.exec(url);
-       if (!results) return null;
-       if (!results[2]) return "";
-       return decodeURIComponent(results[2].replace(/\+/g, " "));
-     }
-
-     onDOMReady(() => {
-         try {
-           // Get the action to complete.
-           var mode = getParameterByName("mode");
-           // Get the one-time code from the query parameter.
-           var actionCode = getParameterByName("oobCode");
-           // (Optional) Get the continue URL from the query parameter if available.
-           var continueUrl = getParameterByName("continueUrl");
-           // (Optional) Get the language code if available.
-           var lang = getParameterByName("lang") || "en";
-
-           // Configure the Firebase SDK.
-           // // This is the minimum configuration required for the API to be used.
-           // var config = {
-           //   'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
-           //                           // snippet found in the Firebase console.
-           // };
-           // var app = firebase.initializeApp(config);
-           // var auth = firebase.auth();
-
-           if (!mode) {
-             qs("main .preloader .icon")?.setHtml(
-               `<i class="fas fa-fw fa-times"></i>`,
-             );
-             qs("main .preloader .text")?.setText(`Mode parameter not found`);
-             return;
-           }
-
-           if (!actionCode) {
-             qs("main .preloader .icon")?.setHtml(
-               `<i class="fas fa-fw fa-times"></i>`,
-             );
-             qs("main .preloader .text")?.setText(`Action code parameter not found`);
-             return;
-           }
-
-           // Handle the user management action.
-           switch (mode) {
-             case "resetPassword":
-               // Display reset password handler and UI.
-               qs("#logo .text span")?.setText("Reset Password");
-               document.title = "Reset Password | Monkeytype";
-               showResetPassword();
-               break;
-             case "recoverEmail":
-               // Display email recovery handler and UI.
-               handleRecoverEmail(actionCode);
-               break;
-             case "verifyEmail":
-               qs("#logo .text span")?.setText("Verify Email");
-               document.title = "Verify Email | Monkeytype";
-               // Display email verification handler and UI.
-               handleVerifyEmail(actionCode, continueUrl);
-               break;
-             default:
-               qs("main .preloader .icon")?.setHtml(
-                 `<i class="fas fa-fw fa-times"></i>`,
-               );
-               qs("main .preloader .text")?.setText(`Invalid mode`);
-               console.error("no mode found");
-             // Error: invalid mode.
-           }
-
-           qs("main .resetPassword .button")?.on("click", () => {
-             handleResetPassword(actionCode, continueUrl);
-           });
-
-           qs("main .resetPassword input")?.on("keypress", (e) => {
-             if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
-           });
-         } catch (e) {
-           qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
-           qs("main .preloader .text")?.setText(
-             `Fatal error: ${e.message}. If this issue persists, please report it.`,
-           );
-         }
-       },
-       false,
-     );
-
-     qs("header")?.on("click", () => {
-       window.location = "/";
-     });
+    import {
+      applyActionCode,
+      verifyPasswordResetCode,
+      confirmPasswordReset,
+      checkActionCode,
+      sendPasswordResetEmail,
+      signInWithEmailAndPassword,
+      getAuth,
+    } from "firebase/auth";
+    import { initializeApp } from "firebase/app";
+    import { firebaseConfig } from "./ts/constants/firebase-config";
+    import { qs, onDOMReady } from "./ts/utils/dom";
+
+    const app = initializeApp(firebaseConfig);
+    const Auth = getAuth(app);
+
+    function isPasswordStrong(password) {
+      const hasCapital = !!password.match(/[A-Z]/);
+      const hasNumber = !!password.match(/[\d]/);
+      const hasSpecial = !!password.match(
+        /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
+      );
+      const isLong = password.length >= 8;
+      const isShort = password.length <= 64;
+      return hasCapital && hasNumber && hasSpecial && isLong && isShort;
+    }
+
+    function handleVerifyEmail(actionCode, continueUrl) {
+      applyActionCode(Auth, actionCode)
+        .then((resp) => {
+          // Email address has been verified.
+
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+          qs("main .preloader .text")?.setText(
+            `Your email address has been verified`,
+          );
+          qs("main .preloader .subText")?.setText(`You can now close this tab`);
+        })
+        .catch((error) => {
+          console.error(error);
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+          qs("main .preloader .text")?.setText(
+            `Fatal error: ${error.message}. If this issue persists, please report it.`,
+          );
+          // Code is invalid or expired. Ask the user to verify their email address
+          // again.
+        });
+    }
+
+    function showResetPassword() {
+      qs("main .preloader")?.hide();
+      qs("main .resetPassword")?.show();
+      qs("main .resetPassword input")?.focus();
+    }
+
+    function hideResetPassword() {
+      qs("main .preloader")?.show();
+      qs("main .resetPassword")?.hide();
+    }
+
+    function handleResetPassword(actionCode, continueUrl) {
+      // Verify the password reset code is valid.
+      hideResetPassword();
+      verifyPasswordResetCode(Auth, actionCode)
+        .then((email) => {
+          var accountEmail = email;
+
+          var newPassword = qs<HTMLInputElement>("main .resetPassword .pwd")?.getValue();
+          var newPasswordConfirm = qs<HTMLInputElement>("main .resetPassword .pwd-confirm")?.getValue();
+
+          if (newPassword !== newPasswordConfirm) {
+            alert("Passwords do not match");
+            showResetPassword();
+            return;
+          }
+
+          if (!isPasswordStrong(newPassword)) {
+            alert(
+              "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
+            );
+            showResetPassword();
+            return;
+          }
+
+          // Save the new password.
+          confirmPasswordReset(Auth, actionCode, newPassword)
+            .then((resp) => {
+              // Password reset has been confirmed and new password updated.
+              qs("main .preloader .icon")?.setHtml(
+                `<i class="fas fa-fw fa-check"></i>`,
+              );
+              qs("main .preloader .text")?.setText(`Your password has been changed`);
+              qs("main .preloader .subText")?.setText(`You can now close this tab`);
+
+              signInWithEmailAndPassword(Auth, accountEmail, newPassword);
+            })
+            .catch((error) => {
+              console.error(error);
+              qs("main .preloader .icon")?.setHtml(
+                `<i class="fas fa-fw fa-times"></i>`,
+              );
+              qs("main .preloader .text")?.setText(
+                `Fatal error: ${error.message}. If this issue persists, please report it.`,
+              );
+              // Error occurred during confirmation. The code might have expired or the
+              // password is too weak.
+            });
+        })
+        .catch((error) => {
+          console.error(error);
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+          qs("main .preloader .text")?.setText(
+            `Fatal error: ${error.message}. If this issue persists, please report it.`,
+          );
+
+          // qs("main .preloader .subText")?.setText(error);
+
+          // Invalid or expired action code. Ask user to try to reset the password
+          // again.
+        });
+    }
+
+    function handleRecoverEmail(auth, actionCode, lang) {
+      // Localize the UI to the selected language as determined by the lang
+      // parameter.
+      var restoredEmail = null;
+      // Confirm the action code is valid.
+      checkActionCode(Auth, actionCode)
+        .then((info) => {
+          // Get the restored email address.
+          restoredEmail = info["data"]["email"];
+
+          // Revert to the old email.
+          return applyActionCode(Auth, actionCode);
+        })
+        .then(() => {
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+          qs("main .preloader .text")?.setText(`Your account email was reverted.`);
+          qs("main .preloader .subText")?.setText(``);
+
+          qs("main .preloader").appendHtml(`
+          <br>
+          In case you believe your account was compromised, please request a password reset email:
+          `);
+          qs("main .preloader")?.appendHtml(`
+          <br>
+          <div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
+          `);
+
+          // Account email reverted to restoredEmail
+
+          // TODO: Display a confirmation message to the user.
+
+          // You might also want to give the user the option to reset their password
+          // in case the account was compromised:
+        })
+        .catch((error) => {
+          console.error(error);
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+          qs("main .preloader .text")?.setText(error.message);
+        });
+    }
+
+    function sendPasswordReset(email) {
+      sendPasswordResetEmail(Auth, email)
+        .then(() => {
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
+          qs("main .preloader .text")?.setText(`Password reset email sent`);
+          qs("main .preloader .subText")?.setText(`Please check your inbox`);
+        })
+        .catch((error) => {
+          console.error(error);
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+          qs("main .preloader .text")?.setText(error.message);
+        });
+    }
+
+    function getParameterByName(name, url = window.location.href) {
+      name = name.replace(/[\[\]]/g, "\\$&");
+      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return "";
+      return decodeURIComponent(results[2].replace(/\+/g, " "));
+    }
+
+    onDOMReady(() => {
+        try {
+          // Get the action to complete.
+          var mode = getParameterByName("mode");
+          // Get the one-time code from the query parameter.
+          var actionCode = getParameterByName("oobCode");
+          // (Optional) Get the continue URL from the query parameter if available.
+          var continueUrl = getParameterByName("continueUrl");
+          // (Optional) Get the language code if available.
+          var lang = getParameterByName("lang") || "en";
+
+          // Configure the Firebase SDK.
+          // // This is the minimum configuration required for the API to be used.
+          // var config = {
+          //   'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
+          //                           // snippet found in the Firebase console.
+          // };
+          // var app = firebase.initializeApp(config);
+          // var auth = firebase.auth();
+
+          if (!mode) {
+            qs("main .preloader .icon")?.setHtml(
+              `<i class="fas fa-fw fa-times"></i>`,
+            );
+            qs("main .preloader .text")?.setText(`Mode parameter not found`);
+            return;
+          }
+
+          if (!actionCode) {
+            qs("main .preloader .icon")?.setHtml(
+              `<i class="fas fa-fw fa-times"></i>`,
+            );
+            qs("main .preloader .text")?.setText(`Action code parameter not found`);
+            return;
+          }
+
+          // Handle the user management action.
+          switch (mode) {
+            case "resetPassword":
+              // Display reset password handler and UI.
+              qs("#logo .text span")?.setText("Reset Password");
+              document.title = "Reset Password | Monkeytype";
+              showResetPassword();
+              break;
+            case "recoverEmail":
+              // Display email recovery handler and UI.
+              handleRecoverEmail(actionCode);
+              break;
+            case "verifyEmail":
+              qs("#logo .text span")?.setText("Verify Email");
+              document.title = "Verify Email | Monkeytype";
+              // Display email verification handler and UI.
+              handleVerifyEmail(actionCode, continueUrl);
+              break;
+            default:
+              qs("main .preloader .icon")?.setHtml(
+                `<i class="fas fa-fw fa-times"></i>`,
+              );
+              qs("main .preloader .text")?.setText(`Invalid mode`);
+              console.error("no mode found");
+            // Error: invalid mode.
+          }
+
+          qs("main .resetPassword .button")?.on("click", () => {
+            handleResetPassword(actionCode, continueUrl);
+          });
+
+          qs("main .resetPassword input")?.on("keypress", (e) => {
+            if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
+          });
+        } catch (e) {
+          qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
+          qs("main .preloader .text")?.setText(
+            `Fatal error: ${e.message}. If this issue persists, please report it.`,
+          );
+        }
+      },
+      false,
+    );
+
+    qs("header")?.on("click", () => {
+      window.location = "/";
+    });
   </script>
 </html>

From cdb0278dca8ea07202ed3f2d8e3a60db2292efb5 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Mon, 5 Jan 2026 19:50:46 +0200
Subject: [PATCH 08/10] Add ?

---
 frontend/src/email-handler.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index e8f63096b265..e948ff00d470 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -307,7 +307,7 @@
           qs("main .preloader .text")?.setText(`Your account email was reverted.`);
           qs("main .preloader .subText")?.setText(``);
 
-          qs("main .preloader").appendHtml(`
+          qs("main .preloader")?.appendHtml(`
           <br>
           In case you believe your account was compromised, please request a password reset email:
           `);

From 294efa6790ebf7d2fbc37c6c7eb8c291ed9daae6 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Mon, 5 Jan 2026 19:51:53 +0200
Subject: [PATCH 09/10] Remove argument

---
 frontend/src/email-handler.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index e948ff00d470..9a323563385c 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -430,7 +430,6 @@
           );
         }
       },
-      false,
     );
 
     qs("header")?.on("click", () => {

From da16d858161eefb1bf353dca7b03221debd407df Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Mon, 5 Jan 2026 19:53:57 +0200
Subject: [PATCH 10/10] Move

---
 frontend/src/email-handler.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 9a323563385c..f0753f098988 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -429,8 +429,7 @@
             `Fatal error: ${e.message}. If this issue persists, please report it.`,
           );
         }
-      },
-    );
+      });
 
     qs("header")?.on("click", () => {
       window.location = "/";