fix(settings): require non-empty text inputs, stop the token field closing on empty Enter, and clarify the credentials error

TextInputModal now gates OK on a non-empty (trimmed) value via bOKDisabled
and only runs the confirm/close on Enter when the value is non-empty, so an
empty or whitespace-only field can no longer be confirmed with R2/Enter on
the Deck.

The ConnectModal token field is wrapped in a Focusable (the structure proven
not to close the modal on an incomplete field) and all three keydown handlers
consume Enter with preventDefault/stopPropagation before deciding to submit,
advance, or no-op, so R2/OSK-Enter on the empty token field no longer closes
the modal.

The credentials 403 message now names both possible causes — wrong
username/password and an account without token-creation permission — because
RomM returns 403 indistinguishably for both.

Author: danielcopper

py_modules/services/connection.py

@@ -50,8 +50,8 @@
 _INVALID_URL_MESSAGE = "Enter a valid http(s):// server URL"
 
 _FORBIDDEN_TOKEN_MESSAGE = (
-    "Your RomM account cannot create API tokens — ask your admin to grant "
-    "token permissions or use an account with a higher role."
+    "RomM rejected the sign-in. Check your username and password — if they are correct, your account may not be "
+    "allowed to create API tokens (ask your admin or use an account with a higher role)."
 )
 
 # Pasted-token validation (``establish_user_token``): a 401 means the token
