diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss index a51a9183f..eda045ee7 100644 --- a/frontend/src/styles/popups.scss +++ b/frontend/src/styles/popups.scss @@ -946,7 +946,7 @@ } .text { - color: var(--sub-color); + // color: var(--sub-color); } .quote { diff --git a/frontend/src/ts/controllers/captcha-controller.ts b/frontend/src/ts/controllers/captcha-controller.ts new file mode 100644 index 000000000..8118046a7 --- /dev/null +++ b/frontend/src/ts/controllers/captcha-controller.ts @@ -0,0 +1,31 @@ +const siteKey = "6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"; + +const captchas: Record = {}; + +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]); +} diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts index c53bc3a0f..e809e7907 100644 --- a/frontend/src/ts/controllers/theme-controller.ts +++ b/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 { + 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); } diff --git a/frontend/src/ts/popups/quote-report-popup.ts b/frontend/src/ts/popups/quote-report-popup.ts index 87004a0ce..d25cdfe8f 100644 --- a/frontend/src/ts/popups/quote-report-popup.ts +++ b/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 { 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 { }, 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 { } async function submitReport(): Promise { - const captchaResponse = grecaptcha.getResponse(CAPTCHA_ID); + const captchaResponse = CaptchaController.getResponse("quoteReportPopup"); if (!captchaResponse) { return Notifications.add("Please complete the captcha."); } diff --git a/frontend/src/ts/popups/quote-submit-popup.ts b/frontend/src/ts/popups/quote-submit-popup.ts index 117109c57..90cede5ca 100644 --- a/frontend/src/ts/popups/quote-submit-popup.ts +++ b/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 { @@ -26,7 +27,7 @@ async function submitQuote(): Promise { 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 { $("#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 { ); 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"); } ); } diff --git a/frontend/static/html/popups.html b/frontend/static/html/popups.html index 7c6077418..a4851854b 100644 --- a/frontend/static/html/popups.html +++ b/frontend/static/html/popups.html @@ -565,10 +565,7 @@ -
+
Submit
@@ -600,8 +597,8 @@
Report a Quote
- 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.
diff --git a/frontend/static/main.html b/frontend/static/main.html index 94ec6fa06..dc7bd63f2 100644 --- a/frontend/static/main.html +++ b/frontend/static/main.html @@ -66,5 +66,9 @@ - +