From c1c25d59c8333a725faf82f0f8dd722588216151 Mon Sep 17 00:00:00 2001
From: Restray <contact@restray.org>
Date: Sat, 2 Apr 2022 23:53:10 +0200
Subject: [PATCH] Add "new" i18n

---
 src/lib/locales/en.json                       | 35 ++++++++++++--
 .../new/destination/_LocalDocker.svelte       | 30 +++++++-----
 .../new/destination/_RemoteDocker.svelte      | 46 +++++++++++--------
 src/routes/new/destination/check.json.ts      |  4 +-
 src/routes/new/destination/index.svelte       | 15 +++---
 src/routes/new/source/_Github.svelte          | 27 +++++------
 src/routes/new/source/_Gitlab.svelte          | 17 +++----
 src/routes/new/source/index.svelte            |  8 ++--
 8 files changed, 117 insertions(+), 65 deletions(-)

diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index 0d65578b4..ef2a5f2e8 100644
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@@ -17,7 +17,8 @@
 		"git_sources": "Git Sources",
 		"databases": "Databases",
 		"services": "Services",
-		"teams": "Teams"
+		"teams": "Teams",
+		"not_implemented_yet": "Not implemented yet"
 	},
 	"login": {
 		"already_logged_in": "Already logged in...",
@@ -31,7 +32,7 @@
 		"password_again": "Password again",
 		"save": "Save",
 		"saving": "Saving...",
-		"name": "name",
+		"name": "Name",
 		"value": "Value",
 		"action": "Action",
 		"is_required": "is required.",
@@ -56,7 +57,13 @@
 		"already_used_for": "<span class=\"text-red-500\">{type}</span> already used for",
 		"configuration": "Configuration",
 		"engine": "Engine",
-		"network": "Network"
+		"network": "Network",
+		"ip_address": "IP Address",
+		"ssh_private_key": "SSH Private Key",
+		"type": "Type",
+		"html_url": "HTML URL",
+		"api_url": "API URL",
+		"organization": "Organization"
 	},
 	"register": {
 		"register": "Register",
@@ -198,6 +205,26 @@
 		"restarting_please_wait": "Restarting... please wait...",
 		"force_restart_proxy": "Force restart proxy",
 		"use_coolify_proxy": "Use Coolify Proxy?",
-		"no_destination_found": "No destination found"
+		"no_destination_found": "No destination found",
+		"new_error_network_already_exists": "Network {network} already configured for another team!",
+		"new": {
+			"saving_and_configuring_proxy": "Saving and configuring proxy...",
+			"install_proxy": "This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy.",
+			"add_new_destination": "Add New Destination",
+			"predefined_destinations": "Predefined destinations"
+		}
+	},
+	"sources": {
+		"local_docker": "Local Docker",
+		"remote_docker": "Remote Docker",
+		"organization_explainer": "Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
+	},
+	"eg_https_api_github_com": "eg: https://api.github.com",
+	"eg_https_github_com": "eg: https://github.com",
+	"source": {
+		"new": {
+			"git_source": "Add New Git Source",
+			"official_providers": "Official providers"
+		}
 	}
 }
diff --git a/src/routes/new/destination/_LocalDocker.svelte b/src/routes/new/destination/_LocalDocker.svelte
index 79a2c81b0..2cc8e65ff 100644
--- a/src/routes/new/destination/_LocalDocker.svelte
+++ b/src/routes/new/destination/_LocalDocker.svelte
@@ -6,6 +6,7 @@
 	import { post } from '$lib/api';
 	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 
 	let loading = false;
 
@@ -25,7 +26,7 @@
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
-			<div class="title font-bold">Configuration</div>
+			<div class="title font-bold">{$t('forms.configuration')}</div>
 			<button
 				type="submit"
 				class:bg-sky-600={!loading}
@@ -33,35 +34,40 @@
 				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
-						? 'Saving and configuring proxy...'
-						: 'Saving...'
-					: 'Save'}</button
+						? $t('destination.new.saving_and_configuring_proxy')
+						: $t('forms.saving')
+					: $t('forms.save')}</button
 			>
 		</div>
 		<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>
