Merge 0e4d924433 into 1633df75c4

* Add change password ui

* Ensure input fields are cleared after submit or cancel

* Play select sound on successful submission or cancel

---------

Co-authored-by: NightKev <34855794+DayKev@users.noreply.github.com>
Co-authored-by: Wlowscha <54003515+Wlowscha@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+  "name": "Node.js & TypeScript",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "installDirectlyFromGitHubRelease": true,
+      "version": "latest"
+    },
+    "ghcr.io/devcontainers-extra/features/pnpm:2": {
+      "version": "latest"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["aaron-bond.better-comments", ""]
+    }
+  },
+  "postCreateCommand": "pnpm install && pnpm postinstall",
+  "forwardPorts": [8000]
+}

.gitignore

@@ -13,7 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode
 *.code-workspace
 .idea
 .DS_Store

.ls-lint.yml

@@ -26,3 +26,4 @@ ignore:
    - .git
    - public
    - dist
+   - .devcontainer

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "YoavBls.pretty-ts-errors",
+    "vitest.explorer",
+
+    // This stuff isn't mandatory - it's just nice to have ;)
+    "adpyke.codesnap",
+    "aaron-bond.better-comments"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Vitest",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/node_modules/vitest/vitest.mjs",
+      "args": ["--inspectBrk", "--no-file-parallelism", "${input:testfile}", "-t", "${input:testcase}"],
+      "autoAttachChildProcesses": true
+    }
+  ],
+  "inputs": [
+    {
+      "id": "testfile",
+      "type": "promptString",
+      "description": "Enter test file to run.",
+      "default": "${fileBasename}"
+    },
+    {
+      "id": "testcase",
+      "type": "promptString",
+      "description": "Enter test case to run.",
+      "default": ""
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,34 @@
+{
+  // # Formatter configs
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports.ts": "always",
+    "source.removeUnusedImports": "always",
+    "source.fixAll.biome": "always",
+    "source.organizeImports.biome": "always"
+  },
+  "biome.suggestInstallingGlobally": false,
+
+  // # JS/TS setting overrides
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "javascript.preferences.importModuleSpecifierEnding": "index",
+  "javascript.preferGoToSourceDefinition": true,
+  "javascript.updateImportsOnFileMove.enabled": "always",
+
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifierEnding": "index",
+  "typescript.preferGoToSourceDefinition": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  // Note: You may want to adjust the max server memory depending on your PC's specs:
+  // "typescript.tsserver.maxTsServerMemory": 1536, // 1.5 GB by default
+  "typescript.autoClosingTags": false,
+
+  // # Miscellaneous
+  "npm.packageManager": "pnpm",
+  "npm.scriptRunner": "pnpm",
+  "vitest.cliArguments": "--no-isolate",
+}

.vscode/tasks.json

@@ -0,0 +1,70 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "presentation": {
+    "reveal": "never",
+    "focus": false
+  },
+  "tasks": [
+    {
+      "label": "Update Submodules",
+      "type": "shell",
+      "command": "git submodule update --init --recursive",
+      "icon": {
+        "color": "terminal.ansiRed",
+        "id": "git-branch"
+      },
+    },
+    {
+      "label": "Clear Submodules",
+      "type": "shell",
+      "command": "rm -rf public/locales; git checkout upstream/beta -- public/locales",
+      "icon": {
+        "color": "terminal.ansiRed",
+        "id": "trash"
+      },
+    },
+    {
+      "label": "Biome - Write All",
+      "type": "shell",
+      "command": {
+        "value": "pnpm",
+        "quoting": "weak"
+      },
+      "args": [
+        "run",
+        "biome",
+        "--diagnostic-level=${input:error-level}"
+      ],
+      "icon": {
+        "color": "terminal.ansiBlue",
+        "id": "json"
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "Start Local Dev",
+      "type": "npm",
+      "script": "start:dev",
+      "icon": {
+        "color": "terminal.ansiGreen",
+        "id": "debug-start"
+      },
+      "problemMatcher": []
+    }
+  ],
+  "inputs": [
+    {
+      "id": "error-level",
+      "description": "Select the level of errors to report from Biome.",
+      "type": "pickString",
+      "options": [
+        "error",
+        "warning",
+        "info"
+      ],
+      "default": "error"
+    }
+  ]
+}

biome.jsonc

@@ -36,7 +36,6 @@
       "!**/src/data/balance/tms.ts"
     ]
   },
