things seem to work

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "comments": false,
   "plugins": [
     ["react-intl", {
         "messagesDir": "./src/i18n/"

firebase-init.js

@@ -0,0 +1,9 @@
+// Get these values for your project from the https://console.firebase.google.com/
+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"
+};

index-dev.html

@@ -32,7 +32,7 @@
 
   <body>
     <div id="mountPoint"></div>
-    <!-- the application -->
+    <script src="firebase-init.js"></script>
     <script src="umd/index.dev.js"></script>
   </body>
 </html>

index.html

@@ -26,7 +26,7 @@
   </head>
   <body>
     <div id="mountPoint"></div>
-    <script src="/firebase-init.js"></script>
+    <script src="firebase-init.js"></script>
     <script src="umd/index.prod.js"></script>
   </body>
 </html>

package-lock.json

@@ -1735,6 +1735,34 @@
         "pako": "~1.0.5"
       }
     },
+    "browserslist": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.3.tgz",
+      "integrity": "sha512-6h84UD1mmHeuQ9IucX6yzBc+KBYcBBTLYt2CXtY7GYCra6iE5kOm7oM+zuGw/0tjGtbJxjm58OvxSBmogEMCRQ==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30000898",
+        "electron-to-chromium": "^1.3.81",
+        "node-releases": "^1.0.0-alpha.15"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30000899",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000899.tgz",
+          "integrity": "sha512-enC3zKfUCJxxwvUIsBkbHd54CtJw1KtIWvrK0JZxWD/fEN2knHaai45lndJ4xXAkyRAPyk60J3yagkKDWhfeMA==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.0.0-alpha.15",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.15.tgz",
+          "integrity": "sha512-hKG6hd/g6a9OV/ARt2qrxbRhe/4WEMFohTLOB9PNyTYvvI59gICZFzt9/mMgpYUTts06qXlN8H6UjfbIRdnW8A==",
+          "dev": true,
+          "requires": {
+            "semver": "^5.3.0"
+          }
+        }
+      }
+    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -2711,6 +2739,12 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "electron-to-chromium": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.82.tgz",
+      "integrity": "sha512-NI4nB2IWGcU4JVT1AE8kBb/dFor4zjLHMLsOROPahppeHrR0FG5uslxMmkp/thO1MvPjM2xhlKoY29/I60s0ew==",
+      "dev": true
+    },
     "elliptic": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",

package.json

@@ -8,8 +8,8 @@
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-react-intl": "^3.0.1",
+    "browserslist": "^4.3.3",
     "cssnano": "^4.0.5",
-    "uglify-es": "^3.3.9",
     "webpack": "^4.22.0",
     "webpack-cli": "^3.1.2"
   },
