Merge branch 'master' of https://github.com/Miodec/monkeytype

frontend/src/styles/popups.scss

@@ -946,7 +946,7 @@
     }
 
     .text {
-      color: var(--sub-color);
+      // color: var(--sub-color);
     }
 
     .quote {

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

@@ -0,0 +1,31 @@
+const siteKey = "6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj";
+
+const captchas: Record<string, number> = {};
+
+export function render(element: HTMLElement, id: string): void {
+  if (captchas[id] !== undefined && captchas[id] !== null) {
+    return;
+  }
+
+  const widgetId = grecaptcha.render(element, {
+    sitekey: siteKey,
+  });
+
+  captchas[id] = widgetId;
+}
+
+export function reset(id: string): void {
+  if (captchas[id] === undefined || captchas[id] === null) {
+    return;
+  }
+
+  grecaptcha.reset(captchas[id]);
+}
+
+export function getResponse(id: string): string {
+  if (captchas[id] === undefined || captchas[id] === null) {
+    return "";
+  }
+
+  return grecaptcha.getResponse(captchas[id]);
+}

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

@@ -11,6 +11,7 @@ import * as AnalyticsController from "../controllers/analytics-controller";
 
 let isPreviewingTheme = false;
 export let randomTheme: string | null = null;
+export let randomThemeIndex = 0;
 
 export const colorVars = [
   "--bg-color",
@@ -193,47 +194,54 @@ export function clearPreview(applyTheme = true): void {
   }
 }
 
+let themesList: string[] = [];
+
+async function changeThemeList(): Promise<void> {
+  const themes = await Misc.getThemesList();
+  if (Config.randomTheme === "fav" && Config.favThemes.length > 0) {
+    themesList = Config.favThemes;
+  } else if (Config.randomTheme === "light") {
+    themesList = themes
+      .filter((t) => Misc.isColorLight(t.bgColor))
+      .map((t) => t.name);
+  } else if (Config.randomTheme === "dark") {
+    themesList = themes
+      .filter((t) => Misc.isColorDark(t.bgColor))
+      .map((t) => t.name);
+  } else if (Config.randomTheme === "on") {
+    themesList = themes.map((t) => {
+      return t.name;
+    });
+  } else {
+    themesList = DB.getSnapshot().customThemes.map((ct) => ct._id);
+  }
+  Misc.shuffle(themesList);
+  randomThemeIndex = 0;
+}
+
 export function randomizeTheme(): void {
-  let randomList: string[] | MonkeyTypes.CustomTheme[];
-  Misc.getThemesList().then((themes) => {
-    if (Config.randomTheme === "fav" && Config.favThemes.length > 0) {
-      randomList = Config.favThemes;
-    } else if (Config.randomTheme === "light") {
-      randomList = themes
-        .filter((t) => Misc.isColorLight(t.bgColor))
-        .map((t) => t.name);
-    } else if (Config.randomTheme === "dark") {
-      randomList = themes
-        .filter((t) => Misc.isColorDark(t.bgColor))
-        .map((t) => t.name);
-    } else if (Config.randomTheme === "on") {
-      randomList = themes.map((t) => {
-        return t.name;
-      });
-    } else {
-      randomList = DB.getSnapshot().customThemes.map((ct) => ct._id);
+  //! setting randomThemeIndex to 0 everytime randomizeTheme is called
+
+  const randomTheme = themesList[randomThemeIndex];
+  randomThemeIndex++;
+
+  if (randomThemeIndex >= themesList.length) {
+    Misc.shuffle(themesList);
+    randomThemeIndex = 0;
+  }
+
+  preview(randomTheme, Config.randomTheme === "custom");
+
+  if (randomThemeIndex >= themesList.length) {
+    let name = randomTheme.replace(/_/g, " ");
+    if (Config.randomTheme === "custom") {
+      name = (
+        DB.getSnapshot().customThemes.find((ct) => ct._id === randomTheme)
+          ?.name ?? "custom"
+      ).replace(/_/g, " ");
     }
-
-    const previousTheme = randomTheme;
-    randomTheme = Misc.randomElementFromArray(randomList);
-
-    // if (Config.randomTheme === "custom") {
-    // changeCustomTheme(randomTheme, true);
-    // } else {
-    preview(randomTheme, Config.randomTheme === "custom");
-    // }
-
-    if (previousTheme != randomTheme) {
-      let name = randomTheme.replace(/_/g, " ");
-      if (Config.randomTheme === "custom") {
-        name = (
-          DB.getSnapshot().customThemes.find((ct) => ct._id === randomTheme)
-            ?.name ?? "custom"
-        ).replace(/_/g, " ");
-      }
-      Notifications.add(name, 0);
-    }
-  });
+    Notifications.add(name, 0);
+  }
 }
 
 export function clearRandom(): void {
@@ -290,6 +298,9 @@ window
   });
 
 ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
+  if (eventKey === "randomTheme") {
+    changeThemeList();
+  }
   if (eventKey === "customTheme") {
     eventValue ? set("custom", true) : set(Config.theme, false);
   }

frontend/src/ts/popups/quote-report-popup.ts

@@ -4,8 +4,7 @@ import * as TestWords from "../test/test-words";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
 import QuotesController from "../controllers/quotes-controller";
-
-const CAPTCHA_ID = 1;
+import * as CaptchaController from "../controllers/captcha-controller";
 
 interface State {
   previousPopupShowCallback?: () => void;
@@ -33,6 +32,11 @@ const defaultOptions: Options = {
 
 export async function show(options = defaultOptions): Promise<void> {
   if ($("#quoteReportPopupWrapper").hasClass("hidden")) {
+    CaptchaController.render(
+      document.querySelector("#quoteReportPopup .g-recaptcha") as HTMLElement,
+      "quoteReportPopup"
+    );
+
     const { quoteId, previousPopupShowCallback, noAnim } = options;
 
     state.previousPopupShowCallback = previousPopupShowCallback;
@@ -72,7 +76,7 @@ export async function hide(): Promise<void> {
         },
         noAnim ? 0 : 100,
         () => {
-          grecaptcha.reset(CAPTCHA_ID);
+          CaptchaController.reset("quoteReportPopup");
           $("#quoteReportPopupWrapper").addClass("hidden");
           if (state.previousPopupShowCallback) {
             state.previousPopupShowCallback();
@@ -83,7 +87,7 @@ export async function hide(): Promise<void> {
 }
 
 async function submitReport(): Promise<void> {
-  const captchaResponse = grecaptcha.getResponse(CAPTCHA_ID);
+  const captchaResponse = CaptchaController.getResponse("quoteReportPopup");
   if (!captchaResponse) {
     return Notifications.add("Please complete the captcha.");
   }

frontend/src/ts/popups/quote-submit-popup.ts

@@ -1,6 +1,7 @@
 import Ape from "../ape";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
+import * as CaptchaController from "../controllers/captcha-controller";
 
 // let dropdownReady = false;
 // async function initDropdown(): Promise<void> {
@@ -26,7 +27,7 @@ async function submitQuote(): Promise<void> {
   const text = $("#quoteSubmitPopup #submitQuoteText").val() as string;
   const source = $("#quoteSubmitPopup #submitQuoteSource").val() as string;
   const language = $("#quoteSubmitPopup #submitQuoteLanguage").val() as string;
-  const captcha = $("#quoteSubmitPopup #g-recaptcha-response").val() as string;
+  const captcha = CaptchaController.getResponse("submitQuote");
 
   if (!text || !source || !language) {
     return Notifications.add("Please fill in all fields", 0);
@@ -45,7 +46,7 @@ async function submitQuote(): Promise<void> {
   $("#quoteSubmitPopup #submitQuoteSource").val("");
   $("#quoteSubmitPopup .characterCount").removeClass("red");
   $("#quoteSubmitPopup .characterCount").text("-");
-  grecaptcha.reset();
+  CaptchaController.reset("submitQuote");
 }
 
 // @ts-ignore
@@ -58,6 +59,7 @@ export async function show(noAnim = false): Promise<void> {
   );
   return;
   // if ($("#quoteSubmitPopupWrapper").hasClass("hidden")) {
+  //  CaptchaController.render("#quoteSubmitPopup .g-recaptcha", "submitQuote");
   //   await initDropdown();
   //   $("#quoteSubmitPopup #submitQuoteLanguage").val(
   //     Config.language.replace(/_\d*k$/g, "")
@@ -86,6 +88,7 @@ export function hide(): void {
         100,
         () => {
           $("#quoteSubmitPopupWrapper").addClass("hidden");
+          CaptchaController.reset("submitQuote");
         }
       );
   }

frontend/static/html/popups.html

@@ -565,10 +565,7 @@
     <input id="submitQuoteSource" class="" type="text" autocomplete="off" />
     <label>Language</label>
     <select name="language" id="submitQuoteLanguage"></select>
-    <div
-      class="g-recaptcha"
-      data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
-    ></div>
+    <div class="g-recaptcha"></div>
     <div id="submitQuoteButton" class="button">Submit</div>
   </div>
 </div>
@@ -600,8 +597,8 @@
   <div id="quoteReportPopup" mode="">
     <div class="title">Report a Quote</div>
     <div class="text">
-      Please report quotes responsibly. Misuse may result in you losing access
-      to this feature.
+      Please report quotes responsibly. Please add comments in English only.
+      Misuse may result in you losing access to this feature.
     </div>
     <label>quote</label>
     <div class="quote"></div>

frontend/static/main.html

@@ -66,5 +66,9 @@
   <script src="/./js/easing.min.js"></script>
   <script src="/./js/html2canvas.min.js"></script>
   <script src="/./js/select2.min.js"></script>
-  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+  <script
+    src="https://www.google.com/recaptcha/api.js?render=explicit"
+    async
+    defer
+  ></script>
 </html>