From a17222551028cdb5ec81589cad4ce785ba0af4d1 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 13 Mar 2024 00:16:48 +0100
Subject: [PATCH] refactor(cookie modal): rename file, move file, use setup
 function, style update

---
 frontend/src/html/popups.html              |   5 +-
 frontend/src/styles/popups.scss            |  26 ++---
 frontend/src/styles/z_media-queries.scss   |   8 --
 frontend/src/ts/event-handlers/settings.ts |   7 ++
 frontend/src/ts/modals/cookies.ts          | 126 +++++++++++++++++++++
 frontend/src/ts/pages/settings.ts          |   6 -
 frontend/src/ts/popups/cookie-popup.ts     | 122 --------------------
 frontend/src/ts/ready.ts                   |   4 +-
 frontend/src/ts/test/test-ui.ts            |   8 +-
 9 files changed, 151 insertions(+), 161 deletions(-)
 create mode 100644 frontend/src/ts/modals/cookies.ts
 delete mode 100644 frontend/src/ts/popups/cookie-popup.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 4b1b800c2..4bdb1e47f 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -59,10 +59,7 @@
   <div id="simplePopup" popupId=""></div>
 </div>
 
-<dialog
-  id="cookiePopup"
-  class="cookie-popup-wrapper cookiePopupWrapper modalWrapper hidden"
->
+<dialog id="cookiesModal" class="modalWrapper hidden">
   <div class="extensionMessage">
     If you see this text, that means an extension is blocking a cookie consent
     popup. This will cause the website to incorrectly assume its still visible
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 5b59d6123..299bae88a 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -607,26 +607,22 @@
     color: var(--error-color);
   }
 }
-#cookiePopup {
+#cookiesModal {
+  align-items: end;
+  justify-items: end;
   .extensionMessage {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    padding: 1rem;
-    width: 465px;
+    max-width: 465px;
+    width: 100%;
     font-size: 0.75rem;
     color: var(--text-color);
+    grid-column: 1/2;
+    grid-row: 1/2;
+    padding: 1rem;
   }
   .modal {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    min-width: 465px;
+    grid-column: 1/2;
+    grid-row: 1/2;
+    max-width: 465px;
     z-index: 100000001;
     // outline: 0.5rem solid var(--bg-color)
     -webkit-user-select: none;
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index 78a7f83a5..ab4125a34 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -759,14 +759,6 @@
       grid-template-areas: "title" "t15" "t60";
     }
   }
