Feat : move GitHub button above #2580
Conversation
Console (appwrite/console)Project ID: Tip JWT tokens let functions act on behalf of users while preserving their permissions |
WalkthroughThe login and register pages were modified to move the GitHub OAuth button into a cloud-only position above the standard form fields and remove a previously duplicated GitHub button that appeared below the password/submit area. A shared 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)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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.
There was a problem hiding this comment.
Pull request overview
This PR relocates the GitHub authentication buttons to appear above the form fields instead of below them on both the login and registration pages. The change is intended to improve the user experience by presenting alternative authentication options earlier in the flow.
Key Changes:
- Moved GitHub OAuth button from bottom to top of login form
- Moved GitHub OAuth button from bottom to top of registration form
- Added consistent styling for auth provider buttons with
margin-bottomspacing
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/routes/(public)/(guest)/register/+page.svelte |
Relocated GitHub sign-up button above form fields and added CSS styling for the button |
src/routes/(public)/(guest)/login/+page.svelte |
Relocated GitHub sign-in button above form fields and added CSS styling for the button |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| secondary | ||
| fullWidth | ||
| on:click={onGithubLogin} | ||
| {disabled}> |
There was a problem hiding this comment.
The GitHub sign-up button should be disabled when the terms checkbox is not checked, similar to the previous implementation. The removed button at line 174 was disabled with disabled={disabled || !terms}, but the new button at the top only uses {disabled}. This allows users to sign up via GitHub without agreeing to the terms and conditions.
| {disabled}> | |
| disabled={disabled || !terms}> |
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
New Features
Bug Fixes
Style
✏️ Tip: You can customize this high-level summary in your review settings.