From 83ab22868c1015960fc72c06b3efe75e1b942dcd Mon Sep 17 00:00:00 2001
From: David Martin <dmartin.tech@outlook.com>
Date: Sun, 25 Oct 2020 17:02:08 -0500
Subject: [PATCH] Added import/export as JSON

---
 public/css/style.scss |  24 ++++++
 public/index.html     | 155 ++++++++++++++++++++------------------
 public/js/settings.js | 168 +++++++++++++++++++++++++++++++-----------
 3 files changed, 234 insertions(+), 113 deletions(-)
diff --git a/public/css/style.scss b/public/css/style.scss
index 03d46ac85..74819b3d2 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -512,6 +512,30 @@ a:hover {
   }
 }
 
+#settingsImportWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #settingsImport {
+    width: 50vw;
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}
+
 #resultEditTagsPanelWrapper {
   width: 100%;
   height: 100%;
diff --git a/public/index.html b/public/index.html
index 683e881b2..ab34b60a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,11 +34,15 @@
     <meta name="twitter:title" content="Monkeytype" />
     <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
     <meta name="twitter:card" content="summary_large_image" />
-    <script data-ad-client="ca-pub-7261919841327810" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script
+      data-ad-client="ca-pub-7261919841327810"
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
+    ></script>
   </head>
 
   <body>
-    <div id="backgroundLoader" style="display: none;"></div>
+    <div id="backgroundLoader" style="display: none"></div>
     <div
       class="nameChangeMessage"
       style="
@@ -52,6 +56,14 @@
       Important information about your account. Please click this message.
     </div>
     <div class="notification">Signed in</div>
+
+    <div id="settingsImportWrapper" class="hidden">
+      <div id="settingsImport" action="">
+        <input type="text" />
+        <div class="button">import settings</div>
+      </div>
+    </div>
+
     <div id="customThemeShareWrapper" class="hidden">
       <div id="customThemeShare" action="">
         <input type="text" />
@@ -91,7 +103,10 @@
       <div id="customMode2Popup" mode="">
         <div class="title">Test length</div>
         <input type="number" value="1" min="1" max="10000" />
-        <div class="tip">You can start an infinite test by inputting 0. Then, to stop the test, use the Bail Out feature (esc > Bail Out)</div>
+        <div class="tip">
+          You can start an infinite test by inputting 0. Then, to stop the test,
+          use the Bail Out feature (esc > Bail Out)
+        </div>
         <div class="button">ok</div>
       </div>
     </div>
@@ -110,9 +125,7 @@
     </div>
     <div id="leaderboardsWrapper" class="hidden">
       <div id="leaderboards">
-        <div class="mainTitle">
-          Leaderboards
-        </div>
+        <div class="mainTitle">Leaderboards</div>
         <div class="buttons">
           <div class="buttonGroup">
             <div class="button active" board="time_15">time 15</div>
@@ -121,9 +134,7 @@
         </div>
         <div class="tables">
           <div class="titleAndTable">
-            <div class="title">
-              Global
-            </div>
+            <div class="title">Global</div>
             <div class="globalTableWrapper">
               <table class="global">
                 <thead>
@@ -418,12 +429,8 @@
             </div>
           </div>
           <div class="titleAndTable">
-            <div class="title">
-              Daily
-            </div>
-            <div class="subtitle">
-              -
-            </div>
+            <div class="title">Daily</div>
+            <div class="subtitle">-</div>
             <div class="dailyTableWrapper">
               <table class="daily">
                 <thead>
@@ -833,7 +840,7 @@
         </div>
 
         <div class="config">
-          <div style="display: grid; grid-auto-flow: column;">
+          <div style="display: grid; grid-auto-flow: column">
             <div class="group punctuationMode">
               <!--           <div class="title">time</div> -->
               <div class="buttons">
@@ -845,9 +852,7 @@
             <div class="group numbersMode">
               <!--           <div class="title">time</div> -->
               <div class="buttons">
-                <div class="text-button toggleButton" tabindex="2">
-                  numbers
-                </div>
+                <div class="text-button toggleButton" tabindex="2">numbers</div>
               </div>
             </div>
           </div>
@@ -883,9 +888,7 @@
               <div class="text-button active" timeConfig="30" tabindex="2">
                 30
               </div>
-              <div class="text-button" timeConfig="60" tabindex="2">
-                60
-              </div>
+              <div class="text-button" timeConfig="60" tabindex="2">60</div>
               <div class="text-button" timeConfig="120" tabindex="2">120</div>
               <div class="text-button" timeConfig="custom" tabindex="2">
                 <i class="fas fa-tools"></i>
@@ -900,9 +903,7 @@
               <div class="text-button active" quoteLength="1" tabindex="2">
                 medium
               </div>
-              <div class="text-button" quoteLength="2" tabindex="2">
-                long
-              </div>
+              <div class="text-button" quoteLength="2" tabindex="2">long</div>
               <div class="text-button" quoteLength="3" tabindex="2">thicc</div>
             </div>
           </div>
@@ -915,7 +916,7 @@
         </div>
         <div
           class="signOut hidden"
-          style="grid-column: 3/4; grid-row: 1/2;"
+          style="grid-column: 3/4; grid-row: 1/2"
           tabindex="0"
         >
           <i class="fas fa-sign-out-alt"></i>
@@ -1170,7 +1171,7 @@
               <div class="group testType">
                 <div class="top">test type</div>
                 <div class="bottom">-</div>
-                <div class="tags" style="margin-top: 0.5rem;">
+                <div class="tags" style="margin-top: 0.5rem">
                   <div class="top">tags</div>
                   <div class="bottom">-</div>
                 </div>
@@ -1237,7 +1238,7 @@
                   class="icon-button"
                   aria-label="Copy words list"
                   data-balloon-pos="up"
-                  style="display: inline-block;"
+                  style="display: inline-block"
                 >
                   <i class="fas fa-copy"></i>
                 </span>
@@ -1470,7 +1471,7 @@
                 <a
                   class="button"
                   href="https://discord.com/api/oauth2/authorize?client_id=757704816532258856&redirect_uri=https%3A%2F%2Fmonkeytype.com%2Fverify&response_type=token&scope=identify"
-                  style="text-decoration: none;"
+                  style="text-decoration: none"
                 >
                   Verify with Discord
                 </a>
@@ -1774,9 +1775,7 @@
             </div>
             <div class="section indicateTypos" section="">
               <h1>indicate typos</h1>
-              <div class="text">
-                Show typos underneath the letters
-              </div>
+              <div class="text">Show typos underneath the letters</div>
               <div class="buttons">
                 <div class="button off" tabindex="0" onclick="this.blur();">
                   off
@@ -1788,9 +1787,7 @@
             </div>
             <div class="section swapEscAndTab" section="">
               <h1>swap esc and tab</h1>
-              <div class="text">
-                Swap the behaviour of tab and escape keys.
-              </div>
+              <div class="text">Swap the behaviour of tab and escape keys.</div>
               <div class="buttons">
                 <div class="button off" tabindex="0" onclick="this.blur();">
                   off
@@ -1802,9 +1799,7 @@
             </div>
             <div class="section capsLockBackspace">
               <h1>caps lock backspace</h1>
-              <div class="text">
-                Makes caps lock act like backspace.
-              </div>
+              <div class="text">Makes caps lock act like backspace.</div>
               <div class="buttons">
                 <div class="button off" tabindex="0" onclick="this.blur();">
                   off
@@ -1828,9 +1823,7 @@
           <div class="settingsGroup sound">
             <div class="section playSoundOnClick">
               <h1>play sound on click</h1>
-              <div class="text">
-                Plays a short sound when you press a key.
-              </div>
+              <div class="text">Plays a short sound when you press a key.</div>
               <div class="buttons">
                 <div
                   class="button"
@@ -2572,7 +2565,7 @@
                   <div
                     class="button"
                     id="loadCustomColorsFromPreset"
-                    style="grid-column: 1/3;"
+                    style="grid-column: 1/3"
                   >
                     load from preset
                   </div>
