Admin panel beta (#3846)

* feat: Add hasAdminRole property to UserInfo interface and update initLoggedInUser and updateUserInfo functions

This commit adds the hasAdminRole property to the UserInfo interface in the account.ts file. The initLoggedInUser function is updated to set the hasAdminRole property to false by default. The updateUserInfo function is also updated to set the hasAdminRole property to false when bypassLogin is true. This change allows for better management of user roles and permissions.

Co-authored-by: frutescens <info@laptop>
Co-authored-by: Frederico Santos <frederico.f.santos@tecnico.ulisboa.pt>

* Updated UI for admin panel and menu

* Remove random blank line from merge

* Fix imports in `src/ui/ui.ts`

---------

Co-authored-by: Frederico Santos <frederico.f.santos@tecnico.ulisboa.pt>
Co-authored-by: frutescens <info@laptop>
Co-authored-by: NightKev <34855794+DayKev@users.noreply.github.com>

src/account.ts

@@ -6,6 +6,7 @@ export interface UserInfo {
   lastSessionSlot: integer;
   discordId: string;
   googleId: string;
+  hasAdminRole: boolean;
 }
 
 export let loggedInUser: UserInfo | null = null;
@@ -13,13 +14,13 @@ export let loggedInUser: UserInfo | null = null;
 export const clientSessionId = Utils.randomString(32);
 
 export function initLoggedInUser(): void {
-  loggedInUser = { username: "Guest", lastSessionSlot: -1, discordId: "", googleId: ""};
+  loggedInUser = { username: "Guest", lastSessionSlot: -1, discordId: "", googleId: "", hasAdminRole: false };
 }
 
 export function updateUserInfo(): Promise<[boolean, integer]> {
   return new Promise<[boolean, integer]>(resolve => {
     if (bypassLogin) {
-      loggedInUser = { username: "Guest", lastSessionSlot: -1, discordId: "", googleId: "" };
+      loggedInUser = { username: "Guest", lastSessionSlot: -1, discordId: "", googleId: "", hasAdminRole: false};
       let lastSessionSlot = -1;
       for (let s = 0; s < 5; s++) {
         if (localStorage.getItem(`sessionData${s ? s : ""}_${loggedInUser.username}`)) {

src/ui/admin-ui-handler.ts

@@ -0,0 +1,85 @@
+import BattleScene from "#app/battle-scene.js";
+import { ModalConfig } from "./modal-ui-handler";
+import { Mode } from "./ui";
+import * as Utils from "../utils";
+import { FormModalUiHandler } from "./form-modal-ui-handler";
+import { Button } from "#app/enums/buttons.js";
+
+export default class AdminUiHandler extends FormModalUiHandler {
+
+  constructor(scene: BattleScene, mode: Mode | null = null) {
+    super(scene, mode);
+  }
+
+  setup(): void {
+    super.setup();
+  }
+
+  getModalTitle(config?: ModalConfig): string {
+    return "Admin panel";
+  }
+
+  getFields(config?: ModalConfig): string[] {
+    return ["Username", "Discord ID"];
+  }
+
+  getWidth(config?: ModalConfig): number {
+    return 160;
+  }
+
+  getMargin(config?: ModalConfig): [number, number, number, number] {
+    return [0, 0, 48, 0];
+  }
+
+  getButtonLabels(config?: ModalConfig): string[] {
+    return ["Link account", "Cancel"];
+  }
+
+  processInput(button: Button): boolean {
+    if (button === Button.SUBMIT && this.submitAction) {
+      this.submitAction();
+      return true;
+    }
+
+    return false;
+  }
+
+  show(args: any[]): boolean {
+    if (super.show(args)) {
+      const config = args[0] as ModalConfig;
+      const originalSubmitAction = this.submitAction;
+      this.submitAction = (_) => {
+        this.submitAction = originalSubmitAction;
+        this.scene.ui.setMode(Mode.LOADING, { buttonActions: [] });
+        const onFail = error => {
+          this.scene.ui.setMode(Mode.ADMIN, Object.assign(config, { errorMessage: error?.trim() }));
+          this.scene.ui.playError();
+        };
+        if (!this.inputs[0].text) {
+          return onFail("Username is required");
+        }
+        if (!this.inputs[1].text) {
+          return onFail("Discord Id is required");
+        }
+        Utils.apiPost("admin/account/discord-link", `username=${encodeURIComponent(this.inputs[0].text)}&discordId=${encodeURIComponent(this.inputs[1].text)}`, "application/x-www-form-urlencoded", true)
+          .then(response => {
+            if (!response.ok) {
+              return response.text();
+            }
+            return response.json();
+          })
+          .then(response => {
+            this.scene.ui.setMode(Mode.ADMIN, config);
+          });
+        return false;
+      };
+      return true;
+    }
+    return false;
+
+  }
+
+  clear(): void {
+    super.clear();
+  }
+}

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

@@ -60,7 +60,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
       const inputBg = addWindow(this.scene, 0, 0, 80, 16, false, false, 0, 0, WindowVariant.XTHIN);
 
       const isPassword = field.includes(i18next.t("menu:password")) || field.includes(i18next.t("menu:confirmPassword"));
-      const input = addTextInputObject(this.scene, 4, -2, 440, 116, TextStyle.TOOLTIP_CONTENT, { type: isPassword ? "password" : "text", maxLength: isPassword ? 64 : 16 });
+      const input = addTextInputObject(this.scene, 4, -2, 440, 116, TextStyle.TOOLTIP_CONTENT, { type: isPassword ? "password" : "text", maxLength: isPassword ? 64 : 18 });
       input.setOrigin(0, 0);
 
       inputContainer.add(inputBg);

src/ui/menu-ui-handler.ts

@@ -306,16 +306,34 @@ export default class MenuUiHandler extends MessageUiHandler {
           return true;
         },
         keepOpen: true
+      }];
+    if (!bypassLogin && loggedInUser?.hasAdminRole) {
+      communityOptions.push({
+        label: "Admin",
+        handler: () => {
+          ui.playSelect();
+          ui.setOverlayMode(Mode.ADMIN, {
+            buttonActions: [
+              () => {
+                ui.revertMode();
               },
-      {
+              () => {
+                ui.revertMode();
+              }
+            ]
+          });
+          return true;
+        },
+        keepOpen: true
+      });
+    }
+    communityOptions.push({
       label: i18next.t("menuUiHandler:cancel"),
       handler: () => {
         this.scene.ui.revertMode();
         return true;
       }
-      }
+    });
-    ];
-
     this.communityConfig = {
       xOffset: 98,
       options: communityOptions

src/ui/ui.ts

@@ -46,6 +46,7 @@ import SettingsAudioUiHandler from "./settings/settings-audio-ui-handler";
 import { PlayerGender } from "#enums/player-gender";
 import BgmBar from "#app/ui/bgm-bar";
 import RenameFormUiHandler from "./rename-form-ui-handler";
+import AdminUiHandler from "./admin-ui-handler";
 import RunHistoryUiHandler from "./run-history-ui-handler";
 import RunInfoUiHandler from "./run-info-ui-handler";
 
@@ -86,6 +87,7 @@ export enum Mode {
   OUTDATED,
   CHALLENGE_SELECT,
   RENAME_POKEMON,
+  ADMIN,
   RUN_HISTORY,
   RUN_INFO,
 }
@@ -124,7 +126,8 @@ const noTransitionModes = [
   Mode.SESSION_RELOAD,
   Mode.UNAVAILABLE,
   Mode.OUTDATED,
-  Mode.RENAME_POKEMON
+  Mode.RENAME_POKEMON,
+  Mode.ADMIN,
 ];
 
 export default class UI extends Phaser.GameObjects.Container {
@@ -188,6 +191,7 @@ export default class UI extends Phaser.GameObjects.Container {
       new RenameFormUiHandler(scene),
       new RunHistoryUiHandler(scene),
       new RunInfoUiHandler(scene),
+      new AdminUiHandler(scene),
     ];
   }