From ff22a29723121d529b5d9fcb374ea496906397dc Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sun, 1 Feb 2026 12:54:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20feat(i18n):=20make=20all=20auth?=
 =?UTF-8?q?=20pages=20multilingual?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add dynamic locale support to all login, register, and forgot-password
pages across apps. Pages now use $locale from svelte-i18n instead of
hardcoded language codes.

Apps updated:
- clock: login (also consolidated to standard pattern)
- manacore: register
- manadeck: register
- nutriphi: login, register, forgot-password
- picture: register, forgot-password
- planta: login
- questions: login, register, forgot-password
- skilltree: login, register, forgot-password

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/src/routes/(auth)/login/+page.svelte  | 47 +++++++++++--------
 .../src/routes/(auth)/register/+page.svelte   | 11 +++++
 .../src/routes/(auth)/register/+page.svelte   | 11 +++++
 .../(auth)/forgot-password/+page.svelte       |  5 +-
 .../web/src/routes/(auth)/login/+page.svelte  |  6 ++-
 .../src/routes/(auth)/register/+page.svelte   |  5 +-
 .../routes/auth/forgot-password/+page.svelte  |  8 ++--
 .../web/src/routes/auth/signup/+page.svelte   |  8 ++--
 .../web/src/routes/(auth)/login/+page.svelte  |  6 ++-
 .../(auth)/forgot-password/+page.svelte       |  6 ++-
 .../web/src/routes/(auth)/login/+page.svelte  |  6 ++-
 .../src/routes/(auth)/register/+page.svelte   |  6 ++-
 .../(auth)/forgot-password/+page.svelte       |  6 ++-
 .../web/src/routes/(auth)/login/+page.svelte  |  6 ++-
 .../src/routes/(auth)/register/+page.svelte   |  6 ++-
 15 files changed, 99 insertions(+), 44 deletions(-)

diff --git a/apps/clock/apps/web/src/routes/(auth)/login/+page.svelte b/apps/clock/apps/web/src/routes/(auth)/login/+page.svelte
index d38e1471f..2e193a553 100644
--- a/apps/clock/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/clock/apps/web/src/routes/(auth)/login/+page.svelte
@@ -2,13 +2,13 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
+	import { locale } from 'svelte-i18n';
 	import { LoginPage } from '@manacore/shared-auth-ui';
+	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { ClockLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import '$lib/i18n';
 
-	let error = $state('');
-	let loading = $state(false);
-
 	// Read verification status from query params (set after email verification)
 	const verified = $derived($page.url.searchParams.get('verified') === 'true');
 	const initialEmail = $derived($page.url.searchParams.get('email') || '');
@@ -31,30 +31,37 @@
 		return '/';
 	});
 
