mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-02 13:58:14 +00:00
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:
@@ -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.",
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user