fix: fixed error in credentials management

frontend/react/src/events.ts

@@ -140,6 +140,8 @@ export class InfoPopupEvent {
   }
 }
 
+export class WrongCredentialsEvent extends BaseOlympusEvent {}
+
 export class ShortcutsChangedEvent {
   static on(callback: (shortcuts: { [key: string]: Shortcut }) => void, singleShot = false) {
     document.addEventListener(
@@ -818,6 +820,23 @@ export class MissionDataChangedEvent {
   }
 }
 
+export class EnabledCommandModesChangedEvent {
+  static on(callback: (enabledCommandModes: string[]) => void, singleShot = false) {
+    document.addEventListener(
+      this.name,
+      (ev: CustomEventInit) => {
+        callback(ev.detail.enabledCommandModes);
+      },
+      { once: singleShot }
+    );
+  }
+
+  static dispatch(enabledCommandModes: string[]) {
+    document.dispatchEvent(new CustomEvent(this.name, { detail: { enabledCommandModes } }));
+    // Logging disabled since periodic
+  }
+}
+
 /************** Other events ***************/
 export class WeaponsRefreshedEvent {
   static on(callback: (weapons: Weapon[]) => void, singleShot = false) {

frontend/react/src/mission/missionmanager.ts

@@ -6,7 +6,7 @@ import { BLUE_COMMANDER, GAME_MASTER, NONE, RED_COMMANDER } from "../constants/c
 import { AirbasesData, BullseyesData, CommandModeOptions, DateAndTime, MissionData } from "../interfaces";
 import { Coalition } from "../types/types";
 import { Carrier } from "./carrier";
-import { AirbaseSelectedEvent, AppStateChangedEvent, BullseyesDataChangedEvent, CommandModeOptionsChangedEvent, MissionDataChangedEvent } from "../events";
+import { AirbaseSelectedEvent, AppStateChangedEvent, BullseyesDataChangedEvent, CommandModeOptionsChangedEvent, EnabledCommandModesChangedEvent, MissionDataChangedEvent } from "../events";
 
 /** The MissionManager  */
 export class MissionManager {
@@ -225,6 +225,7 @@ export class MissionManager {
 
   setEnabledCommandModes(enabledCommandModes: string[]) {
     this.#enabledCommandModes = enabledCommandModes;
+    EnabledCommandModesChangedEvent.dispatch(enabledCommandModes);
   }
 
   getEnabledCommandModes() {

frontend/react/src/server/servermanager.ts

@@ -14,7 +14,7 @@ import {
   reactionsToThreat,
 } from "../constants/constants";
 import { AirbasesData, BullseyesData, CommandModeOptions, GeneralSettings, MissionData, Radio, ServerRequestOptions, ServerStatus, TACAN } from "../interfaces";
-import { MapOptionsChangedEvent, ServerStatusUpdatedEvent } from "../events";
+import { MapOptionsChangedEvent, ServerStatusUpdatedEvent, WrongCredentialsEvent } from "../events";
 
 export class ServerManager {
   #connected: boolean = false;
@@ -130,6 +130,7 @@ export class ServerManager {
       } else if (xmlHttp.status == 401) {
         /* Bad credentials */
         console.error("Incorrect username/password");
+        WrongCredentialsEvent.dispatch();
         errorCallback && errorCallback(xmlHttp.status);
       } else {
         /* Failure, probably disconnected */

frontend/react/src/ui/modals/loginmodal.tsx

@@ -8,10 +8,9 @@ import { getApp, VERSION } from "../../olympusapp";
 import { sha256 } from "js-sha256";
 import { LoginSubState, NO_SUBSTATE, OlympusState } from "../../constants/constants";
 import { OlDropdown, OlDropdownItem } from "../components/oldropdown";
-import { AppStateChangedEvent } from "../../events";
+import { AppStateChangedEvent, EnabledCommandModesChangedEvent, MissionDataChangedEvent, WrongCredentialsEvent } from "../../events";
 
 export function LoginModal(props: { open: boolean }) {
-  // TODO: add warning if not in secure context and some features are disabled
   const [subState, setSubState] = useState(NO_SUBSTATE);
   const [password, setPassword] = useState("");
   const [username, setUsername] = useState("");
@@ -24,6 +23,10 @@ export function LoginModal(props: { open: boolean }) {
     AppStateChangedEvent.on((state, subState) => {
       setSubState(subState);
     });
+    WrongCredentialsEvent.on(() => {
+      setLoginError(true);
+      setCheckingPassword(false);
+    });
   }, []);
 
   const usernameCallback = useCallback(() => getApp()?.getServerManager().setUsername(username), [username]);
@@ -37,28 +40,21 @@ export function LoginModal(props: { open: boolean }) {
 
   const login = useCallback(() => {
     setCheckingPassword(true);
-
+    EnabledCommandModesChangedEvent.on((commandModes) => {
+      if (commandModes.length > 1) {
+        setCommandModes(commandModes);
+        setActiveCommandMode(commandModes[0]);
+      } else if (commandModes.length == 1) {
+        setActiveCommandMode(commandModes[0]);
+        getApp().setState(OlympusState.LOGIN, LoginSubState.CONNECT);
+      } else {
+        setLoginError(true);
+      }
+      setCheckingPassword(false);
+    }, true);
     getApp()
       .getServerManager()
-      .getMission(
-        (response) => {
-          const commandModes = getApp().getMissionManager().getEnabledCommandModes();
-          if (commandModes.length > 1) {
-            setCommandModes(commandModes);
-            setActiveCommandMode(commandModes[0]);
-          } else if (commandModes.length == 1) {
-            setActiveCommandMode(commandModes[0]);
-            getApp().setState(OlympusState.LOGIN, LoginSubState.CONNECT);
-          } else {
-            setLoginError(true);
-          }
-          setCheckingPassword(false);
-        },
-        () => {
-          setLoginError(true);
-          setCheckingPassword(false);
-        }
-      );
+      .getMission(() => {});
   }, [commandModes, username, password]);
 
   const connect = useCallback(() => {
@@ -94,9 +90,10 @@ export function LoginModal(props: { open: boolean }) {
         max-md:border-none
       `}
     >
-      <img src="images/splash/1.jpg" className={`
-        contents-center w-full object-cover opacity-[7%]
-      `}></img>
+      <img
+        src="images/splash/1.jpg"
+        className={`contents-center w-full object-cover opacity-[7%]`}
+      ></img>
       <div
         className={`
           absolute h-full w-full bg-gradient-to-r from-blue-200/25
@@ -154,9 +151,10 @@ export function LoginModal(props: { open: boolean }) {
                   `}
                 >
                   <span className="size-[80px] min-w-14">
-                    <img src="images/olympus-500x500.png" className={`
-                      flex w-full
-                    `}></img>
+                    <img
+                      src="images/olympus-500x500.png"
+                      className={`flex w-full`}
+                    ></img>
                   </span>
                   <div className={`flex flex-col items-start gap-1`}>
                     <h1
@@ -273,9 +271,10 @@ export function LoginModal(props: { open: boolean }) {
                           >
                             Choose your role
                           </label>
-                          <OlDropdown label={activeCommandMode ?? ""} className={`
-                            w-48
-                          `}>
+                          <OlDropdown
+                            label={activeCommandMode ?? ""}
+                            className={`w-48`}
+                          >
                             {commandModes?.map((commandMode) => {
                               return <OlDropdownItem onClick={() => setActiveCommandMode(commandMode)}>{commandMode}</OlDropdownItem>;
                             })}
@@ -310,7 +309,7 @@ export function LoginModal(props: { open: boolean }) {
                       description="The Olympus Server at this address could not be reached or the password is incorrect. Check your password. If correct, check the address is correct, restart the Olympus server or reinstall Olympus. Ensure the ports set are not already used."
                     ></ErrorCallout>
                     <div className={`text-sm font-medium text-gray-200`}>
-                      Still having issues? See our
+                      Still having issues? See our{" "}
                       <a
                         href=""
                         className={`

frontend/server/src/app.ts

@@ -194,7 +194,7 @@ module.exports = function (configLocation, viteProxy) {
           if (userConfig.roles[0] in defaultUsers) {
             /* Apply the authorization headers */
             req.headers.authorization = `Basic ${btoa(
-              user + ":" + defaultUsers[userConfig.roles[0]]
+              userConfig.roles[0] + ":" + defaultUsers[userConfig.roles[0]]
             )}`;
           } else {
             res.sendStatus(401); // Unauthorized
@@ -207,7 +207,7 @@ module.exports = function (configLocation, viteProxy) {
       /* Send back the roles that the user is enabled to */
       if (userConfig) res.set("X-Enabled-Command-Modes", `${userConfig.roles}`);
       else if (user in defaultUsers)
-        res.set("X-Enabled-Command-Modes", `[${user}]`);
+        res.set("X-Enabled-Command-Modes", `${user}`);
       next();
     } else {
       res.sendStatus(401); // Unauthorized