Feat : move GitHub button above #2580
Conversation
Console (appwrite/console)Project ID: Tip Teams feature lets you group users with membership management and role permissions |
WalkthroughTwo login/authentication pages are refactored to reorganize GitHub authentication options. The GitHub OAuth button is repositioned to the top of the form when in cloud mode, replacing a previously duplicated button that appeared in a lower position. A matching global style is introduced for the auth-provider-button class to apply consistent spacing. These changes affect the login page and registration page with parallel modifications. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10-15 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/routes/(public)/(guest)/register/+page.svelte (1)
108-115: Consider preventing double-clicks in the GitHub OAuth flow.The
onGithubLoginfunction doesn't setdisabled = truebefore initiating the OAuth session, unlike the regularregisterfunction (line 54). This could allow users to trigger multiple OAuth flows if they click rapidly.Apply this diff to prevent double-clicks:
function onGithubLogin() { + disabled = true; sdk.forConsole.account.createOAuth2Session({ provider: OAuthProvider.Github, success: window.location.origin, failure: window.location.origin, scopes: ['read:user', 'user:email'] }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/routes/(public)/(guest)/login/+page.svelte(2 hunks)src/routes/(public)/(guest)/register/+page.svelte(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-08T13:20:47.308Z
Learnt from: ItzNotABug
Repo: appwrite/console PR: 2316
File: src/routes/(console)/project-[region]-[project]/functions/create-function/deploy/+page.svelte:29-29
Timestamp: 2025-09-08T13:20:47.308Z
Learning: The Form.svelte component in the Appwrite console creates a FormContext with isSubmitting as writable(false) and expects consumers to work with Svelte writable stores, not plain booleans.
Applied to files:
src/routes/(public)/(guest)/register/+page.sveltesrc/routes/(public)/(guest)/login/+page.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: e2e
- GitHub Check: build
🔇 Additional comments (3)
src/routes/(public)/(guest)/login/+page.svelte (2)
97-108: LGTM! Clean implementation of cloud-specific GitHub OAuth login.The conditional rendering, button configuration, and OAuth flow integration are well-implemented. The button properly reuses the existing
disabledstate and theonGithubLoginhandler correctly constructs redirect URLs with query parameters.
138-142: LGTM! Appropriate use of global styles.The global scope is necessary here for Svelte, and the class name is specific enough to avoid conflicts. Using the CSS custom property with a fallback ensures consistent spacing with the design system.
src/routes/(public)/(guest)/register/+page.svelte (1)
186-190: LGTM! Global styling approach is appropriate for cross-page consistency.The
:global()scope for.auth-provider-buttonensures consistent spacing across authentication pages, as this pattern is mirrored in the login page.
| {#if isCloud} | ||
| <Button | ||
| class="auth-provider-button" | ||
| secondary | ||
| fullWidth | ||
| on:click={onGithubLogin} | ||
| disabled={disabled || !terms}> | ||
| <span class="icon-github" aria-hidden="true"></span> | ||
| <span class="text">Sign up with GitHub</span> | ||
| </Button> | ||
| <span class="with-separators eyebrow-heading-3">or</span> | ||
| {/if} |
There was a problem hiding this comment.
🧩 Analysis chain
Verify that campaign and coupon data is preserved for GitHub OAuth sign-ups.
The GitHub OAuth flow redirects to window.location.origin without preserving the coupon or campaign data present in data?.couponData or data?.campaign. Regular email registration handles this after account creation (lines 74-79), but GitHub OAuth users coming through campaign links may not receive the intended credits.
Run the following script to check if the OAuth callback handler preserves this context:
🏁 Script executed:
#!/bin/bash
# Description: Search for OAuth callback handling and campaign/coupon preservation logic
# Look for OAuth callback routes or handlers
rg -n -C5 'createOAuth2Session|oauth.*callback|oauth.*success' --type=ts --type=svelte
# Check if campaign/coupon data is preserved in OAuth flows
rg -n -C5 'couponData|campaign.*\$id' --type=ts --type=svelte -g '!register'Length of output: 61
🏁 Script executed:
#!/bin/bash
# Description: Search for OAuth callback handling and campaign/coupon preservation logic
# Look for OAuth callback routes or handlers (broader search)
rg -n -C5 'createOAuth2Session|oauth.*callback|oauth.*success' --type=ts
# Search in all files for OAuth patterns
rg -n 'onGithubLogin|github.*oauth' -C3
# Check for coupon and campaign data references
rg -n 'couponData|campaign.*id' -C3
# Look for the registration file structure
fd -e svelte 'register' | head -20Length of output: 46183
Preserve campaign and coupon context for GitHub OAuth sign-ups.
The GitHub OAuth flow redirects to window.location.origin without preserving coupon or campaign URL parameters. Users arriving via campaign links (e.g., /register?code=PROMO) will lose this context after OAuth completion, unlike email registration which correctly redirects to /apply-credit?code=....
Update the onGithubLogin function to preserve the code or campaign search parameters in the OAuth success URL:
function onGithubLogin() {
let url = window.location.origin;
if (page.url.searchParams.has('code')) {
url += `?code=${page.url.searchParams.get('code')}`;
} else if (page.url.searchParams.has('campaign')) {
url += `?campaign=${page.url.searchParams.get('campaign')}`;
}
sdk.forConsole.account.createOAuth2Session({
provider: OAuthProvider.Github,
success: url,
// ...
});
}Additionally, consider setting disabled = true after onGithubLogin() is called to prevent rapid re-clicks.
🤖 Prompt for AI Agents
In src/routes/(public)/(guest)/register/+page.svelte around lines 127 to 138,
the GitHub OAuth flow currently redirects to window.location.origin and loses
campaign/coupon query params; update onGithubLogin to read page.url.searchParams
and append either the code or campaign param (prefer code first, then campaign)
to the success URL passed to sdk.forConsole.account.createOAuth2Session so the
user returns with their promo context preserved, and after invoking the OAuth
call set disabled = true to prevent rapid re-clicks.
What does this PR do?
(Provide a description of what this PR does.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit