mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2026-01-12 10:24:20 +08:00
Refactor: Move event handlers from simple-modals to respective files
This commit is contained in:
biplavbarua
parent
69cc227c87
commit
60766bb67a
4 changed files with 163 additions and 154 deletions
67
frontend/src/ts/modals/simple-modals-base.ts
Normal file
67
frontend/src/ts/modals/simple-modals-base.ts
Normal file
|
|
@ -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<PopupKey, SimpleModal | undefined> = {
|
||||
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);
|
||||
}
|
||||
|
|
@ -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,56 +47,10 @@ import FileStorage from "../utils/file-storage";
|
|||
import { z } from "zod";
|
||||
import { remoteValidation } from "../utils/remote-validation";
|
||||
|
||||
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";
|
||||
import { list, PopupKey, showPopup } from "./simple-modals-base";
|
||||
|
||||
const list: Record<PopupKey, SimpleModal | undefined> = {
|
||||
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";
|
||||
|
||||
|
|
@ -1321,107 +1275,3 @@ 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)
|
||||
$(".pageAccountSettings").on("click", "#unlinkDiscordButton", () => {
|
||||
showPopup("unlinkDiscord");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removeGoogleAuth", () => {
|
||||
showPopup("removeGoogleAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removeGithubAuth", () => {
|
||||
showPopup("removeGithubAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removePasswordAuth", () => {
|
||||
showPopup("removePasswordAuth");
|
||||
});
|
||||
|
||||
$("#resetSettingsButton").on("click", () => {
|
||||
showPopup("resetSettings");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#revokeAllTokens", () => {
|
||||
showPopup("revokeAllTokens");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#resetPersonalBestsButton", () => {
|
||||
showPopup("resetPersonalBests");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#updateAccountName", () => {
|
||||
showPopup("updateName");
|
||||
});
|
||||
|
||||
$("#bannerCenter").on("click", ".banner .text .openNameChange", () => {
|
||||
showPopup("updateName");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#addPasswordAuth", () => {
|
||||
showPopup("addPasswordAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#emailPasswordAuth", () => {
|
||||
showPopup("updateEmail");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#passPasswordAuth", () => {
|
||||
showPopup("updatePassword");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#deleteAccount", () => {
|
||||
showPopup("deleteAccount");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#resetAccount", () => {
|
||||
showPopup("resetAccount");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#optOutOfLeaderboardsButton", () => {
|
||||
showPopup("optOutOfLeaderboards");
|
||||
});
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section.themes .customTheme .delButton",
|
||||
(e) => {
|
||||
const $parentElement = $(e.currentTarget).parent(".customTheme.button");
|
||||
const customThemeId = $parentElement.attr("customThemeId") as string;
|
||||
showPopup("deleteCustomTheme", [customThemeId]);
|
||||
},
|
||||
);
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section.themes .customTheme .editButton",
|
||||
(e) => {
|
||||
const $parentElement = $(e.currentTarget).parent(".customTheme.button");
|
||||
const customThemeId = $parentElement.attr("customThemeId") as string;
|
||||
showPopup("updateCustomTheme", [customThemeId], {
|
||||
focusFirstInput: "focusAndSelect",
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section[data-config-name='fontFamily'] button[data-config-value='custom']",
|
||||
() => {
|
||||
showPopup("applyCustomFont");
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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, onWindowLoad } from "../utils/dom";
|
||||
import { showPopup } from "../modals/simple-modals-base";
|
||||
|
||||
const pageElement = qsr(".page.pageAccountSettings");
|
||||
|
||||
|
|
@ -213,3 +214,63 @@ export const page = new PageWithUrlParams({
|
|||
onWindowLoad(() => {
|
||||
Skeleton.save("pageAccountSettings");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#unlinkDiscordButton", () => {
|
||||
showPopup("unlinkDiscord");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removeGoogleAuth", () => {
|
||||
showPopup("removeGoogleAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removeGithubAuth", () => {
|
||||
showPopup("removeGithubAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#removePasswordAuth", () => {
|
||||
showPopup("removePasswordAuth");
|
||||
});
|
||||
|
||||
$("#resetSettingsButton").on("click", () => {
|
||||
showPopup("resetSettings");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#revokeAllTokens", () => {
|
||||
showPopup("revokeAllTokens");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#resetPersonalBestsButton", () => {
|
||||
showPopup("resetPersonalBests");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#updateAccountName", () => {
|
||||
showPopup("updateName");
|
||||
});
|
||||
|
||||
$("#bannerCenter").on("click", ".banner .text .openNameChange", () => {
|
||||
showPopup("updateName");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#addPasswordAuth", () => {
|
||||
showPopup("addPasswordAuth");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#emailPasswordAuth", () => {
|
||||
showPopup("updateEmail");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#passPasswordAuth", () => {
|
||||
showPopup("updatePassword");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#deleteAccount", () => {
|
||||
showPopup("deleteAccount");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#resetAccount", () => {
|
||||
showPopup("resetAccount");
|
||||
});
|
||||
|
||||
$(".pageAccountSettings").on("click", "#optOutOfLeaderboardsButton", () => {
|
||||
showPopup("optOutOfLeaderboards");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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, onWindowLoad } from "../utils/dom";
|
||||
import { showPopup } from "../modals/simple-modals-base";
|
||||
|
||||
let settingsInitialized = false;
|
||||
|
||||
|
|
@ -1033,3 +1034,33 @@ export const page = new PageWithUrlParams({
|
|||
onWindowLoad(async () => {
|
||||
Skeleton.save("pageSettings");
|
||||
});
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section.themes .customTheme .delButton",
|
||||
(e) => {
|
||||
const $parentElement = $(e.currentTarget).parent(".customTheme.button");
|
||||
const customThemeId = $parentElement.attr("customThemeId") as string;
|
||||
showPopup("deleteCustomTheme", [customThemeId]);
|
||||
},
|
||||
);
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section.themes .customTheme .editButton",
|
||||
(e) => {
|
||||
const $parentElement = $(e.currentTarget).parent(".customTheme.button");
|
||||
const customThemeId = $parentElement.attr("customThemeId") as string;
|
||||
showPopup("updateCustomTheme", [customThemeId], {
|
||||
focusFirstInput: "focusAndSelect",
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
$(".pageSettings").on(
|
||||
"click",
|
||||
".section[data-config-name='fontFamily'] button[data-config-value='custom']",
|
||||
() => {
|
||||
showPopup("applyCustomFont");
|
||||
},
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue