fix(account): show "Linked to Google" once a Google account is linked (#4371)

**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 (<email>)"**
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
This commit is contained in:
Josh Harris
2026-06-21 19:55:40 +01:00
committed by GitHub
parent 89297bbe9e
commit af1e0c7415
2 changed files with 29 additions and 3 deletions
+2
View File
@@ -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.",
+27 -3
View File
@@ -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"