-	async function handleLogin(email: string, password: string) {
-		loading = true;
-		error = '';
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
 
-		const result = await authStore.signIn(email, password);
+	async function handleSignIn(email: string, password: string) {
+		return authStore.signIn(email, password);
+	}
 
-		if (result.success) {
-			goto(redirectTo);
-		} else {
-			error = result.error || 'Anmeldung fehlgeschlagen';
-		}
-
-		loading = false;
+	async function handleResendVerification(email: string) {
+		return authStore.resendVerificationEmail(email);
 	}
 </script>
 
+<svelte:head>
+	<title>{translations.title} | Clock</title>
+</svelte:head>
+
 <LoginPage
 	appName="Clock"
-	appLogo=""
-	{loading}
-	{error}
-	onSubmit={handleLogin}
-	registerHref="/register"
-	forgotPasswordHref="/forgot-password"
+	logo={ClockLogo}
+	primaryColor="#f59e0b"
+	onSignIn={handleSignIn}
+	onResendVerification={handleResendVerification}
+	{goto}
+	enableGoogle={false}
+	enableApple={false}
+	successRedirect={redirectTo}
+	registerPath="/register"
+	forgotPasswordPath="/forgot-password"
+	lightBackground="#fffbeb"
+	darkBackground="#1c1917"
+	{translations}
 	{verified}
 	{initialEmail}
 />
diff --git a/apps/manacore/apps/web/src/routes/(auth)/register/+page.svelte b/apps/manacore/apps/web/src/routes/(auth)/register/+page.svelte
index 555be440d..8c7e2e6fa 100644
--- a/apps/manacore/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(auth)/register/+page.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { locale } from 'svelte-i18n';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
+	import { getRegisterTranslations } from '@manacore/shared-i18n';
 	import { ManaCoreLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get referral code from URL if present
 	let initialReferralCode = $derived($page.url.searchParams.get('ref') || '');
 
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
+
 	async function handleSignUp(email: string, password: string, referralCode?: string) {
 		return authStore.signUp(email, password, referralCode);
 	}
@@ -22,6 +28,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>{translations.title} | ManaCore</title>
+</svelte:head>
+
 <RegisterPage
 	appName="ManaCore"
 	logo={ManaCoreLogo}
@@ -36,6 +46,7 @@
 	loginPath="/login"
 	lightBackground="#f3f4f6"
 	darkBackground="#121212"
+	{translations}
 >
 	{#snippet appSlider()}
 		<AppSlider />
diff --git a/apps/manadeck/apps/web/src/routes/(auth)/register/+page.svelte b/apps/manadeck/apps/web/src/routes/(auth)/register/+page.svelte
index fb9962399..955995698 100644
--- a/apps/manadeck/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/manadeck/apps/web/src/routes/(auth)/register/+page.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
+	import { getRegisterTranslations } from '@manacore/shared-i18n';
 	import { ManaDeckLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);
@@ -14,6 +20,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>{translations.title} | ManaDeck</title>
+</svelte:head>
+
 <RegisterPage
 	appName="ManaDeck"
 	logo={ManaDeckLogo}
@@ -25,6 +35,7 @@
 	loginPath="/login"
 	lightBackground="#faf5ff"
 	darkBackground="#1a1625"
+	{translations}
 >
 	{#snippet appSlider()}
 		<AppSlider />
diff --git a/apps/nutriphi/apps/web/src/routes/(auth)/forgot-password/+page.svelte b/apps/nutriphi/apps/web/src/routes/(auth)/forgot-password/+page.svelte
index 37e2ac48b..08ce2703c 100644
--- a/apps/nutriphi/apps/web/src/routes/(auth)/forgot-password/+page.svelte
+++ b/apps/nutriphi/apps/web/src/routes/(auth)/forgot-password/+page.svelte
@@ -2,10 +2,13 @@
 	import { goto } from '$app/navigation';
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { NutriPhiLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
-	const translations = $derived(getForgotPasswordTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getForgotPasswordTranslations($locale || 'de'));
 
 	async function handleForgotPassword(email: string) {
 		return authStore.resetPassword(email);
diff --git a/apps/nutriphi/apps/web/src/routes/(auth)/login/+page.svelte b/apps/nutriphi/apps/web/src/routes/(auth)/login/+page.svelte
index fa53589fc..6fe3d117e 100644
--- a/apps/nutriphi/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/nutriphi/apps/web/src/routes/(auth)/login/+page.svelte
@@ -4,8 +4,10 @@
 	import { browser } from '$app/environment';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { NutriPhiLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get redirect URL from query params or sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -23,8 +25,8 @@
 		return '/';
 	});
 
-	// German translations (NutriPhi is German-focused)
-	const translations = $derived(getLoginTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
 
 	// Read verification status from query params (set after email verification)
 	const verified = $derived($page.url.searchParams.get('verified') === 'true');
diff --git a/apps/nutriphi/apps/web/src/routes/(auth)/register/+page.svelte b/apps/nutriphi/apps/web/src/routes/(auth)/register/+page.svelte
index 6e65bb07d..84c654b6e 100644
--- a/apps/nutriphi/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/nutriphi/apps/web/src/routes/(auth)/register/+page.svelte
@@ -3,8 +3,10 @@
 	import { browser } from '$app/environment';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { NutriPhiLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get redirect URL from sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -18,7 +20,8 @@
 		return '/';
 	});
 
-	const translations = $derived(getRegisterTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);
diff --git a/apps/picture/apps/web/src/routes/auth/forgot-password/+page.svelte b/apps/picture/apps/web/src/routes/auth/forgot-password/+page.svelte
index ed3cf026c..8f43ec49e 100644
--- a/apps/picture/apps/web/src/routes/auth/forgot-password/+page.svelte
+++ b/apps/picture/apps/web/src/routes/auth/forgot-password/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
 	import PictureLogo from '$lib/components/branding/PictureLogo.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
-	// Default to German
-	const translations = getForgotPasswordTranslations('de');
+	// Get translations based on current locale
+	const translations = $derived(getForgotPasswordTranslations($locale || 'de'));
 
 	async function handleForgotPassword(email: string) {
 		return authStore.resetPassword(email);
@@ -14,7 +16,7 @@
 </script>
 
 <svelte:head>
-	<title>Passwort vergessen - Picture</title>
+	<title>{translations.titleForm} | Picture</title>
 </svelte:head>
 
 <ForgotPasswordPage
diff --git a/apps/picture/apps/web/src/routes/auth/signup/+page.svelte b/apps/picture/apps/web/src/routes/auth/signup/+page.svelte
index 553f8142a..9f6586d48 100644
--- a/apps/picture/apps/web/src/routes/auth/signup/+page.svelte
+++ b/apps/picture/apps/web/src/routes/auth/signup/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
 	import PictureLogo from '$lib/components/branding/PictureLogo.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
-	// Default to German
-	const translations = getRegisterTranslations('de');
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);
@@ -18,7 +20,7 @@
 </script>
 
 <svelte:head>
-	<title>Registrieren - Picture</title>
+	<title>{translations.title} | Picture</title>
 </svelte:head>
 
 <RegisterPage
diff --git a/apps/planta/apps/web/src/routes/(auth)/login/+page.svelte b/apps/planta/apps/web/src/routes/(auth)/login/+page.svelte
index d859eedc9..485d6c8d2 100644
--- a/apps/planta/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/planta/apps/web/src/routes/(auth)/login/+page.svelte
@@ -4,8 +4,10 @@
 	import { browser } from '$app/environment';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { PlantaLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get redirect URL from query params or sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -23,8 +25,8 @@
 		return '/dashboard';
 	});
 
-	// German translations (Planta is German-focused)
-	const translations = $derived(getLoginTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
 
 	// Read verification status from query params (set after email verification)
 	const verified = $derived($page.url.searchParams.get('verified') === 'true');
diff --git a/apps/questions/apps/web/src/routes/(auth)/forgot-password/+page.svelte b/apps/questions/apps/web/src/routes/(auth)/forgot-password/+page.svelte
index 58d6e3a57..189c0a2e4 100644
--- a/apps/questions/apps/web/src/routes/(auth)/forgot-password/+page.svelte
+++ b/apps/questions/apps/web/src/routes/(auth)/forgot-password/+page.svelte
@@ -2,11 +2,13 @@
 	import { goto } from '$app/navigation';
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { QuestionsLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
-	// Get translations (default to English)
-	const translations = $derived(getForgotPasswordTranslations('en'));
+	// Get translations based on current locale
+	const translations = $derived(getForgotPasswordTranslations($locale || 'en'));
 
 	async function handleForgotPassword(email: string) {
 		return authStore.resetPassword(email);
diff --git a/apps/questions/apps/web/src/routes/(auth)/login/+page.svelte b/apps/questions/apps/web/src/routes/(auth)/login/+page.svelte
index 1bb3271bf..1fac51690 100644
--- a/apps/questions/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/questions/apps/web/src/routes/(auth)/login/+page.svelte
@@ -4,9 +4,11 @@
 	import { browser } from '$app/environment';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { QuestionsLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { apiClient } from '$lib/api/client';
+	import '$lib/i18n';
 
 	// Get redirect URL from query params or sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -24,8 +26,8 @@
 		return '/';
 	});
 
-	// Get translations (default to English)
-	const translations = $derived(getLoginTranslations('en'));
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'en'));
 
 	// Read verification status from query params
 	const verified = $derived($page.url.searchParams.get('verified') === 'true');
diff --git a/apps/questions/apps/web/src/routes/(auth)/register/+page.svelte b/apps/questions/apps/web/src/routes/(auth)/register/+page.svelte
index a7b0d6ed4..5895b1e06 100644
--- a/apps/questions/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/questions/apps/web/src/routes/(auth)/register/+page.svelte
@@ -3,8 +3,10 @@
 	import { browser } from '$app/environment';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { QuestionsLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get redirect URL from sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -18,8 +20,8 @@
 		return '/';
 	});
 
-	// Get translations (default to English)
-	const translations = $derived(getRegisterTranslations('en'));
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'en'));
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);
diff --git a/apps/skilltree/apps/web/src/routes/(auth)/forgot-password/+page.svelte b/apps/skilltree/apps/web/src/routes/(auth)/forgot-password/+page.svelte
index 890659b5c..c7d31b6e2 100644
--- a/apps/skilltree/apps/web/src/routes/(auth)/forgot-password/+page.svelte
+++ b/apps/skilltree/apps/web/src/routes/(auth)/forgot-password/+page.svelte
@@ -2,11 +2,13 @@
 	import { goto } from '$app/navigation';
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { SkillTreeLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
-	// Get translations (default to German for this app)
-	const translations = $derived(getForgotPasswordTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getForgotPasswordTranslations($locale || 'de'));
 
 	async function handleForgotPassword(email: string) {
 		return authStore.resetPassword(email);
diff --git a/apps/skilltree/apps/web/src/routes/(auth)/login/+page.svelte b/apps/skilltree/apps/web/src/routes/(auth)/login/+page.svelte
index 40cf255fa..93eb56697 100644
--- a/apps/skilltree/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/skilltree/apps/web/src/routes/(auth)/login/+page.svelte
@@ -4,9 +4,11 @@
 	import { browser } from '$app/environment';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { SkillTreeLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { apiClient } from '$lib/api/client';
+	import '$lib/i18n';
 
 	// Get redirect URL from query params or sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -24,8 +26,8 @@
 		return '/';
 	});
 
-	// Get translations (default to German for this app)
-	const translations = $derived(getLoginTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
 
 	// Read verification status from query params
 	const verified = $derived($page.url.searchParams.get('verified') === 'true');
diff --git a/apps/skilltree/apps/web/src/routes/(auth)/register/+page.svelte b/apps/skilltree/apps/web/src/routes/(auth)/register/+page.svelte
index c17e71aaf..f557745bf 100644
--- a/apps/skilltree/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/skilltree/apps/web/src/routes/(auth)/register/+page.svelte
@@ -3,8 +3,10 @@
 	import { browser } from '$app/environment';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
+	import { locale } from 'svelte-i18n';
 	import { SkillTreeLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
 
 	// Get redirect URL from sessionStorage
 	const redirectTo = $derived.by(() => {
@@ -18,8 +20,8 @@
 		return '/';
 	});
 
-	// Get translations (default to German for this app)
-	const translations = $derived(getRegisterTranslations('de'));
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);