@@ -2656,11 +2649,34 @@
             </div>
             <div class="sectionSpacer"></div>
           </div>
+
           <div class="sectionGroupTitle" group="dangerZone">
             danger zone
             <i class="fas fa-chevron-down"></i>
           </div>
           <div class="settingsGroup dangerZone">
+            <div class="section importexportSettings">
+              <h1>import/export settings</h1>
+              <div class="text">Import or export the settings as JSON.</div>
+              <div class="buttons">
+                <div
+                  class="button off"
+                  id="importSettingsButton"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  import
+                </div>
+                <div
+                  class="button off"
+                  id="exportSettingsButton"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  export
+                </div>
+              </div>
+            </div>
             <div class="section resetSettings">
               <h1>reset settings</h1>
               <div class="text">
@@ -2720,15 +2736,22 @@
                 Sign In
               </div>
             </form>
-            <div data-balloon-pos="up" aria-label="The new domain seems to be triggering the Chrome's built in phishing detection. 
+            <div
+              data-balloon-pos="up"
+              aria-label="The new domain seems to be triggering the Chrome's built in phishing detection. 
 
             Basically, since you used monkey-type a lot, when chrome sees that you've entered the same credentials to a veeeery similar domain, Chrome thinks that monkeytype.com is trying to steal your information for... monkey-type.com, and labels the website as Dangerous. (even though its pointing to the same server..)
             
             I've tested with family members and friends who don't visit the site as often or at all, and the dangerous popup was not there. Also, Google's Safe Browsing scanner classifies monkeytype.com as safe, so this leads me to believe the 'dangerous' classification is happening locally.
             
-            I've contacted Google to get this sorted out - don't worry, the site is safe." data-balloon-length="xlarge" style="text-align: center;
-            margin-top: 1rem;
-            grid-column: 1/3;">Returning Chrome Users<br>Please read me</div>
+            I've contacted Google to get this sorted out - don't worry, the site is safe."
+              data-balloon-length="xlarge"
+              style="text-align: center; margin-top: 1rem; grid-column: 1/3"
+            >
+              Returning Chrome Users
+              <br />
+              Please read me
+            </div>
           </div>
         </div>
 
@@ -2760,7 +2783,7 @@
             </div>
             <div class="group">
               <div class="title">personal bests</div>
-              <div style="display: grid; grid-auto-flow: column; gap: 1rem;">
+              <div style="display: grid; grid-auto-flow: column; gap: 1rem">
                 <div class="titleAndTable timePbTable">
                   <table width="100%">
                     <thead>
@@ -2849,21 +2872,17 @@
               >
                 set filters to current settings
               </div> -->
-              <div class="buttonsAndTitle" style="grid-column: 1/3;">
+              <div class="buttonsAndTitle" style="grid-column: 1/3">
                 <div class="title">filters</div>
                 <div class="buttons">
                   <div class="button allFilters">all</div>
-                  <div class="button currentConfigFilter">
-                    current settings
-                  </div>
-                  <div class="button toggleAdvancedFilters">
-                    advanced
-                  </div>
+                  <div class="button currentConfigFilter">current settings</div>
+                  <div class="button toggleAdvancedFilters">advanced</div>
                 </div>
               </div>
               <div
                 class="buttonsAndTitle testDate"
-                style="grid-column: 1/3; margin-top: 1rem;"
+                style="grid-column: 1/3; margin-top: 1rem"
               >
                 <!-- <div class="title">date</div> -->
                 <div class="buttons filterGroup" group="date">
@@ -2874,8 +2893,8 @@
                 </div>
               </div>
             </div>
-            <div class="group filterButtons" style="display: none;">
-              <div class="buttonsAndTitle" style="grid-column: 1/3;">
+            <div class="group filterButtons" style="display: none">
+              <div class="buttonsAndTitle" style="grid-column: 1/3">
                 <div class="title">advanced filters</div>
                 <div class="buttons">
                   <div class="button noFilters">clear filters</div>
@@ -2932,15 +2951,15 @@
                   <div class="button" filter="off">off</div>
                 </div>
               </div>
