fix(console): give Google sign-in its own full-width button by ArnabChatterjee20k · Pull Request #14721 · appwrite/appwrite · GitHub
Skip to content

fix(console): give Google sign-in its own full-width button - #14721

Open
ArnabChatterjee20k wants to merge 1 commit into
mainfrom
fix/auth-google-button
Open

fix(console): give Google sign-in its own full-width button#14721
ArnabChatterjee20k wants to merge 1 commit into
mainfrom
fix/auth-google-button

Conversation

@ArnabChatterjee20k

@ArnabChatterjee20k ArnabChatterjee20k commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

What

Restyles the OAuth buttons on sign-in and sign-up (SignIn.tsx):

  • Row 1: GitHub, GitLab and Bitbucket keep the expanding accordion. GitHub is still the default expanded one, and the last-used provider still wins.
  • Row 2: Google gets a full-width button with its label always visible and the standard four-color "G". The old icon was a single-color currentColor glyph that rendered grey.
  • Label: the sign-in label goes from "Login with Google" to "Sign in with Google". Sign-up stays "Sign up with Google". The Hebrew and Japanese dictionary keys are renamed to match, with their translations unchanged.
  • Last used: when Google was the last method, it gets the same "Last used" badge as passkeys.

Why

Google's Sign in with Google branding guidelines, which OAuth brand verification points to, say:

  • the "G" must be the standard color version, and a monochrome "G" is explicitly not allowed
  • the Google button should be "at least as prominent as other third party sign-in options"
  • the recommended call-to-action text is "Sign in with Google", "Sign up with Google" or "Continue with Google"

The old layout showed a grey "G" icon next to an expanded GitHub button, so it failed all three.

Testing

  • prettier --check and eslint pass on the changed files.
  • bun run lint:types reports none new.
  • bun test tests/unit/console-oauth.test.ts passes.
  • Checked /sign-in and /sign-up on a local dev server in light and dark mode.

Screenshots

Before (live) After
Sign in signin-before signin-after
Sign up signup-before signup-after

🤖 Generated with Claude Code

@ArnabChatterjee20k @claude
fix(console): give Google sign-in its own full-width button
96d3319 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@tenki-reviewer

tenki-reviewer Bot commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown

Review complete. No blocking issues — approved ✅; 2 nitpicks below.

🧹 Nitpicks (2) — 🟢 2 low
  • 🟢 Google row missing "Last used" aria-label suffix (SignIn.tsx:522) — The new Google button renders the LastUsedBadge visually but exposes no "Last used" information to assistive tech, unlike the adjacent VCS accordion rows which set aria-label={isLastUsed ? \${label}.
  • 🟢 Renamed key left out of alphabetical position in both dictionaries (account-global.ts:409) — The key rename moved the entry's key but not its position: Sign in with Google sits between Login with GitLab and Login: in he (apps/console/src/lib/i18n/dictionaries/he/account-global.ts:409) and before New Password in ja (apps/console/src/lib/i18n/dictionaries/ja/account-global.ts:297).

This PR rewords the Google OAuth provider label in the console sign-in screen from "Login with Google" to "Sign in with Google" and updates the corresponding translation keys. The change touches the SignIn component's provider label and the Hebrew and Japanese account-global dictionaries.

Files Change
apps/console/src/components/global/auth/SignIn.tsx Updates the Google OAuth provider label wording; Google row stays outside the accordion expansion behavior shared with the VCS rows.
apps/console/src/lib/i18n/dictionaries/he/account-global.ts, apps/console/src/lib/i18n/dictionaries/ja/account-global.ts Rename the "Login with Google" translation key to "Sign in with Google" with locale-appropriate values.

Two low-severity issues were flagged: the Google button lacks the "Last used" aria-label suffix the other OAuth rows carry, and the renamed translation key was inserted out of alphabetical order in both dictionaries. Other locales may still carry the old key name and rely on the English fallback.

Reviewed commit: 96d3319

@appwrite

appwrite Bot commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown

New Console

Project ID: new-console

Sites (1)
Site Status Logs Preview QR
 New Console
new-console		 Ready Ready View Logs Preview URL QR Code

Tip

Ephemeral API keys are generated automatically for each function execution

@hansi-codes

hansi-codes Bot commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🟢 Tier S · Ready to merge

The provider layout, last-used behavior, and translation changes are consistent with the intended behavior.

The sign-in and sign-up OAuth controls now show GitHub, GitLab, and Bitbucket in the expanding row, with Google on its own full-width button using the four-color logo. Google’s sign-in label and its Hebrew and Japanese dictionary keys were updated, and Google now receives a “Last used” badge when applicable.

Verdict New comments Fixed Still open
✅ Approved 0 0 0
📂 Walkthrough · 3
File Change
apps/console/src/components/global/auth/SignIn.tsx Separates Google from the provider accordion, adds its full-width branded button and last-used badge, and updates its sign-in label.
apps/console/src/lib/i18n/dictionaries/he/account-global.ts Renames the Hebrew Google sign-in translation key.
apps/console/src/lib/i18n/dictionaries/ja/account-global.ts Renames the Japanese Google sign-in translation key.

Reviewed 96d3319 · Details · Comment @hansi-codes review to re-run, or mention @hansi-codes with a question.

hansi-codes[bot]
hansi-codes Bot approved these changes Oct 21, 2026
View reviewed changes

@hansi-codes hansi-codes Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Tier S · Looks good to merge. Summary

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tenki-reviewer tenki-reviewer[bot] tenki-reviewer[bot] approved these changes
@hansi-codes hansi-codes[bot] hansi-codes[bot] approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ArnabChatterjee20k