-			<input required name="name" placeholder="name" bind:value={payload.name} />
+			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+			<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 			<input
 				required
 				name="engine"
-				placeholder="eg: /var/run/docker.sock"
+				placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 				bind:value={payload.engine}
 			/>
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="network" class="text-base font-bold text-stone-100">Network</label>
-			<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
+			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+			<input
+				required
+				name="network"
+				placeholder="{$t('forms.default')}: coolify"
+				bind:value={payload.network}
+			/>
 		</div>
 		<div class="grid grid-cols-2 items-center">
 			<Setting
 				bind:setting={payload.isCoolifyProxyUsed}
 				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
-				title="Use Coolify Proxy?"
-				description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy."
+				title={$t('destination.use_coolify_proxy')}
+				description={$t('destination.new.install_proxy')}
 			/>
 		</div>
 	</form>
diff --git a/src/routes/new/destination/_RemoteDocker.svelte b/src/routes/new/destination/_RemoteDocker.svelte
index 780c66019..d032d77b4 100644
--- a/src/routes/new/destination/_RemoteDocker.svelte
+++ b/src/routes/new/destination/_RemoteDocker.svelte
@@ -7,6 +7,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';
 
 	let loading = false;
 
@@ -25,7 +26,7 @@
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
-			<div class="title font-bold">Configuration</div>
+			<div class="title font-bold">{$t('forms.configuration')}</div>
 			<button
 				type="submit"
 				class:bg-sky-600={!loading}
@@ -33,57 +34,66 @@
 				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
-						? 'Saving and configuring proxy...'
-						: 'Saving...'
-					: 'Save'}</button
+						? $t('destination.new.saving_and_configuring_proxy')
+						: $t('forms.saving')
+					: $t('forms.save')}</button
 			>
 		</div>
 		<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>
-			<input required name="name" placeholder="name" bind:value={payload.name} />
+			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="ipAddress" class="text-base font-bold text-stone-100">IP Address</label>
+			<label for="ipAddress" class="text-base font-bold text-stone-100"
+				>{$t('forms.ip_address')}</label
+			>
 			<input
 				required
 				name="ipAddress"
-				placeholder="eg: 192.168..."
+				placeholder="{$t('forms.eg')}: 192.168..."
 				bind:value={payload.ipAddress}
 			/>
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="user" class="text-base font-bold text-stone-100">User</label>
-			<input required name="user" placeholder="eg: root" bind:value={payload.user} />
+			<label for="user" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+			<input required name="user" placeholder="{$t('forms.eg')}: root" bind:value={payload.user} />
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="port" class="text-base font-bold text-stone-100">Port</label>
-			<input required name="port" placeholder="eg: 22" bind:value={payload.port} />
+			<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
+			<input required name="port" placeholder="{$t('forms.eg')}: 22" bind:value={payload.port} />
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="sshPrivateKey" class="text-base font-bold text-stone-100">SSH Private Key</label>
+			<label for="sshPrivateKey" class="text-base font-bold text-stone-100"
+				>{$t('forms.ssh_private_key')}</label
+			>
 			<textarea
 				rows="10"
 				class="resize-none"
 				required
 				name="sshPrivateKey"
-				placeholder="eg: -----BEGIN...."
+				placeholder="{$t('forms.eg')}: -----BEGIN...."
 				bind:value={payload.sshPrivateKey}
 			/>
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="network" class="text-base font-bold text-stone-100">Network</label>
-			<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
+			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+			<input
+				required
+				name="network"
+				placeholder="{$t('forms.default')}: coolify"
+				bind:value={payload.network}
+			/>
 		</div>
 		<div class="grid grid-cols-2 items-center">
 			<Setting
 				bind:setting={payload.isCoolifyProxyUsed}
 				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
-				title="Use Coolify Proxy?"
-				description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy."
+				title={$t('destination.use_coolify_proxy')}
+				description={$t('destination.new.install_proxy')}
 			/>
 		</div>
 	</form>
