feat(login): redesign login page with responsive split layout

[yusuf-gundogdu]

Description

Redesigns the login page with a modern split-panel layout while preserving all existing authentication logic untouched.

Left panel (desktop only): Branding area with gradient background, feature highlights, and supported database badges.
Right panel: Login form — identical functionality, refined presentation.
Mobile: Left panel hidden, compact branding shown above the form with smooth responsive transition.

Type of Change

• New feature (non-breaking change which adds functionality)

Changes Made

src/app/login/login-form.tsx

• Split-panel layout: left branding (hidden on mobile via hidden lg:flex), right login form
• OIDC mode: added ShieldCheck icon, "Single Sign-On" description, and security badges
• SSO window: opens provider login side-by-side on desktop (window.open right half), falls back to full-page redirect on mobile
• Accessibility: changed mobile branding from <h1> to <h2> to avoid duplicate h1 tags

src/app/api/auth/oidc/login/route.ts

• Stores oidc-mode cookie when ?mode=popup is present, so the callback knows whether to close the window or redirect

src/app/api/auth/oidc/callback/route.ts

• Reads oidc-mode cookie: returns window.close() in popup mode, redirects normally otherwise
• Cleans up oidc-mode cookie in both success and error paths

tests/components/LoginPage.test.tsx

• Fixed test: getByText → getAllByText for "LibreDB Studio" since the split layout renders it in multiple locations

What is NOT changed

• No backend/auth logic changes (JWT, session, role mapping — all untouched)
• No new dependencies added
• No CI/CD configuration changes
• No database or API changes

Testing

• I have tested this locally
• I have added/updated tests
• All existing tests pass

Test Environment

• LibreDB Studio Version: 0.7.1
• Browser: Chrome
• OS: macOS
• Bun Version: 1.3.10

Test Results

• Lint: 0 errors, 0 warnings
• TypeScript: clean
• Build: clean
• Component tests: 15/15 groups, 1130 tests passed
• E2E tests: passed

Checklist

• My code follows the project's code style guidelines
• I have performed a self-review of my code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

[Copilot]

Pull request overview

Redesigns the login page into a responsive split-panel layout and adds a desktop popup-based OIDC SSO flow (with server-side callback support) while keeping existing local login behavior intact.

Changes:

• Updated LoginForm UI to a split branding/form layout, including a new desktop popup SSO flow and mobile fallback redirect.
• Added oidc-mode cookie handling in OIDC login + callback routes to support popup closing behavior.
• Adjusted the login page component test to account for multiple rendered “LibreDB Studio” titles.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/app/login/login-form.tsx	New split layout and popup SSO handling logic for OIDC mode.
src/app/api/auth/oidc/login/route.ts	Sets oidc-mode cookie for popup flows; closes window on popup-mode config error.
src/app/api/auth/oidc/callback/route.ts	Reads/clears oidc-mode and returns window.close() HTML for popup flows.
tests/components/LoginPage.test.tsx	Updates title assertion to handle multiple occurrences.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

/api/auth/me returns { authenticated: true, user: session } (see src/app/api/auth/me/route.ts), but this code reads data.role. That will always be undefined, causing admins to be redirected to / after popup SSO. Read the role from data.user.role (and consider guarding for non-200 responses).

Suggested change

	fetch('/api/auth/me').then(res => res.json()).then(data => {
	if (data.authenticated) {
	router.push(data.role === 'admin' ? '/admin' : '/');
	}
	}).catch(() => {});
	fetch('/api/auth/me')
	.then(res => {
	if (!res.ok) {
	return null;
	}
	return res.json();
	})
	.then(data => {
	if (data && data.authenticated) {
	const role = data.user?.role;
	router.push(role === 'admin' ? '/admin' : '/');
	}
	})
	.catch(() => {});

[Copilot]

The polling interval created by setInterval isn’t cleaned up if the component unmounts (e.g., navigation away while the popup is still open). That can lead to state updates on an unmounted component. Store the interval id (e.g., in a ref) and clear it in a useEffect cleanup, and/or stop polling when navigation occurs.

[Copilot]

oidc-mode is set as a standalone cookie and callback trusts it to decide whether to window.close(). If the user closes the popup before completing auth, the cookie can remain for up to 5 minutes; a subsequent non-popup OIDC flow in the same browser could then hit the callback and incorrectly return window.close() instead of redirecting. Consider binding the mode flag to the current OIDC state (e.g., store popup:<state> and validate it in the callback), and/or explicitly clear any stale oidc-mode cookie when mode !== popup.

Suggested change

	});
	});
	} else {
	// Clear any stale popup mode flag so non-popup flows are not misclassified
	cookieStore.set('oidc-mode', '', {
	httpOnly: true,
	secure: process.env.NODE_ENV === 'production',
	sameSite: 'lax',
	maxAge: 0,
	path: '/',
	});

[Copilot]

Popup handling is determined solely by cookieStore.get('oidc-mode') === 'popup'. To avoid incorrectly treating a non-popup callback as a popup (e.g., due to a stale cookie from an abandoned popup attempt), validate that the mode cookie corresponds to the current login attempt (tie it to the decrypted OIDC state), and fall back to the normal redirect when it doesn’t match.