disable join button on first click

frontend/index.html

@@ -36,7 +36,7 @@
           placeholder="123e4567-e89b-12d3-a456-426614174000"
           required
         />
-        <button>Join</button>
+        <button id="join-session-button">Join</button>
       </form>
 
       <p>
@@ -52,6 +52,6 @@
       </form>
     </div>
 
-    <script type="module" src="/main.mjs?v=3"></script>
+    <script type="module" src="/main.mjs?v=4"></script>
   </body>
 </html>

frontend/lib/join-session.mjs

@@ -37,6 +37,7 @@ export const setupJoinSessionForm = () => {
   const form = document.querySelector("#join-session-form");
   const nickname = form.querySelector("#join-session-nickname");
   const sessionId = form.querySelector("#join-session-id");
+  const button = form.querySelector("#join-session-button");
 
   loadNickname(nickname);
 
@@ -44,12 +45,12 @@ export const setupJoinSessionForm = () => {
     sessionId.value = window.location.hash.substring(1);
   }
 
-  document
-    .querySelector("#join-session-form")
-    .addEventListener("submit", (event) => {
-      event.preventDefault();
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
 
-      saveNickname(nickname);
-      joinSession(nickname.value, sessionId.value);
-    });
+    button.disabled = true;
+
+    saveNickname(nickname);
+    joinSession(nickname.value, sessionId.value);
+  });
 };

frontend/main.mjs

@@ -1,4 +1,4 @@
-import { setupJoinSessionForm } from "./lib/join-session.mjs?v=3";
+import { setupJoinSessionForm } from "./lib/join-session.mjs?v=4";
 
 const main = () => {
   setupJoinSessionForm();