From 291e3b48a01083c929bfaaf0e29093ab3aa844ea Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 10 Dec 2019 09:10:49 +1100 Subject: [PATCH] add i18n translation and use them in the app --- _locales/en/messages.json | 70 +++++++++++++++ stylesheets/_session.scss | 37 -------- stylesheets/_session_signin.scss | 61 ++++++------- ts/components/session/AccentText.tsx | 28 +++--- ts/components/session/RegistrationTabs.tsx | 87 ++++++++++--------- ts/components/session/SessionButton.tsx | 3 - ts/components/session/SessionInput.tsx | 2 - .../session/SessionRegistrationView.tsx | 30 +------ 8 files changed, 159 insertions(+), 159 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 83a3658d9..fb1674f0e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2289,5 +2289,75 @@ "example": "" } } + }, + "beginYourSession": { + "message": "Begin
your
Session." + }, + "ensuringPeaceOfMind": { + "message": + "Ensuring peace of mind, one session at a time." + }, + "createAccount": { + "message": "Create Account" + }, + "signIn": { + "message": "Sign In" + }, + "yourUniqueSessionID": { + "message": "Your Unique Session ID" + }, + "allUsersAreRandomly...": { + "message": + "All users are randomly generated a set of numbers that act as their unique Session ID. Share your Session ID in order to chat with your friends!" + }, + "getStarted": { + "message": "Get started" + }, + "generateSessionID": { + "message": "Generate Session ID" + }, + "mnemonicSeed": { + "message": "Mnemonic Seed" + }, + "enterSeed": { + "message": "Enter Seed" + }, + "displayName": { + "message": "Display Name" + }, + "enterOptionalDisplayName": { + "message": "Enter Optional Display Name" + }, + "optionalPassword": { + "message": "Optional Password" + }, + "enterOptionalPassword": { + "message": "Enter Optional Password" + }, + "verifyPassword": { + "message": "Verify Password" + }, + "devicePairingHeader": { + "message": + "Open the Loki Messenger App on your primary device and select Device Pairing from the main menu. Then, enter your Session ID below to sign in." + }, + "enterSessionIDHere": { + "message": "Enter your Session ID here" + }, + "continueYourSession": { + "message": "Continue Your Session" + }, + "restoreUsingSeed": { + "message": "Restore Using Seed" + }, + "linkDeviceToExistingAccount": { + "message": "Link Device To Existing Account" + }, + "byUsingThisService...": { + "message": + "By using this service, you agree to our Terms and Conditions and Privacy Statement" + }, + "or": { + "message": "or" } } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 730e6d8e8..96ae4ba6a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -440,41 +440,4 @@ $session_message-container-border-radius: 5px; } } } - - &-icon-button { - fill: $session-color-white; - opacity: 0.4; - cursor: pointer; - display: inline-block; - transition: opacity $session-transition-duration; - - @mixin adjust-icon-size($size) { - line-height: $size; - height: $size; - width: $size; - - margin: $size / 3; - - img { - height: $size; - width: $size; - } - } - - &.small { - @include adjust-icon-size($session-icon-size-sm); - } - - &.medium { - @include adjust-icon-size($session-icon-size-md); - } - - &.large { - @include adjust-icon-size($session-icon-size-lg); - } - - &:hover { - opacity: 1; - } - } } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index c14302430..e3f98b2a9 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -10,25 +10,25 @@ height: 100%; display: flex; align-items: center; - + &-accent { flex-grow: 1; padding-left: 20px; - + &-text { color: $session-color-white; font-family: $session-font-family; - + .title { font-size: 100px; font-weight: 700; line-height: 120px; } - + .subtitle { font-size: 18px; font-weight: 700; - + .redacted { background: $session-color-white; white-space: nowrap; @@ -36,7 +36,7 @@ border-radius: 100px; padding-left: 7px; padding-right: 7px; - + &:hover { background-color: $session-color-black; } @@ -44,35 +44,32 @@ } } } - + &-registration { height: 60%; padding-right: 128px; } - - - } &-registration { - &-container{ + &-container { display: flex; flex-direction: column; width: 289px; } - + &__content { width: 100%; overflow-y: auto; padding-top: 20px; } - + &__sections { display: flex; flex-grow: 1; flex-direction: column; } - + &__tab-container { display: flex; flex-grow: 0; @@ -82,12 +79,12 @@ height: 30px; left: 0; right: 0; - + margin-left: auto; margin-right: auto; color: $session-color-white; } - + &__tab { @include fontWasaBold(); width: 100%; @@ -99,12 +96,12 @@ transition: border-color $session-transition-duration linear; line-height: 17px; font-size: 15px; - + &--active { border-bottom: 4px solid $session-color-green; } } - + @mixin registration-label-mixin { color: $session-color-white; text-align: center; @@ -113,16 +110,16 @@ line-height: 17px; padding: 12px; } - + &__or { @include registration-label-mixin; } - + &__unique-session-id { @include registration-label-mixin; padding-top: 3em; } - + &__entry-fields { margin: 0px; padding-bottom: 30px; @@ -137,7 +134,7 @@ transition: opacity $session-transition-duration; opacity: 1; position: relative; - + label { line-height: 14px; opacity: 0; @@ -147,11 +144,11 @@ position: absolute; top: 0px; } - + &.filled { opacity: 1; } - + input { border: none; outline: 0; @@ -165,14 +162,14 @@ top: 50%; transform: translateY(-50%); } - + hr { border: 1px solid $session-color-white; width: 100%; position: absolute; bottom: 0px; } - + button { position: absolute; top: 50%; @@ -186,23 +183,23 @@ color: $session-color-light-grey; text-align: center; font-size: 12px; - + a { white-space: nowrap; font-weight: bold; color: $session-color-light-grey; transition: $session-transition-duration; - + &:visited &:link { color: $session-color-light-grey; } - + &:hover { color: $session-color-white; } } } - + &-signup-header, &-signin-device-pairing-header { padding-top: 10px; @@ -212,7 +209,7 @@ font-size: 12px; line-height: 20px; } - + &-signin-enter-session-id { height: auto; width: 289px; @@ -228,8 +225,6 @@ overflow-wrap: break-word; padding: 20px 5px 20px 5px; display: inline-block; - - } } diff --git a/ts/components/session/AccentText.tsx b/ts/components/session/AccentText.tsx index 010e4107e..23e32bf94 100644 --- a/ts/components/session/AccentText.tsx +++ b/ts/components/session/AccentText.tsx @@ -1,11 +1,9 @@ import React from 'react'; -import classNames from 'classnames'; -//import { LocalizerType } from '../../types/Util'; +import { LocalizerType } from '../../types/Util'; interface Props { - //i18n: LocalizerType; - // text: string; + i18n: LocalizerType; showSubtitle?: boolean; } @@ -15,19 +13,23 @@ export class AccentText extends React.PureComponent { } public render() { - const { showSubtitle } = this.props; + const { showSubtitle, i18n } = this.props; + + const title = i18n('beginYourSession'); + const subtitle = i18n('ensuringPeaceOfMind'); return (
-
- Begin
your
Session. -
+
+ {showSubtitle ? ( -
- Ensuring peace of{' '} - mind, one session at - a time. -
+
) : ( '' )} diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index 94dbf24fb..f942351b7 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -91,18 +91,22 @@ export class RegistrationTabs extends React.Component { private renderTabs() { const { selectedTab } = this.state; + const { i18n } = this.props; + + const createAccount = i18n('createAccount'); + const signIn = i18n('signIn'); return (
{ } private renderSignUp() { - const {signUpMode} = this.state; + const { signUpMode } = this.state; + const { i18n } = this.props; if (signUpMode === SignUpMode.Default) { return (
@@ -151,13 +156,12 @@ export class RegistrationTabs extends React.Component { {this.renderSignUpButton()}
); - } - else { + } else { return (
{this.renderSignUpHeader()}
- Your Unique Session ID + {i18n('yourUniqueSessionID')}
{this.renderEnterSessionID(false)} {this.renderSignUpButton()} @@ -165,7 +169,6 @@ export class RegistrationTabs extends React.Component {
); } - } private getRenderTermsConditionAgreement() { @@ -186,26 +189,23 @@ export class RegistrationTabs extends React.Component { } private renderSignUpHeader() { - return ( -
- All users are randomly generated a set of numbers that act as their - unique Session ID. Share your Session ID in order to chat with your - friends! -
- ); + const allUsersAreRandomly = this.props.i18n('allUsersAreRandomly...'); + + return
{allUsersAreRandomly}
; } private renderSignUpButton() { const { signUpMode } = this.state; + const { i18n } = this.props; let buttonType: any; let buttonText: string; if (signUpMode !== SignUpMode.Default) { buttonType = SessionButtonTypes.FullGreen; - buttonText = 'Get started'; + buttonText = i18n('getStarted'); } else { buttonType = SessionButtonTypes.Green; - buttonText = 'Generate Session ID'; + buttonText = i18n('generateSessionID'); } return ( @@ -234,15 +234,15 @@ export class RegistrationTabs extends React.Component { private renderRegistrationContent() { const { signInMode } = this.state; + const { i18n } = this.props; if (signInMode === SignInMode.UsingSeed) { return (
{ @@ -250,29 +250,26 @@ export class RegistrationTabs extends React.Component { }} /> { this.onDisplayNameChanged(val); }} /> { this.onPasswordChanged(val); }} /> { this.onPasswordVerifyChanged(val); }} @@ -283,9 +280,7 @@ export class RegistrationTabs extends React.Component { return (
- Open the Loki Messenger App on your primary device and select - "Device Pairing" from the main menu. Then, enter your Session ID - below to sign in. + {i18n('devicePairingHeader')}
{this.renderEnterSessionID(true)}
@@ -296,32 +291,37 @@ export class RegistrationTabs extends React.Component { } private renderEnterSessionID(contentEditable: boolean) { + const { i18n } = this.props; + const enterSessionIDHere = i18n('enterSessionIDHere'); + return (
); } private renderSignInButtons() { const { signInMode } = this.state; + const { i18n } = this.props; + const or = i18n('or'); let greenButtonType: any; let greenText: string; let whiteButtonText: string; if (signInMode !== SignInMode.Default) { greenButtonType = SessionButtonTypes.FullGreen; - greenText = 'Continue Your Session'; + greenText = i18n('continueYourSession'); } else { greenButtonType = SessionButtonTypes.Green; - greenText = 'Restore Using Seed'; + greenText = i18n('restoreUsingSeed'); } if (signInMode === SignInMode.LinkingDevice) { - whiteButtonText = 'Restore Using Seed'; + whiteButtonText = i18n('restoreUsingSeed'); } else { - whiteButtonText = 'Link Device To Existing Account'; + whiteButtonText = i18n('linkDeviceToExistingAccount'); } return ( @@ -335,7 +335,7 @@ export class RegistrationTabs extends React.Component { buttonType={greenButtonType} text={greenText} /> -
or
+
{or}
{ this.setState({ @@ -350,12 +350,15 @@ export class RegistrationTabs extends React.Component { } private renderTermsConditionAgreement() { + // FIXME link to our Terms and Conditions and privacy statement + const { i18n } = this.props; + const byUsingThisService = i18n('byUsingThisService...'); + return ( -
- By using this service, you agree to our Terms and Conditions and{' '} - Privacy Statement -
+
); - // FIXME link to our Terms and Conditions and privacy statement } } diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx index 84f39ed3f..89f39558b 100644 --- a/ts/components/session/SessionButton.tsx +++ b/ts/components/session/SessionButton.tsx @@ -1,8 +1,6 @@ import React from 'react'; import classNames from 'classnames'; -//import { LocalizerType } from '../../types/Util'; - export enum SessionButtonType { Brand = 'brand', BrandOutline = 'brand-outline', @@ -23,7 +21,6 @@ export enum SessionButtonColor { } interface Props { - //i18n: LocalizerType; text: string; buttonType: SessionButtonType; buttonColor: SessionButtonColor; diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx index 01f97618c..d858f7eab 100644 --- a/ts/components/session/SessionInput.tsx +++ b/ts/components/session/SessionInput.tsx @@ -1,10 +1,8 @@ import React from 'react'; -import { LocalizerType } from '../../types/Util'; import classNames from 'classnames'; interface Props { - i18n: LocalizerType; label: string; type: string; value?: string; diff --git a/ts/components/session/SessionRegistrationView.tsx b/ts/components/session/SessionRegistrationView.tsx index ec5ccde06..f0144a914 100644 --- a/ts/components/session/SessionRegistrationView.tsx +++ b/ts/components/session/SessionRegistrationView.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { AccentText } from './AccentText'; -//import classNames from 'classnames'; import { LocalizerType } from '../../types/Util'; import { RegistrationTabs } from './RegistrationTabs'; @@ -14,36 +13,20 @@ declare global { interface Props { showSubtitle: boolean; i18n: LocalizerType; - /* profileName: string; - avatarPath: string; - avatarColor: string; - pubkey: string; - onClose: any; - onStartConversation: any; */ } -/* -interface State { - avatarColor: string; -} */ export class SessionRegistrationView extends React.Component { constructor(props: Props) { super(props); - - //this.closeDialog = this.closeDialog.bind(this); - window.addEventListener('keyup', this.onKeyUp); } public render() { - //const i18n = this.props.i18n; - //const cancelText = i18n('cancel'); - const { showSubtitle, i18n } = this.props; return (
- +
@@ -51,15 +34,4 @@ export class SessionRegistrationView extends React.Component {
); } - - private onKeyUp(event: any) { - switch (event.key) { - case 'Enter': - break; - case 'Esc': - case 'Escape': - break; - default: - } - } }