fix: locales

src/hooks.ts

@@ -48,8 +48,7 @@ export const handle = handleSession(
 						teamId,
 						permission,
 						isAdmin: permission === 'admin' || permission === 'owner',
-						expires: event.locals.session.data.expires,
-						lang: locale
+						expires: event.locals.session.data.expires
 					};
 
 					if (JSON.stringify(event.locals.session.data) !== JSON.stringify(newSession)) {
@@ -105,18 +104,8 @@ 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,
+		lang: locals.cookies.lang,
 		version,
 		whiteLabeled,
 		whiteLabelDetails,

src/lib/locales/en.json

@@ -294,6 +294,7 @@
 		"no_service": "No services found"
 	},
 	"setting": {
+		"change_language": "Change Language",
 		"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
 		"domain_removed": "Domain removed",
 		"ssl_explainer": "If you specify <span class='text-yellow-500 font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.",

src/lib/translations.ts

@@ -22,5 +22,4 @@ export const config = {
 	]
 };
 
-export const { t, loading, locales, locale, loadTranslations } = new i18n(config);
-loading.subscribe(($loading) => $loading && console.log('Loading translations...'));
+export const { t, locales, locale, loadTranslations } = new i18n(config);

src/routes/__layout.svelte

@@ -4,8 +4,10 @@
 	import { locale, loadTranslations } from '$lib/translations';
 	export const load: Load = async ({ fetch, url, session }) => {
 		const { pathname } = url;
+
 		const defaultLocale = 'en';
-		const initLocale = locale.get() || defaultLocale;
+		const sessionLocale = session.lang;
+		const initLocale = sessionLocale || locale.get() || defaultLocale;
 		await loadTranslations(initLocale, pathname);
 
 		if (!session.userId && !publicPaths.includes(url.pathname)) {
@@ -44,7 +46,7 @@
 	import { asyncSleep } from '$lib/components/common';
 	import { del, get, post } from '$lib/api';
 	import { browser, dev } from '$app/env';
-
+	import Select from 'svelte-select';
 	let isUpdateAvailable = false;
 
 	let updateStatus = {
@@ -461,8 +463,6 @@
 						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
 					</svg>
 				</a>
-
-				{#if $session.teamId === '0'}
 				<a
 					sveltekit:prefetch
 					href="/settings"
@@ -488,7 +488,6 @@
 						<circle cx="12" cy="12" r="3" />
 					</svg>
 				</a>
-				{/if}
 
 				<div
 					class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"

src/routes/iam/index.svelte

@@ -85,6 +85,21 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
+	<a href="/new/team" class="add-icon cursor-pointer bg-fuchsia-600 hover:bg-fuchsia-500">
+		<svg
+			class="w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
+		>
+	</a>
 </div>
 
 {#if invitations.length > 0}

src/routes/new/team/index.svelte

@@ -34,7 +34,7 @@
 		if (name) {
 			try {
 				const { id } = await post('/new/team.json', { name });
-				return await goto(`/teams/${id}`);
+				return await goto(`/iam/team/${id}`);
 			} catch ({ error }) {
 				return errorNotification(error);
 			}
@@ -50,7 +50,7 @@
 	<form on:submit|preventDefault={handleSubmit}>
 		<div class="flex flex-col items-center space-y-4">
 			<input name="name" placeholder="Team name" required bind:this={autofocus} bind:value={name} />
-			<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button>
+			<button type="submit" class="bg-fuchsia-600 hover:bg-fuchsia-500">Save</button>
 		</div>
 	</form>
 </div>

src/routes/settings/_Language.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { t } from '$lib/translations';
+	import Cookies from 'js-cookie';
+	import langs from '$lib/lang.json';
+	function setLocale(locale) {
+		Cookies.set('lang', locale);
+		return window.location.reload();
+	}
+</script>
+
+<div class="grid grid-cols-2 items-start pb-4">
+	<div class="flex-col">
+		<div class="text-base font-bold text-stone-100">
+			{$t('setting.change_language')}
+		</div>
+	</div>
+	<div class="items-center justify-start space-x-2 text-left">
+		{#each Object.entries(langs) as [lang, name]}
+			<button on:click={() => setLocale(lang)}>Change to {name}</button>
+		{/each}
+	</div>
+</div>

src/routes/settings/index.json.ts

@@ -8,7 +8,7 @@ import { promises as dns } from 'dns';
 export const get: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
 	if (status === 401) return { status, body };
-	if (teamId !== '0') return { status: 401, body: { message: 'You are not an admin.' } };
+	if (teamId !== '0') return { status: 200, body: { settings: {} } };
 	try {
 		const settings = await listSettings();
 		return {

src/routes/settings/index.svelte

@@ -28,6 +28,8 @@
 	import { session } from '$app/stores';
 
 	export let settings;
+	import Cookies from 'js-cookie';
+	import langs from '$lib/lang.json';
 	import Setting from '$lib/components/Setting.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { errorNotification } from '$lib/form';
@@ -38,6 +40,8 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 
+	import Language from './_Language.svelte';
+
 	let isRegistrationEnabled = settings.isRegistrationEnabled;
 	let dualCerts = settings.dualCerts;
 
@@ -125,6 +129,7 @@
 				{/if}
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
+				<Language />
 				<div class="grid grid-cols-2 items-start">
 					<div class="flex-col">
 						<div class="pt-2 text-base font-bold text-stone-100">
@@ -226,4 +231,8 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<div class="mx-auto max-w-4xl px-6">
+		<Language />
+	</div>
 {/if}