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

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

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}
@@ -143,7 +147,8 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderSignUp() {
-    const {signUpMode} = this.state;
+    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:
-    }
-  }
 }