From af1e0c7415086e0b322edcdbfd89d6e1c9222872 Mon Sep 17 00:00:00 2001
From: Josh Harris <josh@wickedsick.com>
Date: Sun, 21 Jun 2026 19:55:40 +0100
Subject: [PATCH] fix(account): show "Linked to Google" once a Google account
 is linked (#4371)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Add approved & assigned issue number here:**

N/A — bug fix for the recently-merged Google OAuth login (#4028), paired
with infra PR #378.

## Description:

Two bugs were reported after Google login merged. Both stem from the API
(`/users/@me`) only reporting the identity used to sign in — fixed in
infra PR #378, which must deploy first. This PR is the client half.

- **Still says "Link":** a Discord user who linked Google saw the
account page still offer "Link Google" (the response never reported
`google`). Now that the API reports all linked identities, the account
page shows a positive **"Linked to Google (&lt;email&gt;)"**
confirmation instead of just hiding the button — so the link visibly
succeeds and the user won't re-link (which would replace the prior
Google account).
- **Avatar replaced by email badge:** signing in via Google dropped the
linked Discord profile, so the top bar lost the Discord avatar. This is
fixed entirely by the API change (the existing Discord-first logic in
`Main.ts`/`hasLinkedAccount` restores the avatar) — no client change
needed beyond this PR's linked-state display.

## 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

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

jish
---
 resources/lang/en.json     |  2 ++
 src/client/AccountModal.ts | 30 +++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 9d152ece4..05b3c9101 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -20,6 +20,8 @@
     "link_google_failed": "Couldn't start Google linking. Please try again.",
     "link_google_success": "Google account linked.",
     "linked_account": "Logged in as {account_name}",
+    "linked_to_google": "Linked to Google",
+    "linked_to_google_email": "Linked to Google ({email})",
     "log_out": "Log Out",
     "manage_subscription": "Manage",
     "no_games": "No games played yet.",
diff --git a/src/client/AccountModal.ts b/src/client/AccountModal.ts
index f5dedcc21..6fa65a669 100644
--- a/src/client/AccountModal.ts
+++ b/src/client/AccountModal.ts
@@ -258,7 +258,7 @@ export class AccountModal extends BaseModal {
     if (me?.discord) {
       return html`
         <div class="flex flex-col items-center gap-3 w-full">
-          ${this.renderCurrency()} ${this.renderLinkGoogleButton()}
+          ${this.renderCurrency()} ${this.renderGoogleLink()}
           ${this.renderLogoutButton()}
         </div>
       `;
@@ -281,7 +281,7 @@ export class AccountModal extends BaseModal {
               account_name: me.email,
             })}
           </div>
-          ${this.renderCurrency()} ${this.renderLinkGoogleButton()}
+          ${this.renderCurrency()} ${this.renderGoogleLink()}
           ${this.renderLogoutButton()}
         </div>
       `;
@@ -289,6 +289,30 @@ export class AccountModal extends BaseModal {
     return html``;
   }
 
+  // Show the Google link state: a confirmation line when a Google account is
+  // already linked, otherwise the button to link one.
+  private renderGoogleLink(): TemplateResult {
+    const google = this.userMeResponse?.user?.google;
+    if (google) {
+      const label = google.email
+        ? translateText("account_modal.linked_to_google_email", {
+            email: google.email,
+          })
+        : translateText("account_modal.linked_to_google");
+      return html`
+        <div class="flex items-center gap-2 text-white/70 text-sm">
+          <img
+            src=${assetUrl("images/GoogleLogo.svg")}
+            alt=${translateText("account_modal.google_alt")}
+            class="w-4 h-4"
+          />
+          <span>${label}</span>
+        </div>
+      `;
+    }
+    return this.renderLinkGoogleButton();
+  }
+
   // Shown when logged in without a Google identity yet. Lets the user attach
   // Google to their existing account (we never auto-merge by email).
   private renderLinkGoogleButton(): TemplateResult {
@@ -388,7 +412,7 @@ export class AccountModal extends BaseModal {
             >
               <img
                 src=${assetUrl("images/GoogleLogo.svg")}
-                alt="Google"
+                alt=${translateText("account_modal.google_alt")}
                 class="w-6 h-6 relative z-10"
               />
               <span class="font-bold relative z-10 tracking-wide"