diff --git a/src/routes/new/destination/check.json.ts b/src/routes/new/destination/check.json.ts
index 22af08e91..54f099e4a 100644
--- a/src/routes/new/destination/check.json.ts
+++ b/src/routes/new/destination/check.json.ts
@@ -1,5 +1,6 @@
 import { getUserDetails } from '$lib/common';
 import { isDockerNetworkExists, ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const post: RequestHandler = async (event) => {
@@ -9,9 +10,10 @@ export const post: RequestHandler = async (event) => {
 	const { network } = await event.request.json();
 	try {
 		const found = await isDockerNetworkExists({ network });
+
 		if (found) {
 			throw {
-				error: `Network ${network} already configured for another team!`
+				error: t.get('destination.new_error_network_already_exists', { network: network })
 			};
 		}
 		return {
diff --git a/src/routes/new/destination/index.svelte b/src/routes/new/destination/index.svelte
index 5ad82cbb7..9641ed72f 100644
--- a/src/routes/new/destination/index.svelte
+++ b/src/routes/new/destination/index.svelte
@@ -2,6 +2,7 @@
 	import LocalDocker from './_LocalDocker.svelte';
 	import cuid from 'cuid';
 	import RemoteDocker from './_RemoteDocker.svelte';
+	import { t } from '$lib/translations';
 	let payload = {};
 	let selected = 'localDocker';
 
@@ -10,7 +11,7 @@
 		switch (type) {
 			case 'localDocker':
 				payload = {
-					name: 'Local Docker',
+					name: t.get('sources.local_docker'),
 					engine: '/var/run/docker.sock',
 					remoteEngine: false,
 					network: cuid(),
@@ -19,7 +20,7 @@
 				break;
 			case 'remoteDocker':
 				payload = {
-					name: 'Remote Docker',
+					name: $t('sources.remote_docker'),
 					remoteEngine: true,
 					ipAddress: null,
 					user: 'root',
@@ -36,12 +37,14 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Add New Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('destination.new.add_new_destination')}</div>
 </div>
 <div class="flex-col space-y-2 pb-10 text-center">
-	<div class="text-xl font-bold text-white">Predefined destinations</div>
+	<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
 	<div class="flex justify-center space-x-2">
-		<button class="w-32" on:click={() => setPredefined('localDocker')}>Local Docker</button>
+		<button class="w-32" on:click={() => setPredefined('localDocker')}
+			>{$t('sources.local_docker')}</button
+		>
 		<!-- <button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button> -->
 		<button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button>
 	</div>
@@ -51,5 +54,5 @@
 {:else if selected === 'remoteDocker'}
 	<RemoteDocker {payload} />
 {:else}
-	<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
+	<div class="text-center font-bold text-4xl py-10">{$t('index.not_implemented_yet')}</div>
 {/if}
diff --git a/src/routes/new/source/_Github.svelte b/src/routes/new/source/_Github.svelte
index e8f2d33c4..aaa673aca 100644
--- a/src/routes/new/source/_Github.svelte
+++ b/src/routes/new/source/_Github.svelte
@@ -6,6 +6,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 
 	let nameEl;
@@ -28,11 +29,11 @@
 	<div class="flex justify-center pb-8">
 		<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 			<div class="flex h-8 items-center space-x-2">
-				<div class="text-xl font-bold text-white">Configuration</div>
-				<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
+				<div class="text-xl font-bold text-white">{$t('forms.configuration')}</div>
+				<button type="submit" class="bg-orange-600 hover:bg-orange-500">{$t('forms.save')}</button>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="type" class="text-base font-bold text-stone-100">Type</label>
+				<label for="type" class="text-base font-bold text-stone-100">{$t('forms.type')}</label>
 
 				<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
 					<option value="github">GitHub</option>
@@ -41,7 +42,7 @@
 				</select>
 			</div>
 			<div class="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>
 				<input
 					name="name"
 					id="name"
@@ -53,23 +54,25 @@
 			</div>
 
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<label for="htmlUrl" class="text-base font-bold text-stone-100"
+					>{$t('forms.html_url')}</label
+				>
 				<input
 					type="url"
 					name="htmlUrl"
 					id="htmlUrl"
-					placeholder="eg: https://github.com"
+					placeholder="{$t('forms.eg')}: https://github.com"
 					required
 					bind:value={gitSource.htmlUrl}
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<label for="apiUrl" class="text-base font-bold text-stone-100">{$t('forms.api_url')}</label>
 				<input
 					name="apiUrl"
 					type="url"
 					id="apiUrl"
-					placeholder="eg: https://api.github.com"
+					placeholder="{$t('forms.eg')}: https://api.github.com"
 					required
 					bind:value={gitSource.apiUrl}
 				/>
@@ -77,16 +80,14 @@
 			<div class="grid grid-cols-2 px-10">
 				<div class="flex flex-col">
 					<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-						>Organization</label
+						>{$t('forms.organization')}</label
 					>
-					<Explainer
-						text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
-					/>
+					<Explainer text={$t('sources.organization_explainer')} />
 				</div>
 				<input
 					name="organization"
 					id="organization"
-					placeholder="eg: coollabsio"
+					placeholder="{$t('forms.eg')}: coollabsio"
 					bind:value={gitSource.organization}
 					bind:this={organizationEl}
 				/>
diff --git a/src/routes/new/source/_Gitlab.svelte b/src/routes/new/source/_Gitlab.svelte
index 219bc56b0..345b2ab49 100644
--- a/src/routes/new/source/_Gitlab.svelte
+++ b/src/routes/new/source/_Gitlab.svelte
@@ -4,6 +4,7 @@
 	import { post } from '$lib/api';
 
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 
 	let nameEl;
@@ -24,11 +25,11 @@
 <div class="flex justify-center pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex h-8 items-center space-x-2">
-			<div class="text-xl font-bold text-white">Configuration</div>
-			<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
+			<div class="text-xl font-bold text-white">{$t('forms.configuration')}</div>
+			<button type="submit" class="bg-orange-600 hover:bg-orange-500">{$t('forms.save')}</button>
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="type" class="text-base font-bold text-stone-100">Type</label>
+			<label for="type" class="text-base font-bold text-stone-100">{$t('forms.type')}</label>
 			<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
 				<option value="github">GitHub</option>
 				<option value="gitlab">GitLab</option>
@@ -36,7 +37,7 @@
 			</select>
 		</div>
 		<div class="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>
 			<input
 				name="name"
 				id="name"
@@ -48,23 +49,23 @@
 		</div>
 
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+			<label for="htmlUrl" class="text-base font-bold text-stone-100">{$t('forms.html_url')}</label>
 			<input
 				type="url"
 				name="htmlUrl"
 				id="htmlUrl"
-				placeholder="eg: https://github.com"
+				placeholder="{$t('forms.eg')}: https://github.com"
 				required
 				bind:value={gitSource.htmlUrl}
 			/>
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+			<label for="apiUrl" class="text-base font-bold text-stone-100">{$t('forms.api_url')}</label>
 			<input
 				name="apiUrl"
 				type="url"
 				id="apiUrl"
-				placeholder="eg: https://api.github.com"
+				placeholder="{$t('forms.eg')}: https://api.github.com"
 				required
 				bind:value={gitSource.apiUrl}
 			/>
diff --git a/src/routes/new/source/index.svelte b/src/routes/new/source/index.svelte
index 73384561a..a4becb9a1 100644
--- a/src/routes/new/source/index.svelte
+++ b/src/routes/new/source/index.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from '$lib/translations';
+
 	import Github from './_Github.svelte';
 	import Gitlab from './_Gitlab.svelte';
 	let gitSource = {
@@ -44,11 +46,11 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Add New Git Source</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('source.new.git_source')}</div>
 </div>
 
 <div class="flex-col space-y-2 pb-10 text-center">
-	<div class="text-xl font-bold text-white">Official providers</div>
+	<div class="text-xl font-bold text-white">{$t('source.new.official_providers')}</div>
 	<div class="flex justify-center space-x-2">
 		<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
 		<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
@@ -61,6 +63,6 @@
 	{:else if gitSource.type === 'gitlab'}
 		<Gitlab {gitSource} />
 	{:else if gitSource.type === 'bitbucket'}
-		<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
+		<div class="text-center font-bold text-4xl py-10">{$t('index.not_implemented_yet')}</div>
 	{/if}
 </div>