Add services 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/_MinIO.svelte

@@ -1,18 +1,19 @@
 <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">{$t('forms.root_user')}</label>
 	<input
 		name="rootUser"
 		id="rootUser"
-		placeholder="User to login"
+		placeholder={$t('forms.username')}
 		value={service.minio.rootUser}
 		disabled
 		readonly
@@ -30,7 +31,7 @@
 	/>
 </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"

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"

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

@@ -9,6 +9,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 MinIo from './_MinIO.svelte';
@@ -38,7 +39,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 {
@@ -51,7 +52,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);
 		}
@@ -61,25 +62,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}
@@ -92,7 +95,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">
@@ -108,10 +113,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">Domain (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 domain, you must first stop the application."
-					/>
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('application.domain_fqdn')}</label
+					>
+					<Explainer text={$t('application.https_explainer')} />
 				</div>
 
 				<CopyPasswordField
@@ -128,10 +133,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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 
 	export let service;
 	export let isRunning;
@@ -11,7 +12,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
 		disabled={isRunning}
 		readonly={isRunning}
@@ -20,7 +21,7 @@
 		name="extraConfig"
 		id="extraConfig"
 		placeholder={!isRunning
-			? `eg:
+			? `${$t('forms.eg')}:
 
 define('WP_ALLOW_MULTISITE', true);
 define('MULTISITE', true);
@@ -32,7 +33,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"
@@ -40,7 +41,7 @@ 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">
@@ -48,7 +49,7 @@ define('SUBDOMAIN_INSTALL', false);`
 	<input
 		name="mysqlRootUser"
 		id="mysqlRootUser"
-		placeholder="MySQL Root User"
+		placeholder="MySQL {$t('forms.root_user')}"
 		value={service.wordpress.mysqlRootUser}
 		disabled
 		readonly
@@ -66,11 +67,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