Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add "new" i18n

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/locales/en.json
View File

@ -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"
}
}
}

30
src/routes/new/destination/_LocalDocker.svelte
View File

@ -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>

46
src/routes/new/destination/_RemoteDocker.svelte
View File

@ -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>

4
src/routes/new/destination/check.json.ts
View File

@ -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 {

15
src/routes/new/destination/index.svelte
View File

@ -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}

27
src/routes/new/source/_Github.svelte
View File

@ -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}
/>

17
src/routes/new/source/_Gitlab.svelte
View File

@ -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}
/>

8
src/routes/new/source/index.svelte
View File

@ -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>