refactor(register captcha): use new modal system

frontend/src/html/popups.html

@@ -1,8 +1,8 @@
-<div id="registerCaptchaPopupWrapper" class="popupWrapper hidden">
-  <div id="registerCaptchaPopup">
+<dialog id="registerCaptchaModal" class="modalWrapper hidden">
+  <div class="modal">
     <div class="g-recaptcha"></div>
   </div>
-</div>
+</dialog>
 
 <dialog id="alertsPopup" class="modalWrapper hidden">
   <div class="modal">

frontend/src/styles/popups.scss

@@ -36,6 +36,12 @@
   }
 }
 
+#registerCaptchaModal {
+  .modal {
+    box-sizing: unset;
+  }
+}
+
 #customTextPopupWrapper {
   #customTextPopup {
     background: var(--bg-color);

frontend/src/ts/controllers/account-controller.ts

@@ -14,7 +14,7 @@ import * as LoadingPage from "../pages/loading";
 import * as LoginPage from "../pages/login";
 import * as ResultFilters from "../account/result-filters";
 import * as TagController from "./tag-controller";
-import * as RegisterCaptchaPopup from "../popups/register-captcha-popup";
+import * as RegisterCaptchaModal from "../modals/register-captcha";
 import * as URLHandler from "../utils/url-handler";
 import * as Account from "../pages/account";
 import * as Alerts from "../elements/alerts";
@@ -480,8 +480,8 @@ async function signUp(): Promise<void> {
     });
     return;
   }
-  RegisterCaptchaPopup.show();
-  const captchaToken = await RegisterCaptchaPopup.promise;
+  RegisterCaptchaModal.show();
+  const captchaToken = await RegisterCaptchaModal.promise;
   if (captchaToken === undefined || captchaToken === "") {
     Notifications.add("Please complete the captcha", -1);
     return;

frontend/src/ts/modals/register-captcha.ts

@@ -0,0 +1,42 @@
+import * as CaptchaController from "../controllers/captcha-controller";
+import AnimatedModal from "../utils/animated-modal";
+
+let resolvePromise: (token?: string) => void;
+
+export let promise = new Promise<string | undefined>((resolve) => {
+  resolvePromise = resolve;
+});
+
+export function show(): void {
+  void modal.show({
+    beforeAnimation: async (modal) => {
+      promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      CaptchaController.reset("register");
+
+      CaptchaController.render(
+        modal.querySelector(".g-recaptcha") as HTMLElement,
+        "register",
+        (token) => {
+          resolvePromise(token);
+          hide();
+        }
+      );
+    },
+  });
+}
+
+function hide(resolveToUndefined = false): void {
+  if (resolveToUndefined) resolvePromise();
+  void modal.hide();
+}
+
+const modal = new AnimatedModal("registerCaptchaModal", "popups", undefined, {
+  customEscapeHandler: async (): Promise<void> => {
+    hide(true);
+  },
+  customWrapperClickHandler: async (): Promise<void> => {
+    hide(true);
+  },
+});

frontend/src/ts/popups/register-captcha-popup.ts

@@ -1,61 +0,0 @@
-import * as CaptchaController from "../controllers/captcha-controller";
-import { isPopupVisible } from "../utils/misc";
-import * as Skeleton from "../utils/skeleton";
-
-const wrapperId = "registerCaptchaPopupWrapper";
-
-let resolvePromise: (token?: string) => void;
-
-export let promise = new Promise<string | undefined>((resolve) => {
-  resolvePromise = resolve;
-});
-
-export function show(): void {
-  Skeleton.append(wrapperId, "popups");
-  if (!isPopupVisible(wrapperId)) {
-    promise = new Promise((resolve) => {
-      resolvePromise = resolve;
-    });
-    CaptchaController.reset("register");
-    CaptchaController.render(
-      $("#registerCaptchaPopup .g-recaptcha")[0] as HTMLElement,
-      "register",
-      (token) => {
-        resolvePromise(token);
-        hide();
-      }
-    );
-    $("#registerCaptchaPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125);
-  }
-}
-
-function hide(resolveToUndefined = false): void {
-  if (isPopupVisible(wrapperId)) {
-    if (resolveToUndefined) resolvePromise();
-    $("#registerCaptchaPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#registerCaptchaPopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-$("#registerCaptchaPopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "registerCaptchaPopupWrapper") {
-    hide(true);
-  }
-});
-
-Skeleton.save(wrapperId);