@@ -18,17 +18,20 @@
     "url": "https://github.com/tinode/example-react-js.git"
   },
   "scripts": {
-    "build": "npm run vers && npm run build:babel && npm run build:prod && npm run build:dev && npm run build:css",
+    "build": "npm run vers && npm run build:prod && npm run build:dev && npm run build:css && npm run build:i18n",
-    "build:prod": "browserify ./src/index.js --standalone Webapp | uglifyjs --compress --mangle > ./umd/index.prod.js",
-    "build:dev": "browserify ./src/index.js --standalone Webapp > ./umd/index.dev.js",
     "build:css": "postcss css/base.css > css/base.min.css",
-    "wp-build:dev": "webpack --mode development --output-library-target umd --output ./umd/index.dev.js",
+    "build:dev": "webpack --mode development --output-library-target umd --output ./umd/index.dev.js",
-    "wp-build:prod": "webpack --mode production --output-library-target umd --output ./umd/index.prod.js",
+    "build:prod": "webpack --mode production --output-library-target umd --output ./umd/index.prod.js",
+    "build:i18n": "node scripts/flatten-messages.js",
     "vers": "node scripts/gen-version.js"
   },
   "files": [
     "src/index.js",
-    "src/components/*.jsx",
+    "src/config.js",
+    "src/views/*.jsx",
+    "src/widgets/*.jsx",
+    "src/lib/*.js",
+    "src/i18n/*.json",
     "umd/index.prod.js",
     "umd/index.dev.js",
     "audio/msg.mp3",

scripts/flatten-messages.js

@@ -0,0 +1,29 @@
+// Flattens messages extracted via the React Intl Babel plugin. An error will be
+// thrown if there are messages with the same `id`. The result is a file containing
+// `id: message` pairs in "en" locale.
+
+var fs = require('fs');
+var path = require('path');
+var globSync = require('glob').sync;
+var mkdirpSync = require('mkdirp').sync;
+
+const MESSAGES_PATTERN = './src/i18n/src/**/*.json';
+const LANG_DIR         = './src/i18n/';
+
+let messages = globSync(MESSAGES_PATTERN)
+  .map((filename) => fs.readFileSync(filename, 'utf8'))
+  .map((file) => JSON.parse(file))
+  .reduce((collection, descriptors) => {
+    descriptors.forEach(({id, defaultMessage}) => {
+      if (collection.hasOwnProperty(id)) {
+          throw new Error(`Duplicate message id: ${id}`);
+      }
+      collection[id] = defaultMessage;
+    });
+
+    return collection;
+  }, {});
+
+let filename = path.join(LANG_DIR, 'en.json');
+mkdirpSync(path.dirname(filename));
+fs.writeFileSync(filename, JSON.stringify(messages, null, 2));

service-worker.js

@@ -1,9 +1,7 @@
 // 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-messaging.js');
-importScripts('/src/firebase-init.json');
+importScripts('/src/firebase-init.js');
-
-console.log("FIREBASE_INIT", FIREBASE_INIT);
 
 firebase.initializeApp(FIREBASE_INIT);
 

src/config.js

@@ -50,7 +50,3 @@ export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
 // Maximum allowed linear dimension of an inline image in pixels. You may want
 // to adjust it to 1600 or 2400 for production.
 export const MAX_IMAGE_DIM = 768;
-
-// Supported image MIME types and corresponding file extensions.
-export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
-export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',       'svg',       'svg'];

src/i18n/en.json

@@ -1,9 +1,20 @@
 {
+  "contacts_not_found": "You have no chats<br />¯\\\\_(ツ)_/¯",
+  "email_prompt": "Email, e.g. jdoe@example.com",
+  "full_name_prompt": "Full name, e.g. John Doe",
+  "sign_up_button": "Sign up",
   "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:"
+  "label_server": "Server:",
-}
+  "sidepanel_title_login": "Sign In",
+  "sidepanel_title_register": "Create Account",
+  "sidepanel_title_settings": "Settings",
+  "sidepanel_title_edit_account": "Edit Account",
+  "sidepanel_title_newtpk": "Start New Chat",
+  "sidepanel_title_cred": "Confirm Credentials",
+  "sidepanel_title_reset": "Reset Password"
+}

src/i18n/ru.json

@@ -1,9 +1,20 @@
 {
+  "contacts_not_found": "Чатов нет<br />¯\\\\_(ツ)_/¯",
+  "email_prompt": "Email, напр. ivan@example.com",
+  "full_name_prompt": "Полное имя, напр. Иван Петров",
+  "sign_up_button": "Создать счет",
   "login_prompt": "Логин",
   "password_prompt": "Пароль",
   "stay_logged_in": "Запомнить",
   "forgot_password_link": "Напомнить пароль",
   "sign_in_button": "Войти",
   "label_client": "Клиент:",
-  "label_server": "Сервер:"
+  "label_server": "Сервер:",
+  "sidepanel_title_login": "Авторизация",
+  "sidepanel_title_register": "Зарегистрироваться",
+  "sidepanel_title_settings": "Настройки",
+  "sidepanel_title_edit_account": "Редактировать счет",
+  "sidepanel_title_newtpk": "Новый чат",
+  "sidepanel_title_cred": "Подтвердить",
+  "sidepanel_title_reset": "Сменить пароль"
 }

src/lib/blob-helpers.js

@@ -1,5 +1,9 @@
 // File and image helper functions.
 
