Begin translation and finish i18n system

This commit is contained in:
Restray
2022-04-02 21:08:55 +02:00
parent a3241516cb
commit 269250ef3d
13 changed files with 142 additions and 70 deletions

View File

@@ -4,6 +4,11 @@
import { locale, loadTranslations } from '$lib/translations';
export const load: Load = async ({ fetch, url, session }) => {
const { pathname } = url;
const initLocale = locale.get() || session.lang || 'en';
await loadTranslations(initLocale, pathname);
if (!session.userId && !publicPaths.includes(url.pathname)) {
return {
status: 302,
@@ -16,12 +21,6 @@
const endpoint = `/teams.json`;
const res = await fetch(endpoint);
const { pathname } = url;
const defaultLocale = session.lang;
const initLocale = locale.get() || defaultLocale;
await loadTranslations(initLocale, pathname);
if (res.ok) {
return {
props: {

View File

@@ -46,7 +46,7 @@
class="flex cursor-pointer flex-col rounded p-6 text-center text-green-500 no-underline transition duration-150 hover:bg-green-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
Applications
{$t('index.applications')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">
{applicationsCount}
@@ -58,7 +58,7 @@
class="flex cursor-pointer flex-col rounded p-6 text-center text-sky-500 no-underline transition duration-150 hover:bg-sky-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
Destinations
{$t('index.destinations')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">
{destinationsCount}
@@ -70,7 +70,7 @@
class="flex cursor-pointer flex-col rounded p-6 text-center text-orange-500 no-underline transition duration-150 hover:bg-orange-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
Git Sources
{$t('index.git_sources')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">
{sourcesCount}
@@ -81,7 +81,9 @@
sveltekit:prefetch
class="flex cursor-pointer flex-col rounded p-6 text-center text-purple-500 no-underline transition duration-150 hover:bg-purple-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Databases</dt>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
{$t('index.databases')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">{databasesCount}</dd>
</a>
<a
@@ -89,7 +91,9 @@
sveltekit:prefetch
class="flex cursor-pointer flex-col rounded p-6 text-center text-pink-500 no-underline transition duration-150 hover:bg-pink-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Services</dt>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
{$t('index.services')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">{servicesCount}</dd>
</a>
@@ -98,7 +102,9 @@
sveltekit:prefetch
class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white"
>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Teams</dt>
<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
{$t('index.teams')}
</dt>
<dd class="order-1 text-5xl font-extrabold ">
{teamsCount}
</dd>

View File

@@ -4,6 +4,7 @@
import { session } from '$app/stores';
import { post } from '$lib/api';
import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
import { onMount } from 'svelte';
let loading = false;
let emailEl;
@@ -37,9 +38,13 @@
}
</script>
<svelt:head>
<title>{$t('login.login')}</title>
</svelt:head>
<div class="flex h-screen flex-col items-center justify-center">
{#if $session.userId}
<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
{:else}
<div class="flex justify-center px-4">
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -48,7 +53,7 @@
<input
type="email"
name="email"
placeholder="Email"
placeholder={$t('forms.email')}
autocomplete="off"
required
bind:this={emailEl}
@@ -57,7 +62,7 @@
<input
type="password"
name="password"
placeholder="Password"
placeholder={$t('index.password')}
bind:value={password}
required
/>
@@ -69,16 +74,18 @@
class="hover:opacity-90 text-white"
class:bg-transparent={loading}
class:text-stone-600={loading}
class:bg-coollabs={!loading}>{loading ? 'Authenticating...' : 'Login'}</button
class:bg-coollabs={!loading}
>{loading ? $t('login.authenticating') : $t('login.login')}</button
>
<button
on:click|preventDefault={() => goto('/register')}
class="bg-transparent hover:bg-coolgray-300 text-white ">Register</button
class="bg-transparent hover:bg-coolgray-300 text-white "
>{$t('register.register')}</button
>
<button
class="bg-transparent hover:bg-coolgray-300"
on:click|preventDefault={() => goto('/reset')}>Reset password</button
on:click|preventDefault={() => goto('/reset')}>{$t('reset.reset_password')}</button
>
</div>
</form>

View File

@@ -6,6 +6,7 @@
import { session } from '$app/stores';
import { post } from '$lib/api';
import { errorNotification } from '$lib/form';
import { t } from '$lib/translations';
import { onMount } from 'svelte';
let loading = false;
@@ -20,7 +21,7 @@
});
async function handleSubmit() {
if (password !== passwordCheck) {
return errorNotification('Passwords do not match.');
return errorNotification($t('forms.passwords_not_match'));
}
loading = true;
try {
@@ -57,7 +58,7 @@
</div>
<div class="flex h-screen flex-col items-center justify-center">
{#if $session.userId}
<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
{:else}
<div class="flex justify-center px-4">
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -66,7 +67,7 @@
<input
type="email"
name="email"
placeholder="Email"
placeholder={$t('forms.email')}
autocomplete="off"
required
bind:this={emailEl}
@@ -75,28 +76,28 @@
<input
type="password"
name="password"
placeholder="Password"
placeholder={$t('forms.password')}
bind:value={password}
required
/>
<input
type="password"
name="passwordCheck"
placeholder="Password again"
placeholder={$t('forms.password_again')}
bind:value={passwordCheck}
required
/>
<div class="flex space-x-2 h-8 items-center justify-center pt-8">
<button type="submit" class="hover:bg-coollabs-100 text-white bg-coollabs"
>Register</button
>{$t('register.register')}</button
>
</div>
</form>
</div>
{#if userCount === 0}
<div class="pt-5">
You are registering the first user. It will be the administrator of your Coolify instance.
{$t('register.first_user')}
</div>
{/if}
{/if}