@@ -279,8 +279,10 @@ async def establish_token(
             minted = await self._loop.run_in_executor(None, self._mint, username, password)
         except RommForbiddenError:
             # 403 on token mint: same AUTH_FAILED slug as a 401, but a distinct
-            # message — the account lacks token-creation permission (or a
-            # Cloudflare bot-fight 403 at the edge), not wrong credentials.
+            # message. RomM answers 403 indistinguishably for wrong credentials
+            # AND for an account that lacks token-creation permission (and a
+            # Cloudflare bot-fight 403 lands here too), so the message names both
+            # causes rather than asserting only the permission one.
             self._restore_auth_state(snapshot)
             return {"success": False, "reason": ErrorCode.AUTH_FAILED.value, "message": _FORBIDDEN_TOKEN_MESSAGE}
         except Exception as e:

src/components/settings/ConnectModal.test.tsx

@@ -331,14 +331,27 @@ describe("ConnectModal", () => {
       expect(closeModal).toHaveBeenCalledTimes(1);
     });
 
-    it("ignores Enter in the token field while it is empty", () => {
+    it("ignores Enter on an empty token field and consumes the event so the modal cannot close", () => {
       const onConnectToken = ok();
+      const closeModal = vi.fn();
       const { getByTestId } = render(
-        <ConnectModal onConnect={ok()} onConnectToken={onConnectToken} onConnectPairing={ok()} />,
+        <ConnectModal
+          closeModal={closeModal}
+          onConnect={ok()}
+          onConnectToken={onConnectToken}
+          onConnectPairing={ok()}
+        />,
       );
       fireEvent.click(getByTestId("mode-token"));
-      fireEvent.keyDown(getByTestId("field-API Token"), { key: "Enter" });
+      // fireEvent returns false when a handler called preventDefault. The handler
+      // must consume the Enter so Steam's ModalRoot cannot fire its own default
+      // confirm/close on the empty field — the Deck regression. The real close
+      // can't be reproduced in happy-dom, so a consumed event is the observable
+      // proxy that the fix is in place, alongside the no-submit/no-close effects.
+      const notPrevented = fireEvent.keyDown(getByTestId("field-API Token"), { key: "Enter" });
+      expect(notPrevented).toBe(false);
       expect(onConnectToken).not.toHaveBeenCalled();
+      expect(closeModal).not.toHaveBeenCalled();
     });
 
     it("switches back to credentials mode and calls onConnect again", async () => {

src/components/settings/ConnectModal.tsx

@@ -238,11 +238,16 @@ export const ConnectModal: FC<ConnectModalProps> = ({ closeModal, onConnect, onC
       focusBoxAtEnd(index - 1);
       return;
     }
-    // Enter (the on-screen keyboard's "Eingabe" key) confirms once every box is
-    // filled — an incomplete code is a no-op. submit() owns closing on success,
-    // so this path must not close the modal itself.
-    if (e.key === "Enter" && code.every((c) => c !== "")) {
-      void submit();
+    if (e.key === "Enter") {
+      // Consume the event so Steam's ModalRoot cannot fire its own default
+      // confirm/close — regardless of whether the code is complete enough to
+      // submit (an incomplete field must be an inert no-op, not a close).
+      e.preventDefault();
+      e.stopPropagation();
+      // Enter (the on-screen keyboard's "Eingabe" key) confirms once every box
+      // is filled — an incomplete code is a no-op. submit() owns closing on
+      // success, so this path must not close the modal itself.
+      if (code.every((c) => c !== "")) void submit();
     }
   };
 
@@ -251,13 +256,24 @@ export const ConnectModal: FC<ConnectModalProps> = ({ closeModal, onConnect, onC
   // action. If the password input can't be found, it's a no-op (never a submit).
   const handleUsernameKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key !== "Enter") return;
+    // Consume the event so Steam's ModalRoot cannot fire its own default
+    // confirm/close before focus advances to the password field.
+    e.preventDefault();
+    e.stopPropagation();
     credentialsRowRef.current?.querySelectorAll("input")[1]?.focus();
   };
 
   // Enter on a completing field (password / token) submits, but only when the
   // mode's fields are complete — otherwise it's a no-op.
   const handleCompletingKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && canSubmit) void submit();
+    if (e.key !== "Enter") return;
+    // Consume the event so Steam's ModalRoot cannot fire its own default
+    // confirm/close on an incomplete field — regardless of whether we submit.
+    // (On the Deck, R2/OSK-Enter on the empty token field otherwise closed the
+    // modal even though this handler correctly no-ops when canSubmit is false.)
+    e.preventDefault();
+    e.stopPropagation();
+    if (canSubmit) void submit();
   };
 
   const handleModeChange = (option: { data: string }) => {
@@ -301,14 +317,23 @@ export const ConnectModal: FC<ConnectModalProps> = ({ closeModal, onConnect, onC
               scopes listed in the plugin docs so downloads, saves, and device sync work. The plugin never deletes a
               pasted token; you manage it in RomM.
             </div>
-            <TextField
-              focusOnMount={true}
-              label="API Token"
-              value={token}
-              bIsPassword
-              onChange={handleTokenChange}
-              onKeyDown={handleCompletingKeyDown}
-            />
+            {/* The token field is the only input in this mode and, unwrapped, is a
+                direct child of the modal body. On the Deck, R2/OSK-Enter on the
+                empty field closes the ModalRoot even though handleCompletingKeyDown
+                no-ops (canSubmit false). The pairing boxes' <Focusable> wrapper is
+                the one structure proven not to close on an incomplete field, so the
+                token field is wrapped the same way. flow-children is irrelevant for
+                a single field, so it is omitted. */}
+            <Focusable>
+              <TextField
+                focusOnMount={true}
+                label="API Token"
+                value={token}
+                bIsPassword
+                onChange={handleTokenChange}
+                onKeyDown={handleCompletingKeyDown}
+              />
+            </Focusable>
           </>
         )}
         {mode === "pairing" && (

src/components/settings/TextInputModal.test.tsx

@@ -10,6 +10,7 @@ type AnyProps = Record<string, unknown> & { children?: unknown };
 interface CapturedConfirm {
   onOK?: (() => void) | undefined;
   bDisableBackgroundDismiss?: boolean | undefined;
+  bOKDisabled?: boolean | undefined;
   closeModal?: unknown;
   strTitle?: string | undefined;
 }
@@ -19,6 +20,7 @@ vi.mock("@decky/ui", () => ({
   ConfirmModal: (p: AnyProps & CapturedConfirm) => {
     captured.onOK = p.onOK;
     captured.bDisableBackgroundDismiss = p.bDisableBackgroundDismiss;
+    captured.bOKDisabled = p.bOKDisabled;
     captured.closeModal = p.closeModal;
     captured.strTitle = p.strTitle;
     return createElement("div", { "data-testid": "confirm-modal" }, p.children as never);
@@ -97,6 +99,49 @@ describe("TextInputModal", () => {
     expect(closeModal).toHaveBeenCalledTimes(1);
   });
 
+  describe("non-empty requirement", () => {
+    it("disables OK when the value is empty", () => {
+      render(<TextInputModal label="x" value="" onSubmit={vi.fn()} />);
+      expect(captured.bOKDisabled).toBe(true);
+    });
+
+    it("disables OK when the value is whitespace-only", () => {
+      render(<TextInputModal label="x" value="" onSubmit={vi.fn()} />);
+      const input = document.querySelector("input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "   " } });
+      expect(captured.bOKDisabled).toBe(true);
+    });
+
+    it("enables OK once the value is non-empty", () => {
+      render(<TextInputModal label="x" value="" onSubmit={vi.fn()} />);
+      expect(captured.bOKDisabled).toBe(true);
+      const input = document.querySelector("input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "x" } });
+      expect(captured.bOKDisabled).toBe(false);
+    });
+
+    it("ignores Enter on an empty field — no submit, no close", () => {
+      const onSubmit = vi.fn();
+      const closeModal = vi.fn();
+      render(<TextInputModal label="x" value="" closeModal={closeModal} onSubmit={onSubmit} />);
+      const input = document.querySelector("input") as HTMLInputElement;
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(closeModal).not.toHaveBeenCalled();
+    });
+
+    it("ignores Enter on a whitespace-only field — no submit, no close", () => {
+      const onSubmit = vi.fn();
+      const closeModal = vi.fn();
+      render(<TextInputModal label="x" value="" closeModal={closeModal} onSubmit={onSubmit} />);
+      const input = document.querySelector("input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "   " } });
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(closeModal).not.toHaveBeenCalled();
+    });
+  });
+
   it("does NOT trim — submits whitespace as-is (parent is responsible)", () => {
     const onSubmit = vi.fn();
     render(<TextInputModal label="x" value="" onSubmit={onSubmit} />);

src/components/settings/TextInputModal.tsx

@@ -29,6 +29,9 @@ export const TextInputModal: FC<TextInputModalProps> = ({
   onSubmit,
 }) => {
   const [value, setValue] = useState(initial);
+  // Every field this modal edits (SteamGridDB API key, RomM URL, Default Save
+  // Slot) must be non-empty, so a whitespace-only value never counts as a submit.
+  const canSubmit = value.trim() !== "";
   const handleOK = () => {
     if (field) {
       pendingEdits[field] = value;
@@ -39,6 +42,7 @@ export const TextInputModal: FC<TextInputModalProps> = ({
     <ConfirmModal
       {...(closeModal !== undefined ? { closeModal } : {})}
       onOK={handleOK}
+      bOKDisabled={!canSubmit}
       strTitle={label}
       bDisableBackgroundDismiss={true}
     >
@@ -51,8 +55,11 @@ export const TextInputModal: FC<TextInputModalProps> = ({
         // Enter (the on-screen keyboard's "Eingabe" key) confirms, same as the OK
         // button. ConfirmModal auto-closes on its OK button but not on this manual
         // path, so close here too — handleOK is shared so the two never drift.
+        // Gated on canSubmit so an empty/whitespace field is a no-op on Enter,
+        // matching the disabled OK button (on the Deck, R2/Enter would otherwise
+        // confirm an empty value and close the modal).
         onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-          if (e.key === "Enter") {
+          if (e.key === "Enter" && canSubmit) {
             handleOK();
             closeModal?.();
           }

tests/services/test_connection.py

@@ -681,7 +681,10 @@ def test_forbidden_mint_returns_actionable_message(self, event_loop, romm_api, l
         result = event_loop.run_until_complete(service.establish_token("http://romm.local", "u", "p"))
         assert result["success"] is False
         assert result["reason"] == "auth_failed"
-        assert "cannot create API tokens" in result["message"]
+        # The 403 is indistinguishable between wrong credentials and a missing
+        # token-creation permission, so the message names both causes.
+        assert "username and password" in result["message"]
+        assert "create API tokens" in result["message"]
 
     def test_auth_error_mint_returns_auth_error(self, event_loop, romm_api, logger):
         romm_api.mint_client_token.side_effect = RommAuthError("401")