+// Supported image MIME types and corresponding file extensions.
+export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
+export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',       'svg',       'svg'];
+
 // Make a data URL from public.photo
 export function makeImageUrl(photo) {
   return (photo && photo.type && photo.data) ?

src/views/contacts-view.jsx

@@ -1,9 +1,18 @@
 /* ContactsView holds all contacts-related stuff */
-
 import React from 'react';
+import { defineMessages } from 'react-intl';
 
 import ContactList from '../widgets/contact-list.jsx';
 
+// Panel titles for translation.
+const messages = defineMessages({
+  'contacts_not_found': {
+    id: 'contacts_not_found',
+    description: 'HTML message shown in ContactList when no contacts are found',
+    defaultMessage: 'You have no chats<br />¯\\\\_(ツ)_/¯'
+  }
+});
+
 export default class ContactsView extends React.Component {
   constructor(props) {
     super(props);
@@ -28,11 +37,12 @@ export default class ContactsView extends React.Component {
   }
 
   render() {
+    const {formatMessage} = this.props.intl;
     return (
       <ContactList
         connected={this.props.connected}
         contacts={this.state.contactList}
-        emptyListMessage={<span>You have no chats<br />¯\_(ツ)_/¯</span>}
+        emptyListMessage={<span>{formatHTMLMessage(messages.contacts_not_found)}</span>}
         topicSelected={this.props.topicSelected}
         myUserId={this.props.myUserId}
         showOnline={true}

src/views/create-account-view.jsx

@@ -1,11 +1,24 @@
-/* Account registration */
+// Account registration.
-
 import React from 'react';
+import { FormattedMessage, defineMessages } from 'react-intl';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
 import VisiblePassword from '../widgets/visible-password.jsx';
 
+const messages = defineMessages({
+  'email_prompt': {
+    id: 'email_prompt',
+    description: 'Input placeholder for email entry',
+    defaultMessage: 'Email, e.g. jdoe@example.com'
+  },
+  'full_name_prompt': {
+    id: 'full_name_prompt',
+    description: 'Input placeholder for person\'s full name',
+    defaultMessage: 'Full name, e.g. John Doe'
+  }
+});
+
 export default class CreateAccountView extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -66,17 +79,18 @@ export default class CreateAccountView extends React.PureComponent {
   }
 
   render() {
-    var submitClasses = 'blue';
+    let submitClasses = 'blue';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }
+    const {formatMessage} = this.props.intl;
     return (
       <form className="panel-form-column" onSubmit={this.handleSubmit}>
         <div className="panel-form-row">
           <div className="panel-form-column">
-            <input type="text" placeholder="Login" autoComplete="user-name"
+            <input type="text" placeholder="{formatMessage({id: 'login_prompt'})}" autoComplete="user-name"
               value={this.state.login} onChange={this.handleLoginChange} required autoFocus />
-            <VisiblePassword placeholder="Password" autoComplete="new-password"
+            <VisiblePassword placeholder="{formatMessage({id: 'password_prompt'})}" autoComplete="new-password"
               value={this.state.password} onFinished={this.handlePasswordChange}
               required={true} />
           </div>
@@ -85,20 +99,22 @@ export default class CreateAccountView extends React.PureComponent {
             onError={this.props.onError} />
         </div>
         <div  className="panel-form-row">
-          <input type="text" placeholder="Full name, e.g. John Doe" autoComplete="name"
+          <input type="text" placeholder="{formatMessage(messages.full_name_prompt)}" autoComplete="name"
             value={this.state.fn} onChange={this.handleFnChange} required/>
         </div>
         <div className="panel-form-row">
-          <input type="email" placeholder="Email, e.g john.doe@example.com"
+          <input type="email" placeholder="{formatMessage(messages.email_prompt)}"
             autoComplete="email" value={this.state.email} onChange={this.handleEmailChange} required/>
         </div>
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />
-          <label htmlFor="save-token">&nbsp;Stay logged in</label>
+          <label htmlFor="save-token">&nbsp;{formatMessage({id: 'stay_logged_in'})}</label>
         </div>
         <div className="dialog-buttons">
-          <button className={submitClasses} type="submit">Sign up</button>
+          <button className={submitClasses} type="submit">
+            <FormattedMessage id="sign_up_button" defaultMessage="Sign up" />
+          </button>
         </div>
       </form>
     );

src/views/sidepanel-view.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { defineMessages } from 'react-intl';
 
 import SideNavbar from '../widgets/side-navbar.jsx';
 import ErrorPanel from '../widgets/error-panel.jsx';
@@ -12,6 +13,45 @@ import PasswordResetView from './password-reset-view.jsx';
 import SettingsView from './settings-view.jsx';
 import ValidationView from './validation-view.jsx';
 
+// Panel titles for translation.
+const messages = defineMessages({
+  'login': {
+    id: 'sidepanel_title_login',
+    description: 'Sidepanel title for LoginView.',
+    defaultMessage: 'Sign In'
+  },
+  'register': {
+    id: 'sidepanel_title_register',
+    description: 'Sidepanel title for CreateAccountView.',
+    defaultMessage: 'Create Account'
+  },
+  'settings': {
+    id: 'sidepanel_title_settings',
+    description: 'Sidepanel title for SettingsView.',
+    defaultMessage: 'Settings'
+  },
+  'edit': {
+    id: 'sidepanel_title_edit_account',
+    description: 'Sidepanel title for EditAccountView.',
+    defaultMessage: 'Edit Account'
+  },
+  'newtpk': {
+    id: 'sidepanel_title_newtpk',
+    description: 'Sidepanel title for NewTopicView.',
+    defaultMessage: 'Start New Chat'
+  },
+  'cred': {
+    id: 'sidepanel_title_cred',
+    description: 'Sidepanel title for ValidationView.',
+    defaultMessage: 'Confirm Credentials'
+  },
+  'reset': {
+    id: 'sidepanel_title_reset',
+    description: 'Sidepanel title for PasswordResetView.',
+    defaultMessage: 'Reset Password'
+  }
+});
+
 export default class SidepanelView extends React.Component {
   constructor(props) {
     super(props);
@@ -24,44 +64,23 @@ export default class SidepanelView extends React.Component {
   }
 
   render() {
-    var title = null;
+    const {formatMessage} = this.props.intl;
-    var avatar = false;
+    const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
-    var onCancel = undefined;
+
-    var view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
+    let title, avatar;
-    switch (view) {
+    if (view == 'contacts') {
-      case 'login':
+      title = this.props.title;
-        title = "Sign In";
+      avatar = this.props.avatar ? this.props.avatar : true;
-        break;
+    } else {
-      case 'register':
+      title = formatMessage(messages[view]);
-        title = "Create Account";
+      avatar = false;
-        onCancel = this.props.onCancel;
+    }
-        break;
+
-      case 'settings':
+    let onCancel;
-        title = "Settings";
+    if (view != 'login') {
-        onCancel = this.props.onCancel;
+      onCancel = this.props.onCancel;
-        break;
+    }
-      case 'edit':
+
-        title = "Edit Account";
-        onCancel = this.props.onCancel;
-        break;
-      case 'contacts':
-        title = this.props.title;
-        avatar = this.props.avatar ? this.props.avatar : true;
-        break;
-      case 'newtpk':
-        title = "Start New Chat";
-        onCancel = this.props.onCancel;
-        break;
-      case 'cred':
-        title = "Confirm Credentials";
-        onCancel = this.props.onCancel;
-        break;
-      case 'reset':
-        title = "Reset Password";
-        onCancel = this.props.onCancel;
-        break;
-      default:;
-    };
     return (
       <div id="sidepanel" className={this.props.hideSelf ? 'nodisplay' : null}>
         <SideNavbar

src/views/tinode-web.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import 'firebase/app';
 import 'firebase/messaging';
-import { FIREBASE_INIT } from '../firebase-init.json';
 
 import Tinode from 'tinode-sdk';
 

src/views/validation-view.jsx

@@ -32,7 +32,7 @@ export default class ValidationView extends React.PureComponent {
   }
 
   render() {
-    var methods = {'email': 'email', 'tel': 'phone'};
+    var methods = {'email': "email", 'tel': "phone"};
     var method = methods[this.props.credMethod] || this.props.credMethod;
     return (
       <div className="panel-form">