Add support for RTL languages.

Replace all FunctionComponent with ComponentType. Pull new locales
2024-11-22 21:23:12 +05:30 · 2021-03-28 01:02:52 +01:00 · 2021-03-28 01:02:52 +01:00 · 6a65e714ff
commit 6a65e714ff
parent 5dc8aae90c
35 changed files with 436 additions and 85 deletions
--- a/package.json
+++ b/package.json
@ -37,7 +37,8 @@
        "fastify-static": "^2.4.0",
        "react": "^16.8.4",
        "react-dom": "^16.8.4",
-        "react-intl": "^2.0.0"
+        "react-intl": "^2.0.0",
+        "rtl-detect": "^1.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.3.4",
@ -50,6 +51,7 @@
        "@elyby/eslint-plugin": "^0.2.0",
        "@types/react-dom": "^16.8.4",
        "@types/react-intl": "^2.3.17",
+        "@types/rtl-detect": "^1.0.0",
        "@types/webpack-env": "^1.13.9",
        "@typescript-eslint/eslint-plugin": "^1.9.1-alpha.12",
        "@typescript-eslint/parser": "^1.9.0",
--- a/scripts/i18n-crowdin/index.js
+++ b/scripts/i18n-crowdin/index.js
@ -37,6 +37,7 @@ const RELEASED_LOCALES = ['be', 'fr', 'id', 'pt', 'ru', 'uk', 'vi', 'zh'];
 * Array of Crowdin locales to our internal locales representation
 */
 const LOCALES_MAP = {
+    'es-ES': 'es',
    'pt-BR': 'pt',
    'zh-CN': 'zh',
 };
@ -146,7 +147,7 @@ async function pull() {
            throw new Error('Unable to find translation file. Please check the CROWDIN_FILE_PATH param.');
        }

-        const progress = fileInfo.words_approved / fileInfo.words * 100;
+        const progress = fileInfo.words_translated / fileInfo.words * 100;
        if (!RELEASED_LOCALES.includes(toInternalLocale(locale.code)) && progress < MIN_RELEASE_PROGRESS) {
            return null;
        }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,20 +1,20 @@
 /* eslint-disable @typescript-eslint/no-var-requires */

-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';
 import { IntlProvider, addLocaleData } from 'react-intl';

 import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from 'params';

-import { BaseLayout } from 'components';
+import { Html, BaseLayout } from 'components';

