Begin translation and finish i18n system

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
-	"i18n-ally.localesPaths": ["static/locales"],
+	"i18n-ally.localesPaths": ["src/lib/locales"],
 	"i18n-ally.keystyle": "nested",
 	"i18n-ally.extract.ignoredByFiles": {
 		"src\\routes\\__layout.svelte": ["Coolify", "coolLabs logo"]
 	},
-	"i18n-ally.sourceLanguage": "fr"
+	"i18n-ally.sourceLanguage": "en"
 }

src/app.d.ts

@@ -23,6 +23,7 @@ interface SessionData {
 	userId?: string | null;
 	teamId?: string | null;
 	permission?: string;
+	lang?: string;
 	isAdmin?: boolean;
 	expires?: string | null;
 	gitlabToken?: string | null;

src/hooks.ts

@@ -18,27 +18,22 @@ export const handle = handleSession(
 		let response;
 
 		const { url, request } = event;
-		const { pathname } = url;
 
 		// Get defined locales
 		const supportedLocales = locales.get();
 		let locale;
 
-		if (event.locals.cookies) {
-			locale = supportedLocales.find(
-				(l) => `${l}`.toLowerCase() === `${event.locals.cookies['lang']}`.toLowerCase()
-			);
-		}
-
-		if (!locale) {
+		if (event.locals.cookies['lang']) {
+			locale = event.locals.cookies['lang'];
+		} else if (!locale) {
 			locale = `${`${request.headers.get('accept-language')}`.match(
 				/[a-zA-Z]+?(?=-|_|,|;)/
 			)}`.toLowerCase();
-
-			// Set default locale if user preferred locale does not match
-			if (!supportedLocales.includes(locale)) locale = 'en';
 		}
 
+		// Set default locale if user preferred locale does not match
+		if (!supportedLocales.includes(locale)) locale = 'en';
+
 		try {
 			if (event.locals.cookies) {
 				if (event.locals.cookies['kit.session']) {
@@ -105,7 +100,18 @@ export const handle = handleSession(
 );
 
 export const getSession: GetSession = function ({ locals }) {
+	// Get defined locales
+	const supportedLocales = locales.get();
+	let locale;
+
+	if (locals.cookies) {
+		locale = supportedLocales.find(
+			(l) => `${l}`.toLowerCase() === `${locals.cookies['lang']}`.toLowerCase()
+		);
+	}
+
 	return {
+		lang: locale,
 		version,
 		...locals.session.data
 	};

src/lib/locales/en.json

@@ -0,0 +1,40 @@
+{
+	"layout": {
+		"update_done": "Update completed.",
+		"wait_new_version_startup": "Waiting for the new version to start...",
+		"new_version": "New version reachable. Reloading...",
+		"switch_to_a_different_team": "Switch to a different team...",
+		"update_available": "Update available"
+	},
+	"error": {
+		"you_can_find_your_way_back": "You can find your way back",
+		"here": "here"
+	},
+	"index": {
+		"dashboard": "Dashboard",
+		"applications": "Applications",
+		"destinations": "Destinations",
+		"git_sources": "Git Sources",
+		"databases": "Databases",
+		"services": "Services",
+		"teams": "Teams"
+	},
+	"login": {
+		"already_logged_in": "Already logged in...",
+		"authenticating": "Authenticating...",
+		"login": "Login"
+	},
+	"forms": {
+		"password": "Password",
+		"email": "Email",
+		"passwords_not_match": "Passwords do not match.",
+		"password_again": "Password again"
+	},
+	"register": {
+		"register": "Register",
+		"first_user": "You are registering the first user. It will be the administrator of your Coolify instance."
+	},
+	"reset": {
+		"reset_password": "Reset password"
+	}
+}

src/lib/locales/fr.json

@@ -0,0 +1,40 @@
+{
+	"index": {
+		"dashboard": "Tableau de bord",
+		"applications": "Applications",
+		"databases": "Bases de données",
+		"destinations": "Destinations",
+		"git_sources": "Sources Git",
+		"services": "Prestations de service",
+		"teams": "Équipes"
+	},
+	"error": {
+		"here": "ici",
+		"you_can_find_your_way_back": "Tu peux retrouver ton chemin"
+	},
+	"forms": {
+		"email": "E-mail",
+		"password": "Mot de passe",
+		"password_again": "Retaper le mot de passe",
+		"passwords_not_match": "Les mots de passe ne correspondent pas."
+	},
+	"layout": {
+		"new_version": "Nouvelle version disponible. \nActualisation...",
+		"switch_to_a_different_team": "Changer d'équipe...",
+		"update_available": "Mise à jour disponible",
+		"update_done": "Mise à jour terminée.",
+		"wait_new_version_startup": "Attente du lancement de la nouvelle version..."
+	},
+	"login": {
+		"already_logged_in": "Déjà connecté...",
+		"authenticating": "Authentification...",
+		"login": "Connexion"
+	},
+	"register": {
+		"first_user": "Vous enregistrez le premier utilisateur. \nCe sera l'administrateur de votre instance Coolify.",
+		"register": "S'inscrire"
+	},
+	"reset": {
+		"reset_password": "Réinitialiser le mot de passe"
+	}
+}

src/lib/translations.ts

@@ -3,7 +3,6 @@ import lang from './lang.json';
 
 /** @type {import('sveltekit-i18n').Config} */
 const config = {
-	defaultLocale: 'en',
 	fallbackLocale: 'en',
 	translations: {
 		en: { lang },
@@ -13,16 +12,16 @@ const config = {
 		{
 			locale: 'en',
 			key: '',
-			loader: async () => (await import('../../static/locales/en.json')).default
+			loader: async () => (await import('./locales/en.json')).default
 		},
 		{
 			locale: 'fr',
 			key: '',
-			loader: async () => (await import('../../static/locales/fr.json')).default
+			loader: async () => (await import('./locales/fr.json')).default
 		}
 	]
 };
 
-export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
+export const { t, loading, locales, locale, loadTranslations } = new i18n(config);
 
-loading.subscribe(($loading) => $loading && console.log('Loading translations...'));
+loading.subscribe(($loading) => $loading);

src/routes/__layout.svelte

@@ -4,6 +4,11 @@
 	import { locale, loadTranslations } from '$lib/translations';
 
 	export const load: Load = async ({ fetch, url, session }) => {
+		const { pathname } = url;
+		const initLocale = locale.get() || session.lang || 'en';
+
+		await loadTranslations(initLocale, pathname);
+
 		if (!session.userId && !publicPaths.includes(url.pathname)) {
 			return {
 				status: 302,
@@ -16,12 +21,6 @@
 		const endpoint = `/teams.json`;
 		const res = await fetch(endpoint);
 
-		const { pathname } = url;
-		const defaultLocale = session.lang;
-		const initLocale = locale.get() || defaultLocale;
-
-		await loadTranslations(initLocale, pathname);
-
 		if (res.ok) {
 			return {
 				props: {

src/routes/index.svelte

@@ -46,7 +46,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-green-500 no-underline transition duration-150 hover:bg-green-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Applications
+							{$t('index.applications')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{applicationsCount}
@@ -58,7 +58,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-sky-500 no-underline transition duration-150 hover:bg-sky-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Destinations
+							{$t('index.destinations')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{destinationsCount}
@@ -70,7 +70,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-orange-500 no-underline transition duration-150 hover:bg-orange-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Git Sources
+							{$t('index.git_sources')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{sourcesCount}
@@ -81,7 +81,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-purple-500 no-underline transition duration-150 hover:bg-purple-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Databases</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.databases')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{databasesCount}</dd>
 					</a>
 					<a
@@ -89,7 +91,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-pink-500 no-underline transition duration-150 hover:bg-pink-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Services</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.services')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{servicesCount}</dd>
 					</a>
 
@@ -98,7 +102,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Teams</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.teams')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{teamsCount}
 						</dd>

src/routes/login/index.svelte

@@ -4,6 +4,7 @@
 	import { session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 	let loading = false;
 	let emailEl;
@@ -37,9 +38,13 @@
 	}
 </script>
 
+<svelt:head>
+	<title>{$t('login.login')}</title>
+</svelt:head>
+
 <div class="flex h-screen flex-col items-center justify-center">
 	{#if $session.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
+		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
 	{:else}
 		<div class="flex justify-center px-4">
 			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -48,7 +53,7 @@
 				<input
 					type="email"
 					name="email"
-					placeholder="Email"
+					placeholder={$t('forms.email')}
 					autocomplete="off"
 					required
 					bind:this={emailEl}
@@ -57,7 +62,7 @@
 				<input
 					type="password"
 					name="password"
-					placeholder="Password"
+					placeholder={$t('index.password')}
 					bind:value={password}
 					required
 				/>
@@ -69,16 +74,18 @@
 						class="hover:opacity-90 text-white"
 						class:bg-transparent={loading}
 						class:text-stone-600={loading}
-						class:bg-coollabs={!loading}>{loading ? 'Authenticating...' : 'Login'}</button
+						class:bg-coollabs={!loading}
+						>{loading ? $t('login.authenticating') : $t('login.login')}</button
 					>
 
 					<button
 						on:click|preventDefault={() => goto('/register')}
-						class="bg-transparent hover:bg-coolgray-300	text-white ">Register</button
+						class="bg-transparent hover:bg-coolgray-300	text-white "
+						>{$t('register.register')}</button
 					>
 					<button
 						class="bg-transparent hover:bg-coolgray-300"
-						on:click|preventDefault={() => goto('/reset')}>Reset password</button
+						on:click|preventDefault={() => goto('/reset')}>{$t('reset.reset_password')}</button
 					>
 				</div>
 			</form>

src/routes/register/index.svelte

@@ -6,6 +6,7 @@
 	import { session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 
 	let loading = false;
@@ -20,7 +21,7 @@
 	});
 	async function handleSubmit() {
 		if (password !== passwordCheck) {
-			return errorNotification('Passwords do not match.');
+			return errorNotification($t('forms.passwords_not_match'));
 		}
 		loading = true;
 		try {
@@ -57,7 +58,7 @@
 </div>
 <div class="flex h-screen flex-col items-center justify-center">
 	{#if $session.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
+		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
 	{:else}
 		<div class="flex justify-center px-4">
 			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -66,7 +67,7 @@
 				<input
 					type="email"
 					name="email"
-					placeholder="Email"
+					placeholder={$t('forms.email')}
 					autocomplete="off"
 					required
 					bind:this={emailEl}
@@ -75,28 +76,28 @@
 				<input
 					type="password"
 					name="password"
-					placeholder="Password"
+					placeholder={$t('forms.password')}
 					bind:value={password}
 					required
 				/>
 				<input
 					type="password"
 					name="passwordCheck"
-					placeholder="Password again"
+					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
 				/>
 
 				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
 					<button type="submit" class="hover:bg-coollabs-100 text-white bg-coollabs"
-						>Register</button
+						>{$t('register.register')}</button
 					>
 				</div>
 			</form>
 		</div>
 		{#if userCount === 0}
 			<div class="pt-5">
-				You are registering the first user. It will be the administrator of your Coolify instance.
+				{$t('register.first_user')}
 			</div>
 		{/if}
 	{/if}

static/locales/en.json

@@ -1,16 +0,0 @@
-{
-	"layout": {
-		"update_done": "Update completed.",
-		"wait_new_version_startup": "Waiting for the new version to start...",
-		"new_version": "New version reachable. Reloading...",
-		"switch_to_a_different_team": "Switch to a different team...",
-		"update_available": "Update available"
-	},
-	"error": {
-		"you_can_find_your_way_back": "You can find your way back",
-		"here": "here"
-	},
-	"index": {
-		"dashboard": "Dashboard"
-	}
-}

static/locales/fr.json

@@ -1,5 +0,0 @@
-{
-	"index": {
-		"dashboard": "Tableau de bord"
-	}
-}

svelte.config.js

@@ -12,12 +12,6 @@ const config = {
 		vite: {
 			optimizeDeps: {
 				exclude: ['svelte-kit-cookie-session']
-			},
-			server: {
-				fs: {
-					// Allow serving files from one level up to the project root
-					allow: ['../locales']
-				}
 			}
 		}
 	}