-  #cookiePopupWrapper {
-    #cookiePopup,
-    .extensionMessage {
-      right: 1rem;
-      bottom: 1rem;
-      width: calc(100vw - 2rem);
-    }
-  }
   #keymap {
     .row {
       height: 1.25rem;
diff --git a/frontend/src/ts/event-handlers/settings.ts b/frontend/src/ts/event-handlers/settings.ts
index f0eec5dc3..d53d1bca3 100644
--- a/frontend/src/ts/event-handlers/settings.ts
+++ b/frontend/src/ts/event-handlers/settings.ts
@@ -1,4 +1,5 @@
 import * as ShareCustomThemeModal from "../modals/share-custom-theme";
+import * as CookiesModal from "../modals/cookies";
 
 const settingsPage = document.querySelector("#pageSettings");
 
@@ -7,3 +8,9 @@ settingsPage
   ?.addEventListener("click", () => {
     ShareCustomThemeModal.show();
   });
+
+settingsPage
+  ?.querySelector(".section.updateCookiePreferences button")
+  ?.addEventListener("click", () => {
+    CookiesModal.show(true);
+  });
diff --git a/frontend/src/ts/modals/cookies.ts b/frontend/src/ts/modals/cookies.ts
new file mode 100644
index 000000000..c82e367c0
--- /dev/null
+++ b/frontend/src/ts/modals/cookies.ts
@@ -0,0 +1,126 @@
+import { activateAnalytics } from "../controllers/analytics-controller";
+import * as Notifications from "../elements/notifications";
+import { isPopupVisible } from "../utils/misc";
+import * as AdController from "../controllers/ad-controller";
+import AnimatedModal from "../utils/animated-modal";
+import { focusWords } from "../test/test-ui";
+
+type Accepted = {
+  security: boolean;
+  analytics: boolean;
+};
+
+function getAcceptedObject(): Accepted | null {
+  const acceptedCookies = localStorage.getItem("acceptedCookies") ?? "";
+  if (acceptedCookies) {
+    return JSON.parse(acceptedCookies);
+  } else {
+    return null;
+  }
+}
+
+function setAcceptedObject(obj: Accepted): void {
+  localStorage.setItem("acceptedCookies", JSON.stringify(obj));
+}
+
+export function check(): void {
+  const accepted = getAcceptedObject();
+  if (accepted === null) {
+    show();
+  }
+}
+
+export function show(goToSettings?: boolean): void {
+  void modal.show({
+    beforeAnimation: async () => {
+      if (goToSettings) {
+        showSettings();
+      }
+    },
+    afterAnimation: async () => {
+      if (!isPopupVisible("cookiesModal")) {
+        modal.destroy();
+      }
+    },
+  });
+}
+
+function showSettings(): void {
+  modal.getModal().querySelector(".main")?.classList.add("hidden");
+  modal.getModal().querySelector(".settings")?.classList.remove("hidden");
+}
+
+async function hide(): Promise<void> {
+  void modal.hide({
+    afterAnimation: async () => {
+      focusWords();
+    },
+  });
+}
+
+// function verifyVisible(): void {
+//   if (!modal.isOpen()) return;
+//   if (!isPopupVisible("cookiePopup")) {
+//     //removed by cookie popup blocking extension
+//     modal.destroy();
+//   }
+// }
+
+const modal = new AnimatedModal("cookiesModal", "popups", undefined, {
+  customEscapeHandler: (): void => {
+    //
+  },
+  customWrapperClickHandler: (): void => {
+    //
+  },
+  setup: async (modalEl): Promise<void> => {
+    modalEl.querySelector(".acceptAll")?.addEventListener("click", () => {
+      const accepted = {
+        security: true,
+        analytics: true,
+      };
+      setAcceptedObject(accepted);
+      activateAnalytics();
+      void hide();
+    });
+    modalEl.querySelector(".rejectAll")?.addEventListener("click", () => {
+      const accepted = {
+        security: true,
+        analytics: false,
+      };
+      setAcceptedObject(accepted);
+      void hide();
+    });
+    modalEl.querySelector(".openSettings")?.addEventListener("click", () => {
+      showSettings();
+    });
+    modalEl
+      .querySelector(".cookie.ads .textButton")
+      ?.addEventListener("click", () => {
+        try {
+          AdController.showConsentPopup();
+        } catch (e) {
+          console.error("Failed to open ad consent UI");
+          Notifications.add(
+            "Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
+            -1
+          );
+        }
+      });
+    modalEl.querySelector(".acceptSelected")?.addEventListener("click", () => {
+      const analytics = (
+        modalEl.querySelector(".cookie.analytics input") as HTMLInputElement
+      ).checked;
+      const accepted = {
+        security: true,
+        analytics,
+      };
+      setAcceptedObject(accepted);
+      void hide();
+
+      if (analytics === true) {
+        activateAnalytics();
+      }
+    });
+  },
+});
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 2f0fa11c1..5b0135cce 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -12,7 +12,6 @@ import * as ImportExportSettingsModal from "../modals/import-export-settings";
 import * as ConfigEvent from "../observables/config-event";
 import * as ActivePage from "../states/active-page";
 import * as ApeKeysPopup from "../popups/ape-keys-popup";
-import * as CookiePopup from "../popups/cookie-popup";
 import Page from "./page";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import Ape from "../ape";
@@ -1247,11 +1246,6 @@ $(".pageSettings .quickNav .links a").on("click", (e) => {
   isOpen && toggleSettingsGroup(settingsGroup);
 });
 
-$(".pageSettings .section.updateCookiePreferences button").on("click", () => {
-  CookiePopup.show();
-  CookiePopup.showSettings();
-});
-
 $(".pageSettings .section.discordIntegration .getLinkAndGoToOauth").on(
   "click",
   () => {
diff --git a/frontend/src/ts/popups/cookie-popup.ts b/frontend/src/ts/popups/cookie-popup.ts
deleted file mode 100644
index 35093e28b..000000000
--- a/frontend/src/ts/popups/cookie-popup.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { activateAnalytics } from "../controllers/analytics-controller";
-import * as Notifications from "../elements/notifications";
-import { isPopupVisible } from "../utils/misc";
-import * as AdController from "../controllers/ad-controller";
-import AnimatedModal from "../utils/animated-modal";
-
-type Accepted = {
-  security: boolean;
-  analytics: boolean;
-};
-
-function getAcceptedObject(): Accepted | null {
-  const acceptedCookies = localStorage.getItem("acceptedCookies") ?? "";
-  if (acceptedCookies) {
-    return JSON.parse(acceptedCookies);
-  } else {
-    return null;
-  }
-}
-
-function setAcceptedObject(obj: Accepted): void {
-  localStorage.setItem("acceptedCookies", JSON.stringify(obj));
-}
-
-export function check(): void {
-  const accepted = getAcceptedObject();
-  if (accepted === null) {
-    show();
-  }
-}
-
-export function show(): void {
-  void modal.show({
-    afterAnimation: async () => {
-      if (!isPopupVisible("cookiePopup")) {
-        modal.destroy();
-      }
-    },
-  });
-}
-
-async function hide(): Promise<void> {
-  void modal.hide();
-}
-
-export function showSettings(): void {
-  $("#cookiePopup .main").addClass("hidden");
-  $("#cookiePopup .settings").removeClass("hidden");
-}
-
-function verifyVisible(): void {
-  if (!modal.isOpen()) return;
-  if (!isPopupVisible("cookiePopup")) {
-    //removed by cookie popup blocking extension
-    modal.destroy();
-  }
-}
-
-$("#cookiePopup .acceptAll").on("click", () => {
-  const accepted = {
-    security: true,
-    analytics: true,
-  };
-  setAcceptedObject(accepted);
-  activateAnalytics();
-  void hide();
-});
-
-$("#cookiePopup .rejectAll").on("click", () => {
-  const accepted = {
-    security: true,
-    analytics: false,
-  };
-  setAcceptedObject(accepted);
-  void hide();
-});
-
-$("#cookiePopup .acceptSelected").on("click", () => {
-  const analytics = $("#cookiePopup .cookie.analytics input").prop("checked");
-  const accepted = {
-    security: true,
-    analytics,
-  };
-  setAcceptedObject(accepted);
-  void hide();
-
-  if (analytics === true) {
-    activateAnalytics();
-  }
-});
-
-$("#cookiePopup .openSettings").on("click", () => {
-  showSettings();
-});
-
-$(document).on("keypress", (e) => {
-  verifyVisible();
-  if (modal.isOpen()) {
-    e.preventDefault();
-  }
-});
-
-$("#cookiePopup .cookie.ads .textButton").on("click", () => {
-  try {
-    AdController.showConsentPopup();
-  } catch (e) {
-    console.error("Failed to open ad consent UI");
-    Notifications.add(
-      "Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
-      -1
-    );
-  }
-});
-
-const modal = new AnimatedModal("cookiePopup", "popups", undefined, {
-  customEscapeHandler: (): void => {
-    //
-  },
-  customWrapperClickHandler: (): void => {
-    //
-  },
-});
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 703d983aa..a34af177f 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -5,7 +5,7 @@ import * as MonkeyPower from "./elements/monkey-power";
 import * as NewVersionNotification from "./elements/version-check";
 import * as Notifications from "./elements/notifications";
 import * as Focus from "./test/focus";
-import * as CookiePopup from "./popups/cookie-popup";
+import * as CookiesModal from "./modals/cookies";
 import * as PSA from "./elements/psa";
 import * as ConnectionState from "./states/connection";
 import * as FunboxList from "./test/funbox/funbox-list";
@@ -41,7 +41,7 @@ $(document).ready(() => {
   Misc.loadCSS("/css/balloon.min.css", true);
   Misc.loadCSS("/css/fa.min.css", true);
 
-  CookiePopup.check();
+  CookiesModal.check();
 
   $("body").css("transition", "background .25s, transform .05s");
   if (Config.quickRestart !== "off") {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 58d6e956d..3607e9a77 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -405,8 +405,8 @@ export async function screenshot(): Promise<void> {
 
   let revertCookie = false;
   if (
-    Misc.isElementVisible("#cookiePopupWrapper") ||
-    document.contains(document.querySelector("#cookiePopupWrapper"))
+    Misc.isElementVisible("#cookiesModal") ||
+    document.contains(document.querySelector("#cookiesModal"))
   ) {
     revertCookie = true;
   }
@@ -428,7 +428,7 @@ export async function screenshot(): Promise<void> {
     $("#result").removeClass("noBalloons");
     $(".wordInputHighlight").removeClass("hidden");
     $(".highlightContainer").removeClass("hidden");
-    if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
+    if (revertCookie) $("#cookiesModal").removeClass("hidden");
     if (revealReplay) $("#resultReplay").removeClass("hidden");
     if (!isAuthenticated()) {
       $(".pageTest .loginTip").removeClass("hidden");
@@ -475,7 +475,7 @@ export async function screenshot(): Promise<void> {
   $("#result").addClass("noBalloons");
   $(".wordInputHighlight").addClass("hidden");
   $(".highlightContainer").addClass("hidden");
-  if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");
+  if (revertCookie) $("#cookiesModal").addClass("hidden");
 
   FunboxList.get(Config.funbox).forEach((f) => f.functions?.clearGlobal?.());