From 9cfc90ca67f5f46882ed21b460a01b6d50ffa79c Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Tue, 7 Feb 2017 14:19:13 -0200 Subject: [#922] Add i18n translations for react with @anikarni --- web-ui/app/js/account_recovery.js | 9 ++++++-- web-ui/app/js/account_recovery/i18n.js | 41 ++++++++++++++++++++++++++++++++++ web-ui/app/js/account_recovery/page.js | 7 +++--- web-ui/package.json | 3 ++- 4 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 web-ui/app/js/account_recovery/i18n.js (limited to 'web-ui') diff --git a/web-ui/app/js/account_recovery.js b/web-ui/app/js/account_recovery.js index 441a8936..cd01378d 100644 --- a/web-ui/app/js/account_recovery.js +++ b/web-ui/app/js/account_recovery.js @@ -1,13 +1,18 @@ import React from 'react' import { render } from 'react-dom' -import Page from 'js/account_recovery/page' import a11y from 'react-a11y' +import { I18nextProvider } from 'react-i18next' + +import Page from 'js/account_recovery/page' +import i18n from 'js/account_recovery/i18n' import 'font-awesome/scss/font-awesome.scss' if(process.env.NODE_ENV === 'development') a11y(React); render( - , + + + , document.getElementById('root') ); diff --git a/web-ui/app/js/account_recovery/i18n.js b/web-ui/app/js/account_recovery/i18n.js new file mode 100644 index 00000000..968f7a6b --- /dev/null +++ b/web-ui/app/js/account_recovery/i18n.js @@ -0,0 +1,41 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ +import i18n from 'i18next' +import i18nBackend from 'i18nextXHRBackend' +import i18nDetector from 'i18nextBrowserLanguageDetector' + +const detector = new i18nDetector(); +const detect = detector.detect.bind(detector); + +detector.detect = function(detectionOrder) { + let result = detect(detectionOrder); + return result.replace('-', '_'); +}; + +i18n + .use(i18nBackend) + .use(detector) + .init({ + fallbackLng: 'en_US', + ns: ['translation'], + defaultNS: 'translation', + backend: { + loadPath: 'assets/locales/{{lng}}/{{ns}}.json' + } + }); + +export default i18n; diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index 5d4f2c36..90cdb54f 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -1,8 +1,9 @@ import React from 'react' +import { translate } from 'react-i18next' import 'scss/account_recovery/page.scss' -const Page = () => ( +const Page = (props) => (
Esqueci minha senha!
@@ -22,6 +23,6 @@ const Page = () => (
-); +) -export default Page +export default translate('', { wait: true })(Page) diff --git a/web-ui/package.json b/web-ui/package.json index 6f9b03d4..ff4201c0 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -22,7 +22,7 @@ "handlebars": "^4.0.5", "he": "^1.1.0", "html-minifier": "2.1.6", - "i18next": "^4.1.4", + "i18next": "^6.1.2", "i18next-browser-languagedetector": "^1.0.1", "i18next-xhr-backend": "^1.2.1", "iframe-resizer": "^3.5.7", @@ -53,6 +53,7 @@ "react-a11y": "^0.3.3", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2", + "react-i18next": "^2.1.0", "requirejs": "2.2.0", "sass-loader": "^4.1.1", "style-loader": "^0.13.1", -- cgit v1.2.3 From ebd5b3adce44a16213e5c1ec763a642899eba908 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Tue, 7 Feb 2017 15:16:00 -0200 Subject: [#922] Add translation for Portuguese and English --- web-ui/app/js/account_recovery/i18n.js | 2 -- web-ui/app/js/account_recovery/page.js | 16 ++++++++-------- web-ui/app/locales/en_US/translation.json | 11 ++++++++++- web-ui/app/locales/pt_BR/translation.json | 11 ++++++++++- web-ui/test/spec/account_recovery/page.spec.js | 8 ++++---- 5 files changed, 32 insertions(+), 16 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/js/account_recovery/i18n.js b/web-ui/app/js/account_recovery/i18n.js index 968f7a6b..9c6ad550 100644 --- a/web-ui/app/js/account_recovery/i18n.js +++ b/web-ui/app/js/account_recovery/i18n.js @@ -31,8 +31,6 @@ i18n .use(detector) .init({ fallbackLng: 'en_US', - ns: ['translation'], - defaultNS: 'translation', backend: { loadPath: 'assets/locales/{{lng}}/{{ns}}.json' } diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index 90cdb54f..a94c2c45 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -3,22 +3,22 @@ import { translate } from 'react-i18next' import 'scss/account_recovery/page.scss' -const Page = (props) => ( +export const Page = ({ t }) => (
- Esqueci minha senha! + {t('backup-account.image-description')}/
-

E se você esquecer sua senha?

-

Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.

-

Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.

+

{t('backup-account.title')}

+

{t('backup-account.paragraph1')}

+

{t('backup-account.paragraph2')}

- +
- +
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 6e2cef80..db018db4 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -73,5 +73,14 @@ "trash": "Trash", "all": "All", "tags": "Tags" - } + }, + "backup-account": { + "image-description": "Forgot my password!", + "title": "What if you forget your password?", + "paragraph1": "You will need a backup account. Choose an alternative email address you use regularly.", + "paragraph2": "Instructions to recover your password will be sent to this email address, save it.", + "input-label": "Type your backup account", + "button": "Add Account" + }, + "back-to-inbox": "Back to my inbox" } diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json index d1ab7245..87b2655e 100644 --- a/web-ui/app/locales/pt_BR/translation.json +++ b/web-ui/app/locales/pt_BR/translation.json @@ -73,5 +73,14 @@ "trash": "Lixeira", "all": "Todas", "tags": "Etiquetas" - } + }, + "backup-account": { + "image-description": "Esqueci minha senha!", + "title": "E se você esquecer sua senha?", + "paragraph1": "Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.", + "paragraph2": "Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.", + "input-label": "Digite seu e-mail de recuperação.", + "button": "Adicionar e-mail" + }, + "back-to-inbox": "Voltar" } diff --git a/web-ui/test/spec/account_recovery/page.spec.js b/web-ui/test/spec/account_recovery/page.spec.js index f550a51e..3e19f244 100644 --- a/web-ui/test/spec/account_recovery/page.spec.js +++ b/web-ui/test/spec/account_recovery/page.spec.js @@ -1,12 +1,12 @@ import {shallow} from 'enzyme' import expect from 'expect' import React from 'react' -import Page from '../../../app/js/account_recovery/page' +import { Page } from '../../../app/js/account_recovery/page' describe('Page', () => { - 'use strict'; it('renders backup email page title', () => { - const page = shallow(); - expect(page.find('h1').text()).toEqual('E se você esquecer sua senha?'); + const mockT = key => key; + const page = shallow(); + expect(page.find('h1').text()).toEqual('backup-account.title'); }); }); -- cgit v1.2.3