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,
+						expires: event.locals.session.data.expires
-						lang: locale
 					};
 
 					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);
+export const { t, locales, locale, loadTranslations } = new i18n(config);
-loading.subscribe(($loading) => $loading && console.log('Loading translations...'));

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,34 +463,31 @@
 						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
 					</svg>
 				</a>
-
+				<a
-				{#if $session.teamId === '0'}
+					sveltekit:prefetch
-					<a
+					href="/settings"
-						sveltekit:prefetch
+					class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
-						href="/settings"
+					class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
-						class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
+					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-						class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
+					data-tooltip="Settings"
-						class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
+				>
-						data-tooltip="Settings"
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
 					>
-						<svg
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							xmlns="http://www.w3.org/2000/svg"
+						<path
-							class="h-8 w-8"
+							d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
-							viewBox="0 0 24 24"
+						/>
-							stroke-width="1.5"
+						<circle cx="12" cy="12" r="3" />
-							stroke="currentColor"
+					</svg>
-							fill="none"
+				</a>
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<path
-								d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
-							/>
-							<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}