add i18n translation and use them in the app

_locales/en/messages.json

@@ -2289,5 +2289,75 @@
         "example": ""
       }
     }
+  },
+  "beginYourSession": {
+    "message": "Begin<br/>your<br/>Session."
+  },
+  "ensuringPeaceOfMind": {
+    "message":
+      "Ensuring <span class='redacted'>peace of</span> mind, one <span class='redacted'>session</span> 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 <a>Terms and Conditions</a> and <a>Privacy Statement</a>"
+  },
+  "or": {
+    "message": "or"
   }
 }

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

stylesheets/_session_signin.scss

@@ -49,9 +49,6 @@
       height: 60%;
       padding-right: 128px;
     }
-
-
-   
   }
 
   &-registration {
@@ -228,8 +225,6 @@
     overflow-wrap: break-word;
     padding: 20px 5px 20px 5px;
     display: inline-block;
-
-    
   }
 }
 

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<Props> {
   }
 
   public render() {
-    const { showSubtitle } = this.props;
+    const { showSubtitle, i18n } = this.props;
+
+    const title = i18n('beginYourSession');
+    const subtitle = i18n('ensuringPeaceOfMind');
 
     return (
       <div className="session-content-accent-text">
-        <div className="session-content-accent-text title">
-          Begin<br />your<br />Session.
-        </div>
+        <div
+          className="session-content-accent-text title"
+          dangerouslySetInnerHTML={{ __html: title }}
+        />
+
         {showSubtitle ? (
-          <div className="session-content-accent-text subtitle">
-            Ensuring <span className={classNames('redacted')}>peace of</span>{' '}
-            mind, one <span className={classNames('redacted')}>session</span> at
-            a time.
-          </div>
+          <div
+            className="session-content-accent-text subtitle"
+            dangerouslySetInnerHTML={{ __html: subtitle }}
+          />
         ) : (
           ''
         )}

ts/components/session/RegistrationTabs.tsx

@@ -91,18 +91,22 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private renderTabs() {
     const { selectedTab } = this.state;
+    const { i18n } = this.props;
+
+    const createAccount = i18n('createAccount');
+    const signIn = i18n('signIn');
 
     return (
       <div className="session-registration-container">
         <div className="session-registration__tab-container">
           <Tab
-            label="Create Account"
+            label={createAccount}
             type="create"
             isSelected={selectedTab === 'create'}
             onSelect={this.handleTabSelect}
           />
           <Tab
-            label="Sign In"
+            label={signIn}
             type="signin"
             isSelected={selectedTab === 'signin'}
             onSelect={this.handleTabSelect}
@@ -144,6 +148,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private renderSignUp() {
     const { signUpMode } = this.state;
+    const { i18n } = this.props;
     if (signUpMode === SignUpMode.Default) {
       return (
         <div className="session-registration__content">
@@ -151,13 +156,12 @@ export class RegistrationTabs extends React.Component<Props, State> {
           {this.renderSignUpButton()}
         </div>
       );
-    }
-    else {
+    } else {
       return (
         <div className="session-registration__content">
           {this.renderSignUpHeader()}
           <div className="session-registration__unique-session-id">
-            Your Unique Session ID
+            {i18n('yourUniqueSessionID')}
           </div>
           {this.renderEnterSessionID(false)}
           {this.renderSignUpButton()}
@@ -165,7 +169,6 @@ export class RegistrationTabs extends React.Component<Props, State> {
         </div>
       );
     }
-    
   }
 
   private getRenderTermsConditionAgreement() {
@@ -186,26 +189,23 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderSignUpHeader() {
-    return (
-      <div className="session-signup-header">
-        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!
-      </div>
-    );
+    const allUsersAreRandomly = this.props.i18n('allUsersAreRandomly...');
+
+    return <div className="session-signup-header">{allUsersAreRandomly}</div>;
   }
 
   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<Props, State> {
 
   private renderRegistrationContent() {
     const { signInMode } = this.state;
+    const { i18n } = this.props;
 
     if (signInMode === SignInMode.UsingSeed) {
       return (
         <div className={classNames('session-registration__entry-fields')}>
           <SessionInput
-            label="Mnemonic Seed"
+            label={i18n('mnemonicSeed')}
             type="password"
-            placeholder="Enter Seed"
-            i18n={this.props.i18n}
+            placeholder={i18n('enterSeed')}
             value={this.state.seed}
             enableShowHide={true}
             onValueChanged={(val: string) => {
@@ -250,29 +250,26 @@ export class RegistrationTabs extends React.Component<Props, State> {
             }}
           />
           <SessionInput
-            label="Display Name"
+            label={i18n('displayName')}
             type="text"
-            placeholder="Enter Optional Display Name"
-            i18n={this.props.i18n}
+            placeholder={i18n('enterOptionalDisplayName')}
             value={this.state.displayName}
             onValueChanged={(val: string) => {
               this.onDisplayNameChanged(val);
             }}
           />
           <SessionInput
-            label="Optional Password"
+            label={i18n('optionalPassword')}
             type="password"
-            placeholder="Enter Optional Password"
-            i18n={this.props.i18n}
+            placeholder={i18n('enterOptionalPassword')}
             onValueChanged={(val: string) => {
               this.onPasswordChanged(val);
             }}
           />
           <SessionInput
-            label="Verify Password"
+            label={i18n('verifyPassword')}
             type="password"
-            placeholder="Optional Password"
-            i18n={this.props.i18n}
+            placeholder={i18n('optionalPassword')}
             onValueChanged={(val: string) => {
               this.onPasswordVerifyChanged(val);
             }}
@@ -283,9 +280,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
       return (
         <div className="">
           <div className="session-signin-device-pairing-header">
-            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')}
           </div>
           {this.renderEnterSessionID(true)}
         </div>
@@ -296,32 +291,37 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderEnterSessionID(contentEditable: boolean) {
+    const { i18n } = this.props;
+    const enterSessionIDHere = i18n('enterSessionIDHere');
+
     return (
       <div
         className="session-signin-enter-session-id"
         contentEditable={contentEditable}
-        placeholder="Enter your Session ID here"
+        placeholder={enterSessionIDHere}
       />
     );
   }
 
   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<Props, State> {
           buttonType={greenButtonType}
           text={greenText}
         />
-        <div className="session-registration__or">or</div>
+        <div className="session-registration__or">{or}</div>
         <SessionButton
           onClick={() => {
             this.setState({
@@ -350,12 +350,15 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderTermsConditionAgreement() {
+    // FIXME link to our Terms and Conditions and privacy statement
+    const { i18n } = this.props;
+    const byUsingThisService = i18n('byUsingThisService...');
+
     return (
-      <div className="session-terms-conditions-agreement">
-        By using this service, you agree to our <a>Terms and Conditions</a> and{' '}
-        <a>Privacy Statement</a>
-      </div>
+      <div
+        className="session-terms-conditions-agreement"
+        dangerouslySetInnerHTML={{ __html: byUsingThisService }}
+      />
     );
-    // FIXME link to our Terms and Conditions and privacy statement
   }
 }

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;

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;

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<Props> {
   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 (
       <div className="session-content">
         <div className="session-content-accent">
-          <AccentText showSubtitle={showSubtitle || true} />
+          <AccentText showSubtitle={showSubtitle || true} i18n={i18n} />
         </div>
         <div className="session-content-registration">
           <RegistrationTabs i18n={i18n} />
@@ -51,15 +34,4 @@ export class SessionRegistrationView extends React.Component<Props> {
       </div>
     );
   }
-
-  private onKeyUp(event: any) {
-    switch (event.key) {
-      case 'Enter':
-        break;
-      case 'Esc':
-      case 'Escape':
-        break;
-      default:
-    }
-  }
 }