From 999e54de86e26d346fa8a8357b66455d32f74575 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 2 Apr 2026 16:21:31 +0200
Subject: [PATCH] feat(auth): build login page with LoginForm, brand panel, and
 title

Replaces placeholder with full login page: brand panel left,
LoginForm right, svelte:head title, signup link, no-nav-chrome.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/routes/(public)/login/+page.svelte    | 26 ++++++++---
 .../src/routes/(public)/login/page.test.ts    | 44 +++++++++++++++++++
 2 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/routes/(public)/login/page.test.ts

diff --git a/frontend/src/routes/(public)/login/+page.svelte b/frontend/src/routes/(public)/login/+page.svelte
index d2406d2..79a85b8 100644
--- a/frontend/src/routes/(public)/login/+page.svelte
+++ b/frontend/src/routes/(public)/login/+page.svelte
@@ -1,11 +1,25 @@
-<div class="flex min-h-screen">
-	<div class="hidden md:flex md:w-1/2 bg-[var(--green)] items-center justify-center">
+<script lang="ts">
+	import LoginForm from '$lib/auth/LoginForm.svelte';
+
+	let { form } = $props();
+</script>
+
+<svelte:head>
+	<title>Anmelden — Mealprep</title>
+</svelte:head>
+
+<!-- Mobile: stacked, Desktop: side by side -->
+<div class="flex min-h-screen flex-col md:flex-row">
+	<div
+		class="bg-[var(--green)] flex flex-col items-center justify-center
+			px-6 py-7 text-center
+			md:w-1/2 md:min-h-screen md:px-10 md:py-12"
+	>
 		<span class="font-[var(--font-display)] text-4xl text-white font-medium">Mealprep</span>
 	</div>
-	<div class="flex-1 flex items-center justify-center p-6">
-		<div>
-			<h1 class="text-2xl font-medium">Anmelden</h1>
-			<p class="text-[var(--color-text-muted)] mt-2">Login-Formular folgt.</p>
+	<div class="flex flex-1 flex-col items-start justify-center px-[20px] py-[24px] md:items-center md:px-[56px] md:py-[48px]">
+		<div class="w-full max-w-[380px]">
+			<LoginForm {form} />
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(public)/login/page.test.ts b/frontend/src/routes/(public)/login/page.test.ts
new file mode 100644
index 0000000..29485a0
--- /dev/null
+++ b/frontend/src/routes/(public)/login/page.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Page from './+page.svelte';
+
+vi.mock('$app/stores', async () => {
+	const { readable } = await import('svelte/store');
+	return {
+		page: readable({ url: new URL('http://localhost/login') })
+	};
+});
+
+vi.mock('$app/forms', () => ({
+	enhance: () => ({ destroy: () => {} })
+}));
+
+describe('login page', () => {
+	it('renders the login form', () => {
+		render(Page);
+		expect(screen.getByText('Willkommen zurück')).toBeInTheDocument();
+	});
+
+	it('renders the brand panel', () => {
+		render(Page);
+		expect(screen.getByText('Mealprep')).toBeInTheDocument();
+	});
+
+	it('sets the page title', () => {
+		render(Page);
+		expect(document.title).toBe('Anmelden — Mealprep');
+	});
+
+	it('does not render any navigation chrome', () => {
+		render(Page);
+		expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+		expect(screen.queryByText('Planer')).not.toBeInTheDocument();
+		expect(screen.queryByText('Rezepte')).not.toBeInTheDocument();
+	});
+
+	it('renders a link to the signup page', () => {
+		render(Page);
+		const link = screen.getByRole('link', { name: /registrieren/i });
+		expect(link).toHaveAttribute('href', '/signup');
+	});
+});