Merge branch 'restray_i18n' of https://github.com/restray/coolify into restray-restray_i18n

src/routes/services/[id]/_Services/_Ghost.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let readOnly;
 	export let service;
 </script>
@@ -8,19 +9,19 @@
 	<div class="title">Ghost</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="email">Default Email Address</label>
+	<label for="email">{$t('forms.default_email_address')}</label>
 	<input
 		name="email"
 		id="email"
 		disabled
 		readonly
-		placeholder="Email address"
+		placeholder={$t('forms.email')}
 		value={service.ghost.defaultEmail}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultPassword">Default Password</label>
+	<label for="defaultPassword">{$t('forms.default_password')}</label>
 	<CopyPasswordField
 		id="defaultPassword"
 		isPasswordField
@@ -34,7 +35,7 @@
 	<div class="title">MariaDB</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbUser">Username</label>
+	<label for="mariadbUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="mariadbUser"
 		id="mariadbUser"
@@ -44,7 +45,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPassword">Password</label>
+	<label for="mariadbPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mariadbPassword"
 		isPasswordField
@@ -55,7 +56,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbDatabase">Database</label>
+	<label for="mariadbDatabase">{$t('index.database')}</label>
 	<input
 		name="mariadbDatabase"
 		id="mariadbDatabase"
@@ -63,11 +64,11 @@
 		readonly={readOnly}
 		disabled={readOnly}
 		bind:value={service.ghost.mariadbDatabase}
-		placeholder="eg: ghost_db"
+		placeholder="{$t('forms.eg')}: ghost_db"
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUser">Root DB User</label>
+	<label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
 	<CopyPasswordField
 		id="mariadbRootUser"
 		isPasswordField
@@ -78,7 +79,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUserPassword">Root DB Password</label>
+	<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
 	<CopyPasswordField
 		id="mariadbRootUserPassword"
 		isPasswordField

src/routes/services/[id]/_Services/_MeiliSearch.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let service;
 </script>
 
@@ -7,7 +8,7 @@
 	<div class="title">MeiliSearch</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="masterKey">Admin API key</label>
+	<label for="masterKey">{$t('forms.admin_api_key')}</label>
 	<CopyPasswordField
 		id="masterKey"
 		isPasswordField

src/routes/services/[id]/_Services/_MinIO.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 
 	export let service;
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MinIO Server</div>
+	<div class="title">MinIO</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUser">Root User</label>
+	<label for="rootUser">{$t('forms.root_user')}</label>
 	<input
 		name="rootUser"
 		id="rootUser"
-		placeholder="User to login"
+		placeholder={$t('forms.username')}
 		value={service.minio.rootUser}
 		disabled
 		readonly
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUserPassword">Root's Password</label>
+	<label for="rootUserPassword">{$t('forms.roots_password')}</label>
 	<CopyPasswordField
 		id="rootUserPassword"
 		isPasswordField
@@ -30,13 +31,13 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="publicPort">API Port</label>
+	<label for="publicPort">{$t('forms.api_port')}</label>
 	<input
 		name="publicPort"
 		id="publicPort"
 		value={service.minio.publicPort}
 		disabled
 		readonly
-		placeholder="Generated automatically after start"
+		placeholder={$t('forms.generated_automatically_after_start')}
 	/>
 </div>

src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let service;
 	export let readOnly;
 </script>
@@ -8,31 +9,31 @@
 	<div class="title">Plausible Analytics</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="email">Email Address</label>
+	<label for="email">{$t('forms.email')}</label>
 	<input
 		name="email"
 		id="email"
 		disabled={readOnly}
 		readonly={readOnly}
-		placeholder="Email address"
+		placeholder={$t('forms.email')}
 		bind:value={service.plausibleAnalytics.email}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="username">Username</label>
+	<label for="username">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="username"
 		id="username"
 		disabled={readOnly}
 		readonly={readOnly}
-		placeholder="User to login"
+		placeholder={$t('forms.username')}
 		bind:value={service.plausibleAnalytics.username}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="password">Password</label>
+	<label for="password">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="password"
 		isPasswordField
@@ -46,7 +47,7 @@
 	<div class="title">PostgreSQL</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">Username</label>
+	<label for="postgresqlUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="postgresqlUser"
 		id="postgresqlUser"
@@ -56,7 +57,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">Password</label>
+	<label for="postgresqlPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="postgresqlPassword"
 		isPasswordField
@@ -67,7 +68,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">Database</label>
+	<label for="postgresqlDatabase">{$t('index.database')}</label>
 	<CopyPasswordField
 		name="postgresqlDatabase"
 		id="postgresqlDatabase"
@@ -80,7 +81,7 @@
 	<label for="postgresqlPublicPort">Public Port</label>
 	<div class="col-span-2 ">
 		<CopyPasswordField
-			placeholder="Generated automatically after start"
+			placeholder="{ $t('forms.generated_automatically_after_start') }"
 			readonly
 			disabled
 			id="postgresqlPublicPort"

src/routes/services/[id]/_Services/_Services.svelte

@@ -10,6 +10,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { toast } from '@zerodevx/svelte-toast';
 	import Ghost from './_Ghost.svelte';
 	import MeiliSearch from './_MeiliSearch.svelte';
