other modals too

src/client/JoinLobbyModal.ts

@@ -37,6 +37,7 @@ import "./components/CopyButton";
 import "./components/LobbyConfigItem";
 import "./components/LobbyPlayerView";
 import { modalHeader } from "./components/ui/ModalHeader";
+import { IdentityReadyController } from "./identity/IdentityReadyController";
 import { nationsConfigToSlider } from "./utilities/GameConfigHelpers";
 
 @customElement("join-lobby-modal")
@@ -58,6 +59,7 @@ export class JoinLobbyModal extends BaseModal {
 
   private leaveLobbyOnClose = true;
   private countdownTimerId: number | null = null;
+  private identity = new IdentityReadyController(this);
   private handledJoinTimeout = false;
 
   private isPrivateLobby(): boolean {
@@ -250,9 +252,14 @@ export class JoinLobbyModal extends BaseModal {
               ></o-button>
             </div>
             <o-button
-              title=${translateText("private_lobby.join_lobby")}
+              title=${
+                this.identity.validating
+                  ? translateText("username.tag_checking")
+                  : translateText("private_lobby.join_lobby")
+              }
               width="block"
               submit
+              ?disable=${!this.identity.ready}
             ></o-button>
           </div>
         </div>
@@ -891,6 +898,9 @@ export class JoinLobbyModal extends BaseModal {
 
   private async joinLobbyFromInput(e: SubmitEvent): Promise<void> {
     e.preventDefault();
+    // Guard against Enter-key submit while the identity gate hasn't cleared
+    // (the disabled button blocks click but not keyboard submission).
+    if (!this.identity.ready) return;
     const lobbyId = this.normalizeLobbyId(this.lobbyIdInput.value);
     if (!lobbyId) {
       this.showMessage(translateText("private_lobby.not_found"), "red");

src/client/Matchmaking.ts

@@ -7,6 +7,7 @@ import { getPlayToken } from "./Auth";
 import { BaseModal } from "./components/BaseModal";
 import "./components/Difficulties";
 import { modalHeader } from "./components/ui/ModalHeader";
+import { IdentityReadyController } from "./identity/IdentityReadyController";
 import { JoinLobbyEvent } from "./Main";
 import { translateText } from "./Utils";
 
@@ -204,6 +205,7 @@ export class MatchmakingModal extends BaseModal {
 @customElement("matchmaking-button")
 export class MatchmakingButton extends LitElement {
   @state() private isLoggedIn = false;
+  private identity = new IdentityReadyController(this);
 
   constructor() {
     super();
@@ -226,12 +228,20 @@ export class MatchmakingButton extends LitElement {
   }
 
   render() {
+    const disabled = this.isLoggedIn && !this.identity.ready;
+    const title = disabled
+      ? this.identity.validating
+        ? translateText("username.tag_checking")
+        : translateText("matchmaking_modal.title")
+      : translateText("matchmaking_modal.title");
     return this.isLoggedIn
       ? html`
           <button
             @click="${this.handleLoggedInClick}"
-            class="no-crazygames w-full h-20 bg-purple-600 hover:bg-purple-500 text-white font-black uppercase tracking-widest rounded-xl transition-all duration-200 flex flex-col items-center justify-center group overflow-hidden relative"
-            title="${translateText("matchmaking_modal.title")}"
+            ?disabled=${disabled}
+            aria-busy=${this.identity.validating ? "true" : "false"}
+            class="no-crazygames w-full h-20 bg-purple-600 hover:bg-purple-500 text-white font-black uppercase tracking-widest rounded-xl transition-all duration-200 flex flex-col items-center justify-center group overflow-hidden relative disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-purple-600"
+            title="${title}"
           >
             <span class="relative z-10 text-2xl">
               ${translateText("matchmaking_button.play_ranked")}

src/client/components/RankedModal.ts

@@ -3,6 +3,7 @@ import { customElement, state } from "lit/decorators.js";
 import { UserMeResponse } from "../../core/ApiSchemas";
 import { getUserMe, hasLinkedAccount } from "../Api";
 import { userAuth } from "../Auth";
+import { IdentityReadyController } from "../identity/IdentityReadyController";
 import { translateText } from "../Utils";
 import { BaseModal } from "./BaseModal";
 import { modalHeader } from "./ui/ModalHeader";
@@ -14,6 +15,7 @@ export class RankedModal extends BaseModal {
   @state() private elo: number | string = "...";
   @state() private userMeResponse: UserMeResponse | false = false;
   @state() private errorMessage: string | null = null;
+  private identity = new IdentityReadyController(this);
 
   constructor() {
     super();
@@ -118,10 +120,16 @@ export class RankedModal extends BaseModal {
   }
 
   private renderCard(title: string, subtitle: string, onClick: () => void) {
+    const disabled = !this.identity.ready;
     return html`
       <button
         @click=${onClick}
-        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-surface border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
+        ?disabled=${disabled}
+        title=${disabled && this.identity.validating
+          ? translateText("username.tag_checking")
+          : ""}
+        aria-busy=${this.identity.validating ? "true" : "false"}
+        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-surface border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
       >
         <div class="flex flex-col items-center gap-1 text-center">
           <h3