Add "new" i18n

This commit is contained in:
Restray 2022-04-02 23:53:10 +02:00
parent a53bda1436
commit c1c25d59c8
No known key found for this signature in database
GPG Key ID: 67C6DEF95A4DC812
8 changed files with 117 additions and 65 deletions

View File

@ -17,7 +17,8 @@
"git_sources": "Git Sources", "git_sources": "Git Sources",
"databases": "Databases", "databases": "Databases",
"services": "Services", "services": "Services",
"teams": "Teams" "teams": "Teams",
"not_implemented_yet": "Not implemented yet"
}, },
"login": { "login": {
"already_logged_in": "Already logged in...", "already_logged_in": "Already logged in...",
@ -31,7 +32,7 @@
"password_again": "Password again", "password_again": "Password again",
"save": "Save", "save": "Save",
"saving": "Saving...", "saving": "Saving...",
"name": "name", "name": "Name",
"value": "Value", "value": "Value",
"action": "Action", "action": "Action",
"is_required": "is required.", "is_required": "is required.",
@ -56,7 +57,13 @@
"already_used_for": "<span class=\"text-red-500\">{type}</span> already used for", "already_used_for": "<span class=\"text-red-500\">{type}</span> already used for",
"configuration": "Configuration", "configuration": "Configuration",
"engine": "Engine", "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": "Register", "register": "Register",
@ -198,6 +205,26 @@
"restarting_please_wait": "Restarting... please wait...", "restarting_please_wait": "Restarting... please wait...",
"force_restart_proxy": "Force restart proxy", "force_restart_proxy": "Force restart proxy",
"use_coolify_proxy": "Use Coolify 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"
}
} }
} }

View File