-
   "assist": {
     "actions": {
       "source": {

src/@types/api/pokerogue-account-api.ts

@@ -15,3 +15,10 @@ export interface AccountRegisterRequest {
   username: string;
   password: string;
 }
+
+export interface AccountChangePwRequest {
+  password: string;
+}
+export interface AccountChangePwResponse {
+  success: boolean;
+}

src/enums/ui-mode.ts

@@ -43,5 +43,6 @@ export enum UiMode {
   TEST_DIALOGUE,
   AUTO_COMPLETE,
   ADMIN,
-  MYSTERY_ENCOUNTER
+  MYSTERY_ENCOUNTER,
+  CHANGE_PASSWORD_FORM,
 }

src/plugins/api/pokerogue-account-api.ts

@@ -1,6 +1,7 @@
 import { ApiBase } from "#api/api-base";
 import { SESSION_ID_COOKIE_NAME } from "#app/constants";
 import type {
+  AccountChangePwRequest,
   AccountInfoResponse,
   AccountLoginRequest,
   AccountLoginResponse,
@@ -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!";
+  }
 }

src/ui/change-password-form-ui-handler.ts

@@ -0,0 +1,124 @@
+import { globalScene } from "#app/global-scene";
+import { pokerogueApi } from "#app/plugins/api/pokerogue-api";
+import { UiMode } from "#enums/ui-mode";
+import type { InputFieldConfig } from "#ui/form-modal-ui-handler";
+import { FormModalUiHandler } from "#ui/form-modal-ui-handler";
+import type { ModalConfig } from "#ui/modal-ui-handler";
+import i18next from "i18next";
+
+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
+  }
+}

src/ui/form-modal-ui-handler.ts

@@ -19,6 +19,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[];
 
@@ -126,22 +127,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);

src/ui/menu-ui-handler.ts

@@ -311,6 +311,17 @@ export 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: () => {

src/ui/modal-ui-handler.ts

@@ -7,7 +7,7 @@ import { UiHandler } from "#ui/ui-handler";
 import { addWindow, WindowVariant } from "#ui/ui-theme";
 
 export interface ModalConfig {
-  buttonActions: Function[];
+  buttonActions: ((...args: any[]) => any)[];
 }
 
 export abstract class ModalUiHandler extends UiHandler {

src/ui/ui.ts

@@ -13,6 +13,7 @@ import { BallUiHandler } from "#ui/ball-ui-handler";
 import { BattleMessageUiHandler } from "#ui/battle-message-ui-handler";
 import type { BgmBar } from "#ui/bgm-bar";
 import { GameChallengesUiHandler } from "#ui/challenges-select-ui-handler";
+import { ChangePasswordFormUiHandler } from "#ui/change-password-form-ui-handler";
 import { CommandUiHandler } from "#ui/command-ui-handler";
 import { ConfirmUiHandler } from "#ui/confirm-ui-handler";
 import { EggGachaUiHandler } from "#ui/egg-gacha-ui-handler";
@@ -102,6 +103,7 @@ const noTransitionModes = [
   UiMode.ADMIN,
   UiMode.MYSTERY_ENCOUNTER,
   UiMode.RUN_INFO,
+  UiMode.CHANGE_PASSWORD_FORM,
 ];
 
 export class UI extends Phaser.GameObjects.Container {
@@ -172,6 +174,7 @@ export class UI extends Phaser.GameObjects.Container {
       new AutoCompleteUiHandler(),
       new AdminUiHandler(),
       new MysteryEncounterUiHandler(),
+      new ChangePasswordFormUiHandler(),
     ];
   }