diff --git a/frontend/src/ts/modals/simple-modals-base.ts b/frontend/src/ts/modals/simple-modals-base.ts new file mode 100644 index 000000000000..d6004fa3f685 --- /dev/null +++ b/frontend/src/ts/modals/simple-modals-base.ts @@ -0,0 +1,67 @@ +import * as Notifications from "../elements/notifications"; +import { ShowOptions } from "../utils/animated-modal"; +import { SimpleModal } from "../utils/simple-modal"; + +export type PopupKey = + | "updateEmail" + | "updateName" + | "updatePassword" + | "removeGoogleAuth" + | "removeGithubAuth" + | "removePasswordAuth" + | "addPasswordAuth" + | "deleteAccount" + | "resetAccount" + | "optOutOfLeaderboards" + | "applyCustomFont" + | "resetPersonalBests" + | "resetSettings" + | "revokeAllTokens" + | "unlinkDiscord" + | "editApeKey" + | "deleteCustomText" + | "deleteCustomTextLong" + | "resetProgressCustomTextLong" + | "updateCustomTheme" + | "deleteCustomTheme" + | "devGenerateData" + | "lbGoToPage"; + +export const list: Record = { + updateEmail: undefined, + updateName: undefined, + updatePassword: undefined, + removeGoogleAuth: undefined, + removeGithubAuth: undefined, + removePasswordAuth: undefined, + addPasswordAuth: undefined, + deleteAccount: undefined, + resetAccount: undefined, + optOutOfLeaderboards: undefined, + applyCustomFont: undefined, + resetPersonalBests: undefined, + resetSettings: undefined, + revokeAllTokens: undefined, + unlinkDiscord: undefined, + editApeKey: undefined, + deleteCustomText: undefined, + deleteCustomTextLong: undefined, + resetProgressCustomTextLong: undefined, + updateCustomTheme: undefined, + deleteCustomTheme: undefined, + devGenerateData: undefined, + lbGoToPage: undefined, +}; + +export function showPopup( + key: PopupKey, + showParams = [] as string[], + showOptions: ShowOptions = {}, +): void { + const popup = list[key]; + if (popup === undefined) { + Notifications.add("Failed to show popup - popup is not defined", -1); + return; + } + popup.show(showParams, showOptions); +} diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts index ea85b6f22f0a..a0b2baca2d54 100644 --- a/frontend/src/ts/modals/simple-modals.ts +++ b/frontend/src/ts/modals/simple-modals.ts @@ -35,7 +35,7 @@ import { SimpleModal, TextInput, } from "../utils/simple-modal"; -import { ShowOptions } from "../utils/animated-modal"; + import { GenerateDataRequest } from "@monkeytype/contracts/dev"; import { PasswordSchema, @@ -47,57 +47,10 @@ import FileStorage from "../utils/file-storage"; import { z } from "zod"; import { remoteValidation } from "../utils/remote-validation"; import { qs, qsr } from "../utils/dom"; +import { list, PopupKey, showPopup } from "./simple-modals-base"; -type PopupKey = - | "updateEmail" - | "updateName" - | "updatePassword" - | "removeGoogleAuth" - | "removeGithubAuth" - | "removePasswordAuth" - | "addPasswordAuth" - | "deleteAccount" - | "resetAccount" - | "optOutOfLeaderboards" - | "applyCustomFont" - | "resetPersonalBests" - | "resetSettings" - | "revokeAllTokens" - | "unlinkDiscord" - | "editApeKey" - | "deleteCustomText" - | "deleteCustomTextLong" - | "resetProgressCustomTextLong" - | "updateCustomTheme" - | "deleteCustomTheme" - | "devGenerateData" - | "lbGoToPage"; - -const list: Record = { - updateEmail: undefined, - updateName: undefined, - updatePassword: undefined, - removeGoogleAuth: undefined, - removeGithubAuth: undefined, - removePasswordAuth: undefined, - addPasswordAuth: undefined, - deleteAccount: undefined, - resetAccount: undefined, - optOutOfLeaderboards: undefined, - applyCustomFont: undefined, - resetPersonalBests: undefined, - resetSettings: undefined, - revokeAllTokens: undefined, - unlinkDiscord: undefined, - editApeKey: undefined, - deleteCustomText: undefined, - deleteCustomTextLong: undefined, - resetProgressCustomTextLong: undefined, - updateCustomTheme: undefined, - deleteCustomTheme: undefined, - devGenerateData: undefined, - lbGoToPage: undefined, -}; +export { list, showPopup }; +export type { PopupKey }; type AuthMethod = "password" | "github.com" | "google.com"; @@ -1323,122 +1276,6 @@ list.lbGoToPage = new SimpleModal({ }, }); -export function showPopup( - key: PopupKey, - showParams = [] as string[], - showOptions: ShowOptions = {}, -): void { - const popup = list[key]; - if (popup === undefined) { - Notifications.add("Failed to show popup - popup is not defined", -1); - return; - } - popup.show(showParams, showOptions); -} - -//todo: move these event handlers to their respective files (either global event files or popup files) -qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => { - showPopup("unlinkDiscord"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => { - showPopup("removeGoogleAuth"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => { - showPopup("removeGithubAuth"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => { - showPopup("removePasswordAuth"); -}); - -qs("#resetSettingsButton")?.on("click", () => { - showPopup("resetSettings"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => { - showPopup("revokeAllTokens"); -}); - -qs(".pageAccountSettings")?.onChild( - "click", - "#resetPersonalBestsButton", - () => { - showPopup("resetPersonalBests"); - }, -); - -qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => { - showPopup("updateName"); -}); - qs("#bannerCenter")?.onChild("click", ".banner .text .openNameChange", () => { showPopup("updateName"); }); - -qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => { - showPopup("addPasswordAuth"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => { - showPopup("updateEmail"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => { - showPopup("updatePassword"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => { - showPopup("deleteAccount"); -}); - -qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => { - showPopup("resetAccount"); -}); - -qs(".pageAccountSettings")?.onChild( - "click", - "#optOutOfLeaderboardsButton", - () => { - showPopup("optOutOfLeaderboards"); - }, -); - -qs(".pageSettings")?.onChild( - "click", - ".section.themes .customTheme .delButton", - (e) => { - const $parentElement = (e.childTarget as HTMLElement | null)?.closest( - ".customTheme.button", - ); - const customThemeId = $parentElement?.getAttribute( - "customThemeId", - ) as string; - showPopup("deleteCustomTheme", [customThemeId]); - }, -); - -qs(".pageSettings")?.onChild( - "click", - ".section.themes .customTheme .editButton", - (e) => { - const $parentElement = (e.childTarget as HTMLElement | null)?.closest( - ".customTheme.button", - ); - const customThemeId = $parentElement?.getAttribute( - "customThemeId", - ) as string; - showPopup("updateCustomTheme", [customThemeId], { - focusFirstInput: "focusAndSelect", - }); - }, -); - -qs(".pageSettings")?.onChild( - "click", - ".section[data-config-name='fontFamily'] button[data-config-value='custom']", - () => { - showPopup("applyCustomFont"); - }, -); diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts index 38fea33f86ec..69b4a3e7ec2a 100644 --- a/frontend/src/ts/pages/account-settings.ts +++ b/frontend/src/ts/pages/account-settings.ts @@ -13,6 +13,7 @@ import * as Notifications from "../elements/notifications"; import { z } from "zod"; import * as AuthEvent from "../observables/auth-event"; import { qs, qsa, qsr, onDOMReady } from "../utils/dom"; +import { showPopup } from "../modals/simple-modals-base"; const pageElement = qsr(".page.pageAccountSettings"); @@ -185,6 +186,66 @@ qs(".page.pageAccountSettings #setStreakHourOffset")?.on("click", () => { StreakHourOffsetModal.show(); }); +qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => { + showPopup("unlinkDiscord"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => { + showPopup("removeGoogleAuth"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => { + showPopup("removeGithubAuth"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => { + showPopup("removePasswordAuth"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => { + showPopup("addPasswordAuth"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => { + showPopup("updateEmail"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => { + showPopup("updatePassword"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => { + showPopup("deleteAccount"); +}); + +qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => { + showPopup("resetAccount"); +}); + +qs(".pageAccountSettings")?.onChild( + "click", + "#optOutOfLeaderboardsButton", + () => { + showPopup("optOutOfLeaderboards"); + }, +); + +qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => { + showPopup("revokeAllTokens"); +}); + +qs(".pageAccountSettings")?.onChild( + "click", + "#resetPersonalBestsButton", + () => { + showPopup("resetPersonalBests"); + }, +); + +qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => { + showPopup("updateName"); +}); + AuthEvent.subscribe((event) => { if (event.type === "authConfigUpdated") { updateUI(); diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 201a3b52f10c..9fab875178a8 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -44,6 +44,7 @@ import * as CustomFontPicker from "../elements/settings/custom-font-picker"; import * as AuthEvent from "../observables/auth-event"; import * as FpsLimitSection from "../elements/settings/fps-limit-section"; import { qs, qsa, qsr, onDOMReady } from "../utils/dom"; +import { showPopup } from "../modals/simple-modals-base"; let settingsInitialized = false; @@ -979,6 +980,48 @@ qsa(".pageSettings .section .groupTitle button")?.on("click", (e) => { }); }); +qs(".pageSettings")?.onChild( + "click", + ".section.themes .customTheme .delButton", + (e) => { + const parentElement = (e.childTarget as HTMLElement | null)?.closest( + ".customTheme.button", + ); + const customThemeId = parentElement?.getAttribute( + "customThemeId", + ) as string; + showPopup("deleteCustomTheme", [customThemeId]); + }, +); + +qs(".pageSettings")?.onChild( + "click", + ".section.themes .customTheme .editButton", + (e) => { + const parentElement = (e.childTarget as HTMLElement | null)?.closest( + ".customTheme.button", + ); + const customThemeId = parentElement?.getAttribute( + "customThemeId", + ) as string; + showPopup("updateCustomTheme", [customThemeId], { + focusFirstInput: "focusAndSelect", + }); + }, +); + +qs(".pageSettings")?.onChild( + "click", + ".section[data-config-name='fontFamily'] button[data-config-value='custom']", + () => { + showPopup("applyCustomFont"); + }, +); + +qs(".pageSettings #resetSettingsButton")?.on("click", () => { + showPopup("resetSettings"); +}); + ConfigEvent.subscribe(({ key, newValue }) => { if (key === "fullConfigChange") setEventDisabled(true); if (key === "fullConfigChangeFinished") setEventDisabled(false);