Add OAuth mode prop to auth components

Introduces an 'oauthMode' prop to AuthPageLayout and OAuthButtons to distinguish between 'signin' and 'signup' flows, updating button text accordingly. Updates login and signup pages to use the correct mode, and refines layout logic for finalized pages and navigation visibility. Also adds an optional 'showBackLink' prop to AuthUtilityLayout.

Author: PavelLaptev

apps/web/src/lib/components/auth/AuthPageLayout.svelte

@@ -7,6 +7,7 @@
 		title: string;
 		subtitle?: string;
 		oauthText?: string;
+		oauthMode?: 'signin' | 'signup';
 		bottomLinkText?: string;
 		bottomLinkHref?: string;
 		bottomLinkLabel?: string;
@@ -17,6 +18,7 @@
 		title,
 		subtitle,
 		oauthText = 'Or continue with',
+		oauthMode = 'signin',
 		bottomLinkText,
 		bottomLinkHref,
 		bottomLinkLabel,
@@ -41,7 +43,7 @@
 					<span class="text-12">{oauthText}</span>
 				</div>
 
-				<OAuthButtons />
+				<OAuthButtons mode={oauthMode} />
 			</div>
 
 			{#if bottomLinkText && bottomLinkHref && bottomLinkLabel}

apps/web/src/lib/components/auth/AuthUtilityLayout.svelte

@@ -6,9 +6,10 @@
 	interface Props {
 		title: string;
 		children: Snippet;
+		showBackLink?: boolean;
 	}
 
-	let { title, children }: Props = $props();
+	let { title, children, showBackLink = true }: Props = $props();
 
 	const routesService = inject(WEB_ROUTES_SERVICE);
 </script>
@@ -21,9 +22,12 @@
 
 		<div class="text-12 service-form__footer">
 			<p>
-				← Back to
-				<a href={routesService.loginPath()}>Login</a>
+				{#if showBackLink}
+					← Back to
+					<a href={routesService.loginPath()}>Login</a>
+				{/if}
 			</p>
+
 			<p>
 				Need help?
 				<a

apps/web/src/lib/components/login/OAuthButtons.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
+
+	interface Props {
+		mode?: 'signin' | 'signup';
+	}
+
+	let { mode = 'signin' }: Props = $props();
+
+	const actionText = mode === 'signup' ? 'Sign up' : 'Sign in';
 </script>
 
 <div class="oauth-buttons">
 	{#snippet oauthButton(provider: 'github' | 'google')}
 		{@const config = {
 			github: {
 				endpoint: 'auth/github',
-				title: 'Sign in with GitHub',
+				title: `${actionText} with GitHub`,
 				label: 'GitHub',
 				svg: `<svg class="oauth-logo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#000"/>
 				</svg>`
 			},
 			google: {
 				endpoint: 'auth/google_oauth2',
-				title: 'Sign in with Google',
+				title: `${actionText} with Google`,
 				label: 'Google',
 				svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="oauth-logo">
 					<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285f4"></path>
@@ -55,6 +63,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 8px;
+		padding-right: 14px;
 		gap: 8px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);

apps/web/src/routes/(app)/+layout.svelte

@@ -152,8 +152,9 @@
 	const isCommitPage = $derived(page.url.pathname.includes('/commit/'));
 	const isLoginPage = $derived(page.url.pathname.includes('/login'));
 	const isSignupPage = $derived(page.url.pathname.includes('/signup'));
-	const hasNavigation = $derived(!isCommitPage && !isLoginPage && !isSignupPage);
-	const isFullScreen = $derived(isLoginPage || isSignupPage);
+	const isFinalized = $derived(page.url.pathname.includes('/finalize'));
+	const hasNavigation = $derived(!isCommitPage && !isLoginPage && !isSignupPage && !isFinalized);
+	const isFullScreen = $derived(isLoginPage || isSignupPage || isFinalized);
 </script>
 
 <RedirectIfNotFinalized />
@@ -179,6 +180,7 @@
 		flex-direction: column;
 		width: 100%;
 		min-height: 100vh;
+		margin: 0 auto;
 		padding: 24px var(--layout-side-paddings);
 		&:not(.full-screen) {
 			max-width: calc(1440px + var(--layout-side-paddings) * 2);

apps/web/src/routes/(app)/login/+page.svelte

@@ -74,6 +74,7 @@
 	title="Login"
 	subtitle="to GitButler"
 	oauthText="Or log in with"
+	oauthMode="signin"
 	bottomLinkText="Don't have an account?"
 	bottomLinkHref={routesService.signupPath()}
 	bottomLinkLabel="Sign Up now"

apps/web/src/routes/(app)/signup/+page.svelte

@@ -63,6 +63,7 @@
 	title="Sign Up"
 	subtitle="for GitButler"
 	oauthText="Or sign up with"
+	oauthMode="signup"
 	bottomLinkText="Already have an account?"
 	bottomLinkHref={routesService.loginPath()}
 	bottomLinkLabel="Log in"