-              <div class="buttonsAndTitle tags" style="grid-column: 1/3;">
+              <div class="buttonsAndTitle tags" style="grid-column: 1/3">
                 <div class="title">tags</div>
                 <div class="buttons filterGroup" group="tags"></div>
               </div>
-              <div class="buttonsAndTitle languages" style="grid-column: 1/3;">
+              <div class="buttonsAndTitle languages" style="grid-column: 1/3">
                 <div class="title">language</div>
                 <div class="buttons filterGroup" group="language"></div>
               </div>
-              <div class="buttonsAndTitle funbox" style="grid-column: 1/3;">
+              <div class="buttonsAndTitle funbox" style="grid-column: 1/3">
                 <div class="title">funbox</div>
                 <div class="buttons filterGroup" group="funbox"></div>
               </div>
@@ -2953,13 +2972,11 @@
               <i class="fas fa-fw fa-spin fa-circle-notch"></i>
             </div> -->
               <div class="above"></div>
-              <div class="chart" style="height: 400px;">
+              <div class="chart" style="height: 400px">
                 <canvas id="resultHistoryChart"></canvas>
               </div>
               <div class="below">
-                <div class="text">
-
-                </div>
+                <div class="text"></div>
                 <div class="buttons">
                   <div class="toggleAccuracyOnChart button">
                     <i class="fas fa-bullseye"></i>
@@ -2973,7 +2990,7 @@
               </div>
             </div>
             <div class="group dailyActivityChart">
-              <div class="chart" style="height: 200px;">
+              <div class="chart" style="height: 200px">
                 <canvas id="activityChart"></canvas>
               </div>
             </div>
@@ -3015,9 +3032,7 @@
               </div>
 
               <div class="group testsStarted">
-                <div class="title">
-                  tests started
-                </div>
+                <div class="title">tests started</div>
                 <div class="val">-</div>
               </div>
               <div class="group testsCompleted">
@@ -3104,9 +3119,7 @@
                 </thead>
                 <tbody></tbody>
               </table>
-              <div class="loadMoreButton">
-                load more
-              </div>
+              <div class="loadMoreButton">load more</div>
             </div>
           </div>
         </div>
diff --git a/public/js/settings.js b/public/js/settings.js
index ccfc1d00e..f23e4836d 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -136,7 +136,10 @@ settingsGroups.confidenceMode = new SettingsGroup(
     settingsGroups.stopOnError.updateButton();
   }
 );
-settingsGroups.indicateTypos = new SettingsGroup("indicateTypos", setIndicateTypos);
+settingsGroups.indicateTypos = new SettingsGroup(
+  "indicateTypos",
+  setIndicateTypos
+);
 settingsGroups.blindMode = new SettingsGroup("blindMode", setBlindMode);
 settingsGroups.quickEnd = new SettingsGroup("quickEnd", setQuickEnd);
 // settingsGroups.readAheadMode = new SettingsGroup(
@@ -209,9 +212,9 @@ settingsGroups.paceCaret = new SettingsGroup("paceCaret", setPaceCaret, () => {
 });
 settingsGroups.minWpm = new SettingsGroup("minWpm", setMinWpm, () => {
   if (config.minWpm === "custom") {
-    $(
-      ".pageSettings .section.minWpm input.customMinWpmSpeed"
-    ).removeClass("hidden");
+    $(".pageSettings .section.minWpm input.customMinWpmSpeed").removeClass(
+      "hidden"
+    );
   } else {
     $(".pageSettings .section.minWpm input.customMinWpmSpeed").addClass(
       "hidden"
@@ -231,7 +234,10 @@ settingsGroups.language = new SettingsGroup("language", changeLanguage);
 settingsGroups.fontSize = new SettingsGroup("fontSize", changeFontSize);
 settingsGroups.pageWidth = new SettingsGroup("pageWidth", setPageWidth);
 settingsGroups.caretStyle = new SettingsGroup("caretStyle", setCaretStyle);
-settingsGroups.paceCaretStyle = new SettingsGroup("paceCaretStyle", setPaceCaretStyle);
+settingsGroups.paceCaretStyle = new SettingsGroup(
+  "paceCaretStyle",
+  setPaceCaretStyle
+);
 settingsGroups.timerStyle = new SettingsGroup("timerStyle", setTimerStyle);
 settingsGroups.timerOpacity = new SettingsGroup(
   "timerOpacity",
@@ -250,7 +256,7 @@ async function fillSettingsPage() {
   refreshThemeButtons();
 
   let langEl = $(".pageSettings .section.language .buttons").empty();
-  getLanguageList().then(languages => {
+  getLanguageList().then((languages) => {
     languages.forEach((language) => {
       langEl.append(
         `<div class="language button" language='${language}'>${language.replace(
@@ -385,14 +391,14 @@ function updateSettingsPage() {
   setCustomThemeInputs();
   updateDiscordSettingsSection();
   refreshThemeButtons();
-  
+
   if (config.paceCaret === "custom") {
     $(
       ".pageSettings .section.paceCaret input.customPaceCaretSpeed"
     ).removeClass("hidden");
-    $(
-      ".pageSettings .section.paceCaret input.customPaceCaretSpeed"
-    ).val(config.paceCaretCustomSpeed);
+    $(".pageSettings .section.paceCaret input.customPaceCaretSpeed").val(
+      config.paceCaretCustomSpeed
+    );
   } else {
     $(".pageSettings .section.paceCaret input.customPaceCaretSpeed").addClass(
       "hidden"
@@ -400,12 +406,12 @@ function updateSettingsPage() {
   }
 
   if (config.minWpm === "custom") {
-    $(
-      ".pageSettings .section.minWpm input.customMinWpmSpeed"
-    ).removeClass("hidden");
-    $(
-      ".pageSettings .section.minWpm input.customMinWpmSpeed"
-    ).val(config.minWpmCustomSpeed);
+    $(".pageSettings .section.minWpm input.customMinWpmSpeed").removeClass(
+      "hidden"
+    );
+    $(".pageSettings .section.minWpm input.customMinWpmSpeed").val(
+      config.minWpmCustomSpeed
+    );
   } else {
     $(".pageSettings .section.minWpm input.customMinWpmSpeed").addClass(
       "hidden"
@@ -482,7 +488,6 @@ $("#shareCustomThemeButton").click((e) => {
   if (e.shiftKey) {
     showCustomThemeShare();
   } else {
-
     let share = [];
     $.each(
       $(".pageSettings .section.customTheme [type='color']"),
@@ -491,12 +496,19 @@ $("#shareCustomThemeButton").click((e) => {
       }
     );
 
-    let url = "https://monkeytype.com?" + objectToQueryString({ customTheme: share });
-    navigator.clipboard.writeText(url).then(function () {
-      showNotification("URL Copied to clipboard", 2000);
-    }, function (err) {
-      showNotification("Something went wrong when copying the URL: " + err, 5000);
-    });
+    let url =
+      "https://monkeytype.com?" + objectToQueryString({ customTheme: share });
+    navigator.clipboard.writeText(url).then(
+      function () {
+        showNotification("URL Copied to clipboard", 2000);
+      },
+      function (err) {
+        showNotification(
+          "Something went wrong when copying the URL: " + err,
+          5000
+        );
+      }
+    );
   }
 });
 
@@ -634,15 +646,13 @@ function updateDiscordSettingsSection() {
     if (dbSnapshot == null) return;
     $(".pageSettings .section.discordIntegration").removeClass("hidden");
 
-    if (
-      dbSnapshot.discordId == undefined
-    ) {
+    if (dbSnapshot.discordId == undefined) {
       //show button
       $(".pageSettings .section.discordIntegration .buttons").removeClass(
         "hidden"
       );
       $(".pageSettings .section.discordIntegration .info").addClass("hidden");
-    } else{
+    } else {
       $(".pageSettings .section.discordIntegration .buttons").addClass(
         "hidden"
       );
@@ -653,13 +663,27 @@ function updateDiscordSettingsSection() {
   }
 }
 
-$(document).on('focusout', ".pageSettings .section.paceCaret input.customPaceCaretSpeed", (e) => {
-  setPaceCaretCustomSpeed(parseInt($(".pageSettings .section.paceCaret input.customPaceCaretSpeed").val()));
-})
+$(document).on(
+  "focusout",
+  ".pageSettings .section.paceCaret input.customPaceCaretSpeed",
+  (e) => {
+    setPaceCaretCustomSpeed(
+      parseInt(
+        $(".pageSettings .section.paceCaret input.customPaceCaretSpeed").val()
+      )
+    );
+  }
+);
 
-$(document).on('focusout', ".pageSettings .section.minWpm input.customMinWpmSpeed", (e) => {
-  setMinWpmCustomSpeed(parseInt($(".pageSettings .section.minWpm input.customMinWpmSpeed").val()));
-})
+$(document).on(
+  "focusout",
+  ".pageSettings .section.minWpm input.customMinWpmSpeed",
+  (e) => {
+    setMinWpmCustomSpeed(
+      parseInt($(".pageSettings .section.minWpm input.customMinWpmSpeed").val())
+    );
+  }
+);
 
 $(document).on("click", ".pageSettings .section.themes .theme.button", (e) => {
   let theme = $(e.currentTarget).attr("theme");
@@ -704,13 +728,11 @@ $(
     });
 });
 
-$(
-  ".pageSettings .section.discordIntegration #unlinkDiscordButton"
-).click((e) => {
-  if (confirm("Are you sure?")) {
-    showBackgroundLoader();
-    unlinkDiscord({ uid: firebase.auth().currentUser.uid })
-      .then(ret => {
+$(".pageSettings .section.discordIntegration #unlinkDiscordButton").click(
+  (e) => {
+    if (confirm("Are you sure?")) {
+      showBackgroundLoader();
+      unlinkDiscord({ uid: firebase.auth().currentUser.uid }).then((ret) => {
         hideBackgroundLoader();
         console.log(ret);
         if (ret.data.status === 1) {
@@ -721,9 +743,10 @@ $(
           showNotification("Something went wrong: " + ret.data.message, 5000);
           updateDiscordSettingsSection();
         }
-    })
+      });
+    }
   }
-});
+);
 
 //funbox
 $(document).on("click", ".pageSettings .section.funbox .button", (e) => {
@@ -875,6 +898,67 @@ $("#resetSettingsButton").click((e) => {
   }
 });
 
+$("#exportSettingsButton").click((e) => {
+  console.log(JSON.stringify(config));
+  let configJSON = JSON.stringify(config);
+  navigator.clipboard.writeText(configJSON).then(
+    function () {
+      showNotification("JSON Copied to clipboard", 2000);
+    },
+    function (err) {
+      showNotification(
+        "Something went wrong when copying the settings JSON: " + err,
+        5000
+      );
+    }
+  );
+});
+
+function showSettingsImport() {
+  if ($("#settingsImportWrapper").hasClass("hidden")) {
+    $("#settingsImportWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate({ opacity: 1 }, 100, (e) => {
+        $("#settingsImportWrapper input").focus();
+        $("#settingsImportWrapper input").select();
+        $("#settingsImportWrapper input").focus();
+      });
+  }
+}
+
+function hideSettingsImport() {
+  if (!$("#settingsImportWrapper").hasClass("hidden")) {
+    if ($("#settingsImportWrapper input").val() !== "") {
+      try {
+        applyConfig(JSON.parse($("#settingsImportWrapper input").val()));
+      } catch (e) {
+        showNotification(
+          "An error occured while importing settings: " + e,
+          5000
+        );
+      }
+      saveConfigToCookie();
+      updateSettingsPage();
+    }
+    $("#settingsImportWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate({ opacity: 0 }, 100, (e) => {
+        $("#settingsImportWrapper").addClass("hidden");
+      });
+  }
+}
+
+$("#importSettingsButton").click((e) => {
+  showSettingsImport();
+});
+
+$("#settingsImport .button").click((e) => {
+  hideSettingsImport();
+});
+
 $(".pageSettings .sectionGroupTitle").click((e) => {
   let group = $(e.currentTarget).attr("group");
   $(`.pageSettings .settingsGroup.${group}`)
