merge devel

README.md

@@ -72,11 +72,11 @@ If you want to use the app with your own server and want web push notification t
 ### Desktop screenshot
 
 <p align="center">
-  <img src="web-desktop-2.png" alt="Desktop web: full app" width=810 />
+  <img src="web-desktop.jpg" alt="Desktop web: full app" width=810 />
 </p>
 
 ### Mobile screenshots
 
 <p align="center">
-  <img src="web-mob-contacts-1.png" alt="Mobile web: contacts" width=250 /> <img src="web-mob-chat-1.png" alt="Mobile web: chat" width=250 /> <img src="web-mob-info-1.png" alt="Mobile web: topic info" width=250 /> <img src="web-mob-new-chat-1.png" alt="Mobile web: start new chat" width=250 /> <img src="web-mob-acc-settings.png" alt="Mobile web: account settings" width=250 />
+  <kbd><img src="web-mob-contacts.png" alt="Mobile web: contacts" width=250 /></kbd> <kbd><img src="web-mob-chat.png" alt="Mobile web: chat" width=250 /></kbd> <kbd><img src="web-mob-info.png" alt="Mobile web: topic info" width=250 /></kbd> <kbd><img src="web-mob-new-chat.png" alt="Mobile web: start new chat" width=250 /></kbd> <kbd><img src="web-mob-acc-settings.png" alt="Mobile web: account settings" width=250 /></kbd>
 </p>

css/base.css

@@ -32,8 +32,11 @@ a:focus {
   text-decoration: underline;
 }
 