-export interface Params {
+interface Params {
    type: string;
    payload: {
        locale: string;
    } & Record<string, any>;
 }

-const App: FunctionComponent<Params> = ({ type, payload: { locale, ...params } }) => {
+const App: ComponentType<Params> = ({ type, payload: { locale, ...params } }) => {
    if (!locale || SUPPORTED_LANGUAGES.indexOf(locale) === -1) {
        locale = DEFAULT_LANGUAGE;
    }
@ -26,11 +26,13 @@ const App: FunctionComponent<Params> = ({ type, payload: { locale, ...params } }
    const { default: Email } = require(`emails/${type}/index`);

    return (
-        <IntlProvider locale={locale} messages={messages}>
-            <BaseLayout>
-                <Email {...params} />
-            </BaseLayout>
-        </IntlProvider>
+        <Html lang={locale}>
+            <IntlProvider locale={locale} messages={messages}>
+                <BaseLayout>
+                    <Email {...params} />
+                </BaseLayout>
+            </IntlProvider>
+        </Html>
    );
 };

--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';

 import styles from './styles';

 import { Table } from 'components/table';

-const BaseLayout: FunctionComponent = ({ children }) => (
+const BaseLayout: ComponentType = ({ children }) => (
    <Table style={styles.body}>
        <tr>
            <td>
--- a/src/components/Html.tsx
+++ b/src/components/Html.tsx
@ -1,7 +1,12 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';
+import { getLangDir } from 'rtl-detect';

-const Html: FunctionComponent = ({ children }) => (
-    <html>
+interface Props {
+    lang: string;
+}
+
+const Html: ComponentType<Props> = ({ lang, children }) => (
+    <html lang={lang} dir={getLangDir(lang)}>
        <head>
            <meta name="viewport" content="width=device-width" />
            <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
--- a/src/components/blocks/code/Code.tsx
+++ b/src/components/blocks/code/Code.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactElement } from 'react';
+import React, { ComponentType, ReactElement } from 'react';

 import { FormattedMessage as Message } from 'react-intl';

@ -15,7 +15,7 @@ interface Props {
    color?: Colors;
 }

-const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' }) => (
+const Code: ComponentType<Props> = ({ code, link, label, color = 'green' }) => (
    <div style={styles.codeWrapper}>
        <div>
            <a href={link}>
--- a/src/components/layout/content/Content.tsx
+++ b/src/components/layout/content/Content.tsx
@ -1,8 +1,8 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';

 import styles from './styles';

-const Content: FunctionComponent = ({ children }) => (
+const Content: ComponentType = ({ children }) => (
    <div style={styles.content}>
        {children}
    </div>
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message, FormattedHTMLMessage as HTMLMessage } from 'react-intl';

 import { Table } from 'components/table';
@ -7,27 +7,30 @@ import styles from './styles';
 import messages from './messages.intl.json';
 import logoImg from './images/logo.png';

-export default function Footer() {
-    return (
-        <Table style={styles.footer}>
-            <tr>
-                <td style={styles.footerText}>
-                    <Message {...messages.footer} values={{
-                        serviceLink: (
-                            <a href="https://account.ely.by" style={styles.footerLink}>
-                                <Message {...messages.service_name} />
-                            </a>
-                        ),
-                    }} />
-                </td>
-                <td style={styles.footerLogo}>
-                    <a href="http://ely.by">
-                        <img src={logoImg} alt="Ely.by" width="128" height="58" />
-                        <br />
-                        <HTMLMessage {...messages.alternativeMinecraftServices} />
-                    </a>
-                </td>
-            </tr>
-        </Table>
-    );
-}
+const Footer: ComponentType = () => (
+    <Table style={styles.footer}>
+        <tr>
+            <td style={styles.paddingColumn}>&nbsp;</td>
+            <td style={styles.footerText}>
+                <Message {...messages.footer} values={{
+                    serviceLink: (
+                        <a href="https://account.ely.by" style={styles.footerLink}>
+                            <Message {...messages.service_name} />
+                        </a>
+                    ),
+                }} />
+            </td>
+            <td style={styles.paddingColumn}>&nbsp;</td>
+            <td style={styles.footerLogo}>
+                <a href="https://ely.by">
+                    <img src={logoImg} alt="Ely.by" width="128" height="58" />
+                    <br />
+                    <HTMLMessage {...messages.alternativeMinecraftServices} />
+                </a>
+            </td>
+            <td style={styles.paddingColumn}>&nbsp;</td>
+        </tr>
+    </Table>
+);
+
+export default Footer;
--- a/src/components/layout/footer/styles.ts
+++ b/src/components/layout/footer/styles.ts
@ -8,9 +8,11 @@ const styles: Record<string, CSSProperties> = {
        background: '#DDD8CE',
        height: '135px',
    },
+    paddingColumn: {
+        width: '30px',
+    },
    footerText: {
        verticalAlign: 'middle',
-        paddingLeft: '30px',
        fontSize: '13px',
        color: '#7A7A7A',
    },
@ -20,7 +22,6 @@ const styles: Record<string, CSSProperties> = {
        borderBottom: '1px dashed #7A7A7A',
    },
    footerLogo: {
-        padding: '0 30px',
        textAlign: 'center',
    },
 };
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactElement } from 'react';
+import React, { ComponentType, ReactElement } from 'react';
 import { FormattedMessage as Message } from 'react-intl';

 import { Table } from 'components/table';
@ -11,7 +11,7 @@ interface Props {
    title: ReactElement;
 }

-const Userbar: FunctionComponent<Props> = ({ username, title }) => (
+const Userbar: ComponentType<Props> = ({ username, title }) => (
    <Table style={styles.headerImage}>
        <tr>
            <td style={styles.headerTextContainer}>
--- a/src/components/layout/userbar/Userbar.tsx
+++ b/src/components/layout/userbar/Userbar.tsx
@ -1,11 +1,11 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';

 import { Table } from 'components/table';

 import styles from './styles';
 import logoImage from './logo.png';

-const Userbar: FunctionComponent = () => (
+const Userbar: ComponentType = () => (
    <Table style={styles.userbar}>
        <tr>
            <td style={styles.marginColumn} />
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@ -1,4 +1,4 @@
-import React, { CSSProperties, FunctionComponent } from 'react';
+import React, { CSSProperties, ComponentType } from 'react';

 import styles from './styles';

@ -6,7 +6,7 @@ interface Props {
    style?: CSSProperties;
 }

-const Table: FunctionComponent<Props> = ({ children, style }) => (
+const Table: ComponentType<Props> = ({ children, style }) => (
    <table cellPadding="0" cellSpacing="0" style={{
        ...styles.table,
        ...style,
--- a/src/components/ui/button/Button.tsx
+++ b/src/components/ui/button/Button.tsx
@ -1,4 +1,4 @@
-import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
+import React, { CSSProperties, ComponentType, ReactElement } from 'react';

 import { Colors } from 'components/ui/colors';

@ -10,7 +10,7 @@ interface Props {
    color?: Colors;
 }

-const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) => (
+const Button: ComponentType<Props> = ({ label, style, color = 'green' }) => (
    <div style={{
        ...styles.button,
        ...styles[color],
--- a/src/components/ui/input/Input.tsx
+++ b/src/components/ui/input/Input.tsx
@ -1,4 +1,4 @@
-import React, { CSSProperties, FunctionComponent } from 'react';
+import React, { CSSProperties, ComponentType } from 'react';

 import { Colors } from 'components/ui/colors';

@ -10,7 +10,7 @@ interface Props {
    style?: CSSProperties;
 }

-const Input: FunctionComponent<Props> = ({ value, style, color = 'green' }) => (
+const Input: ComponentType<Props> = ({ value, style, color = 'green' }) => (
    <div style={{
        ...styles.input,
        ...styles[color],
--- a/src/devTools/DevApp.tsx
+++ b/src/devTools/DevApp.tsx
@ -1,6 +1,6 @@
 import React, {
    BaseSyntheticEvent,
-    FunctionComponent,
+    ComponentType,
    useCallback,
    useEffect,
    useLayoutEffect,
@ -23,7 +23,7 @@ interface LocalStorageState {
    isMinimized: boolean;
 }

-const DevApp: FunctionComponent = () => {
+const DevApp: ComponentType = () => {
    const [ locale, setLocale ] = useState(DEFAULT_LANGUAGE);
    const [ template, setTemplate ] = useState(AVAILABLE_TEMPLATES[0]);
    const [ fixture, setFixture ] = useState('default');
--- a/src/devTools/List.tsx
+++ b/src/devTools/List.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';

 interface Props {
    label: string;
@ -7,7 +7,7 @@ interface Props {
    onChange: (item: string) => any;
 }

-const List: FunctionComponent<Props> = ({ label, items, active, onChange = () => {} }) => (
+const List: ComponentType<Props> = ({ label, items, active, onChange = () => {} }) => (
    <div>
        {label}
        :
--- a/src/emails/forgotPassword/ForgotPassword.tsx
+++ b/src/emails/forgotPassword/ForgotPassword.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message, FormattedHTMLMessage as HTMLMessage } from 'react-intl';

 import { Userbar, Header, Content, Footer } from 'components/layout';
@ -14,7 +14,7 @@ interface Props {
    code: string;
 }

-const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => (
+const ForgotPassword: ComponentType<Props> = ({ username, link, code }) => (
    <div>
        <Userbar />

--- a/src/emails/register/Register.tsx
+++ b/src/emails/register/Register.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message, FormattedHTMLMessage as HTMLMessage } from 'react-intl';

 import { Userbar, Header, Content, Footer } from 'components/layout';
@ -18,7 +18,7 @@ interface Props {
    code: string;
 }

-const Register: FunctionComponent<Props> = ({ username, link, code }) => (
+const Register: ComponentType<Props> = ({ username, link, code }) => (
    <div>
        <Userbar />

--- a/src/i18n/ar.json
+++ b/src/i18n/ar.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "أو",
+    "components.blocks.code.pass_code_in_field": "أدخل هذا الكود داخل حقل الكتابة الخاص بصفحتنا:",
+    "components.layout.footer.alternativeMinecraftServices": "Alternative Minecraft services",
+    "components.layout.footer.footer": "لقد إستلمتَ هذه الرسالة, لأنه قد تم إدخال بريدك الإلكتروني عند التسجيل في خدمة {serviceLink}. إن لم يكن ذلك انت, الرجاء تجاهل هذه الرسالة و حسب.",
+    "components.layout.footer.service_name": "حسابات Ely.by",
+    "components.layout.header.hello_username": "مرحبا، {username}",
+    "emails.forgotPassword.continue_image": "المتابعة",
+    "emails.forgotPassword.forgot_the_password_image": "هل نسيت كلمة السر؟",
+    "emails.forgotPassword.shit_happens": "عفوا, هذا يحصل. إذا كنت ترغب بمتابعة تغيير كلمة السر, عليك ادخال الرمز على الموقع. إذا لم تطلب تغيير كلمة السر, فقط تجاهل هذا البريد الإلكتروني. بدون هذا الرمز لا أحد سيستطيع سرقة كلمة السر الخاصة بك.",
+    "emails.register.choose_you_skin_image": "اختر الـ\"Skin\" الخاص بك",
+    "emails.register.choose_you_skin_text": "فى فهرس Ely.by يمكنك ايجاد العديد من ال skins المختلفة, و الجاهزة للاستخدام.",
+    "emails.register.confirm_email_image": "تأكيد الحساب ",
+    "emails.register.install_our_patch_image": "تتبيث برنامج التصحيح الخاص بنا في اللعبة",
+    "emails.register.install_our_patch_text": "يجب عليك تثبيت برنامج التصحيح الخاص بنا لجعل نظام Ely.by's skin يعمل. يمكنك العثور عليه في جزء 'التحميل' في موقعنا.",
+    "emails.register.useTLLauncher": "إستخدم TLauncher",
+    "emails.register.useTLLauncherText": "يكون الأمر أسهل بكثير، عند استخدام الأداة المناسبة للغرض الصحيح. إن TL launcher واحد من أفضل البرامج البديلة ل Minecraft، والذي يتوفر كذلك على الدعم من نظام Ely.by.",
+    "emails.register.we_glad_to_see_you": "يسعدنا أن نراك من بين مستخدمين Ely.by. لقد وصلت إلى الخطوة الأخيرة تقريبا, يبقى فحسب تأكيد حسابك. الرجاء الضغط على الزر بالأسفل للمواصلة.",
+    "emails.register.welcome_image": "مرحبا بك في Ely.by",
+    "emails.register.whats_next_image": "ما التالي؟"
+}
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "oder",
+    "components.blocks.code.pass_code_in_field": "Fügen Sie diesen Code in das Formularfeld unserer Website ein:",
+    "components.layout.footer.alternativeMinecraftServices": "Alternative Minecraft-Dienste",
+    "components.layout.footer.footer": "Sie haben diese Nachricht erhalten, da diese E-Mail während der Registrierung beim {serviceLink}-Dienst eingegeben wurde. Wenn das nicht Sie waren, ignorieren Sie einfach diese Nachricht.",
+    "components.layout.footer.service_name": "Ely.by Konten",
+    "components.layout.header.hello_username": "Hallo, {username}",
+    "emails.forgotPassword.continue_image": "Fortsetzen",
+    "emails.forgotPassword.forgot_the_password_image": "Passwort vergessen?",
+    "emails.forgotPassword.shit_happens": "Ups, das passiert. Wenn Sie das Passwort weiterhin ändern möchten, geben Sie den folgenden Code auf der Website ein. Wenn Sie keine Kennwortwiederherstellung angefordert haben, ignorieren Sie einfach diese E-Mail. Ohne diesen Code kann niemand Ihr Passwort stehlen.",
+    "emails.register.choose_you_skin_image": "Wähle dein Skin aus",
+    "emails.register.choose_you_skin_text": "Im Katalog von Ely.by Skins finden Sie eine Vielzahl verschiedener Skins, von denen jeder zum Tragen bereit ist.",
+    "emails.register.confirm_email_image": "E-Mail bestätigen",
+    "emails.register.install_our_patch_image": "Installieren Sie unseren Patch im Spiel",
+    "emails.register.install_our_patch_text": "Sie sollten unseren Patch installieren, damit das Skin-System von Ely.by funktioniert. Sie finden es im Bereich 'Load' auf unserer Website.",
+    "emails.register.useTLLauncher": "TLauncher nutzen",
+    "emails.register.useTLLauncherText": "Es ist viel einfacher, wenn Sie das richtige Werkzeug für den richtigen Zweck verwenden. Der TLauncher ist einer der besten alternativen Launcher für das Minecraft, das auch das Ely.by-System unterstützt.",
+    "emails.register.we_glad_to_see_you": "Wir freuen uns, Sie unter den Nutzern von Ely.by zu sehen. Sie haben fast den letzten Punkt erreicht, es bleibt nur noch die Bestätigung Ihrer E-Mail-Adresse. Bitte drücken Sie den Knopf unten, um fortzufahren.",
+    "emails.register.welcome_image": "Willkommen bei Ely.by",
+    "emails.register.whats_next_image": "Was sind die nächsten Schritte?"
+}
--- a/src/i18n/eo.json
+++ b/src/i18n/eo.json
@ -9,7 +9,7 @@
    "emails.forgotPassword.forgot_the_password_image": "Ĉu vi forgesis la pasvorton?",
    "emails.forgotPassword.shit_happens": "Oj, tio okazas. Se vi volas daŭrigi ŝanĝi la pasvorton, enigu la sekvan kodon en la retejo. Se vi ne petis pri pasvorta restarigo, simple ignoru ĉi tiun mesaĝon. Sen ĉi tiu kodo neniu povas ŝteli vian pasvorton.",
    "emails.register.choose_you_skin_image": "Elektu vian haŭton",
-    "emails.register.choose_you_skin_text": "En la katalogo de Ely.by vi povas trovi grandan diversecon de haŭtoj, kiuj estas pretaj por esti surmetitaj.",
+    "emails.register.choose_you_skin_text": "En la katalogo de Ely.by vi povas trovi grandan diversecon de haŭtoj, kiuj estas pretaj esti surmetitaj.",
    "emails.register.confirm_email_image": "Konfirmi retpoŝtadreson",
    "emails.register.install_our_patch_image": "Instalu nian flikaĵon en la ludon",
    "emails.register.install_our_patch_text": "Vi necesas instali nian flikaĵon por funkciigi la haŭtsistemon de Ely.by. Vi povas trovi ĝin en \"Elŝutaĵoj\" sekcio ĉe nia retejo.",
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "o",
+    "components.blocks.code.pass_code_in_field": "Inserte este código en nuestro sitio dentro del cuadro de dialogo:",
+    "components.layout.footer.alternativeMinecraftServices": "Servicios de Minecraft alternativos",
+    "components.layout.footer.footer": "Recibiste este mensaje de correo, porque este email fue introducido en el servicio de registro de {serviceLink}. Si no fuiste tú, por favor ignora este mensaje.",
+    "components.layout.footer.service_name": "Cuentas Ely.by",
+    "components.layout.header.hello_username": "Hola, {username}",
+    "emails.forgotPassword.continue_image": "Coninuar",
+    "emails.forgotPassword.forgot_the_password_image": "¿Olvidaste la contraseña?",
+    "emails.forgotPassword.shit_happens": "Oops, esto suele pasar. Si desea continuar cambiando la contraseña, introduzca el siguiente código en nuestra pagina web. Si no has solicitado restablecer tu contraseña, por favor ignora este mensaje. Sin este código nadie será capaz de robar tu contraseña.",
+    "emails.register.choose_you_skin_image": "Elige tu skin",
+    "emails.register.choose_you_skin_text": "En el catálogo de Ely.by puedes encontrar una gran diversidad de skins, los cuales están listos para ser probados.",
+    "emails.register.confirm_email_image": "Confirma E-mail",
+    "emails.register.install_our_patch_image": "Instala nuestro parche en el juego",
+    "emails.register.install_our_patch_text": "Deberías instalar nuestro parche para que el sistema de skins de Ely.by funcione. Puedes encontrarlo en la sección de 'Carga' de nuestro sitio web.",
+    "emails.register.useTLLauncher": "Usa TL launcher",
+    "emails.register.useTLLauncherText": "Es mucho más fácil, cuando usas la herramienta adecuada, para el trabajo adecuado. El ejecutable TL es uno de los mejores ejecutables alternativos para Minecraft, que también tiene el sistema Ely.by incorporado.",
+    "emails.register.we_glad_to_see_you": "Nos alegramos de verte entre los usuarios de Ely.by. Casi has llegado al punto final, sólo queda confirmar tu correo electrónico. Por favor, presione el botón abajo para continuar.",
+    "emails.register.welcome_image": "Bienvenido a Ely.by",
+    "emails.register.whats_next_image": "Y, ¿ahora?"
+}
--- a/src/i18n/fil.json
+++ b/src/i18n/fil.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "o",
+    "components.blocks.code.pass_code_in_field": "Ilagay ang code na ito sa form field ng aming site:",
+    "components.layout.footer.alternativeMinecraftServices": "Mga alternatibong serbisyo para sa Minecraft",
+    "components.layout.footer.footer": "Natanggap mo ang mensaheng ito, dahil itong e-mail ay ipinasok habang nagpaparegistrasyon sa serbisyong {serviceLink}. Kung hindi ikaw iyon, mangyaring na wag pansinin ang mensaheng ito.",
+    "components.layout.footer.service_name": "Ely.by Accounts",
+    "components.layout.header.hello_username": "Kamusta, {username}",
+    "emails.forgotPassword.continue_image": "Magpatuloy",
+    "emails.forgotPassword.forgot_the_password_image": "Kinalimutan mo ang password mo?",
+    "emails.forgotPassword.shit_happens": "Nako, nagyayari ito. Kung nais mong magpatuloy sa pagpapalit ng iyong password, kailangan mong ipasok ang code na ito sa website. Kung hindi mo hiniling ang pagbawi ng password, balewalain lang ang email na ito. Kung wala ang code na ito, kahit sino ay hindi makakanakaw ng iyong password.",
+    "emails.register.choose_you_skin_image": "Piliin ang iyong skin",
+    "emails.register.choose_you_skin_text": "Makakahanap ka ng iba't ibang uri ng mga skin na matatagpuan sa catalog ng Ely.by, na maaring kaagad mailagay.",
+    "emails.register.confirm_email_image": "Kumpirmahin ang E-mail",
+    "emails.register.install_our_patch_image": "I-install ang aming patch sa laro",
+    "emails.register.install_our_patch_text": "Dapat mong i-install ang aming patch upang gumawa ng balat sistema ng pagtatrabaho sa Ely.by ni. Maaari mong mahanap ito sa seksyon ng 'I-load ang' sa aming site.",
+    "emails.register.useTLLauncher": "Gamitin ang TLauncher",
+    "emails.register.useTLLauncherText": "Napakadali, kapag ikaw ay gumamit ng tamang tool para sa tamang layunin. Ang TLauncher ay isa sa mga napakagandang alternatibong launcher para sa Minecraft, na mayroon ding suporta para sa sistema ng Ely.by.",
+    "emails.register.we_glad_to_see_you": "Kami ay natutuwa na makikita ka sa mga gumagamit ng Ely.by. Halos mo umabot ang panghuling punto, na kailangan lamang magpakumpurmahin ang iyong e-mail address. Paki-pindutin ang butones sa ilalim upang magpatuloy.",
+    "emails.register.welcome_image": "Maligayang pagdating sa Ely.by",
+    "emails.register.whats_next_image": "Ano ang susunod?"
+}
--- a/src/i18n/he.json
+++ b/src/i18n/he.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "או",
+    "components.blocks.code.pass_code_in_field": "הכנס קוד זה לשדה הטופס של האתר שלנו:",
+    "components.layout.footer.alternativeMinecraftServices": "שירותי מיינקראפט אלטרנטיביים",
+    "components.layout.footer.footer": "קיבלת הודעה זו מכיוון שדואר אלקטרוני זה הוזן במהלך ההרשמה בשירות {serviceLink} . אם זה לא אתה, אנא התעלם מההודעה הזו.",
+    "components.layout.footer.service_name": "חשבונות Ely.by",
+    "components.layout.header.hello_username": "שלום, {username}",
+    "emails.forgotPassword.continue_image": "המשך",
+    "emails.forgotPassword.forgot_the_password_image": "שכחת את הסיסמה?",
+    "emails.forgotPassword.shit_happens": "אופס, זה קורה. אם ברצונך להמשיך לשנות את הסיסמה, עליך להזין את הקוד הבא באתר. אם לא ביקשת לשחזור סיסמה, פשוט התעלם מהודעת דוא\"ל זו. ללא קוד זה אף אחד לא יוכל לגנוב את הסיסמה שלך.",
+    "emails.register.choose_you_skin_image": "בחר את העור שלך",
+    "emails.register.choose_you_skin_text": "בקטלוג של Ely.by תוכלו למצוא מגוון עצום של עורות, אשר מוכנים להרכבה.",
+    "emails.register.confirm_email_image": "אשר את הדואר האלקטרוני שלך",
+    "emails.register.install_our_patch_image": "התקן את התיקון שלנו במשחק",
+    "emails.register.install_our_patch_text": "עליך להתקין את התיקון שלנו בכדי לגרום למערכת העור של Ely.by לעבוד. אתה יכול למצוא את זה בקטע 'טען' באתר שלנו.",
+    "emails.register.useTLLauncher": "השתמש במפעיל TL",
+    "emails.register.useTLLauncherText": "זה הרבה יותר קל, כשאתה משתמש בכלי נכון למטרה הנכונה. משגר ה- TL הוא אחד המשגרים האלטרנטיביים הטובים ביותר עבור Minecraft, שיש לו גם תמיכה במערכת Ely.by.",
+    "emails.register.we_glad_to_see_you": "אנו שמחים לראות אותך בקרב המשתמשים ב- Ely.by. כמעט הגעת לנקודה הסופית, נשאר רק לאשר את כתובת הדואר האלקטרוני שלך. לחץ על הלחצן מתחת כדי להמשיך.",
+    "emails.register.welcome_image": "ברוך הבא ל- Ely.by",
+    "emails.register.whats_next_image": "מה הלאה?"
+}
--- a/src/i18n/hr.json
+++ b/src/i18n/hr.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "ili",
+    "components.blocks.code.pass_code_in_field": "Unesi ovaj kod u pripadajuće polje na našoj stranici",
+    "components.layout.footer.alternativeMinecraftServices": "Alternative Minecraft services",
+    "components.layout.footer.footer": "Primio/la si ovu poruku jer je ovaj e-mail bio unesen tijekom registracije na {serviceLink} servisu. Ako ovo nisi ti, zanemari ovu poruku.",
+    "components.layout.footer.service_name": "Računi Ely.by",
+    "components.layout.header.hello_username": "Bok, {username}",
+    "emails.forgotPassword.continue_image": "Nastavi",
+    "emails.forgotPassword.forgot_the_password_image": "Zaboravljena lozinka?",
+    "emails.forgotPassword.shit_happens": "Ups, ovo se događa. Ako želiš nastaviti s promjenom lozinke, unesi prikazani kod na stranicu. Ako nisi zatražio/la promjenu lozinke, zanemari ovaj e-mail. Bez ovog koda nitko ti neće moći ukrasti lozinku.",
+    "emails.register.choose_you_skin_image": "Odaberi svoj skin",
+    "emails.register.choose_you_skin_text": "U Ely.by katalogu možeš naći veliki izbor skinova, spremnih za korištenje",
+    "emails.register.confirm_email_image": "Potvrdi E-mail",
+    "emails.register.install_our_patch_image": "Instaliraj naš patch u igri",
+    "emails.register.install_our_patch_text": "Kako bi Ely.by sustav funkcionirao, moraš instalirati naš patch. Nađi ga pod 'Load' na našoj stranici.",
+    "emails.register.useTLLauncher": "Use TL launcher",
+    "emails.register.useTLLauncherText": "It is much easier, when you use right tool for the right purpose. The TL launcher is one of the best alternative launchers for the Minecraft, that also has Ely.by system support.",
+    "emails.register.we_glad_to_see_you": "Drago nam je da te vidimo zajedno s ostalim korisnicima Ely.by-ja. Skoro si spreman/na, jedino još trebaš potvrditi E-mail adresu. Molimo pritisni gumb ispod za nastavak.",
+    "emails.register.welcome_image": "Dobrodošli na Ely.by",
+    "emails.register.whats_next_image": "Što je sljedeće?"
+}
--- a/src/i18n/id.json
+++ b/src/i18n/id.json
@ -13,8 +13,8 @@
    "emails.register.confirm_email_image": "Konfirmasi E-mail",
    "emails.register.install_our_patch_image": "Pasang patch kami didalam game",
    "emails.register.install_our_patch_text": "Anda harus memasang patch kami agar sistem skin Ely.by dapat bekerja. Anda bisa menemukannya pada bagian \"Unduhan\" di situs kami.",
-    "emails.register.useTLLauncher": "Use TL launcher",
-    "emails.register.useTLLauncherText": "It is much easier, when you use right tool for the right purpose. The TL launcher is one of the best alternative launchers for the Minecraft, that also has Ely.by system support.",
+    "emails.register.useTLLauncher": "Gunakan TL launcher",
+    "emails.register.useTLLauncherText": "Akan menjadi lebih mudah, jika anda menggunakan alat yang tepat untuk tujuan yang tepat. TL launcher adalah salah satu launcher alternatif terbaik untuk Minecraft, yang memiliki bantuan sistem Ely.by.",
    "emails.register.we_glad_to_see_you": "Kami senang melihat Anda di antara pengguna Ely.by. Anda hampir mencapai titik akhir, hanya tinggal untuk mengkonfirmasi alamat E-mail Anda. Tolong tekan tombol di bawah untuk melanjutkan.",
    "emails.register.welcome_image": "Selamat datang di Ely.by",
    "emails.register.whats_next_image": "Selanjutnya apa?"
--- a/src/i18n/index.json
+++ b/src/i18n/index.json
@ -1,4 +1,11 @@
 {
+    "ar": {
+        "code": "ar",
+        "name": "اللغة العربية",
+        "englishName": "Arabic",
+        "progress": 98.6,
+        "isReleased": false
+    },
    "be": {
        "code": "be",
        "name": "Беларуская",
@ -13,6 +20,13 @@
        "progress": 100,
        "isReleased": false
    },
+    "de": {
+        "code": "de",
+        "name": "Deutsch",
+        "englishName": "German",
+        "progress": 100,
+        "isReleased": false
+    },
    "el": {
        "code": "el",
        "name": "Ελληνικά",
@ -34,6 +48,20 @@
        "progress": 100,
        "isReleased": false
    },
+    "es": {
+        "code": "es",
+        "name": "",
+        "englishName": "Spanish",
+        "progress": 100,
+        "isReleased": false
+    },
+    "fil": {
+        "code": "fil",
+        "name": "",
+        "englishName": "Filipino",
+        "progress": 100,
+        "isReleased": false
+    },
    "fr": {
        "code": "fr",
        "name": "Français",
@ -41,13 +69,41 @@
        "progress": 100,
        "isReleased": true
    },
+    "he": {
+        "code": "he",
+        "name": "עברית",
+        "englishName": "Hebrew",
+        "progress": 100,
+        "isReleased": false
+    },
+    "hr": {
+        "code": "hr",
+        "name": "hrvatski jezik",
+        "englishName": "Croatian",
+        "progress": 81.8,
+        "isReleased": false
+    },
    "id": {
        "code": "id",
        "name": "Bahasa Indonesia",
        "englishName": "Indonesian",
-        "progress": 83.3,
+        "progress": 100,
        "isReleased": true
    },
+    "it": {
+        "code": "it",
+        "name": "Italiano",
+        "englishName": "Italian",
+        "progress": 100,
+        "isReleased": false
+    },
+    "ko": {
+        "code": "ko",
+        "name": "한국어",
+        "englishName": "Korean",
+        "progress": 98.6,
+        "isReleased": false
+    },
    "lt": {
        "code": "lt",
        "name": "Lietuvių",
@ -83,6 +139,13 @@
        "progress": 100,
        "isReleased": true
    },
+    "sk": {
+        "code": "sk",
+        "name": "slovenčina",
+        "englishName": "Slovak",
+        "progress": 100,
+        "isReleased": false
+    },
    "sl": {
        "code": "sl",
        "name": "slovenski jezik",
@ -97,6 +160,27 @@
        "progress": 100,
        "isReleased": false
    },
+    "th": {
+        "code": "th",
+        "name": "ไทย",
+        "englishName": "Thai",
+        "progress": 100,
+        "isReleased": false
+    },
+    "tr": {
+        "code": "tr",
+        "name": "Türkçe",
+        "englishName": "Turkish",
+        "progress": 100,
+        "isReleased": false
+    },
+    "udm": {
+        "code": "udm",
+        "name": "",
+        "englishName": "Udmurt",
+        "progress": 100,
+        "isReleased": false
+    },
    "uk": {
        "code": "uk",
        "name": "Українська",
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "oppure",
+    "components.blocks.code.pass_code_in_field": "Inserisci il codice inviato nella E-mail dal nostro sito:",
+    "components.layout.footer.alternativeMinecraftServices": "Servizi di Minecraft alternativi",
+    "components.layout.footer.footer": "Hai ricevuto questo messaggio, perché questa e-mail è stata inserita nel servizio {serviceLink}. Se non sei stato tu, ignora questo messaggio.",
+    "components.layout.footer.service_name": "Account di Ely.by",
+    "components.layout.header.hello_username": "Ciao, {username}",
+    "emails.forgotPassword.continue_image": "Continua",
+    "emails.forgotPassword.forgot_the_password_image": "Dimenticata la password?",
+    "emails.forgotPassword.shit_happens": "Oops, questo succede. Se si desidera continuare a modificare la password, è necessario immettere il seguente codice sul sito web. Se non hai mai richiesto il recupero della password, ignora questa e-mail. Senza questo codice, nessuno sarà abile di rubare la tua password.",
+    "emails.register.choose_you_skin_image": "Scegli la tua skin",
+    "emails.register.choose_you_skin_text": "Nel catalogo di Ely.by puoi trovare una grande varietà di skin, che sono pronte per essere usate.",
+    "emails.register.confirm_email_image": "Conferma la E-mail",
+    "emails.register.install_our_patch_image": "Installa la nostra patch nel gioco",
+    "emails.register.install_our_patch_text": "Devi installare la nostra patch per far si' che il sistema funzioni. Puoi trovarlo nella sezione \"Carica\" del nostro sito.",
+    "emails.register.useTLLauncher": "Usa TL launcher",
+    "emails.register.useTLLauncherText": "È molto più semplice, quando si utilizza lo strumento giusto per lo scopo giusto. TL launcher è uno dei migliori launcher alternativi per Minecraft, ha anche il supporto del sistema Ely.by.",
+    "emails.register.we_glad_to_see_you": "Siamo lieti di vederti tra gli utenti di Ely.by. Hai quasi raggiunto il punto finale, non resta che confermare il tuo indirizzo E-mail. Per favore, prema il pulsante sotto per continuare.",
+    "emails.register.welcome_image": "Benvenuto su Ely.by",
+    "emails.register.whats_next_image": "Che si fa dopo?"
+}
--- a/src/i18n/ko.json
+++ b/src/i18n/ko.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "또는",
+    "components.blocks.code.pass_code_in_field": "우리의 사이트에있는 양식에 코드를 입력해주세요:",
+    "components.layout.footer.alternativeMinecraftServices": "Alternative Minecraft services",
+    "components.layout.footer.footer": "당신이 이 메세지를 받는다면 이메일이 {serviceLink}에서 회원가입을 하는중이기 때문입니다. 만약 당신이 아니면, 이 메세지를 무시하세요.",
+    "components.layout.footer.service_name": "Ely.by 계정",
+    "components.layout.header.hello_username": "{username}님 안녕하세요.",
+    "emails.forgotPassword.continue_image": "계속",
+    "emails.forgotPassword.forgot_the_password_image": "비밀번호를 잊으셨습니까?",
+    "emails.forgotPassword.shit_happens": "님 이메일코드 입력안하면 비번 복구못함;",
+    "emails.register.choose_you_skin_image": "스킨 고르기",
+    "emails.register.choose_you_skin_text": "Ely.by에서 스킨찾으면 우리가 적용가능함ㅇㅇ",
+    "emails.register.confirm_email_image": "E-mail 확인",
+    "emails.register.install_our_patch_image": "게임 내에 패치 적용",
+    "emails.register.install_our_patch_text": "Ely.by의 스킨시스템이 작동하기 위해서는 우리의 패치를 적용해야돼. 너는 우리의 로드 항목에서 그걸 찾을수 있어",
+    "emails.register.useTLLauncher": "TLauncher 사용",
+    "emails.register.useTLLauncherText": "당신이 좋은 툴을 알맞은 상황에 사용한다면 더 쉽게 사용할 수 있습니다. TLauncher는 마인크래프트 비공식 런처들 중 최고이고, 또한 Ely.by 시스템을 지원합니다.",
+    "emails.register.we_glad_to_see_you": "Ely.by유저가 된게 기뻐.너는 거의 마지막에 왔는데,이메일 주소 확인해야함. 밑에 버튼 눌러서 계속하면되",
+    "emails.register.welcome_image": "Ely.by에 오신것을 환영합니다",
+    "emails.register.whats_next_image": "다음은 뭘까?"
+}
--- a/src/i18n/sk.json
+++ b/src/i18n/sk.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "alebo",
+    "components.blocks.code.pass_code_in_field": "Vložte tento kód do formulára na našich stránkach:",
+    "components.layout.footer.alternativeMinecraftServices": "Alternatívna služba pre Minecraft",
+    "components.layout.footer.footer": "Táto správa Vám bola doručená, pretože tento e-mail bol zadaný v registrácií v službe {serviceLink}. Ak ste ju nezadali Vy, ignorujte prosím túto správu.",
+    "components.layout.footer.service_name": "Účty Ely.by",
+    "components.layout.header.hello_username": "Ahoj, {username}",
+    "emails.forgotPassword.continue_image": "Pokračovať",
+    "emails.forgotPassword.forgot_the_password_image": "Zabudnuté heslo?",
+    "emails.forgotPassword.shit_happens": "Ak chcete pokračovať v zmene hesla, mali by ste vložiť nasledujúci kód na stránkach. Ak ste nežiadali o obnovenie hesla, prosím tento e-mail ignorujte. Bez tohto kódu nikto nebude schopný ukradnúť Vaše heslo.",
+    "emails.register.choose_you_skin_image": "Vyberte si svoj skin",
+    "emails.register.choose_you_skin_text": "V katalógu Ely.by môžete nájsť veľkú škálu skinov, ktoré sú pripravené na použitie.",
+    "emails.register.confirm_email_image": "Potvrdiť E-mail",
+    "emails.register.install_our_patch_image": "Nainštalovať náš patch v hre",
+    "emails.register.install_our_patch_text": "Mali by ste nainštalovať náš patch na to, aby fungoval systém Ely.by. Nájdete ho v sekcii 'Načítať' na stránkach.",
+    "emails.register.useTLLauncher": "Použite TL spúšťač",
+    "emails.register.useTLLauncherText": "Je to oveľa jednoduchšie, keď používate správny nástroj na správny účel. TL spúšťač je jedným z najlepších alternatívnych spúšťačov pre Minecraft, ktorý má tiež podporu systému Ely.by.",
+    "emails.register.we_glad_to_see_you": "Sme radi, že Vás vidíme medzi používateľmi Ely.by. Vaše registrácia je takmer hotová, stačí potvrdiť už len vašu e-mail adresu. Ak chcete pokračovať, stlačte tlačidlo nižšie.",
+    "emails.register.welcome_image": "Vitajte na Ely.by",
+    "emails.register.whats_next_image": "Čo ďalej?"
+}
--- a/src/i18n/th.json
+++ b/src/i18n/th.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "หรือ",
+    "components.blocks.code.pass_code_in_field": "ใส่โค้ดนี้ลงในเว็บไซต์",
+    "components.layout.footer.alternativeMinecraftServices": "บริการอื่นๆของ Minecraft",
+    "components.layout.footer.footer": "คุณได้รับข้อความนี้เพราะว่าคุณได้สมัครสมาชิคที่ \n{serviceLink} \nถ้านี้ไม่ใช่การกระทำของคุณโปรดละทิ้งข้อความนี้ ",
+    "components.layout.footer.service_name": "บัญชีของ Ely.by",
+    "components.layout.header.hello_username": "สวัสดี {username}",
+    "emails.forgotPassword.continue_image": "ต่อไป",
+    "emails.forgotPassword.forgot_the_password_image": "ลืมรหัสผ่าน?",
+    "emails.forgotPassword.shit_happens": "โอ้มีการขอเปลี่ยนรหัสเกิดขึ้น ถ้าคุณต้องการจะเปลี่ยนรหัสโปรดนำโค้ดข้างล่างไปใส่ในเว็บไซต์\nแต่ถ้าคุณไม่ได้ขอเปลี่ยนรหัสโปรดละทิ้งข้อความนี้\nและห้ามให้คนอื่นรู้โค้ดโดยเด็ดขาดเพื่อความปลอดภัย",
+    "emails.register.choose_you_skin_image": "เลือก Skin ของคุณ",
+    "emails.register.choose_you_skin_text": "ใน Ely.by's จะมีหน้าเลือก Skin แสนสวยและเท่มากมายให้คุณมาใช้งาน",
+    "emails.register.confirm_email_image": "ยืนยัน E-mail",
+    "emails.register.install_our_patch_image": "ติดตั้ง Patch ของเรา",
+    "emails.register.install_our_patch_text": "คุณต้องทำการลง Patch ของทางเราเพื่อให้ระบบ Skin ใช้งานได้ คุณสามารถหาได้จากเมนู \"ดาวน์โหลด\" ในเว็บไซต์",
+    "emails.register.useTLLauncher": "ใช้งาน TL launcher",
+    "emails.register.useTLLauncherText": "มันจะง่ายขึ้นมากถ้าคุณใช้โปรแกรมที่ถูกต้องตามที่เราจัดสรรมาให้ TL launcher คือหนึ่งในตัวเกมที่ดีที่สุด\nแถมยังรองรับ Ely.by อีกด้วย",
+    "emails.register.we_glad_to_see_you": "พวกเรายินดีที่ได้เห็นคุณหนึ่งในผู้ใช้ Ely.by คุณได้มาถึงขั้นตอนสุดท้ายของการสมัครแล้ว\nที่เหลือคุณก็แค่ยืนยัน E-mail โปรดกดปุ่มข้างล่างเพื่อดำเนินการต่อ",
+    "emails.register.welcome_image": "ยินดีต้อนรับสู่ Ely.by",
+    "emails.register.whats_next_image": "ต้องทำอะไรต่อ?"
+}
--- a/src/i18n/tr.json
+++ b/src/i18n/tr.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "veya",
+    "components.blocks.code.pass_code_in_field": "Bu kodu sitemizin form alanına yazın:",
+    "components.layout.footer.alternativeMinecraftServices": "Alternatif Minecraft hizmetleri",
+    "components.layout.footer.footer": "Bu mesajı aldın, çünkü {serviceLink} adlı servise kayıt olunurken bu E-posta ile giriş yapıldı. Eğer bu sen değilsen, lütfen bu mesajı umursama.",
+    "components.layout.footer.service_name": "Hesaplar Ely.by",
+    "components.layout.header.hello_username": "Hoşgeldin, {username}",
+    "emails.forgotPassword.continue_image": "Devam et",
+    "emails.forgotPassword.forgot_the_password_image": "Şifreni mi unuttun?",
+    "emails.forgotPassword.shit_happens": "Hay aksi, bu bazenleri olabilir. Eğer şifreni değiştirmeye devam etmek istiyorsan, aşağıdaki kodu siteye girmen gerek. Eğer şifre kurtarma isteği yollamadıysan, sadece bu e-postayı umursama. Bu kod olmadan kimse senin şifreni çalamaz.",
+    "emails.register.choose_you_skin_image": "Cildini seç",
+    "emails.register.choose_you_skin_text": "Ely.by kataloğunda kullanılmaya hazır, bir sürü çeşit cilt bulabilirsin.",
+    "emails.register.confirm_email_image": "E-postayı onayla",
+    "emails.register.install_our_patch_image": "Oyun içindeyken yamamızı yükle",
+    "emails.register.install_our_patch_text": "Ely.by'nin skin sisteminin çalışmasını sağlamak için yamamızı kurmalısınız. Sitemizdeki 'Yükle' bölümünde bulabilirsiniz.",
+    "emails.register.useTLLauncher": "TLauncher kullan",
+    "emails.register.useTLLauncherText": "Doğru aleti doğru amaç doğrultusunda kullandığın zaman çok daha kolay öyle değil mi? TLauncher Minecraft başlatıcısına en iyi alternatiflerden birisidir, aynı zamanda Ely.by sistemi desteğide var.",
+    "emails.register.we_glad_to_see_you": "Seni Ely.by kullanıcıları arasında görmekten gurur duyuyoruz. Son bölüme çok yaklaştın, Tek yapman gereken E-posta adresini onaylamak. Lütfen devam etmek için aşağıdaki butona tıkla.",
+    "emails.register.welcome_image": "Ely.by'e Hoşgeldiniz",
+    "emails.register.whats_next_image": "Daha ne var?"
+}
--- a/src/i18n/udm.json
+++ b/src/i18n/udm.json
@ -0,0 +1,21 @@
+{
+    "components.blocks.code.or": "яке",
+    "components.blocks.code.pass_code_in_field": "Та кодэз вотэсбамысьтымы форма юаназ тыре:",
+    "components.layout.footer.alternativeMinecraftServices": "Minecraft'лы альтернатива утялтэтъёс",
+    "components.layout.footer.footer": "Тон та ивортонэз басьтӥд, мкш та адресэз {serviceLink} утялтэтэ итӥськыку пыртӥллям. Сое ӧд кар ке, та ивортонэз санэ басьтытэк кельты вал.",
+    "components.layout.footer.service_name": "Ely.by Бамлыдъёс",
+    "components.layout.header.hello_username": "Ӟечбур, {username}",
+    "emails.forgotPassword.continue_image": "Азьланьтоно",
+    "emails.forgotPassword.forgot_the_password_image": "Лушкемкылдэ вунэтӥд-а?",
+    "emails.forgotPassword.shit_happens": "Ой, озьы луылэ. Лушкемкылдэ берен тупатыса азьлантэмед потэ ке, нимаз код вотэсбамысь юоназ пыртоно. Тон лушкемкыл берен тупатыны ӧд ке кур, та гожтэтэз кельты гинэ. Та кодтэк нокинлэн но лушкемкылдэ лушкамез уз лу.",
+    "emails.register.choose_you_skin_image": "Кудэ бырйы",
+    "emails.register.choose_you_skin_text": "Ely.by каталогысь пӧртэм-пӧртэм дӥсяны дась ку шедьтэмед луэ.",
+    "emails.register.confirm_email_image": "Почтаме юнматоно",
+    "emails.register.install_our_patch_image": "Кышъетмес шудонэ поны",
+    "emails.register.install_our_patch_text": "Тыныд кышъетмес пононо, Ely.by кусӧзнэт мед ужалоз шуыса. Сое вотэсбамысьтымы «Кысконъёс» люкетысь шедьтэмед луэ.",
+    "emails.register.useTLLauncher": "TL лэзисез кут",
+    "emails.register.useTLLauncherText": "Трослы капчигес, шонер тӥрлык шонер азьмуген кутӥськод ке. TL лэзись — Minecraft'эз тужгес но ӟеч альтернатива лэзисьёс пӧлысь огез, со Ely.by кусӧзнэтэз кутыны юрттэ но.",
+    "emails.register.we_glad_to_see_you": "Шумпотӥськом тонэ Ely.by юзчиос пӧлысь адӟыны. Тон одӥг гинэ вамыш ӧд лэсьты, почта адрестэ юнматоно гинэ на. Азьлантэмед понна улысь кнопкаез зӥб вал.",
+    "emails.register.welcome_image": "Ely.by'е гажаса ӧтиськом",
+    "emails.register.whats_next_image": "Мар-о собере?"
+}
--- a/src/server.tsx
+++ b/src/server.tsx
@ -10,8 +10,7 @@ import createFastify from 'fastify';
 import fastifyGracefulShutdown from 'fastify-graceful-shutdown';
 import fastifyStatic from 'fastify-static';

-import { Html } from 'components';
-import App, { Params } from 'App';
+import App from 'App';

 const fastify = createFastify({
    logger: {
@ -52,24 +51,16 @@ fastify.get<GetTemplateQueryParams, GetTemplateUrlParams>('/templates/:locale/:t
    reply.header('Content-Type', 'text/html');

    const { assetsHost, ...payloads } = request.query;
-
-    const params: Params = {
-        type: template,
-        payload: {
-            locale,
-            ...payloads,
-        },
-    };
-
    if (assetsHost) {
        // eslint-disable-next-line camelcase,@typescript-eslint/camelcase
        __webpack_public_path__ = `${assetsHost.replace(/\/+$/, '')}/`;
    }

    return ReactDOMServer.renderToStaticMarkup(
-        <Html>
-            <App {...params} />
-        </Html>
+        <App
+            type={template}
+            payload={{locale, ...payloads}}
+        />
    );
 });

--- a/yarn.lock
+++ b/yarn.lock
@ -802,6 +802,11 @@
    "@types/prop-types" "*"
    csstype "^2.2.0"

+"@types/rtl-detect@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/rtl-detect/-/rtl-detect-1.0.0.tgz#5791e18a111f2b8b5b328160af97f3991a5697a5"
+  integrity sha512-lyYh44YgrejEK9/5rhASghvRUOxrSJyyyQmqK7L6F/V5qs6PY1RfCi1VbjSkY6kuDt7lzQyhd006slhda4Oypg==
+
 "@types/webpack-env@^1.13.9":
  version "1.13.9"
  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.9.tgz#a67287861c928ebf4159a908d1fb1a2a34d4097a"
@ -2746,11 +2751,11 @@ extend@~3.0.2:
 "extended-translations-loader@file:webpack-utils/extended-translations-loader":
  version "1.0.0"
  dependencies:
-    "@lesechos/image-size-loader" "file:../../Library/Caches/Yarn/v6/npm-extended-translations-loader-1.0.0-933f9d99-bd59-4d39-b59d-8350c97ab0e9-1594903645361/node_modules/image-size-loader"
+    "@lesechos/image-size-loader" "file:../../../.cache/yarn/v6/npm-extended-translations-loader-1.0.0-a858425d-be42-4fbf-9b0a-3bc14853865b-1616888301438/node_modules/image-size-loader"
    glob "^7.1.4"
    loader-utils "^1.2.3"
    qs "^6.0.0"
-    text2png-loader "file:../../Library/Caches/Yarn/v6/npm-extended-translations-loader-1.0.0-933f9d99-bd59-4d39-b59d-8350c97ab0e9-1594903645361/node_modules/text2png-loader"
+    text2png-loader "file:../../../.cache/yarn/v6/npm-extended-translations-loader-1.0.0-a858425d-be42-4fbf-9b0a-3bc14853865b-1616888301438/node_modules/text2png-loader"
    tmp "^0.0.33"

 external-editor@^3.0.3:
@ -5640,6 +5645,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^3.0.0"
    inherits "^2.0.1"

+rtl-detect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
+  integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
+
 run-async@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"