more fixes

service-worker.js

@@ -1,7 +1,9 @@
 // Must be located at the root.
-importScripts("https://unpkg.com/firebase@5.5.5/firebase-app.js");
+importScripts('https://unpkg.com/firebase@5.5.5/firebase-app.js');
-importScripts("https://unpkg.com/firebase@5.5.5/firebase-messaging.js");
+importScripts('https://unpkg.com/firebase@5.5.5/firebase-messaging.js');
-importScripts("/src/firebase-init.js")
+importScripts('/src/firebase-init.json');
+
+console.log("FIREBASE_INIT", FIREBASE_INIT);
 
 firebase.initializeApp(FIREBASE_INIT);
 

src/firebase-init.js

@@ -1,9 +0,0 @@
-// Get these values for your project from the https://console.firebase.google.com/
-export const FIREBASE_INIT = {
-  // Project Settings -> Cloud Messaging, "Sender ID".
-  messagingSenderId: "114126160546",
-  // Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
-  // This value IS NOT included in the generated js config you can download from
-  // the firebase console. It needs to be added separately.
-  messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58"
-};

src/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "login_prompt": "Login",
+  "password_prompt": "Password",
+  "stay_logged_in": "Stay logged in",
+  "forgot_password_link": "Forgot password?",
+  "sign_in_button": "Sign in",
+  "label_client": "Client:",
+  "label_server": "Server:"
+}

src/i18n/ru.json

@@ -0,0 +1,9 @@
+{
+  "login_prompt": "Логин",
+  "password_prompt": "Пароль",
+  "stay_logged_in": "Запомнить",
+  "forgot_password_link": "Напомнить пароль",
+  "sign_in_button": "Войти",
+  "label_client": "Клиент:",
+  "label_server": "Сервер:"
+}

src/index.js

@@ -3,13 +3,18 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import ruData from 'react-intl/locale-data/ru';
+addLocaleData(ruData);
+import en from './i18n/en.json';
+import ru from './i18n/ru.json';
 
 import TinodeWeb from './views/tinode-web.jsx';
 
 ReactDOM.render(
   <IntlProvider
-    locale={navigator.language}>
+    locale={navigator.language}
+    messages={en} >
     <TinodeWeb />
   </IntlProvider>,
   document.getElementById('mountPoint')

src/lib/navigation.js

@@ -41,28 +41,28 @@ export default class HashNavigation {
   }
 
   static addUrlParam(hash, key, value) {
-    var parsed = parseUrlHash(hash);
+    var parsed = this.parseUrlHash(hash);
     parsed.params[key] = value;
-    return composeUrlHash(parsed.path, parsed.params);
+    return this.composeUrlHash(parsed.path, parsed.params);
   }
 
   static removeUrlParam(hash, key) {
-    var parsed = parseUrlHash(hash);
+    var parsed = this.parseUrlHash(hash);
     delete parsed.params[key];
-    return composeUrlHash(parsed.path, parsed.params);
+    return this.composeUrlHash(parsed.path, parsed.params);
   }
 
   static setUrlSidePanel(hash, sidepanel) {
-    var parsed = parseUrlHash(hash);
+    var parsed = this.parseUrlHash(hash);
     parsed.path[0] = sidepanel;
-    return composeUrlHash(parsed.path, parsed.params);
+    return this.composeUrlHash(parsed.path, parsed.params);
   }
 
   static setUrlTopic(hash, topic) {
-    var parsed = parseUrlHash(hash);
+    var parsed = this.parseUrlHash(hash);
     parsed.path[1] = topic;
     // Close InfoView on topic change.
     delete parsed.params.info;
-    return composeUrlHash(parsed.path, parsed.params);
+    return this.composeUrlHash(parsed.path, parsed.params);
   }
 }

src/views/login-view.jsx

@@ -1,5 +1,4 @@
-// Login form
+// Login form.
-
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -50,7 +49,7 @@ export default class LoginView extends React.Component {
 
     return (
       <form id="login-form" onSubmit={this.handleSubmit}>
-        <FormattedMessage id="login.login_prompt" defaultMessage="Login">
+        <FormattedMessage id="login_prompt" defaultMessage="Login">
         {
           (login_prompt) => <input type="text" id="inputLogin"
             placeholder={login_prompt}
@@ -60,7 +59,7 @@ export default class LoginView extends React.Component {
             required autoFocus />
         }
         </FormattedMessage>
-        <FormattedMessage id="login.password_prompt" defaultMessage="Password">
+        <FormattedMessage id="password_prompt" defaultMessage="Password">
         {
           (password_prompt) => <VisiblePassword type="password" id="inputPassword"
             placeholder={password_prompt}
@@ -74,15 +73,15 @@ export default class LoginView extends React.Component {
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />
           <label htmlFor="save-token">&nbsp;
-            <FormattedMessage id="login.stay_logged_in" defaultMessage="Stay logged in" />
+            <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in" />
           </label>
           <a href="#reset">
-            <FormattedMessage id="login.forgot_password_link" defaultMessage="Forgot password?" />
+            <FormattedMessage id="forgot_password_link" defaultMessage="Forgot password?" />
           </a>
         </div>
         <div className="dialog-buttons">
           <button className={submitClasses} type="submit">
-            <FormattedMessage id="login.sign_in_button" defaultMessage="Sign in" />
+            <FormattedMessage id="sign_in_button" defaultMessage="Sign in" />
           </button>
         </div>
       </form>

src/views/logo-view.jsx

@@ -1,5 +1,6 @@
 /* This is just a static page to display when no conversation is selected. */
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 
@@ -15,8 +16,9 @@ export default class LogoView extends React.PureComponent {
           <img id="logo" alt="logo" src="img/logo.svg" />
           <h2>Tinode Web</h2>
         </a>
-        <p>Client: {version}</p>
+        <p><FormattedMessage id="label_client" defaultMessage="Client:" /> {version}</p>
-        <p>Server: {this.props.serverVersion} ({this.props.serverAddress})</p>
+        <p><FormattedMessage id="label_server" defaultMessage="Server:" /> {this.props.serverVersion}
+          ({this.props.serverAddress})</p>
         </div>
       </div>
     );

src/views/tinode-web.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import 'firebase/app';
 import 'firebase/messaging';
-import { FIREBASE_INIT } from '../firebase-init.js'
+import { FIREBASE_INIT } from '../firebase-init.json';
 
 import Tinode from 'tinode-sdk';
 
@@ -21,6 +21,8 @@ import HashNavigation from '../lib/navigation.js';
 // Sound to play on message received.
 export const POP_SOUND = new Audio('audio/msg.mp3');
 
+console.log(FIREBASE_INIT);
+
 export default class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);