-a.red:hover,
+a.danger {
-a.red:focus {
+  color: #D32F2F;
+}
+a.danger:hover,
+a.danger:focus {
   color: #F44336;
 }
 
@@ -60,14 +63,16 @@ a.gray:focus {
   text-decoration: none;
 }
 
-.flat-button .faux {
+.flat-button.faux {
-  height: 1.5em;
+  display: inline-block;
-  line-height: 1.5em;
+  height: 1.4em;
+  line-height: 1.4em;
   text-transform: none;
-  padding-left: .5rem;
+  padding-left: .35rem;
-  padding-right: .5rem;
+  padding-right: .35rem;
-  border: 1px solid gray;
+  border: 1px solid #999;
   border-radius: 3px;
+  background-color: #eee;
 }
 
 form {
@@ -110,7 +115,7 @@ button {
   padding-left: 1.2rem;
   padding-right: 1.2rem;
   border-radius: 4px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
   text-transform: uppercase;
   min-width: 5rem;
   margin: 0 0.35rem 0 0.35rem;
@@ -141,7 +146,6 @@ button.round.small {
   line-height: 2rem;
   box-shadow: 0 2px 0.35rem 0 rgba(0, 0, 0, 0.25);
 }
-
 button:focus, button:hover, button:active {
   color: #fff;
 }
@@ -152,27 +156,19 @@ button:active.round.small {
   box-shadow: inset 0 2px 0.35rem rgba(0, 0, 0, 0.125);
 }
 
-button.blue {
+button.primary {
   background-color: #1e88e5; /* blue 600 */
   color: white;
 }
-button.blue:focus, button.blue:hover, button.blue:active {
+button.primary:focus, button.primary:hover, button.primary:active {
-  background-color: #1976d2;
-}
-
-button.blue {
-  background-color: #1e88e5; /* blue 600 */
-  color: white;
-}
-button.blue:focus, button.blue:hover, button.blue:active {
   background-color: #2962ff;
 }
 
-button.white {
+button.secondary {
   background-color: #FFF;
   color: #2196f3; /* blue 500 */
 }
-button.white:focus, button.white:hover, button.blue:active {
+button.secondary:focus, button.secondary:hover, button.secondary:active {
   background-color: #e3f2fd;
 }
 
@@ -258,16 +254,16 @@ textarea {
 
 /* Chrome & other webkit browsers */
 ::-webkit-scrollbar {
-	width: 0.6rem;
+  width: 0.6rem;
 }
 
 ::-webkit-scrollbar-track {
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
-	background-color: rgba(255,255,255,0.1);
+  background-color: rgba(255,255,255,0.1);
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: rgba(0,0,0,0.3);
+  background-color: rgba(0,0,0,0.3);
 }
 
 /* Firefox only */
@@ -331,11 +327,9 @@ li:hover .menuTrigger a {
 }
 
 li.left:hover .menuTrigger {
-  -text-shadow: #c5e1a5 0 0 15px, #c5e1a5 0 0 5px;
   background-image: radial-gradient(#c5e1a5 40%, transparent 75%);
 }
 li.right:hover .menuTrigger {
-  -text-shadow: #fafafa 0 0 15px, #fafafa 0 0 5px;
   background-image: radial-gradient(#fafafa 40%, transparent 75%);
 }
 
@@ -343,13 +337,12 @@ li.right:hover .menuTrigger {
 
 /* Begin Alert: modal window with message and buttons. */
 div.alert-container {
+  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  position: absolute;
-  -x-backdrop-filter: blur(4px);
   background: rgba(0,0,0,0.33);
   z-index: 3;
 }
@@ -491,8 +484,8 @@ div.alert .content {
 
 #topic-view {
   position: relative;
-  overflow-x: hidden;
   display: flex;
+  overflow-x: hidden;
   flex-direction: column;
   width: 100%;
   height: 100%;
@@ -551,7 +544,7 @@ div.alert .content {
   margin-left: 1rem;
 }
 
-/* Extra spece on the right */
+/* Extra space on the right */
 .space-right {
   margin-right: 0.25rem;
 }
@@ -837,8 +830,8 @@ i.search {
 }
 
 .contact-box > li {
-  display: flex;
   position: relative;
+  display: flex;
   padding: 0.35rem 0.25rem 0.5rem 0.35rem;
   min-height: 3.75rem;
   flex-grow: 0;
@@ -879,10 +872,18 @@ i.search {
   font-weight: lighter;
 }
 
+.contact-box .contact-comment b {
+  font-weight: bolder;
+}
+
+.contact-box .contact-comment .material-icons {
+  margin-bottom: .2rem;
+}
+
 /* Avatar and online-offline indicator */
 .contact-box .avatar-box {
-  margin-right: 0.35rem;
   position: relative;
+  margin-right: 0.35rem;
   width: 3rem;
   min-width: 3rem;
   height: 3rem;
@@ -926,14 +927,13 @@ i.search {
 
 /* Online-offline indicator positioned inside avatar-box */
 .avatar-box .online, .offline {
-  display: inline-block;
+  position: absolute;
   width: 0.75rem;
   min-width: 0.75rem;
   height: 0.75rem;
   min-height: 0.75rem;
   flex-shrink: 0;
   border-radius: 50%;
-  position: absolute;
   right: 0;
   bottom: 0.1rem;
 }
@@ -958,7 +958,6 @@ i.search {
 }
 
 .contact-box .checkmark.material-icons {
-  display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.5rem;
@@ -1018,8 +1017,8 @@ i.search {
 
 /* Styling of avatar upload control */
 .avatar-upload {
-  display: flex;
   position: relative;
+  display: flex;
   flex-direction: column;
   flex-shrink: 0;
   width: 7rem;
@@ -1115,7 +1114,7 @@ i.search {
 }
 
 .avatar-upload .inputfile:focus + label.round {
-	outline: none;
+  outline: none;
 }
 
 .avatar-upload .inputfile:focus + label,
@@ -1413,12 +1412,12 @@ i.search {
 }
 
 .chat-box .bubble {
-  display: flex;
   position: relative;
-	max-width: 40rem;
+  display: flex;
+  max-width: 40rem;
   min-width: 9rem;
-	height: auto;
+  height: auto;
-  padding: 0.75rem 0.5rem 0.75rem 1.25rem;
+  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
   margin: 0;
   text-align: left;
   border-radius: 0.5rem;
@@ -1447,10 +1446,12 @@ i.search {
 
 .chat-box .left .bubble {
   background-color: #c5e1a5;
+  margin-right: 0.5rem;
 }
 
 .chat-box .right .bubble {
   background-color: #fafafa;
+  margin-left: 1.75rem;
 }
 
 .chat-box .center .bubble {
@@ -1505,12 +1506,21 @@ i.search {
   margin-right: 0.8rem;
 }
 
+/* Message text + timestamp and delivery marker */
+.chat-box .bubble div.content-meta {
+  width: 100%;
+}
+
 .chat-box .bubble div.message-content {
+  position: relative;
   color: #212121;
   margin: 0;
+  width: 100%;
   max-width: 36rem;
   overflow-wrap: break-word;
+  padding: 0 0.75rem 0 0.75rem;
 }
+
 /* The timestamp is a floating element. Need to ensure div.message-content is expanded
  * to accomodate it. It's usually called clearfix. */
 .chat-box .bubble div.message-content:after {
@@ -1521,29 +1531,21 @@ i.search {
   visibility: hidden;
 }
 
-.chat-box .timestamp {
+.chat-box .timestamp-padding {
   display: inline-block;
+  width: 4rem;
+  height: 0;
+}
+
+.chat-box .timestamp {
   position: relative;
   font-size: 80%;
   color: #777;
-  padding-left: 1rem;
+  top: 0.35rem;
-  top: 0.5rem;
   float: right;
   white-space: nowrap;
 }
 
-/* Typing notification bubble */
-.chat-box .typing {
-  display: inline-block;
-  border-radius: 0.5rem;
-  width: 2rem;
-  padding: 0.25rem 0.35rem;
-  vertical-align: middle;
-  text-align: center;
-  color: #aaa;
-  margin-top: 0.75rem;
-}
-
 /* The name of the person who sent the message
  * (group chat only)
  */
@@ -1557,7 +1559,6 @@ i.search {
   position: relative;
   overflow: hidden;
   border-radius: 0.1rem;
-  display: block;
 }
 
 .inline-image {
@@ -1577,11 +1578,11 @@ i.search {
 
 /* Broken image graphics which replaces the stock graphics. */
 img.inline-image::before, img.image-preview::before {
+  position: absolute;
+  display: flex;
   font-size: 0.9rem;
   font-weight: lighter;
   color: #666;
-  display:flex;
-  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -1672,7 +1673,6 @@ ul.tabbar > li > a {
   padding-top: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  display: block;
   text-align: center;
   line-height: 2rem;
   font-weight: 400;
@@ -1689,11 +1689,10 @@ ul.tabbar li.active > a {
 }
 
 ul.tabbar li.active > a:after {
-  height:0.15rem;
+  height: 0.15rem;
-  display:block;
+  content: "";
-  content:"";
+  bottom: 0;
-  bottom:0;
+  left: 0;
-  left:0;
   position: absolute;
   background: #2196f3;
   animation: tabbar-border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
@@ -1701,12 +1700,12 @@ ul.tabbar li.active > a:after {
 
 @keyframes tabbar-border-expand {
   0% {
-    opacity:0;
+    opacity: 0;
-    width:0;
+    width: 0;
   }
   100% {
-    opacity:1;
+    opacity: 1;
-    width:100%;
+    width: 100%;
   }
 }
 /* END Tabs */
@@ -1788,10 +1787,10 @@ ul.tabbar li.active > a:after {
 
 /* Div with letter tile content */
 .lettertile > div {
+  position: absolute;
   display: flex;
   flex-shrink: 0;
   flex-grow: 0;
-  position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
   text-transform: uppercase;
   align-items: center;

index-dev.html

@@ -34,8 +34,8 @@
     <!-- React-Intl for translations -->
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@5/react-intl.umd.js"></script>
     <!-- Firebase for push notifications -->
-    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7/firebase-app.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@8/firebase-app.js"></script>
-    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7/firebase-messaging.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@8/firebase-messaging.js"></script>
   </head>
 
   <body>

index.html

@@ -24,9 +24,9 @@
 <link rel="stylesheet" href="css/base.min.css" />
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@5.10.14/react-intl.umd.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@5.12.5/react-intl.umd.min.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.24.0/firebase-app.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@8.2.9/firebase-app.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.24.0/firebase-messaging.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@8.2.9/firebase-messaging.js"></script>
 </head>
 <body>
 <noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.17.0",
+  "version": "0.17.1-alpha1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -13,17 +13,11 @@
     "build:prod": "webpack --mode production",
     "build:i18n": "node scripts/pack-messages.js",
     "vers": "node scripts/gen-version.js",
-    "extract": "formatjs extract 'src/**/*.jsx' --out-file src/i18n/ex/base-en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
+    "extract": "formatjs extract src/**/*.jsx --out-file src/i18n/ex/base-en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
     "compile": "formatjs compile"
   },
   "browserslist": "> 0.5%, not IE 11",
   "files": [
-    "src/index.js",
-    "src/config.js",
-    "src/views/*.jsx",
-    "src/widgets/*.jsx",
-    "src/lib/*.js",
-    "src/i18n/*.json",
     "umd/index.prod.js",
     "umd/index.prod.js.map",
     "umd/index.dev.js",
@@ -40,7 +34,8 @@
     "index.html",
     "manifest.json",
     "service-worker.js",
-    "firebase-init.js"
+    "firebase-init.js",
+    "version.js"
   ],
   "keywords": [
     "chat",
@@ -68,25 +63,27 @@
   "author": "Tinode Authors <info@tinode.co>",
   "license": "Apache-2.0",
   "dependencies": {
-    "firebase": "^7.24.0",
+    "firebase": "^8.2.9",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-intl": "^5.10.14",
+    "react-intl": "^5.12.5",
-    "tinode-sdk": "^0.16.10"
+    "tinode-sdk": "^0.17.1-alpha1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.13.8",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.13.8",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-react": "^7.12.13",
-    "@formatjs/cli": "^3.0.5",
+    "@formatjs/cli": "^4.2.6",
     "babel-loader": "^8.2.2",
-    "babel-plugin-formatjs": "^9.0.4",
+    "babel-plugin-formatjs": "^10.2.6",
-    "browserslist": "^4.16.1",
+    "browserslist": "^4.16.3",
-    "copy-webpack-plugin": "^6.4.1",
+    "copy-webpack-plugin": "^8.1.0",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.1",
-    "postcss": "^8.2.4",
+    "glob": "^7.1.6",
+    "mkdirp": "^1.0.4",
+    "postcss": "^8.2.6",
     "postcss-cli": "^8.3.1",
-    "webpack": "^5.13.0",
+    "webpack": "^5.24.2",
-    "webpack-cli": "^4.3.1"
+    "webpack-cli": "^4.5.0"
   }
 }

scripts/gen-version.js

@@ -1,13 +1,18 @@
-var fs = require('fs');
+const fs = require('fs');
-var version = require('../package.json').version;
+const version = require('../package.json').version;
 
-fs.writeFile('./src/version.js',
+function writeVersion(fileName, useExport) {
-  '// This is a generated file. Don\'t edit.\n\n'+
+  fs.writeFile(fileName,
-  'export const PACKAGE_VERSION = "'+version+'";\n',
+    '// This is a generated file. Don\'t edit.\n\n'+
-  { flag: 'w' },
+    `${useExport ? 'export ' : ''}const PACKAGE_VERSION = "${version}";\n`,
-  function(err) {
+    { flag: 'w' },
-    if (err) {
+    (err) => {
-        return console.log(err);
+      if (err) {
+          return console.log(err);
+      }
     }
-  }
+  );
-);
+}
+
+writeVersion('./src/version.js', true);
+writeVersion('./version.js', false);

service-worker.js

@@ -1,9 +1,11 @@
 // Must be located at the root.
-importScripts('https://cdn.jsdelivr.net/npm/firebase@7.24.0/firebase-app.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@8.2.9/firebase-app.js');
-importScripts('https://cdn.jsdelivr.net/npm/firebase@7.24.0/firebase-messaging.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@8.2.9/firebase-messaging.js');
 importScripts('firebase-init.js');
+importScripts('version.js');
 
-firebase.initializeApp(FIREBASE_INIT);
+// Channel to notify the webapp.
+const webAppChannel = new BroadcastChannel('tinode-sw');
 
 // Basic internationalization.
 const i18n = {
@@ -44,12 +46,18 @@ self.i18nMessage = function(id) {
   return lang[id] || i18n['en'][id] || id;
 }
 
-// This method shows the push notifications.
+firebase.initializeApp(FIREBASE_INIT);
-firebase.messaging().setBackgroundMessageHandler((payload) => {
+const fbMessaging = firebase.messaging();
+
+// This method shows the push notifications while the window is in background.
+fbMessaging.onBackgroundMessage((payload) => {
   if (payload.data.silent == 'true') {
     return;
   }
 
+  // Notify webapp that a message was received.
+  webAppChannel.postMessage(payload.data);
+
   const pushType = payload.data.what || 'msg';
   const title = payload.data.title || self.i18nMessage(pushType == 'msg' ? 'new_message' : 'new_chat');
   const options = {
@@ -113,23 +121,34 @@ self.addEventListener('notificationclick', event => {
 
 // This is needed for 'Add to Home Screen'.
 self.addEventListener('fetch', event => {
-  event.respondWith(
+  if (event.request.method != 'GET') {
-    //  Try to find response in cache.
+    return;
-    caches.match(event.request)
+  }
-      .then((resp) => {
+
-        // If response is found in cache, return it. Otherwise fetch.
+  event.respondWith((async () => {
-        return resp || fetch(event.request);
+    //  Try to find the response in the cache.
-      })
+    const cache = await caches.open(PACKAGE_VERSION);
-      .catch((err) => {
+    const cachedResponse = await cache.match(event.request);
-        // Something went wrong.
+    if (cachedResponse) {
-        console.log("Service worker Fetch:", err);
+      return cachedResponse;
-      })
+    }
-  );
+    // Not found in cache.
+    const response = await fetch(event.request);
+    if (!response || response.status != 200 || response.type != 'basic') {
+      return response;
+    }
+    if (event.request.url && (event.request.url.startsWith('http://') || event.request.url.startsWith('https://'))) {
+      await cache.put(event.request, response.clone());
+    }
+    return response;
+  })());
 });
 
-// This code get the human language from the webapp for localization of strings.
+// This code gets the human language from the webapp.
 self.addEventListener('message', event => {
   const data = JSON.parse(event.data);
+
+  // The locale is used for selecting strings in an appropriate language.
   self.locale = data.locale || '';
   self.baseLocale = self.locale.toLowerCase().split(/[-_]/)[0];
 });

src/config.js

@@ -1,7 +1,7 @@
 import { PACKAGE_VERSION } from './version.js';
 
 // Name of this application, used in the User-Agent.
-export const APP_NAME = 'TinodeWeb/' + (PACKAGE_VERSION || '0.16');
+export const APP_NAME = 'TinodeWeb/' + (PACKAGE_VERSION || '0.17');
 
 // API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
 export const API_KEY = 'AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K';
@@ -22,11 +22,11 @@ export const RECEIVED_DELAY = 500;
 // Delay before sending a read notification, milliseconds.
 export const READ_DELAY = 1000;
 
-// The shortest allowed tag length. Matches the value on the server.
+// The default shortest allowed tag length. Matches the value on the server.
 export const MIN_TAG_LENGTH = 2;
-// The greatest allowed tag length. Matches the value on the server.
+// The default greatest allowed tag length. Matches the value on the server.
 export const MAX_TAG_LENGTH = 96;
-// The maximum number of tags allowed. Matches the value on the server.
+// The default maximum number of tags allowed. Matches the value on the server.
 export const MAX_TAG_COUNT = 16;
 
 // Access mode for P2P subscriptions initiated by the current user.
@@ -56,17 +56,18 @@ export const BROKEN_IMAGE_SIZE = 32;
 export const MESSAGES_PAGE = 24;
 
 // Default maximum in-band (included directly into the message) attachment size which fits into
-// a message of 256K in size. The actual binary size of the attachment should be smaller due to
+// a message of 256K in size. Used when the server-provided value is unavailable. The actual
-// base64 encoding expansion and some overhead, for instance 1024 bytes.
+// binary size of the attachment should be smaller due to base64 encoding expansion and some overhead,
+// for instance 1024 bytes.
 // Increase this limit to a greater value in production, if desired. Also increase
 // max_message_size in the server config.
 export const MAX_INBAND_ATTACHMENT_SIZE = 262144;
 
-// Absolute maximum attachment size to be used with the server = 8MB. Increase to
+// Default absolute maximum attachment size to be used with the server = 8MB.
-// something like 100MB in production.
+// Used when the server-provided value is unavailable. Increase to something like 100MB in production.
 export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
 
-// Maximum allowed linear dimension of an inline image in pixels. Larer images will be shrunk
+// Maximum allowed linear dimension (pixels) of an image sent inline. Larger images will be shrunk
 // to make the larger dimension fit under this size. You may want to adjust it to 1600 or
 // 2400 for production.
 export const MAX_IMAGE_DIM = 1024;
@@ -85,7 +86,7 @@ export const MAX_TITLE_LENGTH = 60;
 export const MESSAGE_PREVIEW_LENGTH = 80;
 
 // Link for "Contact Us".
-export const LINK_CONTACT_US = 'email:info@tinode.co';
+export const LINK_CONTACT_US = 'email:support@tinode.co';
 
 // Link to Privacy Policy.
 export const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';

src/i18n/de.json

@@ -172,5 +172,8 @@
   "tags_editor_no_tags": "Schlagworte hinzufügen",
   "title_manage_tags": "Verwalten",
   "channel_prompt": "Dies ist ein Sender",
-  "channel": "Sender"
+  "channel": "Sender",
+  "drafty_attachment": "Dateianhang",
+  "drafty_form": "Formular:",
+  "drafty_image": "Bild"
 }

src/i18n/en.json

@@ -43,6 +43,9 @@
   "delete_messages_warning": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
   "deleted_content": "content deleted",
   "download_action": "download",
+  "drafty_attachment": "Attachment",
+  "drafty_form": "Form:",
+  "drafty_image": "Picture",
   "email_dative": "email",
   "email_prompt": "Email, e.g. jdoe@example.com",
   "enable_peers_messaging": "Enable",

src/i18n/es.json

@@ -48,7 +48,7 @@
   "private_editing_placeholder": "Sólo visible para tí",
   "label_muting_topic": "Silenciado:",
   "action_more": "Más",
-  "label_your_permissions": "Tus permisoss:",
+  "label_your_permissions": "Tus permisos:",
   "label_permissions": "Permisos:",
   "label_you": "Tú:",
   "label_default_access": "Modo de acceso predeterminado:",
@@ -105,7 +105,7 @@
   "code_doesnot_match": "El código no coincide",
   "phone_dative": "teléfono",
   "email_dative": "correo electrónico",
-  "enter_confirmation_code_prompt": "Intruduzca el código de confirmación enviado a tu {method}:",
+  "enter_confirmation_code_prompt": "Introduzca el código de confirmación enviado a tu {method}:",
   "numeric_confirmation_code_prompt": "Sólo números",
   "button_confirm": "Confirmar",
   "save_attachment": "guardar",
@@ -172,5 +172,8 @@
   "tags_editor_no_tags": "Añadir etiquetas",
   "title_manage_tags": "Gestionar",
   "channel_prompt": "Este es un canal",
-  "channel": "canal"
+  "channel": "canal",
+  "drafty_attachment": "Archivo",
+  "drafty_form": "Formulario:",
+  "drafty_image": "Imagen"
 }

src/i18n/ex/base-en.json

@@ -175,6 +175,18 @@
     "defaultMessage": "download",
     "description": "Call to action [download]"
   },
+  "drafty_attachment": {
+    "defaultMessage": "Attachment",
+    "description": "Comment for attachment in drafty preview"
+  },
+  "drafty_form": {
+    "defaultMessage": "Form:",
+    "description": "Comment for form in drafty preview"
+  },
+  "drafty_image": {
+    "defaultMessage": "Picture",
+    "description": "Comment for embedded images in drafty preview"
+  },
   "email_dative": {
     "defaultMessage": "email",
     "description": "Dative case of 'email', i.e. 'email' in 'by email'"

src/i18n/ko.json

@@ -175,5 +175,8 @@
   "messages_not_readable": "메시지에 액세스 할 수 없습니다",
   "deleted_content": "내용이 삭제되었습니다",
   "channel_prompt": "이 채널입니다",
-  "channel": "채널"
+  "channel": "채널",
+  "drafty_attachment": "부착",
+  "drafty_form": "형태:",
+  "drafty_image": "이미지"
 }

src/i18n/ro.json

@@ -172,5 +172,8 @@
   "cannot_initiate_file_upload": "Nu se poate face încărcarea.",
   "tags_not_found": "Niciun tag definit. Adaugă.",
   "tags_editor_no_tags": "Adaugă tag-uri",
-  "title_manage_tags": "Administrează"
+  "title_manage_tags": "Administrează",
+  "drafty_attachment": "Atasament",
+  "drafty_form": "Formă:",
+  "drafty_image": "Imagine"
 }

src/i18n/ru.json

@@ -172,5 +172,8 @@
   "no_connection": "Нет связи",
   "code_doesnot_match": "Код не совпадает",
   "channel_prompt": "Создать канал",
-  "channel": "канал"
+  "channel": "канал",
+  "drafty_attachment": "Аттачмент",
+  "drafty_form": "Форма:",
+  "drafty_image": "Картинка"
 }

src/i18n/zh.json

@@ -172,5 +172,8 @@
   "no_connection": "无连接",
   "code_doesnot_match": "代码不匹配",
   "channel_prompt": "这是一个频道",
-  "channel": "频道"
+  "channel": "频道",
+  "drafty_attachment": "附件",
+  "drafty_form": "形式：",
+  "drafty_image": "图像"
 }

src/lib/blob-helpers.js

@@ -6,10 +6,15 @@ import { bytesToHumanSize } from './strformat.js'
 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
+// Make a data: URL from public.photo
-export function makeImageUrl(photo) {
+export function makeImageDataUrl(photo) {
-  return (photo && photo.type && photo.data) ?
+  if (photo) {
-    'data:image/' + photo.type + ';base64,' + photo.data : null;
+    if (photo.data && photo.type) {
+      return 'data:image/' + photo.type + ';base64,' + photo.data;
+    }
+    return photo.ref;
+  }
+  return null;
 }
 
 // Calculate linear dimensions for scaling image down to fit under a certain size.

src/lib/utils.js

@@ -19,23 +19,35 @@ export function updateFavicon(count) {
   document.title = (count > 0 ? '('+count+') ' : '') + 'Tinode';
 }
 
-// Create VCard which represents topic 'public' info
+// Create theCard which represents user's or topic's "public" info.
-export function vcard(fn, imageDataUrl) {
+export function theCard(fn, imageUrl, imageMimeType) {
   let card = null;
+  fn = fn && fn.trim();
 
-  if ((fn && fn.trim()) || imageDataUrl) {
+  if (fn) {
-    card = {};
+    card = {
-    if (fn) {
+      fn: fn
-      card.fn = fn.trim();
+    };
-    }
-    if (imageDataUrl) {
-      const dataStart = imageDataUrl.indexOf(',');
-      card.photo = dataStart >= 0 ? {
-        data: imageDataUrl.substring(dataStart+1),
-        type: 'jpg'
-      } : imageDataUrl;
-    }
   }
+
+  if (imageUrl) {
+    card = card || {};
+    let mimeType = imageMimeType;
+    // Is this a data URL "data:[<mediatype>][;base64],<data>"?
+    const matches = /^data:(image\/[-a-z0-9+.]+)(;base64)?,/i.exec(imageUrl);
+    if (matches) {
+      mimeType = matches[1];
+      card.photo = {
+        data: imageUrl.substring(imageUrl.indexOf(',') + 1)
+      };
+    } else {
+      card.photo = {
+        ref: imageUrl
+      };
+    }
+    card.photo.type = (mimeType || 'image/jpeg').substring('image/'.length);
+  }
+
   return card;
 }
 

src/messages.json

@@ -173,7 +173,10 @@
     "tags_editor_no_tags": "Schlagworte hinzufügen",
     "title_manage_tags": "Verwalten",
     "channel_prompt": "Dies ist ein Sender",
-    "channel": "Sender"
+    "channel": "Sender",
+    "drafty_attachment": "Dateianhang",
+    "drafty_form": "Formular:",
+    "drafty_image": "Bild"
   },
   "en": {
     "action_block_contact": "Block Contact",
@@ -220,6 +223,9 @@
     "delete_messages_warning": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
     "deleted_content": "content deleted",
     "download_action": "download",
+    "drafty_attachment": "Attachment",
+    "drafty_form": "Form:",
+    "drafty_image": "Picture",
     "email_dative": "email",
     "email_prompt": "Email, e.g. jdoe@example.com",
     "enable_peers_messaging": "Enable",
@@ -401,7 +407,7 @@
     "private_editing_placeholder": "Sólo visible para tí",
     "label_muting_topic": "Silenciado:",
     "action_more": "Más",
-    "label_your_permissions": "Tus permisoss:",
+    "label_your_permissions": "Tus permisos:",
     "label_permissions": "Permisos:",
     "label_you": "Tú:",
     "label_default_access": "Modo de acceso predeterminado:",
@@ -458,7 +464,7 @@
     "code_doesnot_match": "El código no coincide",
     "phone_dative": "teléfono",
     "email_dative": "correo electrónico",
-    "enter_confirmation_code_prompt": "Intruduzca el código de confirmación enviado a tu {method}:",
+    "enter_confirmation_code_prompt": "Introduzca el código de confirmación enviado a tu {method}:",
     "numeric_confirmation_code_prompt": "Sólo números",
     "button_confirm": "Confirmar",
     "save_attachment": "guardar",
@@ -525,7 +531,10 @@
     "tags_editor_no_tags": "Añadir etiquetas",
     "title_manage_tags": "Gestionar",
     "channel_prompt": "Este es un canal",
-    "channel": "canal"
+    "channel": "canal",
+    "drafty_attachment": "Archivo",
+    "drafty_form": "Formulario:",
+    "drafty_image": "Imagen"
   },
   "ko": {
     "validate_credential_action": "확인",
@@ -701,7 +710,10 @@
     "messages_not_readable": "메시지에 액세스 할 수 없습니다",
     "deleted_content": "내용이 삭제되었습니다",
     "channel_prompt": "이 채널입니다",
-    "channel": "채널"
+    "channel": "채널",
+    "drafty_attachment": "부착",
+    "drafty_form": "형태:",
+    "drafty_image": "이미지"
   },
   "ro": {
     "validate_credential_action": "confirmă",
@@ -877,7 +889,10 @@
     "cannot_initiate_file_upload": "Nu se poate face încărcarea.",
     "tags_not_found": "Niciun tag definit. Adaugă.",
     "tags_editor_no_tags": "Adaugă tag-uri",
-    "title_manage_tags": "Administrează"
+    "title_manage_tags": "Administrează",
+    "drafty_attachment": "Atasament",
+    "drafty_form": "Formă:",
+    "drafty_image": "Imagine"
   },
   "ru": {
     "contacts_not_found": "Чатов нет<br />¯∖_(ツ)_/¯",
@@ -1053,7 +1068,10 @@
     "no_connection": "Нет связи",
     "code_doesnot_match": "Код не совпадает",
     "channel_prompt": "Создать канал",
-    "channel": "канал"
+    "channel": "канал",
+    "drafty_attachment": "Аттачмент",
+    "drafty_form": "Форма:",
+    "drafty_image": "Картинка"
   },
   "zh": {
     "archived_contacts": "已归档联系人 ({count})",
@@ -1229,6 +1247,9 @@
     "no_connection": "无连接",
     "code_doesnot_match": "代码不匹配",
     "channel_prompt": "这是一个频道",
-    "channel": "频道"
+    "channel": "频道",
+    "drafty_attachment": "附件",
+    "drafty_form": "形式：",
+    "drafty_image": "图像"
   }
 }

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.17.0";
+export const PACKAGE_VERSION = "0.17.1-alpha1";

src/views/acc-general-view.jsx

@@ -9,8 +9,8 @@ import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import TagManager from '../widgets/tag-manager.jsx';
 
 import { MAX_TITLE_LENGTH } from '../config.js';
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
-import { arrayEqual, asEmail, asPhone, vcard } from '../lib/utils.js';
+import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
 
 export default class AccGeneralView extends React.Component {
   constructor(props) {
@@ -19,7 +19,7 @@ export default class AccGeneralView extends React.Component {
     const me = this.props.tinode.getMeTopic();
     this.state = {
       fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageUrl(me.public ? me.public.photo : null),
+      avatar: makeImageDataUrl(me.public ? me.public.photo : null),
       tags: me.tags(),
       credentials: me.getCredentials() || [],
       addCredActive: false,
@@ -62,13 +62,13 @@ export default class AccGeneralView extends React.Component {
     fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
     if (fn) {
       this.setState({fullName: fn});
-      this.props.onUpdateAccount(undefined, vcard(fn, null));
+      this.props.onUpdateAccount(undefined, theCard(fn, null));
     }
   }
 
   handleImageChanged(img) {
     this.setState({avatar: img});
-    this.props.onUpdateAccount(undefined, vcard(null, img || Tinode.DEL_CHAR));
+    this.props.onUpdateAccount(undefined, theCard(null, img || Tinode.DEL_CHAR));
   }
 
   handleCredChange(e) {

src/views/acc-security-view.jsx

@@ -110,11 +110,11 @@ class AccSecurityView extends React.Component {
           </div>
           <div className="hr" />
           <div className="panel-form-column">
-            <a href="#" className="red flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
+            <a href="#" className="danger flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
               <i className="material-icons">exit_to_app</i> &nbsp;<FormattedMessage id="button_logout"
                 defaultMessage="Logout" description="Button [Logout]" />
             </a>
-            <a href="#" className="red flat-button" onClick={(e) => {this.handleDeleteAccount(e);}}>
+            <a href="#" className="danger flat-button" onClick={(e) => {this.handleDeleteAccount(e);}}>
               <i className="material-icons">delete</i> &nbsp;<FormattedMessage id="button_delete_account"
                 defaultMessage="Delete account" description="Button [Delete account]" />
             </a>

src/views/create-account-view.jsx

@@ -7,7 +7,7 @@ import CheckBox from '../widgets/checkbox.jsx';
 import VisiblePassword from '../widgets/visible-password.jsx';
 
 import LocalStorageUtil from '../lib/local-storage.js';
-import { vcard } from '../lib/utils.js';
+import { theCard } from '../lib/utils.js';
 
 import { MAX_TITLE_LENGTH } from '../config.js';
 
@@ -65,12 +65,12 @@ export default class CreateAccountView extends React.PureComponent {
     this.props.onCreateAccount(
       this.state.login.trim(),
       this.state.password.trim(),
-      vcard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.imageDataUrl),
+      theCard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.imageDataUrl),
       {'meth': 'email', 'val': this.state.email});
   }
 
   render() {
-    let submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/views/edit-account-view.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class EditAccountView extends React.Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export default class EditAccountView extends React.Component {
     const me = this.props.tinode.getMeTopic();
     this.state = {
       fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageUrl(me.public ? me.public.photo : null)
+      avatar: makeImageDataUrl(me.public ? me.public.photo : null)
     };
   }
 

src/views/info-view.jsx

@@ -17,8 +17,8 @@ import TagManager from '../widgets/tag-manager.jsx';
 
 import { MAX_TITLE_LENGTH, NO_ACCESS_MODE } from '../config.js';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
-import { arrayEqual, vcard } from '../lib/utils.js';
+import { arrayEqual, theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
   requested: {
@@ -227,7 +227,7 @@ class InfoView extends React.Component {
       muted: acs && acs.isMuted(),
 
       fullName: topic.public ? topic.public.fn : undefined,
-      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      avatar: makeImageDataUrl(topic.public ? topic.public.photo : null),
       private: topic.private ? topic.private.comment : null,
       address: topic.name,
       groupTopic: topic.isGroupType(),
@@ -282,7 +282,7 @@ class InfoView extends React.Component {
     fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
     if (this.state.fullName !== fn) {
       this.setState({fullName: fn});
-      this.props.onTopicDescUpdate(this.props.topic, vcard(fn, null), null);
+      this.props.onTopicDescUpdate(this.props.topic, theCard(fn, null), null);
     }
   }
 
@@ -296,7 +296,7 @@ class InfoView extends React.Component {
 
   handleImageChanged(img) {
     this.setState({avatar: img});
-    this.props.onTopicDescUpdate(this.props.topic, vcard(null, img || Tinode.DEL_CHAR), null);
+    this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
   }
 
   handleMuted(ignored, checked) {
@@ -717,18 +717,18 @@ class InfoView extends React.Component {
                 :
                 null
               }
-              <a href="#" className="red flat-button" onClick={this.handleLeave}>
+              <a href="#" className="danger flat-button" onClick={this.handleLeave}>
                 <i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
               </a>
               {!this.state.groupTopic ?
-                <a href="#" className="red flat-button" onClick={this.handleBlock}>
+                <a href="#" className="danger flat-button" onClick={this.handleBlock}>
                   <i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
                 </a>
                 :
                 null
               }
               {!this.state.owner ?
-                <a href="#" className="red flat-button" onClick={this.handleReport}>
+                <a href="#" className="danger flat-button" onClick={this.handleReport}>
                   <i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
                 </a>
                 :

src/views/login-view.jsx

@@ -42,7 +42,7 @@ export default class LoginView extends React.Component {
   }
 
   render() {
-    var submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/views/messages-view.jsx

@@ -18,7 +18,7 @@ import SendMessage from '../widgets/send-message.jsx';
 import { DEFAULT_P2P_ACCESS_MODE, IMAGE_PREVIEW_DIM, KEYPRESS_DELAY, MESSAGES_PAGE,
   MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE, READ_DELAY } from '../config.js';
 import { SUPPORTED_IMAGE_FORMATS, blobToBase64, filePasted, fileToBase64,
-  imageScaled, makeImageUrl } from '../lib/blob-helpers.js';
+  imageScaled, makeImageDataUrl } from '../lib/blob-helpers.js';
 import HashNavigation from '../lib/navigation.js';
 import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
 
@@ -133,7 +133,7 @@ class MessagesView extends React.Component {
       }
     }
 
-    const topic = this.props.tinode.getTopic(this.state.topic);
+    const topic = this.props.tinode ? this.props.tinode.getTopic(this.state.topic) : undefined;
     if (this.state.topic != prevState.topic) {
       if (prevState.topic && !Tinode.isNewGroupTopicName(prevState.topic)) {
         this.leave(prevState.topic);
@@ -261,7 +261,7 @@ class MessagesView extends React.Component {
         if (topic.public) {
           Object.assign(nextState, {
             title: topic.public.fn,
-            avatar: makeImageUrl(topic.public.photo)
+            avatar: makeImageDataUrl(topic.public.photo)
           });
         } else {
           Object.assign(nextState, {
@@ -391,7 +391,7 @@ class MessagesView extends React.Component {
     if (desc.public) {
       this.setState({
         title: desc.public.fn,
-        avatar: makeImageUrl(desc.public.photo)
+        avatar: makeImageDataUrl(desc.public.photo)
       });
     } else {
       this.setState({
@@ -857,7 +857,7 @@ class MessagesView extends React.Component {
             const user = topic.userDesc(thisFrom);
             if (user && user.public) {
               userName = user.public.fn;
-              userAvatar = makeImageUrl(user.public.photo);
+              userAvatar = makeImageDataUrl(user.public.photo);
             }
             userFrom = thisFrom;
             chatBoxClass='chat-box group';

src/views/new-topic-view.jsx

@@ -10,7 +10,7 @@ import NewTopicGroup from '../widgets/new-topic-group.jsx';
 import SearchContacts from '../widgets/search-contacts.jsx';
 
 import HashNavigation from '../lib/navigation.js';
-import { vcard } from '../lib/utils.js';
+import { theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
   search_for_contacts: {
@@ -65,7 +65,7 @@ class NewTopicView extends React.Component {
 
   handleNewGroupSubmit(name, dataUrl, priv, tags, isChannel) {
     HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-    this.props.onCreateTopic(undefined, vcard(name, dataUrl), priv, tags, isChannel);
+    this.props.onCreateTopic(undefined, theCard(name, dataUrl), priv, tags, isChannel);
   }
 
   handleGroupByID(topicName) {

src/views/password-reset-view.jsx

@@ -75,7 +75,7 @@ export default class PasswordResetView extends React.PureComponent {
           </>
         }
         <div className="dialog-buttons">
-          <button className="blue" type="submit">{reset ?
+          <button className="primary" type="submit">{reset ?
             <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" /> :
             <FormattedMessage id="button_send_request" defaultMessage="Send request"
               description="Button [Send request]" />

src/views/settings-view.jsx

@@ -36,16 +36,15 @@ export default class SettingsView extends React.PureComponent {
 
   render() {
     const names = {def: "default", ws: "websocket", lp: "long polling"};
-    var transportOptions = [];
+    const transportOptions = [];
-    var instance = this;
+    ['def', 'ws', 'lp'].map((item) => {
-    ['def', 'ws', 'lp'].map(function(item) {
+      const id = 'transport-' + item;
-      var id = 'transport-' + item;
+      const name = names[item];
-      var name = names[item];
       transportOptions.push(
         <li key={item}>
           <input type="radio" id={id} name="transport-select" value={item}
-            checked={instance.state.transport === item}
+            checked={this.state.transport === item}
-            onChange={instance.handleTransportSelected} />
+            onChange={this.handleTransportSelected} />
           <label htmlFor={id}>{name}</label>
         </li>
       );
@@ -73,7 +72,7 @@ export default class SettingsView extends React.PureComponent {
           </ul>
         </div>
         <div className="dialog-buttons">
-          <button type="submit" className="blue">
+          <button type="submit" className="primary">
             <FormattedMessage id="button_update" defaultMessage="Update"
               description="Button [Update]" />
           </button>

src/views/tinode-web.jsx

@@ -17,7 +17,8 @@ import SidepanelView from './sidepanel-view.jsx';
 
 import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, LOGGING_ENABLED,
   MEDIA_BREAKPOINT, RECEIVED_DELAY } from '../config.js';
-import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
+import { PACKAGE_VERSION } from '../version.js';
+import { base64ReEncode, makeImageDataUrl } from '../lib/blob-helpers.js';
 import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
 import LocalStorageUtil from '../lib/local-storage.js';
 import HashNavigation from '../lib/navigation.js';
@@ -109,9 +110,10 @@ class TinodeWeb extends React.Component {
     this.handleCredAdd = this.handleCredAdd.bind(this);
     this.handleCredDelete = this.handleCredDelete.bind(this);
     this.handleCredConfirm = this.handleCredConfirm.bind(this);
-    this.initDesktopAlerts = this.initDesktopAlerts.bind(this);
+    this.initFCMessaging = this.initFCMessaging.bind(this);
     this.togglePushToken = this.togglePushToken.bind(this);
     this.requestPushToken = this.requestPushToken.bind(this);
+    this.handlePushMessage = this.handlePushMessage.bind(this);
     this.handleSidepanelCancel = this.handleSidepanelCancel.bind(this);
     this.handleStartTopicRequest = this.handleStartTopicRequest.bind(this);
     this.handleNewTopicCreated = this.handleNewTopicCreated.bind(this);
@@ -139,6 +141,7 @@ class TinodeWeb extends React.Component {
 
   getBlankState() {
     const settings = LocalStorageUtil.getObject('settings') || {};
+    const persist = !!LocalStorageUtil.getObject('keep-logged-in');
 
     return {
       connected: false,
@@ -152,11 +155,11 @@ class TinodeWeb extends React.Component {
       // "On" is the default, so saving the "off" state.
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
-      desktopAlerts: settings.desktopAlerts,
+      desktopAlerts: persist && settings.desktopAlerts,
       desktopAlertsEnabled: (isSecureConnection() || isLocalHost()) &&
         (typeof firebase != 'undefined') && (typeof navigator != 'undefined') &&
         (typeof FIREBASE_INIT != 'undefined'),
-      firebaseToken: LocalStorageUtil.getObject('firebase-token'),
+      firebaseToken: persist ? LocalStorageUtil.getObject('firebase-token') : null,
 
       applicationVisible: !document.hidden,
 
@@ -200,7 +203,9 @@ class TinodeWeb extends React.Component {
       // Merged results of a search query and p2p chats.
       searchableContacts: [],
       credMethod: undefined,
-      credCode: undefined
+      credCode: undefined,
+      // Topic to go to after login.
+      requestedTopic: undefined
     };
   }
 
@@ -209,6 +214,10 @@ class TinodeWeb extends React.Component {
     window.addEventListener('online', (e) => { this.handleOnline(true); });
     window.addEventListener('offline', (e) => { this.handleOnline(false); });
     window.addEventListener('hashchange', this.handleHashRoute);
+    // Process background notifications from the service worker.
+    const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
+    serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
+
     // Window/tab visible or invisible for pausing timers.
     document.addEventListener('visibilitychange', this.handleVisibilityEvent);
 
@@ -219,44 +228,36 @@ class TinodeWeb extends React.Component {
 
     const keepLoggedIn = LocalStorageUtil.getObject('keep-logged-in');
 
-    const {formatMessage, locale} = this.props.intl;
     new Promise((resolve, reject) => {
-      this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport, locale, keepLoggedIn, resolve);
+      this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport,
+        this.props.intl.locale, keepLoggedIn, resolve);
       this.tinode.onConnect = this.handleConnected;
       this.tinode.onDisconnect = this.handleDisconnect;
       this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
     }).then(() => {
       // Initialize desktop alerts.
       if (this.state.desktopAlertsEnabled) {
-        try {
+        this.initFCMessaging().then(() => {
-          this.fbPush = firebase.initializeApp(FIREBASE_INIT, APP_NAME).messaging();
+          if (this.state.desktopAlerts) {
-          this.fbPush.usePublicVapidKey(FIREBASE_INIT.messagingVapidKey);
+            if (!this.state.firebaseToken) {
-          navigator.serviceWorker.register('/service-worker.js').then((reg) => {
+              this.togglePushToken(true);
-            this.checkForAppUpdate(reg);
+            } else {
-            this.fbPush.useServiceWorker(reg);
+              this.tinode.setDeviceToken(this.state.firebaseToken);
-            reg.active.postMessage(JSON.stringify({locale: locale}));
-            this.initDesktopAlerts();
-            if (this.state.desktopAlerts) {
-              if (!this.state.firebaseToken) {
-                this.togglePushToken(true);
-              } else {
-                this.tinode.setDeviceToken(this.state.firebaseToken, true);
-              }
             }
-          }).catch((err) => {
+          }
-            // registration failed :(
+        }).catch(() => {
-            console.log("Failed to register service worker:", err);
+          // do nothing: handled earlier.
-          });
+          // catch needed to pervent unnecessary logging of error.
-        } catch (err) {
+        });
-          this.handleError(formatMessage(messages.push_init_failed), 'err');
-          console.log("Failed to initialize push notifications", err);
-          this.setState({desktopAlertsEnabled: false});
-        }
       }
 
-      const token = keepLoggedIn ? LocalStorageUtil.getObject('auth-token') : undefined;
+      // Parse and save the hash navigation params.
-
       const parsedNav = HashNavigation.parseUrlHash(window.location.hash);
+
+      // Read contacts from cache.
+      this.resetContactList();
+
+      const token = keepLoggedIn ? LocalStorageUtil.getObject('auth-token') : undefined;
       if (token) {
         this.setState({autoLogin: true});
 
@@ -272,6 +273,8 @@ class TinodeWeb extends React.Component {
         parsedNav.path[0] = '';
         HashNavigation.navigateTo(HashNavigation.composeUrlHash(parsedNav.path, parsedNav.params));
       } else if (!parsedNav.params.token) {
+        // No token, save possible topic name and navigating to blank state.
+        this.setState({requestedTopic: parsedNav.path[1]});
         HashNavigation.navigateTo('');
       }
 
@@ -297,6 +300,53 @@ class TinodeWeb extends React.Component {
     return tinode;
   }
 
+  // Notifiy Tinode that a push message was received from the server.
+  handlePushMessage(data) {
+    if (data.what == 'msg' && Tinode.isChannelTopicName(data.topic)) {
+      // The last argument is a fake user Id: otherwise the update is seen as one from the current user.
+      this.tinode.oobNotification(data.topic, data.seq, 'fake-uid');
+    }
+  }
+
+  initFCMessaging() {
+    const {formatMessage, locale} = this.props.intl;
+    const onError = (msg, err) => {
+      console.log(msg, err);
+      this.handleError(formatMessage(messages.push_init_failed), 'err');
+      this.setState({desktopAlertsEnabled: false});
+    }
+
+    try {
+      this.fbPush = firebase.initializeApp(FIREBASE_INIT, APP_NAME).messaging();
+      this.fbPush.usePublicVapidKey(FIREBASE_INIT.messagingVapidKey);
+
+      return navigator.serviceWorker.register('/service-worker.js').then((reg) => {
+        this.checkForAppUpdate(reg);
+        this.fbPush.useServiceWorker(reg);
+        reg.active.postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));
+
+        // Google could not be bothered to mention that onTokenRefresh is never called.
+        this.fbPush.onTokenRefresh(() => {
+          this.requestPushToken();
+        });
+
+        // Handhe FCM pushes
+        // (a) for channels always,
+        // (b) pushes when the app is in foreground but has not focus.
+        this.fbPush.onMessage(payload => { this.handlePushMessage(payload.data); });
+
+        return reg;
+      }).catch((err) => {
+        // registration failed :(
+        onError("Failed to register service worker:", err);
+        return Promise.reject(err);
+      });
+    } catch (err) {
+      onError("Failed to initialize push notifications", err);
+      return Promise.reject(err);
+    }
+  }
+
   handleResize() {
     const mobile = document.documentElement.clientWidth <= MEDIA_BREAKPOINT;
     this.setState({
@@ -341,10 +391,16 @@ class TinodeWeb extends React.Component {
       }
 
       // Topic for MessagesView selector.
-      if (hash.path.length > 1 && hash.path[1] != this.state.topicSelected) {
+      const topicName = hash.path[1];
-        this.setState({
+      if (Tinode.topicType(topicName) && topicName != this.state.topicSelected) {
-          topicSelected: Tinode.topicType(hash.path[1]) ? hash.path[1] : null
+          const newState = {
-        });
+            topicSelected: topicName
+          };
+          const acs = this.tinode.getTopicAccessMode(topicName);
+          if (acs) {
+            newState.topicSelectedAcs = acs;
+          }
+          this.setState(newState);
       }
     } else {
       // Empty hashpath
@@ -367,8 +423,12 @@ class TinodeWeb extends React.Component {
   }
 
   handleOnline(online) {
+    console.log("handleOnline", online);
+
     if (online) {
       this.handleError();
+      clearInterval(this.reconnectCountdown);
+      this.tinode.reconnect();
     } else {
       this.handleError(this.props.intl.formatMessage(messages.no_connection), 'warn');
     }
@@ -407,6 +467,10 @@ class TinodeWeb extends React.Component {
 
   // Connection succeeded.
   handleConnected() {
+    // Just to be sure.
+    clearInterval(this.reconnectCountdown);
+    this.handleError();
+
     const params = this.tinode.getServerInfo();
     this.setState({
       serverVersion: params.ver + ' ' + (params.build ? params.build : 'none')
@@ -534,6 +598,8 @@ class TinodeWeb extends React.Component {
     if (LocalStorageUtil.getObject('keep-logged-in')) {
       LocalStorageUtil.setObject('auth-token', this.tinode.getAuthToken());
     }
+
+    const goToTopic = this.state.requestedTopic;
     // Logged in fine, subscribe to 'me' attaching callbacks from the contacts view.
     const me = this.tinode.getMeTopic();
     me.onMetaDesc = this.tnMeMetaDesc;
@@ -545,6 +611,7 @@ class TinodeWeb extends React.Component {
       credCode: undefined,
       myUserId: this.tinode.getCurrentUserID(),
       autoLogin: true,
+      requestedTopic: undefined,
     });
     // Subscribe, fetch topic desc, the list of subscriptions. Messages are not fetched.
     me.subscribe(
@@ -562,7 +629,11 @@ class TinodeWeb extends React.Component {
       }).finally(() => {
         this.setState({loadSpinnerVisible: false});
       });
-    HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'contacts'));
+    let urlHash = HashNavigation.setUrlSidePanel(window.location.hash, 'contacts');
+    if (goToTopic) {
+      urlHash = HashNavigation.setUrlTopic(urlHash, goToTopic);
+    }
+    HashNavigation.navigateTo(urlHash);
   }
 
   tnMeMetaDesc(desc) {
@@ -570,7 +641,7 @@ class TinodeWeb extends React.Component {
       if (desc.public) {
         this.setState({
           sidePanelTitle: desc.public.fn,
-          sidePanelAvatar: makeImageUrl(desc.public.photo)
+          sidePanelAvatar: makeImageDataUrl(desc.public.photo)
         });
       }
       if (desc.acs) {
@@ -674,6 +745,10 @@ class TinodeWeb extends React.Component {
     }
 
     this.tinode.getMeTopic().contacts((c) => {
+      if (!c.topic && !c.user) {
+        // Contacts expect c.topic to be set.
+        c.topic = c.name;
+      }
       newState.chatList.push(c);
       if (this.state.topicSelected == c.topic) {
         newState.topicSelectedOnline = c.online;
@@ -966,42 +1041,37 @@ class TinodeWeb extends React.Component {
       this.state.myUserId ? 'blocked' : ''));
   }
 
-  // Initialize desktop alerts = push notifications.
-  initDesktopAlerts() {
-    // Google could not be bothered to mention that
-    // onTokenRefresh is never called.
-    this.fbPush.onTokenRefresh(() => {
-      this.requestPushToken();
-    });
-
-    this.fbPush.onMessage((payload) => {
-      // No need to do anything about it.
-      // All the magic happends in the service worker.
-    });
-  }
-
   togglePushToken(enabled) {
     if (enabled) {
       if (!this.state.firebaseToken) {
-        this.fbPush.requestPermission().then(() => {
+        const fcm = this.fbPush ?
+          Promise.resolve() :
+          this.initFCMessaging();
+        fcm.then(() => {
+          return this.fbPush.requestPermission();
+        }).then(() => {
           this.requestPushToken();
         }).catch((err) => {
+          console.log("Failed to get notification permission.", err);
           this.handleError(err.message, 'err');
           this.setState({desktopAlerts: false, firebaseToken: null});
           LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
-          console.log("Failed to get permission to notify.", err);
         });
       } else {
         this.setState({desktopAlerts: true});
-        LocalStorageUtil.updateObject('settings', {desktopAlerts: true});
+        if (LocalStorageUtil.getObject('keep-logged-in')) {
+          LocalStorageUtil.updateObject('settings', {desktopAlerts: true});
+        }
       }
-    } else if (this.state.firebaseToken) {
+    } else if (this.state.firebaseToken && this.fbPush) {
       this.fbPush.deleteToken(this.state.firebaseToken).catch((err) => {
         console.log("Unable to delete token.", err);
       }).finally(() => {
         LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
         localStorage.removeItem('firebase-token');
         this.setState({desktopAlerts: false, firebaseToken: null});
+        // Inform the server that the token was deleted.
+        this.tinode.setDeviceToken(null);
       });
     } else {
       this.setState({desktopAlerts: false, firebaseToken: null});
@@ -1011,12 +1081,17 @@ class TinodeWeb extends React.Component {
 
   requestPushToken() {
     this.fbPush.getToken().then((refreshedToken) => {
+      const persist = LocalStorageUtil.getObject('keep-logged-in');
       if (refreshedToken != this.state.firebaseToken) {
-        this.tinode.setDeviceToken(refreshedToken, true);
+        this.tinode.setDeviceToken(refreshedToken);
-        LocalStorageUtil.setObject('firebase-token', refreshedToken);
+        if (persist) {
+          LocalStorageUtil.setObject('firebase-token', refreshedToken);
+        }
       }
       this.setState({firebaseToken: refreshedToken, desktopAlerts: true});
-      LocalStorageUtil.updateObject('settings', {desktopAlerts: true});
+      if (persist) {
+        LocalStorageUtil.updateObject('settings', {desktopAlerts: true});
+      }
     }).catch((err) => {
       this.handleError(err.message, 'err');
       console.log("Failed to retrieve firebase token", err);

src/views/validation-view.jsx

@@ -78,10 +78,10 @@ class ValidationView extends React.PureComponent {
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
           </button>
-          <button className="white" onClick={this.handleCancel}>
+          <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
         </div>

src/widgets/alert.jsx

@@ -16,7 +16,7 @@ export default class Alert extends React.PureComponent {
               :
               null
             }
-            <button className="blue" onClick={this.props.onConfirm}>
+            <button className="primary" onClick={this.props.onConfirm}>
               {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
             </button>
           </div>

src/widgets/avatar-upload.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import LetterTile from './letter-tile.jsx';
 
 import { AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE } from '../config.js';
-import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { imageScaled, blobToBase64, makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class AvatarUpload extends React.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ export default class AvatarUpload extends React.Component {
       (mime, blob) => {
         // Convert blob to base64-encoded bits.
         blobToBase64(blob, (unused, base64bits) => {
-          const du = makeImageUrl({data: base64bits, type: mime});
+          const du = makeImageDataUrl({data: base64bits, type: mime});
           this.setState({dataUrl: du});
           this.props.onImageChanged(du);
         });

src/widgets/chat-message.jsx

@@ -77,7 +77,7 @@ export default class ChatMessage extends React.Component {
       (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
     const avatar = this.props.deleted ? null : (this.props.userAvatar || true);
-    const fullDisplay = (this.props.userFrom && this.props.response &&
+    const fullDisplay = (this.props.userFrom && this.props.response && !this.props.deleted &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
     let content = this.props.content;
@@ -128,9 +128,11 @@ export default class ChatMessage extends React.Component {
           null}
         <div>
           <div className={bubbleClass}>
-            <div className="message-content">
+            <div className="content-meta">
-              {content}
+              <div className="message-content">
-              {attachments}
+                {content}
+                {attachments}
+              </div>
               {this.props.timestamp ?
                 <ReceivedMarker
                   timestamp={this.props.timestamp}
@@ -187,9 +189,15 @@ function draftyFormatter(style, data, values, key) {
         if (data) {
           attr.className = 'inline-image';
           const dim = fitImageSize(data.width, data.height,
-            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false) ||
+            Math.min(this.props.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5), REM_SIZE * 24, false) ||
             {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
-          attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
+          attr.style = {
+            width: dim.dstWidth + 'px',
+            height: dim.dstHeight + 'px',
+            // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+            minWidth: dim.dstWidth + 'px',
+            minHeight: dim.dstHeight + 'px'
+          };
           if (!Drafty.isProcessing(data)) {
             attr.src = this.props.tinode.authorizeURL(sanitizeImageUrl(attr.src));
             attr.alt = data.name;

src/widgets/chip-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Chip from './chip.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 /* BEGIN ChipInput: group membership widget */
 export default class ChipInput extends React.Component {
@@ -119,7 +119,7 @@ export default class ChipInput extends React.Component {
       chips.push(
         <Chip
           onCancel={this.handleChipCancel}
-          avatar={makeImageUrl(item.public ? item.public.photo : null)}
+          avatar={makeImageDataUrl(item.public ? item.public.photo : null)}
           title={item.public ? item.public.fn : undefined}
           noAvatar={this.props.avatarDisabled}
           topic={item.user}

src/widgets/contact-list.jsx

@@ -9,7 +9,7 @@ import Tinode from 'tinode-sdk';
 import Contact from './contact.jsx';
 import ContactAction from './contact-action.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
 
@@ -48,14 +48,14 @@ class ContactList extends React.Component {
           // If filter function is provided, filter out the items
           // which don't satisfy the condition.
           if (this.props.filterFunc && this.props.filter) {
-            let content = [key];
+            const filterOn = [key];
             if (c.private && c.private.comment) {
-              content.push(('' + c.private.comment).toLowerCase());
+              filterOn.push(('' + c.private.comment).toLowerCase());
             }
             if (c.public && c.public.fn) {
-              content.push(('' + c.public.fn).toLowerCase());
+              filterOn.push(('' + c.public.fn).toLowerCase());
             }
-            if (!this.props.filterFunc(this.props.filter, content)) {
+            if (!this.props.filterFunc(this.props.filter, filterOn)) {
               return;
             }
           }
@@ -78,7 +78,7 @@ class ContactList extends React.Component {
             c.private.join(',') : (c.private ? c.private.comment : null);
           let preview;
           let deliveryStatus;
-          if (!this.props.showMode) {
+          if (!this.props.showMode && c.latestMessage) {
             const msg = c.latestMessage();
             if (msg) {
               deliveryStatus = msg._status || c.msgStatus(msg, true);
@@ -90,7 +90,7 @@ class ContactList extends React.Component {
           contactNodes.push(
             <Contact
               title={c.public ? c.public.fn : null}
-              avatar={makeImageUrl(c.public ? c.public.photo : null)}
+              avatar={makeImageDataUrl(c.public ? c.public.photo : null)}
               comment={comment}
               preview={preview}
               received={deliveryStatus}

src/widgets/contact.jsx

@@ -1,6 +1,6 @@
 // A single topic or user.
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
@@ -11,7 +11,25 @@ import { Drafty } from 'tinode-sdk';
 
 import { deliveryMarker } from '../lib/utils.js';
 
-export default class Contact extends React.Component {
+const messages = defineMessages({
+  drafty_image: {
+    id: 'drafty_image',
+    defaultMessage: 'Picture',
+    description: 'Comment for embedded images in drafty preview'
+  },
+  drafty_form: {
+    id: 'drafty_form',
+    defaultMessage: 'Form: ',
+    description: 'Comment for form in drafty preview'
+  },
+  drafty_attachment: {
+    id: 'drafty_attachment',
+    defaultMessage: 'Attachment',
+    description: 'Comment for attachment in drafty preview'
+  },
+});
+
+class Contact extends React.Component {
   constructor(props) {
     super(props);
 
@@ -65,7 +83,8 @@ export default class Contact extends React.Component {
       this.props.comment;
 
     const icon = deliveryMarker(this.props.received);
-    const marker = icon ? <i className={'material-icons small space-right ' + icon.color}>{icon.name}</i> : null;
+    const marker = icon ? <i className={'material-icons small space-right' +
+      (icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
 
     return (
       <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
@@ -84,8 +103,9 @@ export default class Contact extends React.Component {
             {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
             <UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
           </div>
-          <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>
+          {this.props.showMode ?
-          <span><ContactBadges badges={badges} /></span>
+            <span><ContactBadges badges={badges} /></span> :
+            <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">
@@ -104,7 +124,13 @@ function draftyFormatter(style, data, values, key) {
   let el = Drafty.tagName(style);
   const attr = { key: key };
   if (el) {
+    const { formatMessage } = this.props.intl;
     switch (style) {
+      case 'BR':
+        // Replace new line with a space.
+        el = React.Fragment;
+        values = [' '];
+        break;
       case 'HL':
         // Make highlight less prominent in preview.
         attr.className = 'highlight preview';
@@ -116,7 +142,7 @@ function draftyFormatter(style, data, values, key) {
       case 'IM':
         // Replace image with '[icon] Image'.
         el = React.Fragment;
-        values = [<i className="material-icons">photo</i>, 'Picture'];
+        values = [<i key="im" className="material-icons">photo</i>, formatMessage(messages.drafty_image)];
         break;
       case 'BN':
         el = 'span';
@@ -124,19 +150,24 @@ function draftyFormatter(style, data, values, key) {
         break;
       case 'FM':
         el = React.Fragment;
-        values = [<i className="material-icons">dashboard</i>, 'Form:'];
+        values = [<i key="fm" className="material-icons">dashboard</i>,
+          formatMessage(messages.drafty_form)].concat(values || []);
         break;
       case 'RW':
         el = React.Fragment;
         break;
       case 'EX':
+        if (data && data.mime == 'application/json') {
+          // Ignore JSON attachments: they are form response payloads.
+          return null;
+        }
         el = React.Fragment;
-        values = [<i className="material-icons">attachment</i>, 'Attachment'];
+        values = [<i key="ex" className="material-icons">attachment</i>, formatMessage(messages.drafty_attachment)];
         break;
       default:
         if (el == '_UNKN') {
           el = React.Fragment;
-          values = [<i className="material-icons">extension</i>];
+          values = [<i key="unkn" className="material-icons">extension</i>];
         }
         break;
     }
@@ -145,3 +176,5 @@ function draftyFormatter(style, data, values, key) {
     return values;
   }
 };
+
+export default injectIntl(Contact);

src/widgets/context-menu.jsx

@@ -122,7 +122,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.clear_messages),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage(messages.menu_item_clear_messages), // title
+            formatMessage(messages.clear_messages), // title
             formatMessage(messages.clear_messages_warning), // content
             (() => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm
             null, // "OK"
@@ -136,7 +136,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.clear_for_all),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage(messages.menu_item_clear_messages_for_all), // title
+            formatMessage(messages.clear_for_all), // title
             formatMessage(message.delete_messages_warning), // content
             (() => { return this.deleteMessages(true, true, params, errorHandler); }),
             null, // "OK"
@@ -205,7 +205,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.topic_delete),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage(messages.menu_item_delete_topic), // title
+            formatMessage(messages.topic_delete), // title
             formatMessage(messages.topic_delete_warning), // content
             (() => {
               const topic = this.props.tinode.getTopic(params.topicName);

src/widgets/group-manager.jsx

@@ -188,10 +188,10 @@ class GroupManager extends React.Component {
           showUnread={false}
           onTopicSelected={this.handleContactSelected} />
         <div id="group-manager-buttons" className="panel-form-row">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
           </button>
-          <button className="white" onClick={this.handleCancel}>
+          <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
         </div>

src/widgets/group-subs.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { MAX_ONLINE_IN_TOPIC } from '../config.js'
 
 import LetterTile from './letter-tile.jsx';
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class GroupSubs extends React.Component {
   constructor(props) {
@@ -23,7 +23,7 @@ export default class GroupSubs extends React.Component {
         <div className="avatar-box" key={sub.user}>
           <LetterTile
             topic={sub.user}
-            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
+            avatar={makeImageDataUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />
         </div>
       );

src/widgets/invitation.jsx

@@ -23,15 +23,15 @@ export default class Invitation extends React.PureComponent {
             description="New chat invitation message: [Accept] [Ignore] [Block]." />
         </div>
         <div className="footer">
-          <button className="blue" onClick={event => { this.handleButtonAction(event, "accept"); }}>
+          <button className="primary" onClick={event => { this.handleButtonAction(event, "accept"); }}>
             <FormattedMessage id="chat_invitation_accept"
               defaultMessage="Accept" description="Action [Accept] for chat invitation." />
           </button>
-          <button className="white" onClick={event => { this.handleButtonAction(event, "delete"); }}>
+          <button className="secondary" onClick={event => { this.handleButtonAction(event, "delete"); }}>
             <FormattedMessage id="chat_invitation_ignore"
               defaultMessage="Ignore" description="Action [Ignore] for chat invitation." />
           </button>
-          <button className="white" onClick={event => { this.handleButtonAction(event, "block"); }}>
+          <button className="secondary" onClick={event => { this.handleButtonAction(event, "block"); }}>
             <FormattedMessage id="chat_invitation_block"
               defaultMessage="Block" description="Action [Block] for chat invitation." />
           </button>

src/widgets/new-topic-by-id.jsx

@@ -35,8 +35,9 @@ class NewTopicById extends React.PureComponent {
   handleSubmit(e) {
     e.preventDefault();
     if (this.state.groupId) {
-      var name = this.state.groupId.trim();
+      const name = this.state.groupId.trim();
-      if (name.length > 3 && (name.substr(0, 3) == 'usr' || name.substr(0, 3) == 'grp')) {
+      const prefix = name.substr(0, 3);
+      if (name.length > 3 && ['usr', 'grp', 'chn'].includes(prefix)) {
         this.props.onSubmit(name);
       } else {
         this.props.onError(this.props.intl.formatMessage(messages.invalid_id), 'err');
@@ -56,7 +57,7 @@ class NewTopicById extends React.PureComponent {
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_subscribe" defaultMessage="Subscribe"
               description="Button [Subscribe]" />
           </button>

src/widgets/new-topic-group.jsx

@@ -58,7 +58,7 @@ export default class NewTopicGroup extends React.PureComponent {
   }
 
   render() {
-    var submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/widgets/permissions-editor.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import CheckBox from './checkbox.jsx';
 import Contact from './contact.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 // Translatable permission names.
 const messages = defineMessages({
@@ -135,7 +135,7 @@ class PermissionsEditor extends React.Component {
           <ul className="contact-box"><Contact
             item={this.props.item}
             title={this.props.userTitle}
-            avatar={makeImageUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
+            avatar={makeImageDataUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
         <label className="small"><FormattedMessage id="title_permissions"
           defaultMessage="Permissions" description="Section title"/></label>
         <table className="permission-editor">
@@ -153,7 +153,7 @@ class PermissionsEditor extends React.Component {
           <button className="outline" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
           </button>
         </div>

src/widgets/tag-manager.jsx

@@ -130,7 +130,7 @@ export default class TagManager extends React.Component {
               <button className="outline" onClick={this.handleCancel}>
                 <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
               </button>
-              <button className="blue" onClick={this.handleSubmit}>
+              <button className="primary" onClick={this.handleSubmit}>
                 <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
               </button>
             </div>

version.js

@@ -0,0 +1,3 @@
+// This is a generated file. Don't edit.
+
+const PACKAGE_VERSION = "0.17.1-alpha1";