@ -6,6 +6,7 @@
import { post } from '$lib/api'; import { post } from '$lib/api';
import Setting from '$lib/components/Setting.svelte'; import Setting from '$lib/components/Setting.svelte';
import { errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
let loading = false; let loading = false;
@ -25,7 +26,7 @@
<div class="flex justify-center px-6 pb-8"> <div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <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="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 <button
type="submit" type="submit"
class:bg-sky-600={!loading} class:bg-sky-600={!loading}
@ -33,35 +34,40 @@
disabled={loading} disabled={loading}
>{loading >{loading
? payload.isCoolifyProxyUsed ? payload.isCoolifyProxyUsed
? 'Saving and configuring proxy...' ? $t('destination.new.saving_and_configuring_proxy')
: 'Saving...' : $t('forms.saving')
: 'Save'}</button : $t('forms.save')}</button
> >
</div> </div>
<div class="mt-2 grid grid-cols-2 items-center px-10"> <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>
<input required name="name" placeholder="name" bind:value={payload.name} /> <input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
required required
name="engine" name="engine"
placeholder="eg: /var/run/docker.sock" placeholder="{$t('forms.eg')}: /var/run/docker.sock"
bind:value={payload.engine} bind:value={payload.engine}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<input required name="network" placeholder="default: coolify" bind:value={payload.network} /> <input
required
name="network"
placeholder="{$t('forms.default')}: coolify"
bind:value={payload.network}
/>
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting
bind:setting={payload.isCoolifyProxyUsed} bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)} on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title="Use Coolify Proxy?" title={$t('destination.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." description={$t('destination.new.install_proxy')}
/> />
</div> </div>
</form> </form>

View File

@ -7,6 +7,7 @@
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import Setting from '$lib/components/Setting.svelte'; import Setting from '$lib/components/Setting.svelte';
import { errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
let loading = false; let loading = false;
@ -25,7 +26,7 @@
<div class="flex justify-center px-6 pb-8"> <div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <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="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 <button
type="submit" type="submit"
class:bg-sky-600={!loading} class:bg-sky-600={!loading}
@ -33,57 +34,66 @@
disabled={loading} disabled={loading}
>{loading >{loading
? payload.isCoolifyProxyUsed ? payload.isCoolifyProxyUsed
? 'Saving and configuring proxy...' ? $t('destination.new.saving_and_configuring_proxy')
: 'Saving...' : $t('forms.saving')
: 'Save'}</button : $t('forms.save')}</button
> >
</div> </div>
<div class="mt-2 grid grid-cols-2 items-center px-10"> <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>
<input required name="name" placeholder="name" bind:value={payload.name} /> <input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
required required
name="ipAddress" name="ipAddress"
placeholder="eg: 192.168..." placeholder="{$t('forms.eg')}: 192.168..."
bind:value={payload.ipAddress} bind:value={payload.ipAddress}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="user" class="text-base font-bold text-stone-100">User</label> <label for="user" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<input required name="user" placeholder="eg: root" bind:value={payload.user} /> <input required name="user" placeholder="{$t('forms.eg')}: root" bind:value={payload.user} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="port" class="text-base font-bold text-stone-100">Port</label> <label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
<input required name="port" placeholder="eg: 22" bind:value={payload.port} /> <input required name="port" placeholder="{$t('forms.eg')}: 22" bind:value={payload.port} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <textarea
rows="10" rows="10"
class="resize-none" class="resize-none"
required required
name="sshPrivateKey" name="sshPrivateKey"
placeholder="eg: -----BEGIN...." placeholder="{$t('forms.eg')}: -----BEGIN...."
bind:value={payload.sshPrivateKey} bind:value={payload.sshPrivateKey}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<input required name="network" placeholder="default: coolify" bind:value={payload.network} /> <input
required
name="network"
placeholder="{$t('forms.default')}: coolify"
bind:value={payload.network}
/>
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting
bind:setting={payload.isCoolifyProxyUsed} bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)} on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title="Use Coolify Proxy?" title={$t('destination.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." description={$t('destination.new.install_proxy')}
/> />
</div> </div>
</form> </form>

View File

@ -1,5 +1,6 @@
import { getUserDetails } from '$lib/common'; import { getUserDetails } from '$lib/common';
import { isDockerNetworkExists, ErrorHandler } from '$lib/database'; import { isDockerNetworkExists, ErrorHandler } from '$lib/database';
import { t } from '$lib/translations';
import type { RequestHandler } from '@sveltejs/kit'; import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => { export const post: RequestHandler = async (event) => {
@ -9,9 +10,10 @@ export const post: RequestHandler = async (event) => {
const { network } = await event.request.json(); const { network } = await event.request.json();
try { try {
const found = await isDockerNetworkExists({ network }); const found = await isDockerNetworkExists({ network });
if (found) { if (found) {
throw { throw {
error: `Network ${network} already configured for another team!` error: t.get('destination.new_error_network_already_exists', { network: network })
}; };
} }
return { return {

View File

@ -2,6 +2,7 @@
import LocalDocker from './_LocalDocker.svelte'; import LocalDocker from './_LocalDocker.svelte';
import cuid from 'cuid'; import cuid from 'cuid';
import RemoteDocker from './_RemoteDocker.svelte'; import RemoteDocker from './_RemoteDocker.svelte';
import { t } from '$lib/translations';
let payload = {}; let payload = {};
let selected = 'localDocker'; let selected = 'localDocker';
@ -10,7 +11,7 @@
switch (type) { switch (type) {
case 'localDocker': case 'localDocker':
payload = { payload = {
name: 'Local Docker', name: t.get('sources.local_docker'),
engine: '/var/run/docker.sock', engine: '/var/run/docker.sock',
remoteEngine: false, remoteEngine: false,
network: cuid(), network: cuid(),
@ -19,7 +20,7 @@
break; break;
case 'remoteDocker': case 'remoteDocker':
payload = { payload = {
name: 'Remote Docker', name: $t('sources.remote_docker'),
remoteEngine: true, remoteEngine: true,
ipAddress: null, ipAddress: null,
user: 'root', user: 'root',
@ -36,12 +37,14 @@
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <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>
<div class="flex-col space-y-2 pb-10 text-center"> <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"> <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('remoteDocker')}>Remote Docker</button> -->
<button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button> <button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button>
</div> </div>
@ -51,5 +54,5 @@
{:else if selected === 'remoteDocker'} {:else if selected === 'remoteDocker'}
<RemoteDocker {payload} /> <RemoteDocker {payload} />
{:else} {: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} {/if}

View File

@ -6,6 +6,7 @@
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let nameEl; let nameEl;
@ -28,11 +29,11 @@
<div class="flex justify-center pb-8"> <div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <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="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div> <div class="text-xl font-bold text-white">{$t('forms.configuration')}</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button> <button type="submit" class="bg-orange-600 hover:bg-orange-500">{$t('forms.save')}</button>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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}> <select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option> <option value="github">GitHub</option>
@ -41,7 +42,7 @@
</select> </select>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
name="name" name="name"
id="name" id="name"
@ -53,23 +54,25 @@
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
type="url" type="url"
name="htmlUrl" name="htmlUrl"
id="htmlUrl" id="htmlUrl"
placeholder="eg: https://github.com" placeholder="{$t('forms.eg')}: https://github.com"
required required
bind:value={gitSource.htmlUrl} bind:value={gitSource.htmlUrl}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
name="apiUrl" name="apiUrl"
type="url" type="url"
id="apiUrl" id="apiUrl"
placeholder="eg: https://api.github.com" placeholder="{$t('forms.eg')}: https://api.github.com"
required required
bind:value={gitSource.apiUrl} bind:value={gitSource.apiUrl}
/> />
@ -77,16 +80,14 @@
<div class="grid grid-cols-2 px-10"> <div class="grid grid-cols-2 px-10">
<div class="flex flex-col"> <div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label >{$t('forms.organization')}</label
> >
<Explainer <Explainer text={$t('sources.organization_explainer')} />
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
/>
</div> </div>
<input <input
name="organization" name="organization"
id="organization" id="organization"
placeholder="eg: coollabsio" placeholder="{$t('forms.eg')}: coollabsio"
bind:value={gitSource.organization} bind:value={gitSource.organization}
bind:this={organizationEl} bind:this={organizationEl}
/> />

View File

@ -4,6 +4,7 @@
import { post } from '$lib/api'; import { post } from '$lib/api';
import { errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let nameEl; let nameEl;
@ -24,11 +25,11 @@
<div class="flex justify-center pb-8"> <div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <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="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div> <div class="text-xl font-bold text-white">{$t('forms.configuration')}</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button> <button type="submit" class="bg-orange-600 hover:bg-orange-500">{$t('forms.save')}</button>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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}> <select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option> <option value="github">GitHub</option>
<option value="gitlab">GitLab</option> <option value="gitlab">GitLab</option>
@ -36,7 +37,7 @@
</select> </select>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
name="name" name="name"
id="name" id="name"
@ -48,23 +49,23 @@
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
type="url" type="url"
name="htmlUrl" name="htmlUrl"
id="htmlUrl" id="htmlUrl"
placeholder="eg: https://github.com" placeholder="{$t('forms.eg')}: https://github.com"
required required
bind:value={gitSource.htmlUrl} bind:value={gitSource.htmlUrl}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <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 <input
name="apiUrl" name="apiUrl"
type="url" type="url"
id="apiUrl" id="apiUrl"
placeholder="eg: https://api.github.com" placeholder="{$t('forms.eg')}: https://api.github.com"
required required
bind:value={gitSource.apiUrl} bind:value={gitSource.apiUrl}
/> />

View File

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { t } from '$lib/translations';
import Github from './_Github.svelte'; import Github from './_Github.svelte';
import Gitlab from './_Gitlab.svelte'; import Gitlab from './_Gitlab.svelte';
let gitSource = { let gitSource = {
@ -44,11 +46,11 @@
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <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>
<div class="flex-col space-y-2 pb-10 text-center"> <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"> <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('github')}>GitHub.com</button>
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button> <button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
@ -61,6 +63,6 @@
{:else if gitSource.type === 'gitlab'} {:else if gitSource.type === 'gitlab'}
<Gitlab {gitSource} /> <Gitlab {gitSource} />
{:else if gitSource.type === 'bitbucket'} {: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} {/if}
</div> </div>