From e5ce278cb1ec362878d93ca736b845800b338495 Mon Sep 17 00:00:00 2001
From: Nolhan <nolhan.l@proton.me>
Date: Mon, 23 Feb 2026 20:02:24 +0100
Subject: [PATCH] refactor: enhanced Join Private Lobby form (#3284)

## Description:
This pull request enhances the `JoinLobbyModal` component by using the
`<form>` component and the `@submit` event. It allows the user to use
the enter (return) key to submit instead of grabbing its mouse to click
on "Join Lobby".
It also introduces a new `submit` argument to the `Button` component.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:
@nolhan__

PS: The tests from `tests/InputHandler.test.ts` are failing on both
`main` and my branch. EDIT: They no longer fail through the workflow so
I guess I didn't have the correct environment
---
 src/client/JoinLobbyModal.ts                   | 7 ++++---
 src/client/components/baseComponents/Button.ts | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/client/JoinLobbyModal.ts b/src/client/JoinLobbyModal.ts
index 22e674fda..5ed20369a 100644
--- a/src/client/JoinLobbyModal.ts
+++ b/src/client/JoinLobbyModal.ts
@@ -221,7 +221,7 @@ export class JoinLobbyModal extends BaseModal {
           onBack: () => this.closeAndLeave(),
           ariaLabel: translateText("common.close"),
         })}
-        <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 mr-1">
+        <form @submit=${this.joinLobbyFromInput} class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 mr-1">
           <div class="flex flex-col gap-3">
             <div class="flex gap-2">
               <input
@@ -255,7 +255,7 @@ export class JoinLobbyModal extends BaseModal {
             <o-button
               title=${translateText("private_lobby.join_lobby")}
               block
-              @click=${this.joinLobbyFromInput}
+              submit
             ></o-button>
           </div>
         </div>
@@ -673,7 +673,8 @@ export class JoinLobbyModal extends BaseModal {
     }
   }
 
-  private async joinLobbyFromInput(): Promise<void> {
+  private async joinLobbyFromInput(e: SubmitEvent): Promise<void> {
+    e.preventDefault();
     const lobbyId = this.normalizeLobbyId(this.lobbyIdInput.value);
     if (!lobbyId) {
       this.showMessage(translateText("private_lobby.not_found"), "red");
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index e3dd03898..3d2ccfdcd 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -12,6 +12,7 @@ export class OButton extends LitElement {
   @property({ type: Boolean }) blockDesktop = false;
   @property({ type: Boolean }) disable = false;
   @property({ type: Boolean }) fill = false;
+  @property({ type: Boolean }) submit = false;
   private static readonly BASE_CLASS =
     "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
 
@@ -38,6 +39,7 @@ export class OButton extends LitElement {
       <button
         class=${classMap(this.getButtonClasses())}
         ?disabled=${this.disable}
+        type=${this.submit ? "submit" : "button"}
       >
         <span class="block min-w-0">
           ${this.translationKey === ""