@@ -40,7 +41,7 @@
 		loadingVerification = true;
 		try {
 			await post(`/services/${id}/${service.type}/activate.json`, { id: service.id });
-			toast.push('All email verified. You can login now.');
+			toast.push(t.get('services.all_email_verified'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		} finally {
@@ -53,7 +54,7 @@
 				dualCerts = !dualCerts;
 			}
 			await post(`/services/${id}/settings.json`, { dualCerts });
-			return toast.push('Settings saved.');
+			return toast.push(t.get('application.settings_saved'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -63,25 +64,27 @@
 <div class="mx-auto max-w-4xl px-6 pb-12">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
 		<div class="flex space-x-1 pb-5 font-bold">
-			<div class="title">General</div>
+			<div class="title">{$t('general')}</div>
 			{#if $session.isAdmin}
 				<button
 					type="submit"
 					class:bg-pink-600={!loading}
 					class:hover:bg-pink-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
 				>
 			{/if}
 			{#if service.type === 'plausibleanalytics' && isRunning}
 				<button on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification}
-					>{loadingVerification ? 'Verifying' : 'Verify emails without SMTP'}</button
+					>{loadingVerification
+						? $t('forms.verifying')
+						: $t('forms.verify_emails_without_smtp')}</button
 				>
 			{/if}
 		</div>
 
 		<div class="grid grid-flow-row gap-2">
 			<div class="mt-2 grid grid-cols-2 items-center px-10">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<div>
 					<input
 						readonly={!$session.isAdmin}
@@ -109,7 +112,9 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100"
+					>{$t('application.destination')}</label
+				>
 				<div>
 					{#if service.destinationDockerId}
 						<div class="no-underline">
@@ -125,10 +130,10 @@
 			</div>
 			<div class="grid grid-cols-2 px-10">
 				<div class="flex-col ">
-					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">URL (FQDN)</label>
-					<Explainer
-						text="If you specify <span class='text-pink-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-pink-600 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the url, you must first stop the application."
-					/>
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('application.url_fqdn')}</label
+					>
+					<Explainer text={$t('application.https_explainer')} />
 				</div>
 
 				<CopyPasswordField
@@ -145,10 +150,10 @@
 			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
 					disabled={isRunning}
-					dataTooltip="Must be stopped to modify."
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
 					bind:setting={dualCerts}
-					title="Generate SSL for www and non-www?"
-					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
+					title={$t('application.ssl_www_and_non_www')}
+					description={$t('services.generate_www_non_www_ssl')}
 					on:click={() => !isRunning && changeSettings('dualCerts')}
 				/>
 			</div>

src/routes/services/[id]/_Services/_VSCodeServer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 
 	export let service;
 </script>
@@ -8,7 +9,7 @@
 	<div class="title">VSCode Server</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="password">Password</label>
+	<label for="password">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="password"
 		isPasswordField

src/routes/services/[id]/_Services/_Wordpress.svelte

@@ -6,6 +6,7 @@
 	import { errorNotification } from '$lib/form';
 	import { browser } from '$app/env';
 	import { getDomain } from '$lib/components/common';
+	import { t } from '$lib/translations';
 
 	export let service;
 	export let isRunning;
@@ -60,7 +61,7 @@
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="extraConfig">Extra Config</label>
+	<label for="extraConfig">{$t('forms.extra_config')}</label>
 	<textarea
 		bind:value={service.wordpress.extraConfig}
 		disabled={isRunning}
@@ -70,7 +71,7 @@
 		name="extraConfig"
 		id="extraConfig"
 		placeholder={!isRunning
-			? `eg:
+			? `${$t('forms.eg')}:
 
 define('WP_ALLOW_MULTISITE', true);
 define('MULTISITE', true);
@@ -106,7 +107,7 @@ define('SUBDOMAIN_INSTALL', false);`
 	<div class="title">MySQL</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlDatabase">Database</label>
+	<label for="mysqlDatabase">{$t('index.database')}</label>
 	<input
 		name="mysqlDatabase"
 		id="mysqlDatabase"
@@ -114,22 +115,22 @@ define('SUBDOMAIN_INSTALL', false);`
 		readonly={readOnly}
 		disabled={readOnly}
 		bind:value={service.wordpress.mysqlDatabase}
-		placeholder="eg: wordpress_db"
+		placeholder="{$t('forms.eg')}: wordpress_db"
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlRootUser">Root User</label>
+	<label for="mysqlRootUser">{$t('forms.root_user')}</label>
 	<input
 		name="mysqlRootUser"
 		id="mysqlRootUser"
-		placeholder="MySQL Root User"
+		placeholder="MySQL {$t('forms.root_user')}"
 		value={service.wordpress.mysqlRootUser}
 		disabled
 		readonly
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlRootUserPassword">Root's Password</label>
+	<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
 	<CopyPasswordField
 		id="mysqlRootUserPassword"
 		isPasswordField
@@ -140,11 +141,11 @@ define('SUBDOMAIN_INSTALL', false);`
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlUser">User</label>
+	<label for="mysqlUser">{$t('forms.user')}</label>
 	<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlPassword">Password</label>
+	<label for="mysqlPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mysqlPassword"
 		isPasswordField