diff --git a/src/@types/PokerogueAccountApi.ts b/src/@types/PokerogueAccountApi.ts index 68d0a5e7730..41ec5c07c60 100644 --- a/src/@types/PokerogueAccountApi.ts +++ b/src/@types/PokerogueAccountApi.ts @@ -15,3 +15,10 @@ export interface AccountRegisterRequest { username: string; password: string; } + +export interface AccountChangePwRequest { + password: string; +} +export interface AccountChangePwResponse { + success: boolean; +} diff --git a/src/enums/ui-mode.ts b/src/enums/ui-mode.ts index dcf6bd2a238..bc93e747be2 100644 --- a/src/enums/ui-mode.ts +++ b/src/enums/ui-mode.ts @@ -43,5 +43,6 @@ export enum UiMode { TEST_DIALOGUE, AUTO_COMPLETE, ADMIN, - MYSTERY_ENCOUNTER + MYSTERY_ENCOUNTER, + CHANGE_PASSWORD_FORM, } diff --git a/src/plugins/api/pokerogue-account-api.ts b/src/plugins/api/pokerogue-account-api.ts index 9cd82c24430..7d272b60234 100644 --- a/src/plugins/api/pokerogue-account-api.ts +++ b/src/plugins/api/pokerogue-account-api.ts @@ -3,6 +3,7 @@ import type { AccountLoginRequest, AccountLoginResponse, AccountRegisterRequest, + AccountChangePwRequest, } from "#app/@types/PokerogueAccountApi"; import { SESSION_ID_COOKIE_NAME } from "#app/constants"; import { ApiBase } from "#app/plugins/api/api-base"; @@ -95,4 +96,19 @@ export class PokerogueAccountApi extends ApiBase { removeCookie(SESSION_ID_COOKIE_NAME); // we are always clearing the cookie. } + + public async changePassword(changePwData: AccountChangePwRequest) { + try { + const response = await this.doPost("/account/changepw", changePwData, "form-urlencoded"); + if (response.ok) { + return null; + } + console.warn("Change password failed!", response.status, response.statusText); + return response.text(); + } catch (err) { + console.warn("Change password failed!", err); + } + + return "Unknown error!"; + } } diff --git a/src/ui/change-password-form-ui-handler.ts b/src/ui/change-password-form-ui-handler.ts new file mode 100644 index 00000000000..d1c465051e9 --- /dev/null +++ b/src/ui/change-password-form-ui-handler.ts @@ -0,0 +1,125 @@ +import type { InputFieldConfig } from "./form-modal-ui-handler"; +import { FormModalUiHandler } from "./form-modal-ui-handler"; +import type { ModalConfig } from "./modal-ui-handler"; +import { UiMode } from "#enums/ui-mode"; +import i18next from "i18next"; +// import type { OptionSelectItem } from "#app/ui/abstact-option-select-ui-handler"; +import { pokerogueApi } from "#app/plugins/api/pokerogue-api"; +import { globalScene } from "#app/global-scene"; + +export class ChangePasswordFormUiHandler extends FormModalUiHandler { + private readonly ERR_PASSWORD: string = "invalid password"; + private readonly ERR_ACCOUNT_EXIST: string = "account doesn't exist"; + private readonly ERR_PASSWORD_MISMATCH: string = "password doesn't match"; + + constructor(mode: UiMode | null = null) { + super(mode); + } + + setup(): void { + super.setup(); + } + + override getModalTitle(_config?: ModalConfig): string { + return i18next.t("menu:changePassword"); + } + + override getWidth(_config?: ModalConfig): number { + return 160; + } + + override getMargin(_config?: ModalConfig): [number, number, number, number] { + return [0, 0, 48, 0]; + } + + override getButtonLabels(_config?: ModalConfig): string[] { + return [i18next.t("settings:buttonSubmit"), i18next.t("menu:cancel")]; + } + + override getReadableErrorMessage(error: string): string { + const colonIndex = error?.indexOf(":"); + if (colonIndex > 0) { + error = error.slice(0, colonIndex); + } + switch (error) { + case this.ERR_PASSWORD: + return i18next.t("menu:invalidRegisterPassword"); + case this.ERR_ACCOUNT_EXIST: + return i18next.t("menu:accountNonExistent"); + case this.ERR_PASSWORD_MISMATCH: + return i18next.t("menu:passwordNotMatchingConfirmPassword"); + } + + return super.getReadableErrorMessage(error); + } + + override getInputFieldConfigs(): InputFieldConfig[] { + const inputFieldConfigs: InputFieldConfig[] = []; + inputFieldConfigs.push({ + label: i18next.t("menu:password"), + isPassword: true, + }); + inputFieldConfigs.push({ + label: i18next.t("menu:confirmPassword"), + isPassword: true, + }); + return inputFieldConfigs; + } + + override show(args: [ModalConfig, ...any]): boolean { + if (super.show(args)) { + const config = args[0]; + const originalSubmitAction = this.submitAction; + this.submitAction = () => { + if (globalScene.tweens.getTweensOf(this.modalContainer).length === 0) { + // Prevent overlapping overrides on action modification + this.submitAction = originalSubmitAction; + this.sanitizeInputs(); + globalScene.ui.setMode(UiMode.LOADING, { buttonActions: [] }); + const onFail = (error: string | null) => { + globalScene.ui.setMode(UiMode.CHANGE_PASSWORD_FORM, Object.assign(config, { errorMessage: error?.trim() })); + globalScene.ui.playError(); + }; + const [passwordInput, confirmPasswordInput] = this.inputs; + if (!passwordInput?.text) { + return onFail(this.getReadableErrorMessage("invalid password")); + } + if (passwordInput.text !== confirmPasswordInput.text) { + return onFail(this.ERR_PASSWORD_MISMATCH); + } + + pokerogueApi.account.changePassword({ password: passwordInput.text }).then(error => { + if (!error && originalSubmitAction) { + globalScene.ui.playSelect(); + originalSubmitAction(); + // Only clear inputs if the action was successful + for (const input of this.inputs) { + input.setText(""); + } + } else { + onFail(error); + } + }); + } + }; + // Upon pressing cancel, the inputs should be cleared + const originalCancelAction = this.cancelAction; + this.cancelAction = () => { + globalScene.ui.playSelect(); + for (const input of this.inputs) { + input.setText(""); + } + originalCancelAction?.(); + }; + + return true; + } + + return false; + } + + override clear() { + super.clear(); + this.setMouseCursorStyle("default"); //reset cursor + } +} diff --git a/src/ui/form-modal-ui-handler.ts b/src/ui/form-modal-ui-handler.ts index 8c30b4e0bc4..af69acf48d3 100644 --- a/src/ui/form-modal-ui-handler.ts +++ b/src/ui/form-modal-ui-handler.ts @@ -18,6 +18,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler { protected inputs: InputText[]; protected errorMessage: Phaser.GameObjects.Text; protected submitAction: Function | null; + protected cancelAction: (() => void) | null; protected tween: Phaser.Tweens.Tween; protected formLabels: Phaser.GameObjects.Text[]; @@ -113,22 +114,37 @@ export abstract class FormModalUiHandler extends ModalUiHandler { }); } - show(args: any[]): boolean { + override show(args: any[]): boolean { if (super.show(args)) { this.inputContainers.map(ic => ic.setVisible(true)); const config = args[0] as FormModalConfig; this.submitAction = config.buttonActions.length ? config.buttonActions[0] : null; + this.cancelAction = config.buttonActions[1] ?? null; - if (this.buttonBgs.length) { - this.buttonBgs[0].off("pointerdown"); - this.buttonBgs[0].on("pointerdown", () => { - if (this.submitAction && globalScene.tweens.getTweensOf(this.modalContainer).length === 0) { - this.submitAction(); + // #region: Override button pointerDown + // Override the pointerDown event for the buttonBgs to call the `submitAction` and `cancelAction` + // properties that we set above, allowing their behavior to change after this method terminates + // Some subclasses use this to add behavior to the submit and cancel action + + this.buttonBgs[0].off("pointerdown"); + this.buttonBgs[0].on("pointerdown", () => { + if (this.submitAction && globalScene.tweens.getTweensOf(this.modalContainer).length === 0) { + this.submitAction(); + } + }); + const cancelBg = this.buttonBgs[1]; + if (cancelBg) { + cancelBg.off("pointerdown"); + cancelBg.on("pointerdown", () => { + // The seemingly redundant cancelAction check is intentionally left in as a defensive programming measure + if (this.cancelAction && globalScene.tweens.getTweensOf(this.modalContainer).length === 0) { + this.cancelAction(); } }); } + //#endregion: Override pointerDown events this.modalContainer.y += 24; this.modalContainer.setAlpha(0); diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts index 5ab1d4f9e96..30fe36dc5c0 100644 --- a/src/ui/menu-ui-handler.ts +++ b/src/ui/menu-ui-handler.ts @@ -313,6 +313,17 @@ export default class MenuUiHandler extends MessageUiHandler { }, keepOpen: true, }, + { + // Note: i18n key is under `menu`, not `menuUiHandler` to avoid duplication + label: i18next.t("menu:changePassword"), + handler: () => { + ui.setOverlayMode(UiMode.CHANGE_PASSWORD_FORM, { + buttonActions: [() => ui.revertMode(), () => ui.revertMode()], + }); + return true; + }, + keepOpen: true, + }, { label: i18next.t("menuUiHandler:consentPreferences"), handler: () => { diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index 56c1c2c3fcf..ca32c8d9322 100644 --- a/src/ui/modal-ui-handler.ts +++ b/src/ui/modal-ui-handler.ts @@ -6,7 +6,7 @@ import type { Button } from "#enums/buttons"; import { globalScene } from "#app/global-scene"; export interface ModalConfig { - buttonActions: Function[]; + buttonActions: ((...args: any[]) => any)[]; } export abstract class ModalUiHandler extends UiHandler { diff --git a/src/ui/ui.ts b/src/ui/ui.ts index ad496df6382..9c2b8da86ae 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -27,6 +27,7 @@ import PokedexUiHandler from "./pokedex-ui-handler"; import { addWindow } from "./ui-theme"; import LoginFormUiHandler from "./login-form-ui-handler"; import RegistrationFormUiHandler from "./registration-form-ui-handler"; +import { ChangePasswordFormUiHandler } from "./change-password-form-ui-handler"; import LoadingModalUiHandler from "./loading-modal-ui-handler"; import { executeIf } from "#app/utils/common"; import GameStatsUiHandler from "./game-stats-ui-handler"; @@ -101,6 +102,7 @@ const noTransitionModes = [ UiMode.ADMIN, UiMode.MYSTERY_ENCOUNTER, UiMode.RUN_INFO, + UiMode.CHANGE_PASSWORD_FORM, ]; export default class UI extends Phaser.GameObjects.Container { @@ -171,6 +173,7 @@ export default class UI extends Phaser.GameObjects.Container { new AutoCompleteUiHandler(), new AdminUiHandler(), new MysteryEncounterUiHandler(), + new ChangePasswordFormUiHandler(), ]; }