Merge branch 'next' into features

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.17.10-rc1",
+  "version": "0.18.0-alpha1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -11,7 +11,9 @@
     "build:css": "postcss css/base.css > css/base.min.css",
     "build:dev": "webpack --mode development",
     "build:prod": "webpack --mode production",
-    "build:i18n": "node scripts/pack-messages.js",
+    "build:i18n": "node scripts/i18n.js",
+    "i18n:missing": "node scripts/i18n.js missing",
+    "i18n:obsolete": "node scripts/i18n.js obsolete",
     "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]'",
     "compile": "formatjs compile"
@@ -68,7 +70,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intl": "^5.20.2",
-    "tinode-sdk": "^0.17.10-rc1"
+    "tinode-sdk": "^0.18.0-alpha1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

scripts/i18n.js

@@ -0,0 +1,127 @@
+// 1. Updates translations files with new messages, mark no longer needed translations as obsolete.
+// 2. Takes all translations and groups them into a single file.
+// 3. When called with parameters 'missing' or 'obsolete' writes missing and obsolete translations to console.
+
+const fs = require('fs');
+const path = require('path');
+const globSync = require('glob').sync;
+const mkdirpSync = require('mkdirp').sync;
+
+const EXTRACTED_STRINGS = './src/i18n/ex/base-en.json';
+const BASE_LANG        = 'en';
+const LANG_DIR         = './src/i18n/';
+const LANG_PATTERN     = './src/i18n/*.json';
+const LANG_PATTERN_ONE = './src/i18n/%s.json';
+const FINAL_FILE       = './src/messages.json';
+
+const args = process.argv.slice(2);
+
+function getLocaleFromFileName(filename) {
+  const parts = filename.split('/');
+  return parts[parts.length - 1].split('.json')[0];
+}
+
+function printf(str) {
+  const args = [].slice.call(arguments, 1);
+  let i = 0;
+  return str.replace(/%s/g, () => args[i++]);
+}
+
+// Called with one or two parameters?
+if (args[0] == 'missing' || args[0] == 'obsolete') {
+  // Extract missing or obsolete translations as requested.
+  // Read either all or just one translation.
+  const pattern = args[1] ? printf(LANG_PATTERN_ONE, args[1]) : LANG_PATTERN;
+  const extracted = globSync(pattern)
+    .map((filename) => {
+      const locale = getLocaleFromFileName(filename);
+      const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+      const dest = {};
+      // Copy messages while skipping missing and obsolete ones.
+      for (let key in translated) {
+        if ((args[0] == 'missing' && translated[key].missing) ||
+          (args[0] == 'obsolete' && translated[key].obsolete)) {
+          dest[key] = translated[key];
+        }
+      }
+
+      return { [locale]: dest };
+    })
+    .reduce((collection, descriptors) => {
+      return { ...collection, ...descriptors };
+    }, {});
+
+  console.log(JSON.stringify(extracted, null, 2)+"\n");
+  return;
+}
+
+// The formatjs/cli saves extracted messages into a file {'message_id': {defaultMessage: 'default message text', description: '...'}, ...}.
+// Rewrite them into a single file en.json {'message_id': 'default message text', }.
+
+// Read master-set of messages in default language.
+const baseMessages = JSON.parse(fs.readFileSync(EXTRACTED_STRINGS, 'utf8'));
+
+// Find messages present in baseMessages but missing in translations and vice versa.
+// Mark missing or obsolete messages as such.
+globSync(LANG_PATTERN)
+  .map((filename) => {
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+    const locale = getLocaleFromFileName(filename);
+
+    // Refresh existing entries with possible new descriptions and default messages, add missing.
+    Object.entries(baseMessages).forEach((ent) => {
+      const [key, value] = ent;
+      let translation = translated[key] ? translated[key].translation : "";
+      if (!translation && locale == BASE_LANG) {
+        translation = value.defaultMessage;
+      }
+
+      translated[key] = {
+        translation: translation,
+        defaultMessage: value.defaultMessage,
+        description: value.description,
+        missing: !translation,
+        obsolete: false
+      };
+    });
+
+    // Find no longer needed messages.
+    Object.entries(translated).forEach((ent) => {
+      const [key, value] = ent;
+      if (!baseMessages[key] && translated[key]) {
+        // Obsolete, no longer missing.
+        translated[key].missing = !translated[key].translation;
+        translated[key].obsolete = true;
+      }
+    });
+
+    fs.writeFileSync(filename, JSON.stringify(translated, null, 2)+"\n");
+  });
+
+// Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
+// while removing messages marked as missing or obsolete.
+
+// Read all translations.
+const messages = globSync(LANG_PATTERN)
+  .map((filename) => {
+    const locale = getLocaleFromFileName(filename);
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+    const dest = {};
+    // Copy messages while skipping missing and obsolete ones.
+    for (let key in translated) {
+      if (!translated[key].missing && !translated[key].obsolete) {
+        dest[key] = translated[key].translation;
+      }
+    }
+
+    return { [locale]: dest };
+  })
+  .reduce((collection, descriptors) => {
+    return { ...collection, ...descriptors };
+  }, {});
+
+// Write a file with all translations combined.
+mkdirpSync(path.dirname(FINAL_FILE));
+fs.writeFileSync(FINAL_FILE, JSON.stringify(messages));

scripts/pack-messages.js

@@ -1,100 +0,0 @@
-// 1. Takes file with messages extracted via the React Intl Babel plugin and converts it into a file containing
-// `id: message` pairs in "en" locale.
-//
-// 2. Takes all translations and groups them into a single file.
-const fs = require('fs');
-const path = require('path');
-const globSync = require('glob').sync;
-const mkdirpSync = require('mkdirp').sync;
-
-const EXTRACTED_STRINGS = './src/i18n/ex/base-en.json';
-const DEFAULT_TRANSLATION = 'en.json';
-const LANG_DIR         = './src/i18n/';
-const LANG_PATTERN     = './src/i18n/*.json';
-const FINAL_FILE       = './src/messages.json';
-const TRANSLATIONS     = './src/translations.js'
-
-const MISSING_MARKER = ':!![MISSING]!!:';
-const OBSOLETE_MARKER = ':!![OBSOLETE]!!:';
-
-// The formatjs/cli saves extracted messages into a file {'message_id': {defaultMessage: 'default message text', description: '...'}, ...}.
-// Rewrite them into a single file en.json {'message_id': 'default message text', }.
-
-// Read master-set of messages in default language.
-const baseMessages = JSON.parse(fs.readFileSync(EXTRACTED_STRINGS, 'utf8'));
-// Convert.
-const en = {};
-for (const [id, msg] of Object.entries(baseMessages)) {
-  en[id] = msg.defaultMessage;
-}
-
-// Write extracted strings into default language file.
-let filename = path.join(LANG_DIR, DEFAULT_TRANSLATION);
-mkdirpSync(path.dirname(filename));
-fs.writeFileSync(filename, JSON.stringify(en, null, 2)+"\n");
-
-// Find messages present in en.json but missing in translations and vice versa.
-// Mark missing or obsolete messages as such in translation files.
-globSync(LANG_PATTERN)
-  .map((filename) => {
-    const parts = filename.split('/');
-    if (parts[parts.length-1] != DEFAULT_TRANSLATION) {
-      const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
-      // Find missing messages.
-      Object.entries(baseMessages).forEach((ent) => {
-        if (!translated.hasOwnProperty(ent[0])) {
-          // Missing translation.
-          translated[ent[0]] = MISSING_MARKER + ent[1];
-        } else if (translated[ent[0]].indexOf(OBSOLETE_MARKER) === 0) {
-          // No longer obsolete. Remove obsolete marker.
-          translated[ent[0]] = translated[ent[0]].substring(0, OBSOLETE_MARKER.length);
-        }
-      });
-      // Find no longer needed messages.
-      Object.entries(translated).forEach((ent) => {
-        if (!baseMessages.hasOwnProperty(ent[0]) && translated.hasOwnProperty(ent[0])) {
-          let val = translated[ent[0]];
-          if (val.indexOf(MISSING_MARKER) === 0) {
-            // No longer missing.
-            val = val.substring(0, MISSING_MARKER.length);
-          }
-          if (val.indexOf(OBSOLETE_MARKER) !== 0) {
-            val = OBSOLETE_MARKER + val;
-          }
-          translated[ent[0]] = val;
-        }
-      });
-      fs.writeFileSync(filename, JSON.stringify(translated, null, 2)+"\n");
-    }
-  });
-
-// List of all available translations.
-const languageList = {};
-// Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
-// while removing messages marked as missing or obsolete.
-
-// Read all translations.
-const messages = globSync(LANG_PATTERN)
-  .map((filename) => {
-    const parts = filename.split('/');
-    const locale = parts[parts.length - 1].split('.json')[0];
-    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
-    languageList[locale] = locale;
-    // Strip messages prefixed with MISSING or OBSOLETE markers.
-    for (let id in translated) {
-      // process.stdout.write("-- handling translation " + id + "; "+ String(translated[id]) + "; in " + String(filename) + "; --\n");
-      if (translated[id].indexOf(OBSOLETE_MARKER) == 0 ||
-          translated[id].indexOf(MISSING_MARKER) == 0) {
-        delete translated[id];
-      }
-    }
-
-    return { [locale]: translated };
-  })
-  .reduce((collection, descriptors) => {
-    return { ...collection, ...descriptors };
-  }, {});
-
-// Write file with all translations combined.
-mkdirpSync(path.dirname(FINAL_FILE));
-fs.writeFileSync(FINAL_FILE, JSON.stringify(messages, null, 2)+"\n");

service-worker.js

@@ -57,6 +57,7 @@ const fbMessaging = firebase.messaging();
 // This method shows the push notifications while the window is in background.
 fbMessaging.onBackgroundMessage((payload) => {
   if (payload.data.silent == 'true') {
+    // TODO: if this is an 'msg', fetch the new message in the background.
     return;
   }
 
@@ -68,8 +69,8 @@ fbMessaging.onBackgroundMessage((payload) => {
   const pushType = payload.data.what || 'msg';
   const title = payload.data.title || self.i18nMessage(pushType == 'msg' ? 'new_message' : 'new_chat');
   const options = {
-    body: payload.data.content || '',
-    icon: '/img/logo96.png',
+    body: payload.data.content || '', // TODO: content for 'sub' should be topic's or user's title.
+    icon: '/img/logo96.png', // TODO: use topic's or user's avatar (would have to fetch for 'sub', read from db for 'msg').
     badge: '/img/badge96.png',
     tag: payload.data.topic || undefined,
     data: {
@@ -135,7 +136,10 @@ self.addEventListener('fetch', event => {
   event.respondWith((async () => {
     //  Try to find the response in the cache.
     const cache = await caches.open(PACKAGE_VERSION);
-    const cachedResponse = await cache.match(event.request);
+
+    const reqUrl = new URL(event.request.url);
+    // Using ignoreSearch=true to read cached images and docs despite different auth signatures.
+    const cachedResponse = await cache.match(event.request, {ignoreSearch: (self.location.origin == reqUrl.origin)});
     if (cachedResponse) {
       return cachedResponse;
     }
@@ -144,7 +148,7 @@ self.addEventListener('fetch', event => {
     if (!response || response.status != 200 || response.type != 'basic') {
       return response;
     }
-    if (event.request.url && (event.request.url.startsWith('http://') || event.request.url.startsWith('https://'))) {
+    if (reqUrl.protocol == 'http:' || reqUrl.protocol == 'https:') {
       await cache.put(event.request, response.clone());
     }
     return response;

src/config.js

@@ -45,9 +45,12 @@ export const MEDIA_BREAKPOINT = 640;
 // Size of css 'rem' unit in pixels. Default 1rem = 10pt = 13px.
 export const REM_SIZE = 13;
 
-// Size of the avatar image: When an avatar image is uploaded, it's resized to
-// a square of this size.
-export const AVATAR_SIZE = 128;
+// Size of the avatar image: when image dimensions are greater or the image is not square, it's resized to
+// a square of this size or less.
+export const AVATAR_SIZE = 384;
+
+// Maximum size of an avatar in bytes for sending in-band. Bigger avatars will be sent out of band (as uploads).
+export const MAX_AVATAR_BYTES = 4096;
 
 // Size of the broken_image shown in MessagesView
 export const BROKEN_IMAGE_SIZE = 32;
@@ -75,12 +78,17 @@ export const MAX_IMAGE_DIM = 1024;
 // Linear dimensions of image preview: shrink image under this size for previews.
 export const IMAGE_PREVIEW_DIM = 64;
 
+// Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
+export const IMAGE_THUMBNAIL_DIM = 25;
+
 // Maximum number of online users to be shown in a topic title bar. Others will be
 // hidden under "+X more"
 export const MAX_ONLINE_IN_TOPIC = 4;
 
 // Maximum length of user name, topic title, and private comment.
 export const MAX_TITLE_LENGTH = 60;
+// Maximum length of topic description.
+export const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
 
 // Length of message previews in chat list, in characters.
 export const MESSAGE_PREVIEW_LENGTH = 80;

src/i18n/ex/base-en.json

@@ -19,10 +19,6 @@
     "defaultMessage": "Leave Conversation",
     "description": "Flat button [Leave Conversation]"
   },
-  "action_more": {
-    "defaultMessage": "More",
-    "description": "Action for showing more content"
-  },
   "action_report_chat": {
     "defaultMessage": "Report Conversation",
     "description": "Flat button [Report Group]"
@@ -31,10 +27,22 @@
     "defaultMessage": "Archived contacts ({count})",
     "description": "Label for archived chats"
   },
+  "badge_danger": {
+    "defaultMessage": "Untrustworthy",
+    "description": "Suspicious or untrustworthy account or topic badge"
+  },
   "badge_owner": {
     "defaultMessage": "owner",
     "description": "Badge for indicating the owner"
   },
+  "badge_staff": {
+    "defaultMessage": "Staff-managed",
+    "description": "Explanation of a staff-managed account or topic badge"
+  },
+  "badge_verified": {
+    "defaultMessage": "Verified/official",
+    "description": "Explanation of a verified account or topic badge"
+  },
   "badge_you": {
     "defaultMessage": "you",
     "description": "Badge for indicating the current user"
@@ -87,6 +95,10 @@
     "defaultMessage": "Reset",
     "description": "Button [Reset]"
   },
+  "button_security": {
+    "defaultMessage": "Security",
+    "description": "Navigaton button for security panel."
+  },
   "button_send_request": {
     "defaultMessage": "Send request",
     "description": "Button [Send request]"
@@ -159,7 +171,7 @@
     "defaultMessage": "Delete account",
     "description": "Title for delete account warning"
   },
-  "delete_account_arning": {
+  "delete_account_warning": {
     "defaultMessage": "Are you sure you want to delete your account? It cannot be undone.",
     "description": "Warning message when deleting an account"
   },
@@ -171,6 +183,10 @@
     "defaultMessage": "content deleted",
     "description": "Shown when messages are deleted"
   },
+  "description_editing_placeholder": {
+    "defaultMessage": "Description (optional)",
+    "description": "Placeholder for editing topic description"
+  },
   "download_action": {
     "defaultMessage": "download",
     "description": "Call to action [download]"
@@ -251,14 +267,14 @@
     "defaultMessage": "Content type:",
     "description": "Label for file content type (mime)"
   },
-  "label_default_access": {
-    "defaultMessage": "Default access mode:",
-    "description": "Section title"
-  },
   "label_default_access_mode": {
     "defaultMessage": "Default access mode:",
     "description": "Label for default access mode"
   },
+  "label_description": {
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description"
+  },
   "label_file_name": {
     "defaultMessage": "File name:",
     "description": "Label for a file name"
@@ -329,6 +345,10 @@
     "defaultMessage": "Name",
     "description": "Label for editing topic name"
   },
+  "label_unarchive_topic": {
+    "defaultMessage": "Archived:",
+    "description": "Label for unarchiving the topic"
+  },
   "label_user_contacts": {
     "defaultMessage": "Contacts:",
     "description": "Label for user contacts"
@@ -421,6 +441,10 @@
     "defaultMessage": "Mute",
     "description": "Turn off notifications"
   },
+  "menu_item_reply": {
+    "defaultMessage": "Reply",
+    "description": "Reply to message"
+  },
   "menu_item_restore_topic": {
     "defaultMessage": "Restore",
     "description": "Restore topic from archive"
@@ -481,6 +505,26 @@
     "defaultMessage": "online now",
     "description": "Indicator that the user or topic is currently online"
   },
+  "panel_title_crop": {
+    "defaultMessage": "Drag to Adjust",
+    "description": "Title for AvatarCropView."
+  },
+  "panel_title_general": {
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon."
+  },
+  "panel_title_info": {
+    "defaultMessage": "Info",
+    "description": "Title for InfoView"
+  },
+  "panel_title_members": {
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view."
+  },
+  "panel_title_security": {
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity."
+  },
   "password_prompt": {
     "defaultMessage": "Password",
     "description": "Placeholder/prompt for entering password"
@@ -529,6 +573,18 @@
     "defaultMessage": "Write ({val})",
     "description": "Name of W permission"
   },
+  "permissions_anonymous": {
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions"
+  },
+  "permissions_authenticated": {
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions"
+  },
+  "permissions_user": {
+    "defaultMessage": "User's Permissions",
+    "description": "Title for editing user's permissions"
+  },
   "phone_dative": {
     "defaultMessage": "phone",
     "description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
@@ -577,25 +633,17 @@
     "defaultMessage": "List like email:alice@example.com, tel:17025550003...",
     "description": "Placeholder in contacts search field"
   },
-  "sidepanel_title_acc_general": {
-    "defaultMessage": "General",
-    "description": "Sidepanel title for AccGeneralView."
-  },
   "sidepanel_title_acc_notifications": {
     "defaultMessage": "Notifications",
     "description": "Sidepanel title for AccNotificationsView."
   },
-  "sidepanel_title_acc_security": {
-    "defaultMessage": "Security",
-    "description": "Sidepanel title for AccSecurityView."
-  },
   "sidepanel_title_acc_support": {
     "defaultMessage": "Support",
     "description": "Sidepanel title for AccSupportView."
   },
   "sidepanel_title_account_settings": {
     "defaultMessage": "Account Settings",
-    "description": "Sidepanel title for EditAccountView."
+    "description": "Sidepanel title for AccountSettingsView."
   },
   "sidepanel_title_archive": {
     "defaultMessage": "Archived Chats",
@@ -661,10 +709,6 @@
     "defaultMessage": "Group Members",
     "description": "Section title"
   },
-  "title_info": {
-    "defaultMessage": "Info",
-    "description": "Title for InfoView"
-  },
   "title_manage_tags": {
     "defaultMessage": "Manage",
     "description": "Section title for the list of tags"
@@ -678,7 +722,7 @@
     "description": "Section title"
   },
   "title_tag_manager": {
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager"
   },
   "topic_block_warning": {

src/lib/blob-helpers.js

@@ -6,9 +6,9 @@ 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
-export function makeImageDataUrl(photo) {
-  if (photo) {
+// Get an URL from a theCard photo: either create a data: URL or return reference URL.
+export function makeImageUrl(photo) {
+  if (photo && typeof photo == 'object') {
     if (photo.data && photo.type) {
       const mime = photo.type.startsWith('image/') ? photo.type : ('image/' + photo.type);
       return 'data:' + mime + ';base64,' + photo.data;
@@ -130,6 +130,39 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
   img.src = URL.createObjectURL(fileOrBlob);
 }
 
+// Scale and crop image according to specified dimensions.
+// The coordinates are in unscaled image pixels, i.e. cut the rectangle first then scale it.
+export function imageCrop(mime, objURL, left, top, width, height, scale, onSuccess, onError) {
+  const img = new Image();
+  img.crossOrigin = 'Anonymous';
+  img.onerror = function(err) {
+    onError("Image format unrecognized");
+  }
+  img.onload = async function() {
+    // Once the image is loaded, the URL is no longer needed.
+    URL.revokeObjectURL(img.src);
+
+    let canvas = document.createElement('canvas');
+    canvas.width = width * scale;
+    canvas.height = height * scale;
+    let ctx = canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = true;
+    ctx.drawImage(this, left, top, width, height, 0, 0, canvas.width, canvas.height);
+
+    mime = SUPPORTED_IMAGE_FORMATS.includes(mime) ? mime : 'image/jpeg';
+    // Generate blob to check size of the image.
+    let blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
+    if (!blob) {
+      onError("Unsupported image format");
+      return;
+    }
+    // Allow GC.
+    canvas = null;
+    onSuccess(mime, blob, width, height);
+  };
+  img.src = objURL;
+}
+
 // Convert File to base64 string.
 export function fileToBase64(file, onSuccess) {
   const reader = new FileReader();
@@ -157,7 +190,7 @@ export function filePasted(event, onImageSuccess, onAttachmentSuccess, onError)
     if (item.kind === 'file') {
       var file = item.getAsFile();
       if (!file) {
-        console.log("Failed to get file object from pasted file item", item.kind, item.type);
+        console.error("Failed to get file object from pasted file item", item.kind, item.type);
         continue;
       }
       if (file.type && file.type.split('/')[0] == 'image') {
@@ -205,9 +238,33 @@ export function base64ReEncode(str) {
     try {
       str = btoa(atob(str));
     } catch(err) {
-      console.log("Failed to base64 re-encode string.", err);
+      console.error("Failed to base64 re-encode string.", err);
       str = null;
     }
   }
   return str;
 }
+
+// Convert a base64 encoded string with the provided mime type into a Blob.
+export function base64ToBlob(str, mime) {
+  if (!str) {
+    return null;
+  }
+
+  try {
+    // Make blob.
+    const bin = atob(str);
+    const length = bin.length;
+    const buf = new ArrayBuffer(length);
+    const arr = new Uint8Array(buf);
+    for (let i = 0; i < length; i++) {
+      arr[i] = bin.charCodeAt(i);
+    }
+
+    return new Blob([buf], { type: mime });
+  } catch(err) {
+    console.log("Failed to convert base64 to blob: ", err);
+  }
+
+  return null;
+}

src/lib/navigation.js

@@ -9,11 +9,11 @@ export default class HashNavigation {
     const params = {};
     let path = [];
     if (parts[0]) {
-      path = parts[0].substr(1).split('/');
+      path = parts[0].replace('#', '').split('/');
     }
     if (parts[1]) {
       parts[1].split('&').forEach(function(part) {
-        let item = part.split('=');
+        const item = part.split('=');
         if (item[0]) {
           params[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
         }
@@ -58,6 +58,16 @@ export default class HashNavigation {
     return this.composeUrlHash(parsed.path, parsed.params);
   }
 
+  static setUrlInfoPanel(hash, infopanel) {
+    const parsed = this.parseUrlHash(hash);
+    if (infopanel) {
+      parsed.params.info = infopanel;
+    } else {
+      delete parsed.params.info;
+    }
+    return this.composeUrlHash(parsed.path, parsed.params);
+  }
+
   static setUrlTopic(hash, topic) {
     const parsed = this.parseUrlHash(hash);
     parsed.path[1] = topic;

src/lib/strformat.js

@@ -39,7 +39,7 @@ export function bytesToHumanSize(bytes) {
 
 // Get 32 bit integer hash value for a string. Ideally it should produce the same value
 // as Java's String#hash().
-export function stringHash(value) {
+function stringToColorHash(value) {
   let hash = 0;
   value = '' + value;
   for (let i = 0; i < value.length; i++) {
@@ -48,3 +48,17 @@ export function stringHash(value) {
   }
   return hash;
 }
+
+// User avatar letter color id.
+export function letterTileColorId(userId) {
+  return Math.abs(stringToColorHash(userId)) % 16;
+}
+
+// Converts user or topic ID to a CSS color class. Ideally it should produce the same color value as Java version.
+// params:
+// - {string} id: user or topic ID
+// - {boolean} light: light or dark version of the color.
+// - {boolean} fg: foreground or background color.
+export function idToColorClass(id, light, fg) {
+  return (light ? 'lt-' : 'dk-') + (fg ? 'fg-' : 'bg-') + letterTileColorId(id);
+}

src/lib/utils.js

@@ -20,9 +20,10 @@ export function updateFavicon(count) {
 }
 
 // Create theCard which represents user's or topic's "public" info.
-export function theCard(fn, imageUrl, imageMimeType) {
+export function theCard(fn, imageUrl, imageMimeType, note) {
   let card = null;
   fn = fn && fn.trim();
+  note = note && note.trim();
 
   if (fn) {
     card = {
@@ -30,6 +31,11 @@ export function theCard(fn, imageUrl, imageMimeType) {
     };
   }
 
+  if (typeof note == 'string') {
+    card = card || {};
+    card.note = note ? note : Tinode.DEL_CHAR;
+  }
+
   if (imageUrl) {
     card = card || {};
     let mimeType = imageMimeType;
@@ -38,10 +44,12 @@ export function theCard(fn, imageUrl, imageMimeType) {
     if (matches) {
       mimeType = matches[1];
       card.photo = {
-        data: imageUrl.substring(imageUrl.indexOf(',') + 1)
+        data: imageUrl.substring(imageUrl.indexOf(',') + 1),
+        ref: Tinode.DEL_CHAR
       };
     } else {
       card.photo = {
+        data: Tinode.DEL_CHAR,
         ref: imageUrl
       };
     }
@@ -107,10 +115,9 @@ export function isUrlRelative(url) {
 
 // Ensure URL does not present an XSS risk. Optional allowedSchemes may contain an array of
 // strings with permitted URL schemes, such as ['ftp', 'ftps']; otherwise accept http and https only.
-// If apikey and/or token is defined, it's appended to relative URL.
 export function sanitizeUrl(url, allowedSchemes) {
-  if (!url) {
-    return null;
+  if (typeof url != 'string') {
+    return url;
   }
 
   // Strip control characters and whitespace. They are not valid URL characters anyway.
@@ -139,7 +146,6 @@ export function sanitizeUrl(url, allowedSchemes) {
 
 // Ensure URL is suitable for <img src="url"> field: the URL must be a relative URL or
 // have http:, https:, blob: or data: scheme.
-// The relative URL is appended with the API key and/or auth token.
 // In case of data: scheme, the URL must start with a 'data:image/XXXX;base64,'.
 export function sanitizeImageUrl(url) {
   if (!url) {
@@ -165,7 +171,7 @@ export function deliveryMarker(received) {
     case Tinode.MESSAGE_STATUS_SENDING:
       return { name: 'access_time' }; // watch face
     case Tinode.MESSAGE_STATUS_FAILED:
-      return { name: 'warning', color: 'amber' }; // yellow icon /!\
+      return { name: 'warning', color: 'danger-color' }; // yellow icon /!\
     case Tinode.MESSAGE_STATUS_SENT:
       return { name: 'done' }; // checkmark
     case Tinode.MESSAGE_STATUS_RECEIVED:

src/version.js

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

src/views/acc-general-view.jsx

@@ -1,189 +0,0 @@
-// Edit account parameters.
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import Tinode from 'tinode-sdk';
-
-import AvatarUpload from '../widgets/avatar-upload.jsx';
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
-import TagManager from '../widgets/tag-manager.jsx';
-
-import { MAX_TITLE_LENGTH } from '../config.js';
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
-import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
-
-export default class AccGeneralView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const me = this.props.tinode.getMeTopic();
-    this.state = {
-      fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageDataUrl(me.public ? me.public.photo : null),
-      tags: me.tags(),
-      credentials: me.getCredentials() || [],
-      addCredActive: false,
-      addCredInvalid: false,
-      newCred: '',
-      previousOnTags: me.onTagsUpdated
-    };
-
-    this.tnNewTags = this.tnNewTags.bind(this);
-    this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
-    this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
-    this.handleImageChanged = this.handleImageChanged.bind(this);
-    this.handleCredChange = this.handleCredChange.bind(this);
-    this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
-    this.handleCredEntered = this.handleCredEntered.bind(this);
-    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
-  }
-
-  componentDidMount() {
-    const me = this.props.tinode.getMeTopic();
-    me.onCredsUpdated = this.tnCredsUpdated;
-    me.onTagsUpdated = this.tnNewTags;
-  }
-
-  componentWillUnmount() {
-    const me = this.props.tinode.getMeTopic();
-    me.onTagsUpdated = this.state.previousOnTags;
-    me.onCredsUpdated = undefined;
-  }
-
-  tnNewTags(tags) {
-    this.setState({tags: tags});
-  }
-
-  tnCredsUpdated(creds) {
-    this.setState({credentials: creds || []});
-  }
-
-  handleFullNameUpdate(fn) {
-    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
-    if (fn) {
-      this.setState({fullName: fn});
-      this.props.onUpdateAccount(undefined, theCard(fn, null));
-    }
-  }
-
-  handleImageChanged(img) {
-    this.setState({avatar: img});
-    this.props.onUpdateAccount(undefined, theCard(null, img || Tinode.DEL_CHAR));
-  }
-
-  handleCredChange(e) {
-    this.setState({newCred: e.target.value, addCredInvalid: false});
-  }
-
-  handleCredKeyDown(e) {
-    if (e.keyCode === 27) {
-      // Escape pressed
-      this.setState({newCred: '', addCredActive: false});
-    } else if (e.keyCode === 13) {
-      // Enter pressed
-      this.handleCredEntered(e);
-    }
-  }
-
-  handleCredEntered(e) {
-    let value = this.state.newCred.trim();
-    if (!value) {
-      this.setState({addCredActive: false, addCredInvalid: false});
-      return;
-    }
-
-    let val = asPhone(value);
-    let method;
-    if (val) {
-      method = 'tel';
-    } else {
-      val = asEmail(value);
-      if (val) {
-        method = 'email';
-      }
-    }
-    if (method) {
-      this.props.onCredAdd(method, val);
-      this.setState({addCredActive: false, newCred: ''});
-    } else {
-      this.setState({addCredInvalid: true});
-    }
-  }
-
-  handleTagsUpdated(tags) {
-    // Check if tags have actually changed.
-    if (arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
-      return;
-    }
-    this.props.onUpdateTags(tags);
-  }
-
-  render() {
-    const credentials = [];
-    this.state.credentials.map((cred) => {
-      credentials.push(<div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
-        <span > {!cred.done ?
-          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
-              <FormattedMessage id="validate_credential_action" defaultMessage="confirm"
-                description="Validate credentail call to action" />
-            </a>
-          : null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
-            className="material-icons gray">delete_outline</i></a></span></div>);
-    });
-
-    return (
-      <div className="scrollable-panel">
-        <div className="panel-form-row">
-          <div className="panel-form-column">
-            <label className="small"><FormattedMessage id="label_your_name" defaultMessage="Your name"
-              description="Label for full name editing" /></label>
-            <div><FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
-              description="Input placeholder for person's full name">{
-              (full_name_placeholder) => <InPlaceEdit
-                placeholder={full_name_placeholder}
-                value={this.state.fullName}
-                onFinished={this.handleFullNameUpdate} />
-            }</FormattedMessage></div>
-          </div>
-          <AvatarUpload
-            avatar={this.state.avatar}
-            uid={this.props.myUserId}
-            title={this.state.fullName}
-            onImageChanged={this.handleImageChanged}
-            onError={this.props.onError} />
-        </div>
-        <div className="hr" />
-        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
-          description="Section title for TagManager">{
-          (title_tag_manager) => <TagManager
-            title={title_tag_manager}
-            activated={false}
-            tags={this.state.tags}
-            tinode={this.props.tinode}
-            onSubmit={this.handleTagsUpdated} />
-        }</FormattedMessage>
-        <div className="hr" />
-        <div className="panel-form-column">
-          <label className="small">
-            <FormattedMessage id="label_user_contacts" defaultMessage="Contacts:"
-            description="Label for user contacts" />
-          </label>
-          <div className="quoted">
-            {credentials}
-            {this.state.addCredActive ?
-              <input type="text" value={this.state.value}
-                className={this.state.addCredInvalid ? 'invalid' : null}
-                placeholder="Phone number or email" required="required" autoFocus
-                onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
-              : null}
-            <div>
-              <a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>
-                <i className="material-icons">add</i>
-                <FormattedMessage id="button_add_another" defaultMessage="Add another" description="Call to action [+ add another]" />
-              </a></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-};

src/views/acc-security-view.jsx

@@ -12,7 +12,7 @@ const messages = defineMessages({
     description: 'Title for delete account warning'
   },
   delete_account_warning: {
-    id: 'delete_account_arning',
+    id: 'delete_account_warning',
     defaultMessage: 'Are you sure you want to delete your account? It cannot be undone.',
     description: 'Warning message when deleting an account'
   }
@@ -46,7 +46,7 @@ class AccSecurityView extends React.Component {
 
   handlePasswordUpdate(pwd) {
     this.setState({password: pwd});
-    this.props.onUpdateAccount(pwd);
+    this.props.onUpdatePassword(pwd);
   }
 
   handleLaunchPermissionsEditor(which) {
@@ -63,7 +63,7 @@ class AccSecurityView extends React.Component {
   handlePermissionsChanged(perm) {
     let defacs = {};
     defacs[this.state.showPermissionEditorFor] = perm;
-    this.props.onUpdateAccount(undefined, undefined, defacs);
+    this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);
 
     let newState = {showPermissionEditorFor: undefined};
     newState[this.state.showPermissionEditorFor] = perm;

src/views/account-settings-view.jsx

@@ -0,0 +1,85 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+
+function _clip(str, length) {
+  return str && str.substring(0, length);
+}
+
+export default class AccountSettingsView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const me = this.props.tinode.getMeTopic();
+    this.state = {
+      fullName: _clip(me.public ? me.public.fn : undefined, MAX_TITLE_LENGTH),
+      description: _clip(me.public ? me.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(me.public ? me.public.photo : null)
+    };
+  }
+
+  render() {
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
+            <i className="material-icons">edit</i>&nbsp;
+            <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+          </a>
+          <center>
+            <AvatarUpload
+              tinode={this.props.tinode}
+              avatar={this.state.avatar}
+              readOnly={true}
+              uid={this.props.myUserId}
+              title={this.state.fullName} />
+          </center>
+          <div className="group">
+            <label className="small">
+              <FormattedMessage id="label_your_name" defaultMessage="Your name"
+                description="Label for full name editing" />
+            </label>
+            <div className="large ellipsized">{this.state.fullName}</div>
+          </div>
+          <div className="group">
+            <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+              description="Label for user address (ID)" /></label>&nbsp;
+            <tt>{this.props.myUserId}</tt>
+          </div>
+          <div className="group">
+            <BadgeList trustedBadges={this.props.trustedBadges} />
+          </div>
+          {this.state.description ?
+            <div className="group">
+              <label className="small">
+                <FormattedMessage id="label_description" defaultMessage="Description"
+                  description="Label for editing topic description" />
+              </label>
+              <div>{this.state.description}</div>
+            </div> : null}
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('notif');}}>
+            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
+              defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
+          </a>
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+              defaultMessage="Security" description="Navigaton button for security panel." />
+          </a>
+          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('support');}}>
+            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
+              defaultMessage="Support" description="Sidepanel title for AccSupportView." />
+          </a>
+        </div>
+      </div>
+    );
+  }
+};

src/views/contacts-view.jsx

@@ -89,6 +89,7 @@ export default class ContactsView extends React.Component {
         defaultMessage="You have no chats<br />¯∖_(ツ)_/¯"
         description="HTML message shown in ContactList when no contacts are found">{
         (no_contacts) => <ContactList
+          tinode={this.props.tinode}
           connected={this.props.connected}
           contacts={this.state.contactList}
           emptyListMessage={no_contacts}

src/views/create-account-view.jsx

@@ -92,6 +92,7 @@ export default class CreateAccountView extends React.PureComponent {
             }</FormattedMessage>
           </div>
           <AvatarUpload
+            tinode={this.props.tinode}
             onImageChanged={this.handleImageChanged}
             onError={this.props.onError} />
         </div>

src/views/edit-account-view.jsx

@@ -1,66 +0,0 @@
-// Edit account parameters.
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import AvatarUpload from '../widgets/avatar-upload.jsx';
-
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
-
-export default class EditAccountView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const me = this.props.tinode.getMeTopic();
-    this.state = {
-      fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageDataUrl(me.public ? me.public.photo : null)
-    };
-  }
-
-  render() {
-    return (
-      <div className="scrollable-panel">
-        <div className="panel-form-row">
-          <div className="panel-form-column">
-            <label className="small">
-              <FormattedMessage id="label_your_name" defaultMessage="Your name"
-                description="Label for full name editing" />
-            </label>
-            <div className="large">{this.state.fullName}</div>
-            <div>
-              <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
-                description="Label for user address (ID)" /></label>&nbsp;
-              <tt>{this.props.myUserId}</tt>
-            </div>
-          </div>
-          <AvatarUpload
-            avatar={this.state.avatar}
-            readOnly={!this.state.owner}
-            uid={this.props.myUserId}
-            title={this.state.fullName} />
-        </div>
-        <div className="panel-form-row">
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('general');}}>
-            <i className="material-icons">edit</i>&nbsp;
-            <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
-          </a>
-        </div>
-        <div className="hr" />
-        <div className="panel-form-column">
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('notif');}}>
-            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
-              defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
-          </a>
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('security');}}>
-            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_security"
-              defaultMessage="Security" description="Sidepanel title for AccSecurityView." />
-          </a>
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('support');}}>
-            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
-              defaultMessage="Support" description="Sidepanel title for AccSupportView." />
-          </a>
-        </div>
-      </div>
-    );
-  }
-};

src/views/info-view.jsx

@@ -5,104 +5,83 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import Tinode from 'tinode-sdk';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
 import ContactList from '../widgets/contact-list.jsx';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import GroupManager from '../widgets/group-manager.jsx';
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import MenuCancel from '../widgets/menu-cancel.jsx';
-import MoreButton from '../widgets/more-button.jsx';
 import PermissionsEditor from '../widgets/permissions-editor.jsx';
-import TagManager from '../widgets/tag-manager.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
+import TopicSecurity from '../widgets/topic-security.jsx';
 
-import { MAX_TITLE_LENGTH, NO_ACCESS_MODE } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH, NO_ACCESS_MODE } from '../config.js';
 
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 import { arrayEqual, theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
-  requested: {
+  info: {
+    id: 'panel_title_info',
+    description: 'Title for InfoView',
+    defaultMessage: 'Info'
+  },
+  general: {
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
+    defaultMessage: 'General'
+  },
+  security: {
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
+    defaultMessage: 'Security'
+  },
+  members: {
+    id: 'panel_title_members',
+    description: 'Title for managing group members view.',
+    defaultMessage: 'Members'
+  },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
+  perm_want: {
     id: 'requested_permissions',
     defaultMessage: 'Requested',
     description: 'Title for permissions'
   },
-  granted: {
+  perm_given: {
     id: 'granted_permissions',
     defaultMessage: 'Granted',
     description: 'Title for permissions'
   },
+  perm_auth: {
+    id: 'permissions_authenticated',
+    defaultMessage: 'Authenticated',
+    description: 'Title for editing default authenticated permissions'
+  },
+  perm_anon: {
+    id: 'permissions_anonymous',
+    defaultMessage: 'Anonymous',
+    description: 'Title for editing default anonymous permissions'
+  },
+  perm_user: {
+    id: 'permissions_user',
+    defaultMessage: 'User\'s Permissions',
+    description: 'Title for editing user\'s permissions'
+  },
   edit_permissions: {
     id: 'menu_item_edit_permissions',
     defaultMessage: 'Edit permissions',
     description: 'Menu item [Edit permissions]'
   },
-  other_user: {
-    id: 'label_other_user',
-    defaultMessage: 'Other',
-    description: 'Label for the other user when the user is unnamed'
-  },
-  clear_messages: {
-    id: 'action_clear_messages',
-    defaultMessage: 'Clear Messages',
-    description: 'Flat button [Clear Messages] (soft-delete messages)'
-  },
-  clear_messages_warning: {
-    id: 'clear_messages_warning',
-    defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
-    description: 'Alert dialog warning when deleting all messages.'
-  },
-  delete_messages: {
-    id: 'action_delete_messages',
-    defaultMessage: 'Clear Messages for All',
-    description: 'Flat button [Clear for All] (hard-delete all messages)'
-  },
-  delete_messages_warning: {
-    id: 'delete_messages_warning',
-    defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
-    description: 'Alert dialog warning when hard-deleting all messages.'
-  },
-  topic_delete: {
-    id: 'topic_delete',
-    defaultMessage: 'Delete Conversation',
-    description: 'Alert title when deleting the topic.'
-  },
-  topic_delete_warning: {
-    id: 'topic_delete_warning',
-    defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',
-    description: 'Alert warning when deleting entire topic'
-  },
-  leave_chat: {
-    id: 'action_leave_chat',
-    defaultMessage: 'Leave Conversation',
-    description: 'Flat button [Leave Conversation]'
-  },
-  leave_chat_warning: {
-    id: 'leave_chat_warning',
-    defaultMessage: 'Are you sure you want to leave this conversation?',
-    description: 'Alert dialog warning when unsubscribing from a chat.'
-  },
-  block_contact: {
-    id: 'action_block_contact',
-    defaultMessage: "Block Contact",
-    description: "Flat button [Block Contact]"
-  },
-  block_contact_warning: {
-    id: 'block_contact_warning',
-    defaultMessage: 'Are you sure you want to block this contact?',
-    description: 'Alert dialog warning when blocking a contact.'
-  },
-  report_chat: {
-    id: 'action_report_chat',
-    defaultMessage: 'Report Conversation',
-    description: 'Flat button [Report Group]'
-  },
-  report_chat_warning: {
-    id: 'report_chat_warning',
-    defaultMessage: 'Are you sure you want to block and report this conversation?',
-    description: 'Alert dialog warning when reporting a conversation for abuse'
-  },
 });
 
+function _clip(str, length) {
+  return str && str.substring(0, length);
+}
+
 class InfoView extends React.Component {
   constructor(props) {
     super(props);
@@ -118,6 +97,7 @@ class InfoView extends React.Component {
       groupTopic: undefined,
       channel: undefined,
       fullName: undefined,
+      description: undefined,
       avatar: null,
       private: null,
       selectedContact: null,
@@ -129,39 +109,26 @@ class InfoView extends React.Component {
       auth: null,
       anon: null,
       contactList: [],
-      tags: [],
-      showMemberPanel: false,
-      showPermissionEditorFor: undefined,
-      moreInfoExpanded: false,
+      trustedBadges: [],
       previousMetaDesc: undefined,
       previousSubsUpdated: undefined,
-      previousTagsUpdated: undefined
     };
 
     this.resetSubs = this.resetSubs.bind(this);
     this.resetDesc = this.resetDesc.bind(this);
+    this.resetTags = this.resetTags.bind(this);
     this.onMetaDesc = this.onMetaDesc.bind(this);
     this.onSubsUpdated = this.onSubsUpdated.bind(this);
-    this.onTagsUpdated = this.onTagsUpdated.bind(this);
-    this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
-    this.handlePrivateUpdate = this.handlePrivateUpdate.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleMuted = this.handleMuted.bind(this);
+    this.handleUnarchive = this.handleUnarchive.bind(this);
     this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
     this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
-    this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
     this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
-    this.handleHideAddMembers = this.handleHideAddMembers.bind(this);
     this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
-    this.handleDeleteTopic = this.handleDeleteTopic.bind(this);
-    this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
-    this.handleLeave = this.handleLeave.bind(this);
-    this.handleBlock = this.handleBlock.bind(this);
-    this.handleReport = this.handleReport.bind(this);
     this.handleMemberSelected = this.handleMemberSelected.bind(this);
-    this.handleMoreInfo = this.handleMoreInfo.bind(this);
-    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
     this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.handleBackNavigate = this.handleBackNavigate.bind(this);
   }
 
   // No need to separately handle component mount.
@@ -177,19 +144,13 @@ class InfoView extends React.Component {
 
       this.previousSubsUpdated = topic.onSubsUpdated;
       topic.onSubsUpdated = this.onSubsUpdated;
-
-      if (topic.getType() == 'grp') {
-        this.previousTagsUpdated = topic.onTagsUpdated;
-        topic.onTagsUpdated = this.onTagsUpdated;
-      } else {
-        this.previousTagsUpdated = undefined;
-      }
     }
 
     if (this.state.topic != props.topic) {
       this.setState({topic: props.topic});
       this.resetDesc(topic, props);
       this.resetSubs(topic, props);
+      this.resetTags(topic);
     }
   }
 
@@ -201,7 +162,6 @@ class InfoView extends React.Component {
     this.setState({topic: null});
     topic.onMetaDesc = this.previousMetaDesc;
     topic.onSubsUpdated = this.previousSubsUpdated;
-    topic.onTagsUpdated = this.previousTagsUpdated;
   }
 
   resetSubs(topic, props) {
@@ -230,6 +190,15 @@ class InfoView extends React.Component {
     const defacs = topic.getDefaultAccess() || {};
     const acs = topic.getAccessMode();
 
+    const badges = [];
+    if (topic.trusted) {
+      for (const [key, val] of Object.entries(topic.trusted)) {
+        if (val) {
+          badges.push(key);
+        }
+      }
+    }
+
     this.setState({
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
@@ -237,21 +206,30 @@ class InfoView extends React.Component {
       deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
-      fullName: topic.public ? topic.public.fn : undefined,
-      avatar: makeImageDataUrl(topic.public ? topic.public.photo : null),
-      private: topic.private ? topic.private.comment : null,
+      fullName: _clip(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
+      description: _clip(topic.public ? topic.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
+      private: _clip(topic.private ? topic.private.comment : null, MAX_TITLE_LENGTH),
+      archived: topic.isArchived(),
       address: topic.name,
       groupTopic: topic.isGroupType(),
-      channel: topic.isChannelType(),
-      showMemberPanel: false,
+      channel: topic.isChannelType() || topic.chan,
       access: acs ? acs.getMode() : undefined,
       modeGiven: acs ? acs.getGiven() : undefined,
       modeWant: acs ? acs.getWant() : undefined,
       auth: defacs.auth,
       anon: defacs.anon
     });
+  }
 
-    if (topic.getType() == 'grp' && acs && acs.isOwner()) {
+  resetTags(topic) {
+    if (topic.getType() != 'grp') {
+      return;
+    }
+
+    const acs = topic.getAccessMode();
+    if (acs && acs.isOwner()) {
       // Requesting tags: owner is editing the topic.
       topic.getMeta(topic.startMetaQuery().withTags().build());
     }
@@ -281,30 +259,6 @@ class InfoView extends React.Component {
     }
   }
 
-  onTagsUpdated(tags) {
-    this.setState({tags: tags});
-
-    if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
-      this.previousTagsUpdated();
-    }
-  }
-
-  handleFullNameUpdate(fn) {
-    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
-    if (this.state.fullName !== fn) {
-      this.setState({fullName: fn});
-      this.props.onTopicDescUpdate(this.props.topic, theCard(fn, null), null);
-    }
-  }
-
-  handlePrivateUpdate(comment) {
-    comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
-    if (this.state.private !== comment) {
-      this.setState({private: comment});
-      this.props.onTopicDescUpdate(this.props.topic, null, comment || Tinode.DEL_CHAR);
-    }
-  }
-
   handleImageChanged(img) {
     this.setState({avatar: img});
     this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
@@ -315,13 +269,17 @@ class InfoView extends React.Component {
     this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');
   }
 
-  handlePermissionsChanged(perm) {
-    switch (this.state.showPermissionEditorFor) {
+  handleUnarchive(ignored, ignored2) {
+    this.props.onTopicUnArchive(this.props.topic);
+  }
+
+  handlePermissionsChanged(which, perm) {
+    switch (which) {
       case 'auth':
-        this.props.onTopicDescUpdate(this.props.topic, null, null, {auth: perm});
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {auth: perm});
         break;
       case 'anon':
-        this.props.onTopicDescUpdate(this.props.topic, null, null, {anon: perm});
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {anon: perm});
         break;
       case 'mode':
       case 'want':
@@ -335,7 +293,7 @@ class InfoView extends React.Component {
         break;
     }
 
-    this.setState({showPermissionEditorFor: undefined});
+    this.handleBackNavigate();
   }
 
   handleLaunchPermissionsEditor(which, uid) {
@@ -359,15 +317,15 @@ class InfoView extends React.Component {
             toSkip += 'W';
           }
         }
-        titleEdit = formatMessage(messages.requested);
-        titleCompare = formatMessage(messages.granted);
+        titleEdit = formatMessage(messages.perm_want);
+        titleCompare = formatMessage(messages.perm_given);
         break;
       case 'given':
         toEdit = this.state.modeGiven2;
         toCompare = this.state.modeWant2;
         toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';
-        titleEdit = formatMessage(messages.granted);
-        titleCompare = formatMessage(messages.requested);
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
         break;
       case 'auth':
         toEdit = this.state.auth;
@@ -389,8 +347,8 @@ class InfoView extends React.Component {
         toEdit = user.acs.getGiven();
         toCompare = user.acs.getWant();
         toSkip = this.state.owner ? '' : 'O';
-        titleEdit = formatMessage(messages.granted);
-        titleCompare = formatMessage(messages.requested);
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
         if (user.public) {
           userTitle = user.public.fn;
           userAvatar = user.public.photo;
@@ -398,11 +356,10 @@ class InfoView extends React.Component {
         break;
       }
       default:
-        console.log("Unknown permission editing mode '" + which + "'");
-        break;
+        console.error("Unknown permission editing mode '" + which + "'");
+        return;
     }
     this.setState({
-      showPermissionEditorFor: which,
       userPermissionsEdited: uid,
       userPermissionsTitle: userTitle,
       userPermissionsAvatar: userAvatar,
@@ -412,109 +369,41 @@ class InfoView extends React.Component {
       immutablePermissionsTitle: titleCompare,
       editedPermissionsSkipped: toSkip,
     });
-  }
-
-  handleHidePermissionsEditor() {
-    this.setState({showPermissionEditorFor: undefined});
+    this.props.onNavigate(`perm/${which}`);
   }
 
   handleShowAddMembers(e) {
     e.preventDefault();
     this.props.onInitFind();
-    this.setState({showMemberPanel: true});
-  }
-
-  handleHideAddMembers() {
-    this.setState({showMemberPanel: false});
+    this.props.onNavigate('members');
   }
 
   handleMemberUpdateRequest(members, added, removed) {
     this.props.onMemberUpdateRequest(this.props.topic, added, removed);
-    this.setState({showMemberPanel: false});
-  }
-
-  handleDeleteTopic(e) {
-    e.preventDefault();
-    const {formatMessage} = this.props.intl;
-    this.props.onShowAlert(
-      formatMessage(messages.topic_delete), // title
-      formatMessage(messages.topic_delete_warning), // content
-      (() => { this.props.onDeleteTopic(this.props.topic); }), // onConfirm
-      null, // "OK"
-      true, // Show Reject button
-      null  // "Cancel"
-    );
-  }
-
-  handleDeleteMessages(e) {
-    e.preventDefault();
-    const {formatMessage} = this.props.intl;
-    this.props.onShowAlert(
-      formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages), // title
-      formatMessage(this.state.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
-      (() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
-      null, // "OK"
-      true, // Show Reject button
-      null  // "Cancel"
-    );
-  }
-
-  handleLeave(e) {
-    e.preventDefault();
-    const {formatMessage} = this.props.intl;
-    this.props.onShowAlert(
-      formatMessage(messages.leave_chat), // title
-      formatMessage(messages.leave_chat_warning), // content
-      (() => { this.props.onLeaveTopic(this.props.topic); }), // onConfirm
-      null, // "OK"
-      true, // Show Reject button
-      null  // "Cancel"
-    );
-  }
-
-  handleBlock(e) {
-    e.preventDefault();
-    const {formatMessage} = this.props.intl;
-    this.props.onShowAlert(
-      formatMessage(messages.block_contact), // title
-      formatMessage(messages.block_contact_warning), // content
-      (() => { this.props.onBlockTopic(this.props.topic); }), // onConfirm
-      null, // "OK"
-      true, // Show Reject button
-      null  // "Cancel"
-    );
-  }
-
-  handleReport(e) {
-    e.preventDefault();
-    const {formatMessage} = this.props.intl;
-    this.props.onShowAlert(
-      formatMessage(messages.report_chat), // title
-      formatMessage(messages.report_chat_warning), // content
-      (() => { this.props.onReportTopic(this.props.topic); }), // onConfirm
-      null, // "OK"
-      true, // Show Reject button
-      null  // "Cancel"
-    );
+    this.props.onNavigate('info');
   }
 
   handleMemberSelected(uid) {
     this.setState({selectedContact: uid});
   }
 
-  handleMoreInfo(open) {
-    this.setState({moreInfoExpanded: open});
-  }
-
-  handleTagsUpdated(tags) {
-    if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
-      this.props.onTopicTagsUpdate(this.props.topic, tags);
+  handleBackNavigate() {
+    const args = (this.props.panel || 'info').split('/');
+    if (args[0] == 'info') {
+      this.props.onNavigate(null);
+    } else if (args[0] == 'perm') {
+      if (args[1] == 'user') {
+        this.props.onNavigate('info');
+      } else {
+        this.props.onNavigate('security');
+      }
+    } else {
+      this.props.onNavigate('info');
     }
   }
 
   handleContextMenu(params) {
     const {formatMessage} = this.props.intl;
-    const instance = this;
     const topic = this.props.tinode.getTopic(this.props.topic);
     if (!topic) {
       return;
@@ -524,14 +413,19 @@ class InfoView extends React.Component {
       return;
     }
 
+    const isMe = this.props.tinode.isMe(params.topicName);
     const menuItems = [
-      {title: formatMessage(messages.edit_permissions), handler: function() {
-        instance.handleLaunchPermissionsEditor('user', params.topicName);
-      }},
-      'member_delete',
-      user.acs.isMuted() ? 'member_unmute' : 'member_mute',
-      user.acs.isJoiner() ? 'member_block' : 'member_unblock'
+      {title: formatMessage(messages.edit_permissions), handler: () => {
+        this.handleLaunchPermissionsEditor(isMe ? 'want' : 'user', params.topicName);
+      }}
     ];
+    if (!isMe) {
+      menuItems.push('member_delete');
+    }
+    menuItems.push(user.acs.isMuted() ? 'member_unmute' : 'member_mute');
+    if (!isMe) {
+      menuItems.push(user.acs.isJoiner() ? 'member_block' : 'member_unblock');
+    }
     this.props.showContextMenu({
       topicName: this.props.topic,
       x: params.x,
@@ -540,16 +434,20 @@ class InfoView extends React.Component {
   }
 
   render() {
+    const args = (this.props.panel || 'info').split('/');
+    const view = args[0];
+    args.shift();
+
     const {formatMessage} = this.props.intl;
+    const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])
+      || messages['info']);
 
     return (
       <div id="info-view">
         <div className="caption-panel" id="info-caption-panel">
-          <div className="panel-title" id="info-title">
-            <FormattedMessage id="title_info" defaultMessage="Info" description="Title for InfoView" />
-          </div>
+          <div className="panel-title" id="info-title">{panelTitle}</div>
           <div>
-            <MenuCancel onCancel={this.props.onCancel} />
+            <MenuCancel onCancel={this.handleBackNavigate} />
           </div>
         </div>
         {this.props.displayMobile ?
@@ -557,18 +455,20 @@ class InfoView extends React.Component {
             level={this.props.errorLevel}
             text={this.props.errorText}
             onClearError={this.props.onError} /> : null}
-        {this.state.showMemberPanel ?
+        {view == 'members' ?
           <GroupManager
+            tinode={this.props.tinode}
             members={this.state.contactList}
             requiredMember={this.props.myUserId}
             keepInitialMembers={!this.state.admin && !this.state.owner}
             myUserId={this.props.myUserId}
             contacts={this.props.searchableContacts}
-            onCancel={this.handleHideAddMembers}
+            onCancel={this.handleBackNavigate}
             onSubmit={this.handleMemberUpdateRequest} />
           :
-        this.state.showPermissionEditorFor ?
+        view == 'perm' && args.length > 0 ?
           <PermissionsEditor
+            tinode={this.props.tinode}
             mode={this.state.editedPermissions}
             compare={this.state.immutablePermissions}
             skip={this.state.editedPermissionsSkipped}
@@ -577,226 +477,153 @@ class InfoView extends React.Component {
             userTitle={this.state.userPermissionsTitle}
             item={this.state.userPermissionsEdited}
             userAvatar={this.state.userPermissionsAvatar}
-            onSubmit={this.handlePermissionsChanged}
-            onCancel={this.handleHidePermissionsEditor}
-            />
+            onSubmit={(mode) => this.handlePermissionsChanged(args[0], mode)}
+            onCancel={this.handleBackNavigate} />
+          :
+        view == 'general' ?
+          <TopicCommon
+            tinode={this.props.tinode}
+            topic={this.props.topic}
+            onCredAdd={this.props.onCredAdd}
+            onTopicTagsUpdateRequest={this.props.onTopicTagsUpdateRequest}
+            onCredConfirm={this.props.onCredConfirm}
+            onCredDelete={this.props.onCredDelete}
+            onUpdateTopicDesc={this.props.onTopicDescUpdateRequest}
+            onError={this.props.onError} />
+          :
+        view == 'security' ?
+          <TopicSecurity
+            topic={this.props.topic}
+            owner={this.state.owner}
+            admin={this.state.admin}
+            sharer={this.state.sharer}
+            deleter={this.state.deleter}
+            muted={this.state.muted}
+
+            groupTopic={this.state.groupTopic}
+            channel={this.state.channel}
+            access={this.state.access}
+            modeGiven={this.state.modeGiven}
+            modeWant={this.state.modeWant}
+            modeGiven2={this.state.modeGiven2}
+            modeWant2={this.state.modeWant2}
+            auth={this.state.auth}
+            anon={this.state.anon}
+
+            onShowAlert={this.props.onShowAlert}
+            onDeleteMessages={this.props.onDeleteMessages}
+            onLeaveTopic={this.props.onLeaveTopic}
+            onBlockTopic={this.props.onBlockTopic}
+            onReportTopic={this.props.onReportTopic}
+            onLaunchPermissionsEditor={this.handleLaunchPermissionsEditor}
+            onNavigate={this.props.onNavigate} />
           :
           <div id="info-view-content" className="scrollable-panel">
-            <div className="panel-form-row">
-              <div className="panel-form-column">
+            <div className="panel-form-column">
+              <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
+                <i className="material-icons">edit</i>&nbsp;
+                <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+              </a>
+              <center>
+                <AvatarUpload
+                  tinode={this.props.tinode}
+                  avatar={this.state.avatar}
+                  readOnly={true}
+                  uid={this.props.topic}
+                  title={this.state.fullName} />
+              </center>
+              <div className="group">
                 <div><label className="small">
                   <FormattedMessage id="label_topic_name" defaultMessage="Name"
                     description="Label for editing topic name" />
                 </label></div>
-                <div><InPlaceEdit
-                    placeholder={this.state.groupTopic ? "Group name" : <i>Unknown</i>}
-                    readOnly={!this.state.owner}
-                    value={this.state.fullName}
-                    required={true}
-                    onFinished={this.handleFullNameUpdate} /></div>
-                <div>
-                  <label className="small">
+                <div className="large ellipsized">{this.state.fullName}
+                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+              </div>
+              {this.state.private ?
+                <div className="group">
+                  <div><label className="small">
                     <FormattedMessage id="label_private" defaultMessage="Private comment"
                       description="Label for editing 'private'" />
-                  </label>
-                </div>
-                <div>
-                  <FormattedMessage id="private_editing_placeholder"
-                    defaultMessage="Visible to you only"
-                    description="Placeholder for editing 'private'">{
-                    (private_placeholder) => <InPlaceEdit
-                      placeholder={private_placeholder}
-                      value={this.state.private}
-                      onFinished={this.handlePrivateUpdate} />
-                  }</FormattedMessage>
+                  </label></div>
+                  <div className="large ellipsized">{this.state.private}</div>
                 </div>
+                : null
+              }
+              <div className="group">
+                <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+                  description="Label for user address (ID)" /></label>&nbsp;
+                <tt>{this.state.address}</tt>
               </div>
-              <AvatarUpload
-                avatar={this.state.avatar}
-                readOnly={!this.state.owner}
-                uid={this.props.topic}
-                title={this.state.fullName}
-                onImageChanged={this.handleImageChanged}
-                onError={this.props.onError} />
+              <div className="group">
+                <BadgeList trustedBadges={this.state.trustedBadges} />
+              </div>
+              {this.state.description ?
+                <div className="group">
+                  <label className="small">
+                    <FormattedMessage id="label_description" defaultMessage="Description"
+                      description="Label for editing topic description" />
+                  </label>
+                  <div>{this.state.description}</div>
+                </div> : null}
             </div>
             <div className="hr" />
-            <div className="panel-form-column">
+            <div className="panel-form-row">
+              <label>
+                <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
+                  description="Label for Muting/unmuting the topic" />
+              </label>
+              <CheckBox name="P" checked={this.state.muted} onChange={this.handleMuted} />
+            </div>
+            {this.state.archived ?
               <div className="panel-form-row">
                 <label>
-                  <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
-                    description="Label for Muting/unmuting the topic" />
+                  <FormattedMessage id="label_unarchive_topic" defaultMessage="Archived:"
+                    description="Label for unarchiving the topic" />
                 </label>
-                <CheckBox name="P" checked={this.state.muted}
-                  onChange={this.handleMuted} />
+                <CheckBox name="archived" checked={true} onChange={this.handleUnarchive} />
               </div>
-              <FormattedMessage id="action_more" defaultMessage="More"
-                description="Action for showing more content">{
-                (more) => <MoreButton
-                  title={more}
-                  open={this.state.moreInfoExpanded}
-                  onToggle={this.handleMoreInfo} />
-              }</FormattedMessage>
-              {this.state.moreInfoExpanded ?
-                <div className="panel-form-column">
-                  <div className="panel-form-row">
-                    <label><FormattedMessage id="label_user_id" defaultMessage="ID:"
-                      description="Label for user address (ID)" /></label>
-                    <tt>{this.state.address}</tt>
-                  </div>
-                  {this.state.groupTopic ?
-                    <div className="panel-form-row">
-                      <label>
-                        <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
-                          description="Label for current user permissions" />
-                      </label>
-                      <tt className="clickable"
-                        onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
-                        {this.state.access}
-                      </tt>
-                    </div>
-                    :
-                    <div>
-                      <div>
-                        <label className="small">
-                          <FormattedMessage id="label_permissions" defaultMessage="Permissions:"
-                            description="Section title" />
-                        </label>
-                      </div>
-                      <div className="quoted">
-                        <div>
-                          <FormattedMessage id="label_you" defaultMessage="You:"
-                            description="Label for the current user" /> &nbsp;<tt className="clickable"
-                          onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
-                          {this.state.access}
-                        </tt></div>
-                        <div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
-                          &nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, 'given')}>
-                          {this.state.modeGiven2}
-                          </tt>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                  {this.state.sharer && (this.state.auth || this.state.anon) ?
-                  <div>
-                    <div>
-                      <label className="small">
-                        <FormattedMessage id="label_default_access" defaultMessage="Default access mode:"
-                          description="Section title" />
-                      </label>
-                    </div>
-                    <div className="quoted">
-                      <div>Auth: {this.state.admin ?
-                        <tt className="clickable"
-                          onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>
-                          {this.state.auth}
-                        </tt>
-                        :
-                        <tt>{this.state.auth}</tt>
-                      }
-                      </div>
-                      <div>Anon: {this.state.admin ?
-                        <tt className="clickable"
-                          onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>
-                          {this.state.anon}
-                        </tt>
-                        :
-                        <tt>{this.state.anon}</tt>
-                      }
-                      </div>
-                    </div>
-                  </div>
-                  :
-                  null
-                }
-                </div>
-              :
-              null
-              }
-            </div>
-            <div className="hr" />
-            {this.state.owner ?
-              <>
-                <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
-                  description="Section title for TagManager">{
-                  (tags) => <TagManager
-                    title={tags}
-                    tags={this.state.tags}
-                    activated={false}
-                    tinode={this.props.tinode}
-                    onSubmit={this.handleTagsUpdated} />
-                }</FormattedMessage>
-                <div className="hr" />
-              </>
               :
               null
             }
-            <div className="panel-form-column">
-              {!this.state.channel ?
-                <a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
-                  <i className="material-icons">delete_outline</i> &nbsp;{
-                    formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
-                  }
-                </a>
-                :
-                null
-              }
-              {this.state.owner ?
-                <a href="#" className="danger flat-button" onClick={this.handleDeleteTopic}>
-                  <i className="material-icons">delete</i> &nbsp;{formatMessage(messages.topic_delete)}
-                </a>
-                :
-                <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="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="danger flat-button" onClick={this.handleReport}>
-                  <i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
-                </a>
-                :
-                null
-              }
+            <div className="hr" />
+            <div className="panel-form-row">
+              <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+                <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+                  defaultMessage="Security" description="Navigaton button for security panel." />
+              </a>
             </div>
             {this.state.groupTopic && this.state.sharer ?
               <>
                 <div className="hr" />
-                <div className="panel-form-column">
-                  <div className="panel-form-row">
-                    <label className="small">
-                      <FormattedMessage id="label_group_members" defaultMessage="Group members:"
-                        description="Section title or label" />
-                    </label>
-                  </div>
-                  <div className="panel-form-row">
-                    <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
-                      <i className="material-icons">person_add</i> &nbsp;<FormattedMessage id="button_add_members"
-                        defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
-                    </a>
-                  </div>
-                  <FormattedMessage id="group_has_no_members" defaultMessage="No members"
-                    description="Shown in place of group members">{
-                    (no_members) => <ContactList
-                      contacts={this.state.contactList}
-                      myUserId={this.props.myUserId}
-                      emptyListMessage={no_members}
-                      topicSelected={this.state.selectedContact}
-                      showOnline={false}
-                      showUnread={false}
-                      showMode={true}
-                      noScroll={true}
-                      onTopicSelected={this.handleMemberSelected}
-                      showContextMenu={this.state.admin ? this.handleContextMenu : false}
-                    />
-                  }</FormattedMessage>
+                <div className="panel-form-row">
+                  <label className="small">
+                    <FormattedMessage id="label_group_members" defaultMessage="Group members:"
+                      description="Section title or label" />
+                  </label>
                 </div>
+                <div className="panel-form-row">
+                  <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
+                    <i className="material-icons">person_add</i> &nbsp;<FormattedMessage id="button_add_members"
+                      defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
+                  </a>
+                </div>
+                <FormattedMessage id="group_has_no_members" defaultMessage="No members"
+                  description="Shown in place of group members">{
+                  (no_members) => <ContactList
+                    tinode={this.props.tinode}
+                    contacts={this.state.contactList}
+                    myUserId={this.props.myUserId}
+                    emptyListMessage={no_members}
+                    topicSelected={this.state.selectedContact}
+                    showOnline={false}
+                    showUnread={false}
+                    showMode={true}
+                    noScroll={true}
+                    onTopicSelected={this.handleMemberSelected}
+                    showContextMenu={this.state.admin ? this.handleContextMenu : false}
+                  />
+                }</FormattedMessage>
               </>
               :
               null

src/views/logo-view.jsx

@@ -16,7 +16,7 @@ export default class LogoView extends React.PureComponent {
             <img id="logo" alt="logo" src="img/logo.svg" />
             <h2>Tinode Web</h2>
           </a>
-          <p><FormattedMessage id="label_client" defaultMessage="Client:" 
+          <p><FormattedMessage id="label_client" defaultMessage="Client:"
             description="Label for a client version" /> {version}</p>
           <p><FormattedMessage id="label_server" defaultMessage="Server:"
             description="Label for a server version" /> {this.props.serverVersion} ({this.props.serverAddress})</p>

src/views/messages-view.jsx

@@ -5,6 +5,7 @@ import Tinode from 'tinode-sdk';
 const Drafty = Tinode.Drafty;
 
 import ChatMessage from '../widgets/chat-message.jsx';
+import ContactBadges from '../widgets/contact-badges.jsx';
 import DocPreview from '../widgets/doc-preview.jsx';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import GroupSubs from '../widgets/group-subs.jsx';
@@ -14,13 +15,16 @@ import LetterTile from '../widgets/letter-tile.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import LogoView from './logo-view.jsx';
 import SendMessage from '../widgets/send-message.jsx';
+import UploadingImage from '../widgets/uploading-image.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, makeImageDataUrl } from '../lib/blob-helpers.js';
+  MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE, READ_DELAY,
+  IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
+import { SUPPORTED_IMAGE_FORMATS, blobToBase64, base64ToBlob, filePasted, fileToBase64,
+  imageScaled, makeImageUrl, fitImageSize } from '../lib/blob-helpers.js';
 import HashNavigation from '../lib/navigation.js';
-import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
+import { bytesToHumanSize, shortDateFormat, letterTileColorId } from '../lib/strformat.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
 
 // Run timer with this frequency (ms) for checking notification queue.
 const NOTIFICATION_EXEC_INTERVAL = 300;
@@ -50,7 +54,18 @@ const messages = defineMessages({
     id: 'file_attachment_too_large',
     defaultMessage: 'The file size {size} exceeds the {limit} limit.',
     description: 'Error message when attachment is too large'
-  }
+  },
+
+  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'
+  },
 });
 
 // Checks if the access permissions are granted but not yet accepted.
@@ -77,9 +92,11 @@ class MessagesView extends React.Component {
     this.state = MessagesView.getDerivedStateFromProps(props, {});
 
     this.leave = this.leave.bind(this);
+    this.sendMessage = this.sendMessage.bind(this);
     this.sendImageAttachment = this.sendImageAttachment.bind(this);
     this.sendFileAttachment = this.sendFileAttachment.bind(this);
     this.sendKeyPress = this.sendKeyPress.bind(this);
+    this.subscribe = this.subscribe.bind(this);
     this.handleScrollReference = this.handleScrollReference.bind(this);
     this.handleScrollEvent = this.handleScrollEvent.bind(this);
     this.handleDescChange = this.handleDescChange.bind(this);
@@ -100,10 +117,26 @@ class MessagesView extends React.Component {
     this.postReadNotification = this.postReadNotification.bind(this);
     this.clearNotificationQueue = this.clearNotificationQueue.bind(this);
 
+    this.handlePickReply = this.handlePickReply.bind(this);
+    this.handleCancelReply = this.handleCancelReply.bind(this);
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
+
+    this.chatMessageRefs = {};
+    this.getOrCreateMessageRef = this.getOrCreateMessageRef.bind(this);
+
     this.readNotificationQueue = [];
     this.readNotificationTimer = null;
   }
 
+  getOrCreateMessageRef(seqId) {
+    if (this.chatMessageRefs.hasOwnProperty(seqId)) {
+      return this.chatMessageRefs[seqId];
+    }
+    const ref = React.createRef();
+    this.chatMessageRefs[seqId] = ref;
+    return ref;
+  }
+
   componentDidMount() {
     // this.propsChange(this.props, this.state);
     if (this.messagesScroller) {
@@ -157,49 +190,8 @@ class MessagesView extends React.Component {
       this.postReadNotification(0);
     }
 
-    if (topic && !topic.isSubscribed() && this.props.ready &&
-        ((this.state.topic != prevState.topic) || !prevProps.ready)) {
-      // Is this a new topic?
-      const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
-
-      // Don't request the tags. They are useless unless the user
-      // is the owner and is editing the topic.
-      let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
-      if (this.state.isReader || newTopic) {
-        // Reading is either permitted or we don't know because it's a new topic. Ask for messages.
-        getQuery = getQuery.withLaterData(MESSAGES_PAGE);
-        if (this.state.isReader) {
-          getQuery = getQuery.withLaterDel();
-        }
-        // And show "loading" spinner.
-        this.setState({ fetchingMessages: true });
-      }
-      const setQuery = newTopic ? this.props.newTopicParams : undefined;
-      topic.subscribe(getQuery.build(), setQuery)
-        .then((ctrl) => {
-          if (ctrl.code == 303) {
-            // Redirect to another topic requested.
-            HashNavigation.navigateTo(HashNavigation.setUrlTopic('', ctrl.params.topic));
-            return;
-          }
-          if (this.state.topic != ctrl.topic) {
-            this.setState({topic: ctrl.topic});
-          }
-          this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
-          // If there are unsent messages, try sending them now.
-          topic.queuedMessages((pub) => {
-            if (!pub._sending && topic.isSubscribed()) {
-              topic.publishMessage(pub);
-            }
-          });
-        })
-        .catch((err) => {
-          console.log("Failed subscription to", this.state.topic);
-          this.props.onError(err.message, 'err');
-          const blankState = MessagesView.getDerivedStateFromProps({}, {});
-          blankState.title = this.props.intl.formatMessage(messages.not_found);
-          this.setState(blankState);
-        });
+    if ((this.state.topic != prevState.topic) || !prevProps.ready) {
+      this.subscribe(topic);
     }
   }
 
@@ -214,6 +206,9 @@ class MessagesView extends React.Component {
         topic: null,
         title: '',
         avatar: null,
+        isVerified: false,
+        isStaff: false,
+        isDangerous: false,
         docPreview: null,
         imagePreview: null,
         imagePostview: null,
@@ -221,7 +216,8 @@ class MessagesView extends React.Component {
         scrollPosition: 0,
         fetchingMessages: false,
         peerMessagingDisabled: false,
-        channel: false
+        channel: false,
+        reply: null
       };
     } else if (nextProps.topic != prevState.topic) {
       const topic = nextProps.tinode.getTopic(nextProps.topic);
@@ -232,7 +228,8 @@ class MessagesView extends React.Component {
         imagePostview: null,
         typingIndicator: false,
         scrollPosition: 0,
-        fetchingMessages: false
+        fetchingMessages: false,
+        reply: null
       };
 
       if (topic) {
@@ -254,7 +251,7 @@ class MessagesView extends React.Component {
         if (topic.public) {
           Object.assign(nextState, {
             title: topic.public.fn,
-            avatar: makeImageDataUrl(topic.public.photo)
+            avatar: makeImageUrl(topic.public.photo)
           });
         } else {
           Object.assign(nextState, {
@@ -332,6 +329,55 @@ class MessagesView extends React.Component {
     return nextState;
   }
 
+  subscribe(topic) {
+    if (!topic || topic.isSubscribed() || !this.props.ready) {
+      return;
+    }
+
+    // Is this a new topic?
+    const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
+
+    // Don't request the tags. They are useless unless the user
+    // is the owner and is editing the topic.
+    let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
+    if (this.state.isReader || newTopic) {
+      // Reading is either permitted or we don't know because it's a new topic. Ask for messages.
+      getQuery = getQuery.withLaterData(MESSAGES_PAGE);
+      if (this.state.isReader) {
+        getQuery = getQuery.withLaterDel();
+      }
+      // And show "loading" spinner.
+      this.setState({ fetchingMessages: true });
+    }
+
+    const setQuery = newTopic ? this.props.newTopicParams : undefined;
+    topic.subscribe(getQuery.build(), setQuery)
+      .then((ctrl) => {
+        if (ctrl.code == 303) {
+          // Redirect to another topic requested.
+          HashNavigation.navigateTo(HashNavigation.setUrlTopic('', ctrl.params.topic));
+          return;
+        }
+        if (this.state.topic != ctrl.topic) {
+          this.setState({topic: ctrl.topic});
+        }
+        this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
+        // If there are unsent messages, try sending them now.
+        topic.queuedMessages((pub) => {
+          if (!pub._sending && topic.isSubscribed()) {
+            this.sendMessage(pub);
+          }
+        });
+      })
+      .catch((err) => {
+        console.log("Failed subscription to", this.state.topic);
+        this.props.onError(err.message, 'err');
+        const blankState = MessagesView.getDerivedStateFromProps({}, {});
+        blankState.title = this.props.intl.formatMessage(messages.not_found);
+        this.setState(blankState);
+      });
+  }
+
   leave(oldTopicName) {
     if (!oldTopicName || !this.props.tinode.isTopicCached(oldTopicName)) {
       return;
@@ -385,7 +431,7 @@ class MessagesView extends React.Component {
     if (desc.public) {
       this.setState({
         title: desc.public.fn,
-        avatar: makeImageDataUrl(desc.public.photo)
+        avatar: makeImageUrl(desc.public.photo)
       });
     } else {
       this.setState({
@@ -500,7 +546,8 @@ class MessagesView extends React.Component {
       return;
     }
 
-    this.setState({messageCount: topic.messageCount()});
+    clearTimeout(this.keyPressTimer)
+    this.setState({messageCount: topic.messageCount(), typingIndicator: false});
 
     // Scroll to the bottom if the message is added to the end of the message list.
     // TODO: This should be replaced by showing a "scroll to bottom" button.
@@ -530,9 +577,8 @@ class MessagesView extends React.Component {
     switch (info.what) {
       case 'kp': {
         clearTimeout(this.keyPressTimer);
-        var instance = this;
-        this.keyPressTimer = setTimeout(function() {
-          instance.setState({typingIndicator: false});
+        this.keyPressTimer = setTimeout(() => {
+          this.setState({typingIndicator: false});
         }, KEYPRESS_DELAY + 1000);
         if (!this.state.typingIndicator) {
           this.setState({typingIndicator: true});
@@ -562,7 +608,7 @@ class MessagesView extends React.Component {
 
   handleFormResponse(action, text, data) {
     if (action == 'pub') {
-      this.props.sendMessage(Drafty.attachJSON(Drafty.parse(text), data));
+      this.sendMessage(Drafty.attachJSON(Drafty.parse(text), data));
     } else if (action == 'url') {
       const url = new URL(data.ref);
       const params = url.searchParams;
@@ -623,6 +669,21 @@ class MessagesView extends React.Component {
     }
   }
 
+  // sendMessage sends the message with an optional subscription to topic first.
+  sendMessage(msg, uploadCompletionPromise, uploader) {
+    let head;
+    if (this.state.reply && this.state.reply.content) {
+      head = {reply: '' + this.state.reply.seq};
+      // Turn it into Drafty so we can make a quoted Drafty object later.
+      if (typeof msg == 'string') {
+        msg = Drafty.parse(msg);
+      }
+      msg = Drafty.attachQuote(msg, this.state.reply.content);
+      this.setState({reply: null});
+    }
+    this.props.sendMessage(msg, uploadCompletionPromise, uploader, head);
+  }
+
   // Send attachment as Drafty message:
   // - if file is too large, upload it and send a s link.
   // - if file is small enough, just send it in-band.
@@ -634,10 +695,6 @@ class MessagesView extends React.Component {
     if (file.size > maxInbandAttachmentSize) {
       // Too large to send inband - uploading out of band and sending as a link.
       const uploader = this.props.tinode.getLargeFileHelper();
-      if (!uploader) {
-        this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));
-        return;
-      }
       const uploadCompletionPromise = uploader.upload(file);
       const msg = Drafty.attachFile(null, {
         mime: file.type,
@@ -646,12 +703,12 @@ class MessagesView extends React.Component {
         urlPromise: uploadCompletionPromise
       });
       // Pass data and the uploader to the TinodeWeb.
-      this.props.sendMessage(msg, uploadCompletionPromise, uploader);
+      this.sendMessage(msg, uploadCompletionPromise, uploader);
     } else {
       // Small enough to send inband.
       fileToBase64(file,
         (mime, bits, fname) => {
-          this.props.sendMessage(Drafty.attachFile(null, {mime: mime, data: bits, filename: fname}));
+          this.sendMessage(Drafty.attachFile(null, {mime: mime, data: bits, filename: fname}));
         },
         this.props.onError
       );
@@ -712,10 +769,10 @@ class MessagesView extends React.Component {
             });
             if (caption) {
               msg = Drafty.appendLineBreak(msg);
-              msg = Drafty.append(msg, Drafty.init(caption));
+              msg = Drafty.append(msg, Drafty.parse(caption));
             }
             // Pass data and the uploader to the TinodeWeb.
-            this.props.sendMessage(msg, uploadCompletionPromise, uploader);
+            this.sendMessage(msg, uploadCompletionPromise, uploader);
           }
         )},
         // Failure
@@ -738,9 +795,9 @@ class MessagesView extends React.Component {
       });
       if (caption) {
         msg = Drafty.appendLineBreak(msg);
-        msg = Drafty.append(msg, Drafty.init(caption));
+        msg = Drafty.append(msg, Drafty.parse(caption));
       }
-      this.props.sendMessage(msg);
+      this.sendMessage(msg);
     });
   }
 
@@ -778,6 +835,143 @@ class MessagesView extends React.Component {
     uploader.cancel();
   }
 
+  handlePickReply(m) {
+    this.setState({reply: null});
+    if (m) {
+      let cont = m.content
+      if (cont) {
+        if (typeof cont == 'string') {
+          cont = Drafty.init(cont);
+        }
+        cont = Drafty.preview(cont, 30, quotePreviewFmt);
+
+        // Get the author.
+        let header;
+        const seq = m.seq;
+        const topic = this.props.tinode.getTopic(this.state.topic);
+        const m0 = topic.findMessage(seq);
+        let thisFrom;
+        if (m0) {
+          thisFrom = m0.from || 'chan';
+          if (thisFrom != this.props.myUserId) {
+            const topic = this.props.tinode.getTopic(this.state.topic);
+            const user = topic.userDesc(thisFrom);
+            if (user && user.public) {
+              header = user.public.fn;
+            }
+          } else {
+            header = this.props.myUserName;
+          }
+        }
+
+        header = Drafty.init(header || '');
+        // Make small image previews.
+        const ents = [];
+        if (cont.ent) {
+          Drafty.entities(cont, (data, idx, tp) => {
+            if (tp == 'IM') {
+              ents.push({
+                tp: tp,
+                data: data
+              });
+            }
+
+          }, this);
+        }
+
+        // Turn all images into thumbnails.
+        const promises = [];
+        ents.map((ex) => {
+          let p = new Promise((resolve, reject) => {
+            const handleFailure = () => {
+              ex.data.val = '';
+              ex.data.name = '';
+              ex.data.width = IMAGE_THUMBNAIL_DIM;
+              ex.data.height = IMAGE_THUMBNAIL_DIM;
+            };
+            const scale = (origBlob) => {
+              imageScaled(origBlob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, false,
+                // Success
+                (mime, blob, width, height, fname) => {
+                  ex.data.mime = mime;
+                  ex.data.size = blob.size;
+                  ex.data.width = width;
+                  ex.data.height = height;
+                  ex.data.name = fname;
+                  ex.data.ref = undefined;
+
+                  blobToBase64(blob, (blobMime, tinyBits64) => {
+                    ex.data.val = tinyBits64;
+                    resolve(true);
+                  });
+                },
+                // Failure
+                (err) => {
+                  handleFailure();
+                  reject(`Could not scale image: ${err}`);
+                });
+            }
+            if (ex.data.val) {
+              const b = base64ToBlob(ex.data.val, ex.data.mime);
+              if (b) {
+                scale(b);
+              } else {
+                handleFailure();
+              }
+            } else {
+              const from = this.props.tinode.authorizeURL(sanitizeImageUrl(ex.data.ref));
+              fetch(from)
+                .then(e => {
+                  if (e.ok) {
+                    return e.blob();
+                  } else {
+                    handleFailure();
+                    reject(`Image fetch unsuccessful: ${e.status} - ${e.statusText}`);
+                  }
+                })
+                .then((b) => scale(b))
+                .catch((err) => reject(`Error fetching image data: ${err}`));
+              return;
+            }
+          });
+
+          promises.push(p);
+        });
+
+        Promise.all(promises)
+          .catch((err) => {
+            this.props.onError(err, 'err');
+          })
+          .finally(() => {
+            // All done. Create a reply quote.
+            const msg = Drafty.createQuote(header, cont, letterTileColorId(thisFrom));
+            this.setState({reply: {content: msg, seq: m.seq}});
+          });
+
+        return;
+      }
+    }
+  }
+
+  handleCancelReply() {
+    this.setState({reply: null})
+  }
+
+  handleQuoteClick(replyToSeq) {
+    const ref = this.getOrCreateMessageRef(replyToSeq);
+    if (!ref) {
+      return;
+    }
+    const element = ref.current;
+    if (element) {
+      element.scrollIntoView({block: "center", behavior: "smooth"});
+      element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
+      setTimeout(() => { element.style.backgroundColor = ''; } , 1000);
+    } else {
+      console.error("Unresolved message ref: seqId", replyToSeq);
+    }
+  }
+
   render() {
     const {formatMessage} = this.props.intl;
 
@@ -797,6 +991,10 @@ class MessagesView extends React.Component {
         component2 = (
           <ImagePreview
             content={this.state.imagePreview}
+            tinode={this.props.tinode}
+            replyTo={this.state.reply}
+            formatter={draftyFormatter}
+            onCancelReply={this.handleCancelReply}
             onClose={this.handleClosePreview}
             onSendMessage={this.sendImageAttachment} />
         );
@@ -812,6 +1010,10 @@ class MessagesView extends React.Component {
         component2 = (
           <DocPreview
             content={this.state.docPreview}
+            tinode={this.props.tinode}
+            replyTo={this.state.reply}
+            formatter={draftyFormatter}
+            onCancelReply={this.handleCancelReply}
             onClose={this.handleClosePreview}
             onSendMessage={this.sendFileAttachment} />
         );
@@ -819,6 +1021,18 @@ class MessagesView extends React.Component {
         const topic = this.props.tinode.getTopic(this.state.topic);
         const isChannel = topic.isChannelType();
         const groupTopic = topic.isGroupType() && !isChannel;
+        const icon_badges = [];
+        if (topic.trusted) {
+          if (topic.trusted.verified) {
+            icon_badges.push({icon: 'verified', color: 'badge-inv'});
+          }
+          if (topic.trusted.staff) {
+            icon_badges.push({icon: 'staff', color: 'badge-inv'});
+          }
+          if (topic.trusted.danger) {
+            icon_badges.push({icon: 'dangerous', color: 'badge-inv'});
+          }
+        }
         let messageNodes = [];
         let previousFrom = null;
         let chatBoxClass = null;
@@ -846,7 +1060,7 @@ class MessagesView extends React.Component {
             const user = topic.userDesc(thisFrom);
             if (user && user.public) {
               userName = user.public.fn;
-              userAvatar = makeImageDataUrl(user.public.photo);
+              userAvatar = makeImageUrl(user.public.photo);
             }
             userFrom = thisFrom;
             chatBoxClass='chat-box group';
@@ -854,6 +1068,13 @@ class MessagesView extends React.Component {
             chatBoxClass='chat-box';
           }
 
+          // Ref for this chat message.
+          const ref = this.getOrCreateMessageRef(msg.seq);
+          let replyToSeq = msg.head ? parseInt(msg.head.reply) : null;
+          if (!replyToSeq || isNaN(replyToSeq)) {
+            replyToSeq = null;
+          }
+
           messageNodes.push(
             <ChatMessage
               tinode={this.props.tinode}
@@ -869,12 +1090,18 @@ class MessagesView extends React.Component {
               sequence={sequence}
               received={deliveryStatus}
               uploader={msg._uploader}
-              viewportWidth={this.props.viewportWidth}
+              viewportWidth={this.props.viewportWidth}  // Used by `formatter`.
               showContextMenu={this.state.channel? false : this.handleShowContextMenuMessage}
               onImagePreview={this.handleImagePostview}
               onFormResponse={this.handleFormResponse}
               onError={this.props.onError}
               onCancelUpload={this.handleCancelUpload}
+              pickReply={this.handlePickReply}
+              replyToSeq={replyToSeq}
+              onQuoteClick={this.handleQuoteClick}
+              formatter={draftyFormatter}
+              ref={ref}
+              userIsWriter={this.state.isWriter}
               key={msg.seq} />
           );
         });
@@ -908,6 +1135,7 @@ class MessagesView extends React.Component {
                 null}
               <div className="avatar-box">
                 <LetterTile
+                  tinode={this.props.tinode}
                   avatar={avatar}
                   topic={this.state.topic}
                   title={this.state.title} />
@@ -918,11 +1146,12 @@ class MessagesView extends React.Component {
                   this.state.title ||
                   <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
                     description="Title shown when the topic has no name" /></i>
-                }</div>
+                }<ContactBadges badges={icon_badges} /></div>
                 <div id="topic-last-seen">{lastSeen}</div>
               </div>
               {groupTopic ?
                 <GroupSubs
+                  tinode={this.props.tinode}
                   subscribers={this.state.onlineSubs} /> :
                 <div id="topic-users" />
               }
@@ -968,12 +1197,17 @@ class MessagesView extends React.Component {
               <Invitation onAction={this.handleNewChatAcceptance} />
               :
               <SendMessage
+                tinode={this.props.tinode}
                 disabled={!this.state.isWriter}
-                onSendMessage={this.props.sendMessage}
                 onKeyPress={this.sendKeyPress}
+                onSendMessage={this.sendMessage}
                 onAttachFile={this.handleAttachFile}
                 onAttachImage={this.handleAttachImage}
-                onError={this.props.onError} />}
+                onError={this.props.onError}
+                replyTo={this.state.reply}
+                onQuoteClick={this.handleQuoteClick}
+                formatter={draftyFormatter}
+                onCancelReply={this.handleCancelReply} />}
           </>
         );
       }
@@ -984,4 +1218,170 @@ class MessagesView extends React.Component {
   }
 };
 
+// Transforms styles (and corresponding entities) for formatting reply quotes.
+function quotePreviewFmt(fmt, ent) {
+  let tp = fmt.tp;
+  if (!tp) {
+    if (!ent || !ent.tp) {
+      return [null, null];
+    }
+    tp = ent.tp;
+  }
+  const new_fmt = {at: fmt.at, len: fmt.len, tp: fmt.tp};
+  switch (tp) {
+    case 'BR':
+      // Replace new line with a space.
+      return [null, null];
+    case 'HL':
+      return [new_fmt, ent];
+    case 'LN':
+      // Disable links in previews.
+      return [null, null];
+    case 'IM':
+      // Keep images as is.
+      return [new_fmt, ent];
+    case 'BN':
+      new_fmt.tp = null;
+      return [new_fmt, { tp: 'IC', data: { orig: 'BN', name: 'button'}}];
+    case 'FM':
+      new_fmt.tp = null;
+      return [new_fmt, {tp: 'IC', data: { orig: 'FM', name: 'form'}}];
+    case 'RW':
+      return [null, null];
+    case 'EX':
+      // Make it an icon.
+      new_fmt.tp = null;
+      if (new_fmt.at == -1) {
+        // Render it normally.
+        new_fmt.at = 0;
+      }
+      return [new_fmt, {tp: 'IC', data: { orig: 'EX', name: 'attachment'}}];
+    case 'QQ':
+      // Quote/citation.
+      return [null,null];
+    default:
+      return [new_fmt, ent];
+  }
+}
+
+// Converts Drafty elements into React classes.
+// 'this' is set by the caller.
+function draftyFormatter(style, data, values, key) {
+  if (style == 'EX') {
+    // attachments are handled elsewhere.
+    return null;
+  }
+
+  let el = Drafty.tagName(style);
+  if (el) {
+    const { formatMessage } = this.props.intl;
+    let attr = Drafty.attrValue(style, data) || {};
+    attr.key = key;
+    switch (style) {
+      case 'HL':
+        // Highlighted text. Assign class name.
+        attr.className = 'highlight';
+        break;
+      case 'IM':
+        // Additional processing for images
+        if (data) {
+          attr.className = 'inline-image';
+          const dim = fitImageSize(data.width, data.height,
+            this.props.hasOwnProperty('viewportWidth') ? Math.min(this.props.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.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',
+            // 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;
+            if (attr.src) {
+              if (Math.max(data.width || 0, data.height || 0) > IMAGE_THUMBNAIL_DIM) {
+                // Allow previews for large enough images.
+                attr.onClick = this.handleImagePreview;
+                attr.className += ' image-clickable';
+              }
+              attr.loading = 'lazy';
+            } else {
+              attr.src = 'img/broken_image.png';
+            }
+          } else {
+            // Use custom element instead of <img>.
+            el = UploadingImage;
+          }
+        }
+        break;
+      case 'BN':
+        // Button
+        attr.onClick = this.handleFormButtonClick;
+        let inner = React.Children.map(values, (child) => {
+          return typeof child == 'string' ? child : undefined;
+        });
+        if (!inner || inner.length == 0) {
+          inner = [attr.name]
+        }
+        // Get text which will be sent back when the button is clicked.
+        attr['data-title'] = inner.join('');
+        break;
+      case 'MN':
+        // Mention
+        if (data && data.hasOwnProperty('colorId')) {
+          attr.className = 'mn-dark-color' + data.colorId;
+        }
+        break;
+      case 'FM':
+        // Form
+        attr.className = 'bot-form';
+        break;
+      case 'RW':
+        // Form element formatting is dependent on element content.
+        break;
+      case 'QQ':
+        // Quote/citation.
+        attr.className = 'reply-quote'
+        attr.onClick = this.handleQuoteClick;
+        break;
+      case 'IC':
+        // Icon.
+        if (data.name == 'button') {
+          attr.className = 'flat-button faux';
+        } else {
+          const icons = {
+            form: {
+              name: 'dashboard', title: 'drafty_form'
+            },
+            attachment: {
+              name: 'attachment', title: 'drafty_attachment'
+            }
+          };
+          const icon = icons[data.name];
+          el = React.Fragment;
+          if (icon) {
+            const key = data.orig.toLowerCase();
+            values = [<i key={key} className="material-icons">{icon.name}</i>,
+              formatMessage(messages[icon.title])].concat(' ', values || []);
+          } else {
+            values = [];
+          }
+        }
+        break;
+      default:
+        if (el == '_UNKN') {
+          // Unknown element.
+          el = React.Fragment;
+          values = [<i className="material-icons gray">extension</i>, ' '].concat(values || []);
+        }
+        break;
+    }
+    return React.createElement(el, attr, values);
+  } else {
+    return values;
+  }
+};
+
 export default injectIntl(MessagesView);

src/views/new-topic-view.jsx

@@ -56,16 +56,17 @@ class NewTopicView extends React.Component {
     this.setState({searchQuery: Tinode.isNullValue(query) ? null : query});
   }
 
-  handleContactSelected(sel) {
-    if (this.state.tabSelected === 'p2p') {
+  handleContactSelected(uid) {
+    if (this.state.tabSelected == 'p2p') {
       HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-      this.props.onCreateTopic(sel);
+      this.props.onCreateTopic(uid);
     }
   }
 
-  handleNewGroupSubmit(name, dataUrl, priv, tags, isChannel) {
+  handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
     HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-    this.props.onCreateTopic(undefined, theCard(name, dataUrl), priv, tags, isChannel);
+    this.props.onCreateTopic(undefined,
+      {public: theCard(name, dataUrl, null, description), private: priv, tags: tags}, isChannel);
   }
 
   handleGroupByID(topicName) {
@@ -112,6 +113,7 @@ class NewTopicView extends React.Component {
                 type="p2p"
                 onSearchContacts={this.handleSearchContacts} />
               <ContactList
+                tinode={this.props.tinode}
                 contacts={this.props.searchResults}
                 myUserId={this.props.myUserId}
                 emptyListMessage={no_contacts_placeholder}

src/views/sidepanel-view.jsx

@@ -4,11 +4,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
 
+import AccountSettingsView from './account-settings-view.jsx';
 import ContactsView from './contacts-view.jsx';
 import CreateAccountView from './create-account-view.jsx';
-import EditAccountView from './edit-account-view.jsx';
-import AccGeneralView from './acc-general-view.jsx';
 import AccNotificationsView from './acc-notifications-view.jsx';
 import AccSecurityView from './acc-security-view.jsx';
 import AccSupportView from './acc-support-view.jsx';
@@ -37,19 +37,24 @@ const messages = defineMessages({
   },
   edit: {
     id: 'sidepanel_title_account_settings',
-    description: 'Sidepanel title for EditAccountView.',
+    description: 'Sidepanel title for AccountSettingsView.',
     defaultMessage: 'Account Settings'
   },
   general: {
-    id: 'sidepanel_title_acc_general',
-    description: 'Sidepanel title for AccGeneralView.',
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
     defaultMessage: 'General'
   },
   security: {
-    id: 'sidepanel_title_acc_security',
-    description: 'Sidepanel title for AccSecurityView.',
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
     defaultMessage: 'Security'
   },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
   notif: {
     id: 'sidepanel_title_acc_notifications',
     description: 'Sidepanel title for AccNotificationsView.',
@@ -95,20 +100,22 @@ class SidepanelView extends React.Component {
   }
 
   handleNewTopic() {
-    this.props.onBasicNavigate('newtpk');
+    this.props.onNavigate('newtpk');
   }
 
   render() {
     const {formatMessage} = this.props.intl;
     const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
 
-    let title, avatar;
+    let title, avatar, badges;
     if (view == 'contacts') {
       title = this.props.title;
       avatar = this.props.avatar ? this.props.avatar : true;
+      badges = this.props.trustedBadges;
     } else {
       title = formatMessage(messages[view]);
       avatar = false;
+      badges = null;
     }
 
     let onCancel;
@@ -122,6 +129,8 @@ class SidepanelView extends React.Component {
           state={view}
           title={title}
           avatar={avatar}
+          tinode={this.props.tinode}
+          trustedBadges={badges}
           myUserId={this.props.myUserId}
           onSignUp={this.props.onSignUp}
           onSettings={this.props.onSettings}
@@ -147,6 +156,7 @@ class SidepanelView extends React.Component {
 
           view === 'register' ?
           <CreateAccountView
+            tinode={this.props.tinode}
             onCreateAccount={this.props.onCreateAccount}
             onCancel={this.props.onCancel}
             onError={this.props.onError} /> :
@@ -159,21 +169,22 @@ class SidepanelView extends React.Component {
             onUpdate={this.props.onGlobalSettings} /> :
 
           view === 'edit' ?
-          <EditAccountView
+          <AccountSettingsView
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
-            onBasicNavigate={this.props.onBasicNavigate} /> :
+            trustedBadges={this.props.trustedBadges}
+            onNavigate={this.props.onNavigate} /> :
 
-          view === 'general' ?
-          <AccGeneralView
+          (view === 'general' || view === 'crop') ?
+          <TopicCommon
+            topic="me"
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
-            onUpdateAccount={this.props.onUpdateAccount}
+            onUpdateTopicDesc={this.props.onUpdateAccountDesc}
             onUpdateTags={this.props.onUpdateAccountTags}
             onCredAdd={this.props.onCredAdd}
             onCredDelete={this.props.onCredDelete}
             onCredConfirm={this.props.onCredConfirm}
-            onBasicNavigate={this.props.onBasicNavigate}
             onError={this.props.onError} /> :
 
           view === 'notif' ?
@@ -189,7 +200,8 @@ class SidepanelView extends React.Component {
           view === 'security' ?
           <AccSecurityView
             tinode={this.props.tinode}
-            onUpdateAccount={this.props.onUpdateAccount}
+            onUpdateAccountDesc={this.props.onUpdateAccountDesc}
+            onUpdatePassword={this.props.onUpdatePassword}
             onLogout={this.props.onLogout}
             onDeleteAccount={this.props.onDeleteAccount}
             onShowAlert={this.props.onShowAlert}
@@ -233,7 +245,8 @@ class SidepanelView extends React.Component {
           view === 'reset' ?
           <PasswordResetView
             onRequest={this.props.onPasswordResetRequest}
-            onReset={this.props.onResetPassword} /> :
+            onReset={this.props.onResetPassword}
+            onCancel={this.props.onCancel} /> :
           null}
       </div>
     );

src/views/tinode-web.jsx

@@ -1,6 +1,5 @@
 // The top-level class to hold all functionality together.
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import * as firebase from 'firebase/app';
@@ -18,7 +17,7 @@ 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 { PACKAGE_VERSION } from '../version.js';
-import { base64ReEncode, makeImageDataUrl } from '../lib/blob-helpers.js';
+import { base64ReEncode, makeImageUrl } 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';
@@ -70,6 +69,8 @@ class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     this.state = this.getBlankState();
 
     this.handleResize = this.handleResize.bind(this);
@@ -100,7 +101,7 @@ class TinodeWeb extends React.Component {
     this.handleNewChatInvitation = this.handleNewChatInvitation.bind(this);
     this.handleNewAccount = this.handleNewAccount.bind(this);
     this.handleNewAccountRequest = this.handleNewAccountRequest.bind(this);
-    this.handleUpdateAccountRequest = this.handleUpdateAccountRequest.bind(this);
+    this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
     this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
     this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
     this.handleSettings = this.handleSettings.bind(this);
@@ -119,8 +120,9 @@ class TinodeWeb extends React.Component {
     this.handleStartTopicRequest = this.handleStartTopicRequest.bind(this);
     this.handleNewTopicCreated = this.handleNewTopicCreated.bind(this);
     this.handleTopicUpdateRequest = this.handleTopicUpdateRequest.bind(this);
+    this.handleUnarchive = this.handleUnarchive.bind(this);
     this.handleChangePermissions = this.handleChangePermissions.bind(this);
-    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+    this.handleTagsUpdateRequest = this.handleTagsUpdateRequest.bind(this);
     this.handleLogout = this.handleLogout.bind(this);
     this.handleDeleteAccount = this.handleDeleteAccount.bind(this);
     this.handleDeleteTopicRequest = this.handleDeleteTopicRequest.bind(this);
@@ -133,7 +135,6 @@ class TinodeWeb extends React.Component {
     this.handleHideContextMenu = this.handleHideContextMenu.bind(this);
     this.handleShowAlert = this.handleShowAlert.bind(this);
     this.handleShowInfoView = this.handleShowInfoView.bind(this);
-    this.handleHideInfoView = this.handleHideInfoView.bind(this);
     this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
     this.handleValidateCredentialsRequest = this.handleValidateCredentialsRequest.bind(this);
     this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);
@@ -157,7 +158,7 @@ class TinodeWeb extends React.Component {
       // "On" is the default, so saving the "off" state.
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
-      desktopAlerts: persist && settings.desktopAlerts,
+      desktopAlerts: persist && !!settings.desktopAlerts,
       desktopAlertsEnabled: (isSecureConnection() || isLocalHost()) &&
         (typeof firebase != 'undefined') && (typeof navigator != 'undefined') &&
         (typeof FIREBASE_INIT != 'undefined'),
@@ -173,6 +174,7 @@ class TinodeWeb extends React.Component {
       sidePanelSelected: 'login',
       sidePanelTitle: null,
       sidePanelAvatar: null,
+      myTrustedBadges: [],
       loadSpinnerVisible: false,
 
       login: '',
@@ -186,7 +188,7 @@ class TinodeWeb extends React.Component {
       newTopicParams: null,
       loginDisabled: false,
       displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),
-      showInfoPanel: false,
+      infoPanel: undefined,
       mobilePanel: 'sidepanel',
 
       contextMenuVisible: false,
@@ -224,7 +226,7 @@ class TinodeWeb extends React.Component {
       serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
     } else {
       // Safari is broken by design.
-      console.warn('Your browser does not support BroadcastChannel. Some features will not be available');
+      console.warn("Your browser does not support BroadcastChannel. Some features will not be available");
     }
 
     // Window/tab visible or invisible for pausing timers.
@@ -386,7 +388,7 @@ class TinodeWeb extends React.Component {
     const hash = HashNavigation.parseUrlHash(window.location.hash);
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
-      if (['register','settings','edit','notif','security','support','general',
+      if (['register','settings','edit','notif','security','support','general','crop',
           'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
         this.setState({sidePanelSelected: hash.path[0]});
       } else {
@@ -424,7 +426,7 @@ class TinodeWeb extends React.Component {
 
     // Additional parameters of panels.
     this.setState({
-      showInfoPanel: hash.params.info,
+      infoPanel: hash.params.info,
       newTopicTabSelected: hash.params.tab
     });
   }
@@ -564,8 +566,9 @@ class TinodeWeb extends React.Component {
     cred = Tinode.credential(cred);
     // Try to login with login/password. If they are not available, try token. If no token, ask for login/password.
     let promise = null;
-    const token = this.tinode.getAuthToken();
+    let token = this.tinode.getAuthToken();
     if (login && password) {
+      token = null;
       this.setState({password: null});
       promise = this.tinode.loginBasic(login, password, cred);
     } else if (token) {
@@ -593,7 +596,9 @@ class TinodeWeb extends React.Component {
           autoLogin: false
         });
         this.handleError(err.message, 'err');
-        localStorage.removeItem('auth-token');
+        if (token) {
+          this.handleLogout();
+        }
         HashNavigation.navigateTo('');
       });
     } else {
@@ -661,7 +666,18 @@ class TinodeWeb extends React.Component {
       if (desc.public) {
         this.setState({
           sidePanelTitle: desc.public.fn,
-          sidePanelAvatar: makeImageDataUrl(desc.public.photo)
+          sidePanelAvatar: makeImageUrl(desc.public.photo)
+        });
+      }
+      if (desc.trusted) {
+        const badges = [];
+        for (const [key, val] of Object.entries(desc.trusted)) {
+          if (val) {
+            badges.push(key);
+          }
+        }
+        this.setState({
+          myTrustedBadges: badges,
         });
       }
       if (desc.acs) {
@@ -769,6 +785,7 @@ class TinodeWeb extends React.Component {
         // 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;
@@ -849,7 +866,7 @@ class TinodeWeb extends React.Component {
         errorText: '',
         errorLevel: null,
         mobilePanel: 'topic-view',
-        showInfoPanel: false
+        infoPanel: undefined
       });
       // Different contact selected.
       if (this.state.topicSelected != topicName) {
@@ -867,7 +884,7 @@ class TinodeWeb extends React.Component {
         mobilePanel: 'sidepanel',
         topicSelectedOnline: false,
         topicSelectedAcs: null,
-        showInfoPanel: false
+        infoPanel: undefined
       });
 
       HashNavigation.navigateTo(HashNavigation.setUrlTopic('', null));
@@ -887,18 +904,33 @@ class TinodeWeb extends React.Component {
   //  - msg - Drafty message with content
   //  - promise - Promise to be resolved when the upload is completed
   //  - uploader - for tracking progress
-  handleSendMessage(msg, promise, uploader) {
+  //  - head - head dictionary to be attached to the message
+  handleSendMessage(msg, promise, uploader, head) {
     const topic = this.tinode.getTopic(this.state.topicSelected);
 
     msg = topic.createMessage(msg, false);
     // The uploader is used to show progress.
     msg._uploader = uploader;
 
+    if (head) {
+      msg.head = Object.assign(msg.head || {}, head);
+    }
+
     if (!topic.isSubscribed()) {
+      // Topic is not subscribed yet. Subscribe.
       if (!promise) {
         promise = Promise.resolve();
       }
-      promise = promise.then(() => { return topic.subscribe(); });
+      promise = promise
+        .then(() => topic.subscribe())
+        .then(() => {
+          // If there are unsent messages, try sending them now.
+          topic.queuedMessages((pub) => {
+            if (!pub._sending && topic.isSubscribed()) {
+              this.sendMessage(pub);
+            }
+          });
+        });
     }
 
     if (promise) {
@@ -984,32 +1016,15 @@ class TinodeWeb extends React.Component {
       });
   }
 
-  handleUpdateAccountRequest(password, pub, defacs) {
-    this.handleError();
-
-    if (pub || defacs) {
-      const params = {};
-      if (pub) {
-        params.public = pub;
-      }
-      if (defacs) {
-        params.defacs = defacs;
-      }
-      this.tinode.getMeTopic().setMeta({desc: params}).catch((err) => {
-        this.handleError(err.message, 'err');
-      });
-    }
-    if (password) {
-      this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
-        this.handleError(err.message, 'err');
-      });
-    }
-  }
-
   handleToggleIncognitoMode(on) {
+    // Make state undefined.
+    this.setState({incognitoMode: null});
+
     const me = this.tinode.getMeTopic();
     const am = me.getAccessMode().updateWant(on ? '-P' : '+P').getWant();
     me.setMeta({sub: {mode: am}}).catch((err) => {
+      // Request failed, keep existing state.
+      this.setState({incognitoMode: !on});
       this.handleError(err.message, 'err');
     });
   }
@@ -1070,6 +1085,7 @@ class TinodeWeb extends React.Component {
 
   togglePushToken(enabled) {
     if (enabled) {
+      this.setState({desktopAlerts: null});
       if (!this.state.firebaseToken) {
         const fcm = this.fbPush ?
           Promise.resolve() :
@@ -1079,7 +1095,7 @@ class TinodeWeb extends React.Component {
         }).then(() => {
           this.requestPushToken();
         }).catch((err) => {
-          console.warn("Failed to get notification permission.", err);
+          console.error("Failed to get notification permission.", err);
           this.handleError(err.message, 'err');
           this.setState({desktopAlerts: false, firebaseToken: null});
           LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
@@ -1092,7 +1108,7 @@ class TinodeWeb extends React.Component {
       }
     } else if (this.state.firebaseToken && this.fbPush) {
       this.fbPush.deleteToken(this.state.firebaseToken).catch((err) => {
-        console.warn("Unable to delete token.", err);
+        console.error("Unable to delete token.", err);
       }).finally(() => {
         LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
         localStorage.removeItem('firebase-token');
@@ -1121,7 +1137,7 @@ class TinodeWeb extends React.Component {
       }
     }).catch((err) => {
       this.handleError(err.message, 'err');
-      console.warn("Failed to retrieve firebase token", err);
+      console.error("Failed to retrieve firebase token", err);
     });
   }
 
@@ -1156,6 +1172,8 @@ class TinodeWeb extends React.Component {
     let path = '';
     if (['security','support','general','notif'].includes(parsed.path[0])) {
       path = 'edit';
+    } else if ('crop' == parsed.path[0]) {
+      path = 'general';
     } else if ('blocked' == parsed.path[0]) {
       path = 'security';
     } else if (this.state.myUserId) {
@@ -1171,13 +1189,18 @@ class TinodeWeb extends React.Component {
     this.setState({errorText: '', errorLevel: null});
   }
 
-  // Basic nagigator by hash value. No need to bind to this.
+  // Sidepanel navigator. No need to bind to 'this'.
   basicNavigator(hash) {
     HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, hash));
   }
 
+  // Topic info navigator. No need to bind to 'this'.
+  infoNavigator(hash) {
+    HashNavigation.navigateTo(HashNavigation.setUrlInfoPanel(window.location.hash, hash));
+  }
+
   // Request to start a topic, new or selected from search results, or "by ID".
-  handleStartTopicRequest(topicName, pub, priv, tags, isChannel) {
+  handleStartTopicRequest(topicName, newTopicParams, isChannel) {
     // Check if topic is indeed new. If not, launch it.
     if (topicName && this.tinode.isTopicCached(topicName)) {
       this.handleTopicSelected(topicName);
@@ -1192,14 +1215,14 @@ class TinodeWeb extends React.Component {
       params.desc = {defacs: {auth: DEFAULT_P2P_ACCESS_MODE}};
     } else {
       topicName = topicName || this.tinode.newGroupTopicName(isChannel);
-      params.desc = {public: pub, private: {comment: priv}};
-      params.tags = tags;
+      params.desc = {public: newTopicParams.public, private: {comment: newTopicParams.private}};
+      params.tags = newTopicParams.tags;
     }
     params._topicName = topicName;
     this.setState({newTopicParams: params}, () => {this.handleTopicSelected(topicName)});
   }
 
-  // New topic was creted, here is the new topic name.
+  // New topic was created, here is the new topic name.
   handleNewTopicCreated(oldName, newName) {
     if (this.state.topicSelected == oldName && oldName != newName) {
       // If the current URl contains the old topic name, replace it with new.
@@ -1211,21 +1234,49 @@ class TinodeWeb extends React.Component {
     }
   }
 
-  handleTopicUpdateRequest(topicName, pub, priv, permissions) {
+  handleTopicUpdateRequest(topicName, pub, priv, defacs) {
+    this.handleError();
+
     const topic = this.tinode.getTopic(topicName);
     if (topic) {
       const params = {};
+      let attachments;
       if (pub) {
+        if (pub.photo) {
+          if (pub.photo.ref && pub.photo.ref != Tinode.DEL_CHAR) {
+            attachments = [pub.photo.ref];
+          } else if (!pub.photo.data || pub.photo.data == Tinode.DEL_CHAR) {
+            pub.photo = Tinode.DEL_CHAR;
+          }
+        }
         params.public = pub;
       }
-      if (priv) {
+
+      if (typeof priv == 'string') {
         params.private = (priv === Tinode.DEL_CHAR) ?
           Tinode.DEL_CHAR : {comment: priv};
       }
-      if (permissions) {
-        params.defacs = permissions;
+      if (defacs) {
+        params.defacs = defacs;
       }
-      topic.setMeta({desc: params}).catch((err) => {
+      topic.setMeta({desc: params, attachments: attachments}).catch((err) => {
+        this.handleError(err.message, 'err');
+      });
+    }
+  }
+
+  handleUnarchive(topicName) {
+    const topic = this.tinode.getTopic(topicName);
+    if (topic) {
+      topic.archive(false);
+    }
+  }
+
+  handleUpdatePasswordRequest(password)  {
+    this.handleError();
+
+    if (password) {
+      this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
         this.handleError(err.message, 'err');
       });
     }
@@ -1248,7 +1299,7 @@ class TinodeWeb extends React.Component {
     }
   }
 
-  handleTagsUpdated(topicName, tags) {
+  handleTagsUpdateRequest(topicName, tags) {
     const topic = this.tinode.getTopic(topicName);
     if (topic) {
       topic.setMeta({tags: tags}).catch((err) => {
@@ -1373,7 +1424,7 @@ class TinodeWeb extends React.Component {
       contextMenuClickAt: {x: params.x, y: params.y},
       contextMenuParams: params,
       contextMenuItems: menuItems || this.defaultTopicContextMenu(params.topicName),
-      contextMenuBounds: ReactDOM.findDOMNode(this).getBoundingClientRect()
+      contextMenuBounds: this.selfRef.current.getBoundingClientRect()
     });
   }
 
@@ -1442,13 +1493,8 @@ class TinodeWeb extends React.Component {
   }
 
   handleShowInfoView() {
-    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', true));
-    this.setState({showInfoPanel: true});
-  }
-
-  handleHideInfoView() {
-    HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'info'));
-    this.setState({showInfoPanel: false});
+    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', 'info'));
+    this.setState({infoPanel: 'info'});
   }
 
   handleMemberUpdateRequest(topicName, added, removed) {
@@ -1524,7 +1570,7 @@ class TinodeWeb extends React.Component {
 
   render() {
     return (
-      <div id="app-container">
+      <div id="app-container" ref={this.selfRef}>
         {this.state.contextMenuVisible ?
           <ContextMenu
             tinode={this.tinode}
@@ -1561,6 +1607,7 @@ class TinodeWeb extends React.Component {
           state={this.state.sidePanelSelected}
           title={this.state.sidePanelTitle}
           avatar={this.state.sidePanelAvatar}
+          trustedBadges={this.state.myTrustedBadges}
           login={this.state.login}
           persist={this.state.persist}
           myUserId={this.state.myUserId}
@@ -1588,11 +1635,12 @@ class TinodeWeb extends React.Component {
           onGlobalSettings={this.handleGlobalSettings}
           onSignUp={this.handleNewAccount}
           onSettings={this.handleSettings}
-          onBasicNavigate={this.basicNavigator}
+          onNavigate={this.basicNavigator}
           onLoginRequest={this.handleLoginRequest}
           onPersistenceChange={this.handlePersistenceChange}
           onCreateAccount={this.handleNewAccountRequest}
-          onUpdateAccount={this.handleUpdateAccountRequest}
+          onUpdateAccountDesc={this.handleTopicUpdateRequest}
+          onUpdatePassword={this.handleUpdatePasswordRequest}
           onUpdateAccountTags={this.handleUpdateAccountTagsRequest}
           onTogglePushNotifications={this.togglePushToken}
           onToggleMessageSounds={this.handleToggleMessageSounds}
@@ -1629,9 +1677,11 @@ class TinodeWeb extends React.Component {
           viewportWidth={this.state.viewportWidth}
           viewportHeight={this.state.viewportHeight}
           hideSelf={this.state.displayMobile &&
-            (this.state.mobilePanel !== 'topic-view' || this.state.showInfoPanel)}
+            (this.state.mobilePanel !== 'topic-view' || this.state.infoPanel)}
           topic={this.state.topicSelected}
           myUserId={this.state.myUserId}
+          // User public.fn.
+          myUserName={this.state.sidePanelTitle}
           serverVersion={this.state.serverVersion}
           serverAddress={this.state.serverAddress}
           applicationVisible={this.state.applicationVisible}
@@ -1652,7 +1702,7 @@ class TinodeWeb extends React.Component {
           onNewChat={this.handleNewChatInvitation}
           sendMessage={this.handleSendMessage} />
 
-        {this.state.showInfoPanel ?
+        {this.state.infoPanel ?
           <InfoView
             tinode={this.tinode}
             connected={this.state.connected}
@@ -1660,14 +1710,15 @@ class TinodeWeb extends React.Component {
             topic={this.state.topicSelected}
             searchableContacts={this.state.searchableContacts}
             myUserId={this.state.myUserId}
+            panel={this.state.infoPanel}
 
             errorText={this.state.errorText}
             errorLevel={this.state.errorLevel}
             errorAction={this.state.errorAction}
             errorActionText={this.state.errorActionText}
 
-            onTopicDescUpdate={this.handleTopicUpdateRequest}
-            onCancel={this.handleHideInfoView}
+            onNavigate={this.infoNavigator}
+            onTopicDescUpdateRequest={this.handleTopicUpdateRequest}
             onShowAlert={this.handleShowAlert}
             onChangePermissions={this.handleChangePermissions}
             onMemberUpdateRequest={this.handleMemberUpdateRequest}
@@ -1677,7 +1728,8 @@ class TinodeWeb extends React.Component {
             onBlockTopic={this.handleBlockTopicRequest}
             onReportTopic={this.handleReportTopic}
             onAddMember={this.handleManageGroupMembers}
-            onTopicTagsUpdate={this.handleTagsUpdated}
+            onTopicTagsUpdateRequest={this.handleTagsUpdateRequest}
+            onTopicUnArchive={this.handleUnarchive}
             onInitFind={this.tnInitFind}
             onError={this.handleError}
 

src/views/validation-view.jsx

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

src/widgets/avatar-crop.jsx

@@ -0,0 +1,70 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Cropper from './cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+export default class AvatarCrop extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  // Cut out in image coordinates and desired scale factor.
+  handleChange(left, top, width, height, scale) {
+    this.setState({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      scale: scale
+    });
+  }
+
+  handleSubmit() {
+    imageCrop(this.props.mime, this.props.avatar,
+      this.state.left, this.state.top,
+      this.state.width, this.state.height,
+      this.state.scale,
+      (mime, blob, width, height) => {
+        this.props.onSubmit(mime, blob, width, height);
+      },
+      (err) => {
+        this.props.onError(err);
+      }
+    );
+  }
+
+  render() {
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <Cropper
+            source={this.props.avatar}
+            onChange={this.handleChange} />
+        </div>
+        <div className="dialog-buttons">
+          {this.props.onCancel ?
+            <button className="secondary" onClick={this.props.onCancel}>
+              <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+            </button>
+            : null}
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/avatar-upload.jsx

@@ -1,42 +1,32 @@
 import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
+import LoadSpinner from './load-spinner.jsx';
 
-import { AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE } from '../config.js';
-import { imageScaled, blobToBase64, makeImageDataUrl } from '../lib/blob-helpers.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
+
+import { AVATAR_SIZE } from '../config.js';
 
 export default class AvatarUpload extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      dataUrl: props.avatar
+      source: props.avatar
     };
 
-    this.handleFileUpload = this.handleFileUpload.bind(this);
+    this.handleFileReceived = this.handleFileReceived.bind(this);
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.avatar != prevProps.avatar) {
-      this.setState({dataUrl: this.props.avatar})
+      this.setState({source: this.props.avatar});
     }
   }
 
-  handleFileUpload(e) {
-    imageScaled(e.target.files[0], AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
-      // Image successfully scaled and converted.
-      (mime, blob) => {
-        // Convert blob to base64-encoded bits.
-        blobToBase64(blob, (unused, base64bits) => {
-          const du = makeImageDataUrl({data: base64bits, type: mime});
-          this.setState({dataUrl: du});
-          this.props.onImageChanged(du);
-        });
-      },
-      // Failure
-      (err) => {
-        this.props.onError(err, 'err');
-      });
+  handleFileReceived(e) {
+    const image = e.target.files[0];
+    this.props.onImageUpdated(image.type, URL.createObjectURL(image), image.name);
     // Clear the value so the same file can be uploaded again.
     e.target.value = '';
   }
@@ -48,16 +38,17 @@ export default class AvatarUpload extends React.Component {
     const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
     return (
       <div className={className}>
-        {this.props.readOnly || !this.state.dataUrl ?
+        {this.props.readOnly || !this.state.source ?
           null :
-          <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageChanged(null);}}>
+          <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageUpdated();}}>
             <i className="material-icons">clear</i>
           </a>}
-        {this.state.dataUrl ?
-          <img src={this.state.dataUrl} className="preview" /> :
+        {this.state.source ?
+          <img src={this.props.tinode.authorizeURL(sanitizeImageUrl(this.state.source))} className="preview" /> :
           this.props.readOnly && this.props.uid ?
             <div className="avatar-box">
               <LetterTile
+                tinode={this.props.tinode}
                 avatar={true}
                 topic={this.props.uid}
                 title={this.props.title} />
@@ -66,11 +57,12 @@ export default class AvatarUpload extends React.Component {
             <div className="blank">{AVATAR_SIZE}&times;{AVATAR_SIZE}</div>}
         {this.props.readOnly ? null :
           <input type="file" id={randId} className="inputfile hidden"
-            accept="image/*" onChange={this.handleFileUpload} />}
+            accept="image/*" onChange={this.handleFileReceived} />}
         {this.props.readOnly ? null :
         <label htmlFor={randId} className="round">
           <i className="material-icons">file_upload</i>
         </label>}
+        <LoadSpinner show={this.props.uploading} large={true} clear={true} centered={true} />
       </div>
     );
   }

src/widgets/badge-list.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const icon_mapping = {'staff': 'verified_user'};
+
+const messages = defineMessages({
+  badge_verified: {
+    id: 'badge_verified',
+    defaultMessage: 'Verified/official',
+    description: 'Explanation of a verified account or topic badge'
+  },
+  badge_staff: {
+    id: 'badge_staff',
+    defaultMessage: 'Staff-managed',
+    description: 'Explanation of a staff-managed account or topic badge'
+  },
+  badge_danger: {
+    id: 'badge_danger',
+    defaultMessage: 'Untrustworthy',
+    description: 'Suspicious or untrustworthy account or topic badge'
+  },
+});
+
+
+/* Trusted badges with labels: verified, staff, danger */
+class BadgeList extends React.PureComponent {
+  render() {
+    const {formatMessage} = this.props.intl;
+    let badges = null;
+    if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
+      badges = [];
+      this.props.trustedBadges.map((b) => {
+        const comment = formatMessage(messages['badge_' + b]);
+        const style = 'material-icons ' + b + '-color';
+        badges.push(<div className="trusted-badge" key={b}><i className={style}>{icon_mapping[b] || b}</i> {comment}</div>);
+      });
+      return <>{badges}</>;
+    }
+    return null;
+  }
+};
+
+export default injectIntl(BadgeList);

src/widgets/chat-message.jsx

@@ -1,15 +1,15 @@
 // Single message, sent or received.
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
 import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
-import UploadingImage from './uploading-image.jsx'
+
 import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
 
-export default class ChatMessage extends React.Component {
+class BaseChatMessage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -25,6 +25,8 @@ export default class ChatMessage extends React.Component {
     this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleCancelUpload = this.handleCancelUpload.bind(this);
+
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
   }
 
   handleImagePreview(e) {
@@ -60,12 +62,13 @@ export default class ChatMessage extends React.Component {
     e.preventDefault();
     e.stopPropagation();
     const menuItems = this.props.received == Tinode.MESSAGE_STATUS_FAILED ? ['menu_item_send_retry'] : [];
-    if (this.props.received >= Tinode.MESSAGE_STATUS_FAILED &&
+    if (this.props.userIsWriter &&
+        this.props.received > Tinode.MESSAGE_STATUS_FAILED &&
         this.props.received < Tinode.MESSAGE_STATUS_DEL_RANGE) {
       menuItems.push('menu_item_reply');
     }
     this.props.showContextMenu({ seq: this.props.seq, content: this.props.content,
-                                 y: e.pageY, x: e.pageX }, menuItems);
+                                 y: e.pageY, x: e.pageX, pickReply: this.props.pickReply }, menuItems);
   }
 
   handleProgress(ratio) {
@@ -76,6 +79,15 @@ export default class ChatMessage extends React.Component {
     this.props.onCancelUpload(this.props.seq, this.props.uploader);
   }
 
+  handleQuoteClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const replyToSeq = this.props.replyToSeq;
+    if (replyToSeq) {
+      this.props.onQuoteClick(replyToSeq);
+    }
+  }
+
   render() {
     const sideClass = this.props.deleted ? 'center' :
       (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
@@ -105,7 +117,8 @@ export default class ChatMessage extends React.Component {
           onError={this.props.onError}
           key={i} />);
       }, this);
-      content = React.createElement(React.Fragment, null, Drafty.format(content, draftyFormatter, this));
+      const tree = Drafty.format(content, this.props.formatter, this);
+      content = React.createElement(React.Fragment, null, tree);
     } else if (this.props.deleted) {
       // Message represents a range of deleted messages.
       content = <><i className="material-icons gray">block</i> <i className="gray">
@@ -113,19 +126,18 @@ export default class ChatMessage extends React.Component {
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
     } else if (typeof content != 'string') {
-      content = <>
-          <i className="material-icons gray">error_outline</i> <i className="gray">
-            <FormattedMessage id="invalid_content"
-              defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
-        </>
+      content = <><i className="material-icons gray">error_outline</i> <i className="gray">
+        <FormattedMessage id="invalid_content"
+          defaultMessage="invalid content" description="Shown when message is unreadable" /></i></>
     }
 
     return (
-      <li className={sideClass}>
+      <li ref={this.props.innerRef} className={sideClass}>
         {this.props.userFrom && this.props.response ?
           <div className="avatar-box">
             {fullDisplay ?
               <LetterTile
+                tinode={this.props.tinode}
                 topic={this.props.userFrom}
                 title={this.props.userName}
                 avatar={avatar} /> :
@@ -156,10 +168,10 @@ export default class ChatMessage extends React.Component {
           </div>
           {fullDisplay ?
             <div className="author">
-              <FormattedMessage id="user_not_found" defaultMessage="Not found"
-                description="In place of a user's full name when the user is not found.">{
-                    (notFound) => {return this.props.userName || <i>{notFound}</i>}
-              }</FormattedMessage>
+              {this.props.userName ||
+                <i><FormattedMessage id="user_not_found" defaultMessage="Not found"
+                description="In place of a user's full name when the user is not found." /></i>
+              }
             </div>
             : null
           }
@@ -169,86 +181,7 @@ export default class ChatMessage extends React.Component {
   }
 };
 
-// Convert Drafty object to a tree of React elements.
-import { BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
-import { fitImageSize } from '../lib/blob-helpers.js';
+const IntlChatMessage = injectIntl(BaseChatMessage);
+const ChatMessage = React.forwardRef((props, ref) => <IntlChatMessage innerRef = {ref} {...props} />);
 
-// Converts Drafty elements into React classes.
-// 'this' is set by the caller.
-function draftyFormatter(style, data, values, key) {
-  if (style == 'EX') {
-    // attachments are handled elsewhere.
-    return null;
-  }
-
-  let el = Drafty.tagName(style);
-  if (el) {
-    const attr = Drafty.attrValue(style, data) || {};
-    attr.key = key;
-    switch (style) {
-      case 'HL':
-        // Highlighted text. Assign class name.
-        attr.className = 'highlight';
-        break;
-      case 'IM':
-        // Additional processing for images
-        if (data) {
-          attr.className = 'inline-image';
-          const dim = fitImageSize(data.width, data.height,
-            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',
-            // 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;
-            if (attr.src) {
-              attr.onClick = this.handleImagePreview;
-              attr.className += ' image-clickable';
-              attr.loading = 'lazy';
-            } else {
-              attr.src = 'img/broken_image.png';
-            }
-          } else {
-            // Use custom element instead of <img>.
-            el = UploadingImage;
-          }
-        }
-        break;
-      case 'BN':
-        // Button
-        attr.onClick = this.handleFormButtonClick;
-        let inner = React.Children.map(values, (child) => {
-          return typeof child == 'string' ? child : undefined;
-        });
-        if (!inner || inner.length == 0) {
-          inner = [attr.name]
-        }
-        // Get text which will be sent back when the button is clicked.
-        attr['data-title'] = inner.join('');
-        break;
-      case 'FM':
-        // Form
-        attr.className = 'bot-form';
-        break;
-      case 'RW':
-        // Form element formatting is dependent on element content.
-        break;
-      default:
-        if (el == '_UNKN') {
-          // Unknown element.
-          // TODO: make it prettier.
-          el = <><span className="material-icons">extension</span></>;
-        }
-        break;
-    }
-    return React.createElement(el, attr, values);
-  } else {
-    return values;
-  }
-};
+export default ChatMessage;

src/widgets/checkbox.jsx

@@ -15,9 +15,11 @@ export default class CheckBox extends React.PureComponent {
   render() {
     return (
       this.props.onChange ? (
-        this.props.checked ?
+        this.props.checked === true ?
           <i className="material-icons blue clickable" onClick={this.handleChange}>check_box</i> :
-          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box_outline_blank</i>
+        this.props.checked === false ?
+          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box_outline_blank</i> :
+          <i className="material-icons lt-blue">indeterminate_check_box</i>
         ) : (
           this.props.checked ?
             <i className="material-icons">check_box</i> :

src/widgets/chip-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Chip from './chip.jsx';
 
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 /* BEGIN ChipInput: group membership widget */
 export default class ChipInput extends React.Component {
@@ -118,8 +118,9 @@ export default class ChipInput extends React.Component {
     this.state.sortedChips.map((item) => {
       chips.push(
         <Chip
+          tinode={this.props.tinode}
           onCancel={this.handleChipCancel}
-          avatar={makeImageDataUrl(item.public ? item.public.photo : null)}
+          avatar={makeImageUrl(item.public ? item.public.photo : null)}
           title={item.public ? item.public.fn : undefined}
           noAvatar={this.props.avatarDisabled}
           topic={item.user}
@@ -131,6 +132,7 @@ export default class ChipInput extends React.Component {
       count++;
     });
     const className = "chip-input" + (this.state.focused ? ' focused' : '');
+    const autoFocus = !(this.props.tabIndex > 0);
     return (
       <div className={className}>
         {chips}
@@ -141,7 +143,8 @@ export default class ChipInput extends React.Component {
           onBlur={this.handleFocusLost}
           onKeyDown={this.handleKeyDown}
           value={this.state.input}
-          autoFocus />
+          tabIndex={this.props.tabIndex}
+          autoFocus={autoFocus} />
       </div>
     );
   }

src/widgets/chip.jsx

@@ -23,6 +23,7 @@ export default class Chip extends React.PureComponent {
           <span className="spacer" /> :
           <div className="avatar-box">
             <LetterTile
+              tinode={this.props.tinode}
               avatar={this.props.avatar || true}
               topic={this.props.topic}
               title={this.props.title} />

src/widgets/contact-badges.jsx

@@ -1,23 +1,23 @@
 import React from 'react';
 
-const icon_mapping = {'muted': 'notifications_off', 'banned': 'block'};
+const icon_mapping = {'muted': 'notifications_off', 'banned': 'block', 'staff': 'verified_user'};
 
 /* Contact's labels: [you], or icons [muted], [blocked] */
 export default class ContactBadges extends React.PureComponent {
-    render() {
-      let badges = null;
-      if (this.props.badges && this.props.badges.length > 0) {
-        badges = [];
-        this.props.badges.map(function(b) {
-          if (b.icon) {
-            badges.push(<i className="material-icons as-badge" key={b.key || b.icon}>{icon_mapping[b.icon]}</i>);
-          } else {
-            const style = 'badge' + (b.color ? ' ' + b.color : '');
-            badges.push(<span className={style} key={b.key || b.name}>{b.name}</span>);
-          }
-        });
-        return <>{badges}</>;
-      }
-      return null;
+  render() {
+    let badges = null;
+    if (this.props.badges && this.props.badges.length > 0) {
+      badges = [];
+      this.props.badges.map((b) => {
+        const color = (b.color ? ' ' + b.color : '');
+        if (b.icon) {
+          badges.push(<i className={'material-icons as-badge' + color} key={b.key || b.icon}>{icon_mapping[b.icon] || b.icon}</i>);
+        } else {
+          badges.push(<span className={'badge' + color} key={b.key || b.name}>{b.name}</span>);
+        }
+      });
+      return <>{badges}</>;
     }
+    return null;
+  }
 };

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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
 
@@ -89,8 +89,9 @@ class ContactList extends React.Component {
           }
           contactNodes.push(
             <Contact
+              tinode={this.props.tinode}
               title={c.public ? c.public.fn : null}
-              avatar={makeImageDataUrl(c.public ? c.public.photo : null)}
+              avatar={makeImageUrl(c.public ? c.public.photo : null)}
               comment={comment}
               preview={preview}
               received={deliveryStatus}
@@ -105,6 +106,9 @@ class ContactList extends React.Component {
               isChannel={isChannel}
               onSelected={this.props.onTopicSelected}
               showContextMenu={this.props.showContextMenu}
+              isVerified={c.trusted && c.trusted.verified}
+              isStaff={c.trusted && c.trusted.staff}
+              isDangerous={c.trusted && c.trusted.danger}
               item={key}
               index={contactNodes.length}
               key={key} />

src/widgets/contact.jsx

@@ -65,6 +65,15 @@ class Contact extends React.Component {
     const avatar = this.props.avatar ? this.props.avatar : true;
     const badges = this.props.badges ? this.props.badges.slice() : [];
     const icon_badges = [];
+    if (this.props.isVerified) {
+      icon_badges.push({icon: 'verified', color: 'verified-color'});
+    }
+    if (this.props.isStaff) {
+      icon_badges.push({icon: 'staff', color: 'staff-color'});
+    }
+    if (this.props.isDangerous) {
+      icon_badges.push({icon: 'dangerous', color: 'danger-color'});
+    }
     if (this.props.acs) {
       if (this.props.showMode) {
         badges.push({name: this.props.acs.getMode(), key: 'mode'});
@@ -79,7 +88,13 @@ class Contact extends React.Component {
 
     const subtitle = this.props.preview ?
       (typeof this.props.preview == 'string' ? this.props.preview :
-        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this))) :
+        Drafty.isValid(this.props.preview) ?
+        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this)) :
+        <><i className="material-icons gray">error_outline</i> <i className="gray">
+          <FormattedMessage id="invalid_content"
+            defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
+        </>
+      ) :
       this.props.comment;
 
     const icon = deliveryMarker(this.props.received);
@@ -90,6 +105,7 @@ class Contact extends React.Component {
       <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
         <div className="avatar-box">
           <LetterTile
+            tinode={this.props.tinode}
             avatar={avatar}
             title={this.props.title}
             topic={this.props.item} />
@@ -101,11 +117,11 @@ class Contact extends React.Component {
         <div className="text-box">
           <div><span className="contact-title">{title}</span>
             {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
-            <UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
+            <ContactBadges badges={icon_badges} /><UnreadBadge count={this.props.unread} />
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :
-            <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
+            this.props.small ? null : <div className="contact-comment">{marker}<span>{subtitle || '\u00A0'}</span></div>}
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">
@@ -136,6 +152,7 @@ function draftyFormatter(style, data, values, key) {
         attr.className = 'highlight preview';
         break;
       case 'LN':
+      case 'MN':
         // Disable links in previews.
         el = 'span';
         break;
@@ -151,7 +168,7 @@ function draftyFormatter(style, data, values, key) {
       case 'FM':
         el = React.Fragment;
         values = [<i key="fm" className="material-icons">dashboard</i>,
-          formatMessage(messages.drafty_form)].concat(values || []);
+          formatMessage(messages.drafty_form)].concat(' ', values || []);
         break;
       case 'RW':
         el = React.Fragment;
@@ -167,7 +184,7 @@ function draftyFormatter(style, data, values, key) {
       default:
         if (el == '_UNKN') {
           el = React.Fragment;
-          values = [<i key="unkn" className="material-icons">extension</i>];
+          values = [<i key="unkn" className="material-icons">extension</i>, ' '].concat(values || []);
         }
         break;
     }

src/widgets/context-menu.jsx

@@ -1,10 +1,8 @@
 // Context Menu: popup/dropdown menu.
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { injectIntl, defineMessages } from 'react-intl';
 
 import { REM_SIZE } from '../config.js';
-import HashNavigation from '../lib/navigation.js';
 
 const messages = defineMessages({
   info: {
@@ -114,6 +112,8 @@ class ContextMenu extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     const {formatMessage} = props.intl;
 
     this.handlePageClick = this.handlePageClick.bind(this);
@@ -330,7 +330,7 @@ class ContextMenu extends React.Component {
   }
 
   handlePageClick(e) {
-    if (ReactDOM.findDOMNode(this).contains(e.target)) {
+    if (this.selfRef.current.contains(e.target)) {
       return;
     }
     e.preventDefault();
@@ -354,7 +354,7 @@ class ContextMenu extends React.Component {
     }
 
     if (!item) {
-      console.log("Invalid menu item ID", e.currentTarget.dataset.id);
+      console.error("Invalid menu item ID", e.currentTarget.dataset.id);
     } else {
       this.props.onAction(
         item.id,
@@ -427,9 +427,13 @@ class ContextMenu extends React.Component {
     return result;
   }
 
+  replyToMessage(params, errorHandler) {
+    params.pickReply({ seq: params.seq, content: params.content });
+  }
+
   render() {
+    const menu = [];
     let count = 0;
-    let menu = [];
     this.props.items.map((item) => {
       if (typeof item == 'string') {
         item = this.MenuItems[item];
@@ -461,7 +465,7 @@ class ContextMenu extends React.Component {
     };
 
     return (
-      <ul className="menu" style={position}>
+      <ul className="menu" style={position} ref={this.selfRef}>
         {menu}
       </ul>
     );

src/widgets/cropper.jsx

@@ -0,0 +1,279 @@
+// Image zoom and crop widget.
+
+import React from 'react';
+
+const DEFAULT_MAX_ZOOM = 2.5;
+
+export default class Cropper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Coordinates of the top left corner of the image in container coordinates.
+      panX: 0,
+      panY: 0,
+      // Origin of the zoom in image coordinates.
+      originX: 0,
+      originY: 0,
+      // Zoom scale.
+      zoom: 1,
+      // Zoom min and max.
+      minZoom: 0,
+      maxZoom: DEFAULT_MAX_ZOOM,
+    };
+
+    // References to DOM elements for hooking up events and getting screen dimensions.
+    // The transparent element which captures mouse moves (moves with the image).
+    this.overlay = React.createRef();
+    // The image cutout window or view port (static).
+    this.cutout = React.createRef();
+    // Scaled and translated image preview.
+    this.preview = React.createRef();
+    // The main container (static).
+    this.boundingBox = React.createRef();
+
+    // The original image width and height before any scaling.
+    this.imageWidth = 0;
+    this.imageHeight = 0;
+
+    // Mouse position when dragging.
+    this.mouseX = 0
+    this.mouseY = 0;
+    // Length of the previous mouse move when dragging.
+    this.prevDistance = 0;
+
+    // Bounding rectangles of static elements.
+    this.cutoutRect = {};
+    this.bBoxRect = {};
+    // Center of the bounding box.
+    this.originX = 0;
+    this.originY = 0;
+
+    this.initScaling = this.initScaling.bind(this);
+    this.onZoom = this.onZoom.bind(this);
+    this.handleZoom = this.handleZoom.bind(this);
+    this.mouseDown = this.mouseDown.bind(this);
+    this.mouseUp = this.mouseUp.bind(this);
+    this.mouseMove = this.mouseMove.bind(this);
+    this.mouseTouch = this.mouseTouch.bind(this);
+    this.positionAll = this.positionAll.bind(this);
+    this.translate = this.translate.bind(this);
+  }
+
+  componentDidMount() {
+    this.overlay.current.addEventListener('mousedown', this.mouseDown, { passive: true });
+    this.overlay.current.addEventListener('touchstart', this.mouseDown, { passive: true });
+
+    // The rectangle position is in viewport coordinates.
+    this.bBoxRect = this.boundingBox.current.getBoundingClientRect();
+    // Center of the bounding box in container coordinates.
+    this.originX = this.bBoxRect.width / 2;
+    this.originY = this.bBoxRect.height / 2;
+
+    // The rectangle position is in viewport coordinates.
+    this.cutoutRect = this.cutout.current.getBoundingClientRect();
+  }
+
+  componentWillUnmount() {
+    this.overlay.current.removeEventListener('mousedown', this.mouseDown);
+    this.overlay.current.removeEventListener('touchstart', this.mouseDown);
+  }
+
+  // Position all elements.
+  positionAll(panX, panY, zoom) {
+    // Zoom origin in image preview coordinates.
+    this.setState({
+      panX: panX,
+      panY: panY,
+      zoom: zoom,
+      originX: this.originX - panX,
+      originY: this.originY - panY,
+    });
+
+    // Pass cut out coordinates to caller.
+    const left = (this.originX - panX) * zoom - this.originX;
+    const top = (this.originY - panY) * zoom - this.originY;
+    this.props.onChange(
+      (left + this.cutoutRect.left - this.bBoxRect.left) / zoom,
+      (top + this.cutoutRect.top - this.bBoxRect.top) / zoom,
+      this.cutoutRect.width / zoom,
+      this.cutoutRect.height / zoom,
+      zoom);
+  }
+
+  // Check if new location is within the limits.
+  static checkBound(currPan, img, cutout, delta) {
+    let nextDiff = Math.min(0, cutout[0] - img[0] - delta, img[1] - cutout[1] + delta);
+    if (nextDiff == 0) {
+      // Cutout is completely within the image.
+      currPan += delta;
+    } else if (Math.min(0, cutout[0] - img[0], img[1] - cutout[1]) < nextDiff) {
+      // Cutout is outside of the range but closer to the bound.
+      currPan += delta;
+    }
+    return currPan;
+  }
+
+  initScaling() {
+    // Initialize components.
+    const imgRect = this.preview.current.getBoundingClientRect();
+
+    this.imageWidth = imgRect.width;
+    this.imageHeight = imgRect.height;
+
+    // Set zoom slider's min and max values. Make sure the scaled image cannot be smaller than the cutout.
+    const minZoom = Math.max(this.cutoutRect.width / imgRect.width, this.cutoutRect.height / imgRect.height);
+    this.setState({
+      minZoom: minZoom,
+      maxZoom: Math.max(DEFAULT_MAX_ZOOM, minZoom + 1)
+    });
+
+    // Initial zoom level fills the bounding box at the smallest image dimension and overflows the largest, i.e. "fill" not "fit".
+    const zoom = Math.max(this.bBoxRect.width / imgRect.width, this.bBoxRect.height / imgRect.height);
+    // Converting from viewport coordinates to container, then panning.
+    const panX = this.cutoutRect.left - this.bBoxRect.left -
+      (imgRect.width - this.cutoutRect.width) / 2;
+    const panY = this.cutoutRect.top - this.bBoxRect.top -
+      (imgRect.height - this.cutoutRect.height) / 2;
+
+    this.positionAll(panX, panY, zoom);
+  }
+
+  onZoom(e) {
+    this.handleZoom(e.target.value);
+  }
+
+  handleZoom(zoom) {
+    let panX = this.state.panX;
+    let panY = this.state.panY;
+
+    // Ensure that the image at the new zoom is not outside of the cutout boundaries.
+    // Calculate image coordinates at the new zoom.
+    const imgLeft = this.originX - (this.originX - panX) * zoom;
+    const imgRight = imgLeft + this.imageWidth * zoom;
+    // Cutout in the same coordinates as the image.
+    const coLeft = this.cutoutRect.left - this.bBoxRect.left;
+    const coRight = coLeft + this.cutoutRect.width;
+    if (coLeft < imgLeft) {
+      panX -= imgLeft - coLeft;
+    } else if (coRight > imgRight) {
+      panX += coRight - imgRight;
+    }
+    const imgTop = this.originY - (this.originY - panY) * zoom;
+    const imgBottom = imgTop + this.imageHeight * zoom;
+    const coTop = this.cutoutRect.top - this.bBoxRect.top;
+    const coBottom = coTop + this.cutoutRect.height;
+    if (coTop < imgTop) {
+      panY -= imgTop - coTop;
+    } else if (coBottom > imgBottom) {
+      panY += coBottom - imgBottom;
+    }
+
+    this.positionAll(panX, panY, zoom);
+  }
+
+  mouseDown(e) {
+    if (e.touches) {
+      this.mouseX = e.touches[0].pageX;
+      this.mouseY = e.touches[0].pageY;
+    } else {
+      this.mouseX = e.pageX;
+      this.mouseY = e.pageY;
+    }
+
+    window.addEventListener('mousemove', this.mouseMove, { passive: false });
+    window.addEventListener('touchmove', this.mouseTouch, { passive: false });
+    window.addEventListener('mouseup', this.mouseUp, { passive: true });
+    window.addEventListener('touchend', this.mouseUp, { passive: true });
+    // Disable text selection in the entire document.
+    document.body.style['userSelect'] = 'none';
+  }
+
+  // Perform image panning.
+  translate(pageX, pageY) {
+    const dX = pageX - this.mouseX;
+    const dY = pageY - this.mouseY;
+
+    this.mouseX = pageX;
+    this.mouseY = pageY;
+
+    // Make sure the image is within the cutout window.
+    const imgRect = this.preview.current.getBoundingClientRect();
+
+    // Check if the new position is within the boundaries, and if not if it's closer to them.
+    let panX = Cropper.checkBound(this.state.panX, [imgRect.left, imgRect.right],
+      [this.cutoutRect.left, this.cutoutRect.right], dX);
+    let panY = Cropper.checkBound(this.state.panY, [imgRect.top, imgRect.bottom],
+      [this.cutoutRect.top, this.cutoutRect.bottom], dY);
+
+    this.positionAll(panX, panY, this.state.zoom);
+  }
+
+  // Image panning.
+  mouseMove(e) {
+    e.preventDefault();
+    this.translate(e.pageX, e.pageY);
+  }
+
+  mouseTouch(e) {
+    e.preventDefault();
+
+    if (e.touches.length == 1) {
+      this.translate(e.touches[0].pageX, e.touches[0].pageY);
+      return;
+    }
+
+    // Image zooming by pinching.
+    const [touch0, touch1] = e.touches;
+    const distance = Math.sqrt((touch0.pageX - touch1.pageX) * (touch0.pageX - touch1.pageX) +
+      (touch0.pageY - touch1.pageY) * (touch0.pageY - touch1.pageY));
+
+    if (!this.prevDistance) {
+        this.prevDistance = distance / this.state.zoom;
+    }
+
+    let scale = (distance / this.prevDistance);
+    this.handleZoom(Math.max(this.minZoom, Math.min(this.maxZoom, scale)));
+  }
+
+  mouseUp(e) {
+    window.removeEventListener('mousemove', this.mouseMove);
+    window.removeEventListener('touchmove', this.mouseTouch);
+    window.removeEventListener('mouseup', this.mouseUp);
+    window.removeEventListener('touchend', this.mouseUp);
+    // Re-enable text selection.
+    document.body.style['userSelect'] = '';
+
+    this.positionAll(this.state.panX, this.state.panY, this.state.zoom);
+  }
+
+  render() {
+    // transform3d: position and scale.
+    const t3d = `translate3d(${this.state.panX}px, ${this.state.panY}px, 0) scale(${this.state.zoom})`;
+    // transformOrigin: zoom origin.
+    const orig = `${this.state.originX}px ${this.state.originY}px`;
+
+    // Overlay position and size are exactly equal to the position and size of the transformed image
+    // except it uses different coordinates.
+    const overlay = {
+      top: `${this.originY - this.state.originY * this.state.zoom}px`,
+      left: `${this.originX - this.state.originX * this.state.zoom}px`,
+      width: `${this.imageWidth * this.state.zoom}px`,
+      height: `${this.imageHeight * this.state.zoom}px`
+    };
+    return (
+      <div className="cropper">
+        <div className="bounding-box" ref={this.boundingBox}>
+          <img src={this.props.source} className="preview" alt=""
+            style={{transform: t3d, transformOrigin: orig}} ref={this.preview} onLoad={this.initScaling} />
+          <div className="cutout circle" ref={this.cutout} />
+          <div className="overlay" style={overlay} ref={this.overlay} />
+        </div>
+        <div className="zoom-wrapper">
+          <input type="range" className="zoomer"
+            step="0.001" min={this.state.minZoom} max={this.state.maxZoom} value={this.state.zoom} onChange={this.onZoom} />
+        </div>
+      </div>
+    );
+  }
+}

src/widgets/doc-preview.jsx

@@ -45,6 +45,10 @@ export default class DocPreview extends React.PureComponent {
         </div>
         <SendMessage
           noInput={true}
+          tinode={this.props.tinode}
+          replyTo={this.props.replyTo}
+          formatter={this.props.formatter}
+          onCancelReply={this.props.onCancelReply}
           onSendMessage={this.handleSendDoc}
           onError={this.props.onError} />
       </div>

src/widgets/group-manager.jsx

@@ -165,6 +165,7 @@ class GroupManager extends React.Component {
         </div>
         <div className="panel-form-row">
           <ChipInput
+            tinode={this.props.tinode}
             chips={this.state.members}
             staticMembers={this.state.staticMembers}
             prompt="add members"
@@ -178,6 +179,7 @@ class GroupManager extends React.Component {
           </label>
         </div>
         <ContactList
+          tinode={this.props.tinode}
           contacts={this.props.contacts}
           myUserId={this.props.myUserId}
           topicSelected={this.state.selectedContacts}
@@ -188,12 +190,12 @@ class GroupManager extends React.Component {
           showUnread={false}
           onTopicSelected={this.handleContactSelected} />
         <div id="group-manager-buttons" className="panel-form-row">
-          <button className="primary" onClick={this.handleSubmit}>
-            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
-          </button>
           <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
         </div>
       </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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 export default class GroupSubs extends React.Component {
   constructor(props) {
@@ -22,8 +22,9 @@ export default class GroupSubs extends React.Component {
       usersOnline.push(
         <div className="avatar-box" key={sub.user}>
           <LetterTile
+            tinode={this.props.tinode}
             topic={sub.user}
-            avatar={makeImageDataUrl(sub.public ? sub.public.photo : null) || true}
+            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />
         </div>
       );

src/widgets/image-preview.jsx

@@ -73,6 +73,10 @@ export default class ImagePreview extends React.PureComponent {
           <SendMessage
             messagePrompt="add_image_caption"
             acceptBlank={true}
+            tinode={this.props.tinode}
+            replyTo={this.props.replyTo}
+            formatter={this.props.formatter}
+            onCancelReply={this.props.onCancelReply}
             onSendMessage={this.handleSendImage}
             onError={this.props.onError} />
           :

src/widgets/in-place-edit.jsx

@@ -1,6 +1,5 @@
 // In-place text editor. Shows text with an icon which toggles it into an input field.
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VisiblePassword from './visible-password.jsx';
 
@@ -8,6 +7,8 @@ export default class InPlaceEdit extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     this.state = {
       active: props.active,
       initialValue: props.value || '',
@@ -34,7 +35,7 @@ export default class InPlaceEdit extends React.Component {
   }
 
   handeTextChange(e) {
-    this.setState({value: e.target.value});
+    this.setState({value: e.target.value || ''});
   }
 
   handleKeyDown(e) {
@@ -47,21 +48,24 @@ export default class InPlaceEdit extends React.Component {
     }
   }
 
-  handleStartEditing() {
+   handleStartEditing() {
     if (!this.props.readOnly) {
-      ReactDOM.findDOMNode(this).focus();
-      this.setState({active: true});
+      this.setState({active: true}, () => {
+        if (this.selfRef.current) {
+          this.selfRef.current.focus();
+        }
+      });
     }
   }
 
   handleEditingFinished(event) {
-    if (this.props.required && !event.target.checkValidity()) {
+    const value = this.state.value.trim();
+    if (this.props.required && (!event.target.checkValidity() || !value)) {
       // Empty input
       this.setState({value: this.props.value, active: false});
       return;
     }
     this.setState({active: false});
-    let value = this.state.value.trim();
     if ((value || this.props.value) && (value !== this.props.value)) {
       this.props.onFinished(value);
     }
@@ -75,46 +79,47 @@ export default class InPlaceEdit extends React.Component {
   }
 
   render() {
-    if (this.state.active) {
-      var fieldType = this.props.type || 'text';
-    } else {
-      var spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
-      var spanClass = 'in-place-edit' +
-        (this.props.readOnly ? ' disabled' : '');
+    if (!this.state.active) {
+      let spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
+      let spanClass = 'in-place-edit' + (this.props.readOnly ? ' disabled' : '');
       if (!spanText) {
         spanText = this.props.placeholder;
         spanClass += ' placeholder';
       }
-      if (spanText.length > 20) {
-        // FIXME: this is wrong for RTL languages.
-        spanText = spanText.substring(0, 19) + '...';
+      if (!this.props.multiline || this.props.multiline == 1) {
+        spanClass += ' short';
       }
+
+      return (<span className={spanClass} onClick={this.handleStartEditing}>
+        <span>{spanText}</span>
+      </span>);
     }
-    return (
-      this.state.active ?
-        (fieldType == 'password' ?
-          <VisiblePassword
-            value={this.state.value}
-            placeholder={this.props.placeholder}
-            required={this.props.required ? 'required' : ''}
-            autoComplete={this.props.autoComplete}
-            autoFocus={true}
-            onFinished={this.handlePasswordFinished}/>
-          :
-          <input type={fieldType}
-            value={this.state.value}
-            placeholder={this.props.placeholder}
-            required={this.props.required ? 'required' : ''}
-            autoComplete={this.props.autoComplete}
-            autoFocus
-            onChange={this.handeTextChange}
-            onKeyDown={this.handleKeyDown}
-            onBlur={this.handleEditingFinished} />
-        )
-        :
-        <span className={spanClass} onClick={this.handleStartEditing}>
-          <span className="content">{spanText}</span>
-        </span>
-    );
+
+    let element;
+    const attr = {};
+    if (this.props.type == 'password') {
+      element = VisiblePassword;
+      attr.onFinished = this.handlePasswordFinished;
+    } else {
+      if (this.props.multiline > 1) {
+        element = 'textarea';
+        attr.rows = this.props.multiline;
+        attr.className = 'inplace-edit';
+      } else {
+        element = 'input';
+        attr.type = this.props.type || 'text';
+      }
+      attr.value = this.state.value;
+      attr.onChange = this.handeTextChange;
+      attr.onKeyDown = this.handleKeyDown;
+      attr.onBlur = this.handleEditingFinished;
+    }
+    attr.placeholder = this.props.placeholder;
+    attr.required = this.props.required ? 'required' : '';
+    attr.autoComplete = this.props.autoComplete;
+    attr.autoFocus = true;
+    attr.ref = this.selfRef;
+
+    return React.createElement(element, attr, null);
   }
 };

src/widgets/letter-tile.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import Tinode from 'tinode-sdk';
 
-import { stringHash } from '../lib/strformat.js';
+import { idToColorClass } from '../lib/strformat.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
 
 export default class LetterTile extends React.PureComponent {
   render() {
     let avatar;
     if (this.props.avatar === true) {
       const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
-      const iconColor = (isGroup ? 'light-color' : 'dark-color')
-        + (Math.abs(stringHash(this.props.topic)) % 16);
+      const iconColor = idToColorClass(this.props.topic, isGroup);
       if (this.props.topic && this.props.title && this.props.title.trim()) {
         const letter = this.props.title.trim().charAt(0);
         const className = 'lettertile ' + iconColor;
@@ -21,9 +21,10 @@ export default class LetterTile extends React.PureComponent {
           <i className={className}>group</i> : <i className={className}>person</i>;
       }
     } else if (this.props.avatar) {
+      const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
       // If avatar image is invalid, show a placeholder.
-      avatar = <img className="avatar" alt="avatar" src={this.props.avatar}
-        onError={(e)=>{e.target.onerror = null; e.target.src="/img/broken_image.png"}} />;
+      avatar = <img className="avatar" alt="avatar" src={url}
+        onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
     } else {
       avatar = null;
     }

src/widgets/load-spinner.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 export default class LoadSpinner extends React.PureComponent {
   render() {
+    const className = 'load-spinner-box' + (this.props.large ? ' large' : '')
+      + (this.props.clear ? ' clear' : '') + (this.props.centered ? ' centered' : '');
     return (this.props.show ?
-      <div className="load-spinner-box"><div className="loader-spinner"></div></div> : null);
+      <div className={className}><div className="loader-spinner"></div></div> : null);
   }
 }

src/widgets/more-button.jsx

@@ -1,29 +0,0 @@
-// Toggle [Title text >] -> [Title text v]
-
-import React from 'react';
-
-export default class MoreButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: props.open
-    };
-    this.handleToggle = this.handleToggle.bind(this);
-  }
-
-  handleToggle() {
-    const open = !this.state.open;
-    this.setState({open: open});
-    if (this.props.onToggle) {
-      this.props.onToggle(open);
-    }
-  }
-
-  render() {
-    return (<label className="small clean-clickable" onClick={this.handleToggle}>{this.props.title}...
-      {this.state.open ? <i className="material-icons">expand_more</i> :
-        <i className="material-icons">chevron_right</i>}
-      </label>);
-  }
-}

src/widgets/new-topic-group.jsx

@@ -5,34 +5,36 @@ import AvatarUpload from './avatar-upload.jsx';
 import CheckBox from './checkbox.jsx';
 import TagManager from './tag-manager.jsx';
 
-import { MAX_TITLE_LENGTH } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 
 export default class NewTopicGroup extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.fullName = React.createRef();
+
     this.state = {
-      fn: '', // full/formatted name
+      fullName: '', // full/formatted name
       private: '',
+      description: '',
       imageDataUrl: null,
       tags: [],
       isChannel: false
     };
 
-    this.handleFnChange = this.handleFnChange.bind(this);
-    this.handlePrivateChange = this.handlePrivateChange.bind(this);
+    this.handleFieldEdit = this.handleFieldEdit.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleTagsChanged = this.handleTagsChanged.bind(this);
     this.handleChannelToggle = this.handleChannelToggle.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleFnChange(e) {
-    this.setState({fn: e.target.value});
+  componentDidMount() {
+    // this.fullName.current.focus();
   }
 
-  handlePrivateChange(e) {
-    this.setState({private: e.target.value});
+  handleFieldEdit(name, e) {
+    this.setState({[name]: e.target.value || ''});
   }
 
   handleImageChanged(img) {
@@ -50,10 +52,11 @@ export default class NewTopicGroup extends React.PureComponent {
   handleSubmit(e) {
     e.preventDefault();
 
-    const fn = this.state.fn.trim().substring(0, MAX_TITLE_LENGTH);
+    const fn = this.state.fullName.trim().substring(0, MAX_TITLE_LENGTH);
     const comment = this.state.private.trim().substring(0, MAX_TITLE_LENGTH);
+    const description = this.state.description.trim().substring(0, MAX_TOPIC_DESCRIPTION_LENGTH);
     if (fn) {
-      this.props.onSubmit(fn, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
+      this.props.onSubmit(fn, description, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
     }
   }
 
@@ -64,8 +67,14 @@ export default class NewTopicGroup extends React.PureComponent {
     }
     return (
       <form className="panel-form" onSubmit={this.handleSubmit}>
-        <div className="panel-form-row">
-          <div className="panel-form-column">
+        <div className="panel-form-column">
+          <center>
+            <AvatarUpload
+              tinode={this.props.tinode}
+              onError={this.props.onError}
+              onImageChanged={this.handleImageChanged} />
+          </center>
+          <div className="group">
             <label className="small" htmlFor="new-topic-fn">
               <FormattedMessage id="label_topic_name" defaultMessage="Name"
                 description="Label for editing topic name" />
@@ -73,9 +82,11 @@ export default class NewTopicGroup extends React.PureComponent {
             <FormattedMessage id="topic_name_editing_placeholder" defaultMessage="Freeform name of the group"
               description="Prompt for entering topic name">{
               (placeholder) => <input type="text" id="new-topic-fn" placeholder={placeholder}
-                value={this.state.fn} onChange={this.handleFnChange} autoFocus required />
+                ref={this.fullName} value={this.state.fullName} onChange={this.handleFieldEdit.bind(this, 'fullName')}
+                autoFocus required tabIndex={0} />
             }</FormattedMessage>
-            <br />
+          </div>
+          <div className="group">
             <label className="small" htmlFor="new-topic-priv">
               <FormattedMessage id="label_private" defaultMessage="Private comment"
                 description="Label for editing 'private'" />
@@ -83,26 +94,35 @@ export default class NewTopicGroup extends React.PureComponent {
             <FormattedMessage id="private_editing_placeholder" defaultMessage="Visible to you only"
               description="Placeholder for editing 'private'">{
               (placeholder) => <input type="text" id="new-topic-priv" placeholder={placeholder}
-                value={this.state.private} onChange={this.handlePrivateChange} />
+                value={this.state.private} onChange={this.handleFieldEdit.bind(this, 'private')} tabIndex={1} />
+            }</FormattedMessage>
+          </div>
+          <div className="group">
+            <label className="small" htmlFor="new-topic-desc">
+              <FormattedMessage id="label_description" defaultMessage="Description"
+                description="Label for editing topic description" />
+            </label>
+            <FormattedMessage id="description_editing_placeholder" defaultMessage="Description (optional)"
+              description="Placeholder for editing topic description">{
+              (placeholder) => <input type="text" id="new-topic-desc" placeholder={placeholder}
+                value={this.state.description} onChange={this.handleFieldEdit.bind(this, 'description')} tabIndex={2} />
             }</FormattedMessage>
           </div>
-          <AvatarUpload
-            onError={this.props.onError}
-            onImageChanged={this.handleImageChanged} />
         </div>
         <div className="panel-form-row">
-          <CheckBox checked={this.state.isChannel} onChange={this.handleChannelToggle}/>&nbsp;
+          <CheckBox checked={this.state.isChannel} tabIndex={3} onChange={this.handleChannelToggle} />&nbsp;
           <label onClick={this.handleChannelToggle}><FormattedMessage id="channel_prompt"
             defaultMessage="This is a channel"
             description="Checkbox label when creating a channel" /></label>
         </div>
-        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
           description="Section title for TagManager">{
           (title) => <TagManager
+            tinode={this.props.tinode}
             tags={this.state.tags}
             activated={true}
             onTagsChanged={this.handleTagsChanged}
-            tinode={this.props.tinode}
+            tabIndex={4}
             title={title} />
         }</FormattedMessage>
         <div className="dialog-buttons">

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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 // Translatable permission names.
 const messages = defineMessages({
@@ -67,7 +67,7 @@ class PermissionsEditor extends React.Component {
 
   handleChange(val) {
     let mode = this.state.mode;
-    let idx = mode.indexOf(val);
+    const idx = mode.indexOf(val);
     if (idx == -1) {
       mode += val;
     } else {
@@ -78,8 +78,8 @@ class PermissionsEditor extends React.Component {
 
   handleSubmit() {
     // Normalize string, otherwise cannot check if mode has changed.
-    var mode = (this.state.mode || 'N').split('').sort().join('');
-    var before = (this.props.mode || 'N').split('').sort().join('')
+    const mode = (this.state.mode || 'N').split('').sort().join('');
+    const before = (this.props.mode || 'N').split('').sort().join('')
     if (mode !== before) {
       this.props.onSubmit(mode);
     } else {
@@ -132,10 +132,12 @@ class PermissionsEditor extends React.Component {
     return (
       <div className="panel-form-column">
         {this.props.userTitle ?
-          <ul className="contact-box"><Contact
+          <ul className="contact-box small"><Contact
+            tinode={this.props.tinode}
             item={this.props.item}
             title={this.props.userTitle}
-            avatar={makeImageDataUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
+            small={true}
+            avatar={makeImageUrl(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">

src/widgets/send-message.jsx

@@ -50,6 +50,8 @@ class SendMessage extends React.PureComponent {
     this.handleSend = this.handleSend.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleMessageTyping = this.handleMessageTyping.bind(this);
+
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
   }
 
   componentDidMount() {
@@ -141,6 +143,15 @@ class SendMessage extends React.PureComponent {
     this.setState(newState);
   }
 
+  handleQuoteClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.props.replyTo && this.props.onQuoteClick) {
+      const replyToSeq = this.props.replyTo.seq;
+      this.props.onQuoteClick(replyToSeq);
+    }
+  }
+
   render() {
     const {formatMessage} = this.props.intl;
     const prompt = this.props.disabled ?
@@ -148,7 +159,24 @@ class SendMessage extends React.PureComponent {
       (this.props.messagePrompt ?
         formatMessage(messages[this.props.messagePrompt]) :
         formatMessage(messages.type_new_message));
+
+    let quote = null;
+    if (this.props.replyTo) {
+      quote = Drafty.format(this.props.replyTo.content, this.props.formatter, this);
+    }
+
     return (
+      <div id="send-message-wrapper">
+      {quote ?
+        <div id="reply-quote-preview">
+          <div className="cancel">
+            <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+          </div>
+          {quote}
+        </div>
+      :
+      null}
+
       <div id="send-message-panel">
         {!this.props.disabled ?
           <>
@@ -182,6 +210,7 @@ class SendMessage extends React.PureComponent {
           <div id="writing-disabled">{prompt}</div>
         }
       </div>
+      </div>
     );
   }
 };

src/widgets/side-navbar.jsx

@@ -2,30 +2,44 @@ import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
 import ButtonBack from './button-back.jsx';
+import ContactBadges from './contact-badges.jsx';
 import MenuContacts from './menu-contacts.jsx';
 import MenuStart from './menu-start.jsx';
 
+import { sanitizeImageUrl } from '../lib/utils.js';
+
 export default class SideNavbar extends React.PureComponent {
   render() {
+    const icon_badges = [];
+    if (this.props.trustedBadges) {
+      this.props.trustedBadges.map((b) => {
+        icon_badges.push({icon: b, color: 'badge-inv'});
+      });
+    }
+    let avatar = null;
+    if (this.props.tinode) {
+      avatar = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
+    }
     return (
-        <div id="side-caption-panel" className="caption-panel">
-          {this.props.onCancel ? <ButtonBack onBack={this.props.onCancel} /> : null}
-          {this.props.avatar ?
-            <div id="self-avatar" className="avatar-box">
-              <LetterTile
-                avatar={this.props.avatar}
-                topic={this.props.myUserId}
-                title={this.props.title} />
-            </div>
-            :
-            null}
-          <div id="sidepanel-title" className="panel-title">{this.props.title}</div>
-          {this.props.state === 'login' ?
-              <MenuStart onSignUp={this.props.onSignUp} onSettings={this.props.onSettings} /> :
-            this.props.state === 'contacts' ?
-              <MenuContacts onNewTopic={this.props.onNewTopic} onSettings={this.props.onSettings} /> :
-            null}
-        </div>
+      <div id="side-caption-panel" className="caption-panel">
+        {this.props.onCancel ? <ButtonBack onBack={this.props.onCancel} /> : null}
+        {avatar ?
+          <div id="self-avatar" className="avatar-box">
+            <LetterTile
+              tinode={this.props.tinode}
+              avatar={avatar}
+              topic={this.props.myUserId}
+              title={this.props.title} />
+          </div>
+          :
+          null}
+        <div id="sidepanel-title" className="panel-title">{this.props.title}<ContactBadges badges={icon_badges}/></div>
+        {this.props.state === 'login' ?
+            <MenuStart onSignUp={this.props.onSignUp} onSettings={this.props.onSettings} /> :
+          this.props.state === 'contacts' ?
+            <MenuContacts onNewTopic={this.props.onNewTopic} onSettings={this.props.onSettings} /> :
+          null}
+      </div>
     );
   }
 };

src/widgets/tag-manager.jsx

@@ -12,7 +12,7 @@ export default class TagManager extends React.Component {
     super(props);
 
     this.state = {
-      tags: this.props.tags,
+      tags: this.props.tags || [],
       tagInput: '',
       activated: this.props.activated
     };
@@ -25,8 +25,9 @@ export default class TagManager extends React.Component {
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (!arrayEqual(nextProps.tags, prevState.tags) && !prevState.activated) {
-      return {tags: nextProps.tags};
+    const tags = nextProps.tags || [];
+    if (!arrayEqual(tags, prevState.tags) && !prevState.activated) {
+      return {tags: tags};
     }
     return null;
   }
@@ -75,11 +76,11 @@ export default class TagManager extends React.Component {
   handleSubmit() {
     // Add unprocessed input to tags, submit the list.
     this.props.onSubmit(this.handleAddTag(this.state.tagInput.trim()));
-    this.setState({activated: false, tags: this.props.tags});
+    this.setState({activated: false, tags: this.props.tags || []});
   }
 
   handleCancel() {
-    this.setState({activated: false, tagInput: '', tags: this.props.tags});
+    this.setState({activated: false, tagInput: '', tags: this.props.tags || []});
     if (this.props.onCancel) {
       this.props.onCancel();
     }
@@ -116,9 +117,11 @@ export default class TagManager extends React.Component {
           <FormattedMessage id="tags_editor_no_tags" defaultMessage="Add some tags"
             description="Tag editor prompt when no tags are found.">{
             (add_tags_prompt) => <ChipInput
+              tinode={this.props.tinode}
               chips={tags}
               avatarDisabled={true}
               prompt={add_tags_prompt}
+              tabIndex={this.props.tabIndex}
               onEnter={this.handleAddTag}
               onFocusLost={this.handleAddTag}
               onCancel={this.handleCancel}

src/widgets/topic-common.jsx

@@ -0,0 +1,180 @@
+// View for editing topic (including 'me' topic) parameters.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import TopicDescEdit from '../widgets/topic-desc-edit.jsx';
+
+import { arrayEqual, asEmail, asPhone } from '../lib/utils.js';
+
+export default class TopicCommon extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    const acs = topic.getAccessMode();
+    this.state = {
+      isMe: this.props.topic == 'me',
+      owner: acs && acs.isOwner(),
+      credentials: (topic.getCredentials ? topic.getCredentials() : null) || [],
+      addCredActive: false,
+      addCredInvalid: false,
+      newCred: '',
+      tags: []
+    };
+
+    this.previousTagsUpdated = undefined;
+
+    this.onTagsUpdated = this.onTagsUpdated.bind(this);
+    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+    this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
+    this.handleCredChange = this.handleCredChange.bind(this);
+    this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
+    this.handleCredEntered = this.handleCredEntered.bind(this);
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    topic.onCredsUpdated = this.tnCredsUpdated;
+
+    if (topic.onTagsUpdated != this.onTagsUpdated) {
+      if (topic.getType() == 'grp') {
+        this.previousTagsUpdated = topic.onTagsUpdated;
+        topic.onTagsUpdated = this.onTagsUpdated;
+      } else {
+        this.previousTagsUpdated = undefined;
+      }
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    topic.onCredsUpdated = undefined;
+    topic.onTagsUpdated = this.previousTagsUpdated;
+  }
+
+  tnCredsUpdated(creds) {
+    this.setState({credentials: creds || []});
+  }
+
+  handleCredChange(e) {
+    this.setState({newCred: e.target.value, addCredInvalid: false});
+  }
+
+  handleCredKeyDown(e) {
+    if (e.keyCode === 27) {
+      // Escape pressed
+      this.setState({newCred: '', addCredActive: false});
+    } else if (e.keyCode === 13) {
+      // Enter pressed
+      this.handleCredEntered(e);
+    }
+  }
+
+  handleCredEntered(e) {
+    const value = this.state.newCred.trim();
+    if (!value) {
+      this.setState({addCredActive: false, addCredInvalid: false});
+      return;
+    }
+
+    let val = asPhone(value);
+    let method;
+    if (val) {
+      method = 'tel';
+    } else {
+      val = asEmail(value);
+      if (val) {
+        method = 'email';
+      }
+    }
+    if (method) {
+      this.props.onCredAdd(method, val);
+      this.setState({addCredActive: false, newCred: ''});
+    } else {
+      this.setState({addCredInvalid: true});
+    }
+  }
+
+  // Server informs that the tags have been updated.
+  onTagsUpdated(tags) {
+    this.setState({tags: tags});
+
+    if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
+      this.previousTagsUpdated(tags);
+    }
+  }
+
+  // Request server to change tags.
+  handleTagsUpdated(tags) {
+    if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
+      this.props.onTopicTagsUpdateRequest(this.props.topic, tags);
+    }
+  }
+
+  render() {
+    const credentials = [];
+    if (this.state.isMe) {
+      this.state.credentials.map((cred) => {
+        credentials.push(
+          <div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
+            <span> {!cred.done ?
+              <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
+                <FormattedMessage id="validate_credential_action" defaultMessage="confirm"
+                  description="Validate credentail call to action" />
+              </a>
+            : null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
+              className="material-icons gray">delete_outline</i></a></span>
+          </div>
+        );
+      });
+    }
+
+    return (
+      <div className="scrollable-panel">
+        <TopicDescEdit
+          tinode={this.props.tinode}
+          topic={this.props.topic}
+          onUpdateTopicDesc={this.props.onUpdateTopicDesc}
+          onUpdateTags={this.handleTagsUpdated}
+          onError={this.props.onError} />
+        {this.state.isMe ?
+          <>
+            <div className="hr" />
+            <div className="panel-form-column">
+              <label className="small">
+                <FormattedMessage id="label_user_contacts" defaultMessage="Contacts:"
+                description="Label for user contacts" />
+              </label>
+              <div className="quoted">
+                {credentials}
+                {this.state.addCredActive ?
+                  <input type="text" value={this.state.value}
+                    className={this.state.addCredInvalid ? 'invalid' : null}
+                    placeholder="Phone number or email" required="required" autoFocus
+                    onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
+                  : null}
+                <div>
+                  <a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>
+                    <i className="material-icons">add</i>
+                    <FormattedMessage id="button_add_another" defaultMessage="Add another" description="Call to action [+ add another]" />
+                  </a></div>
+              </div>
+            </div>
+          </>
+        : null
+      }
+      </div>
+    );
+  }
+};

src/widgets/topic-desc-edit.jsx

@@ -0,0 +1,285 @@
+// Widget for editing topic description.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Tinode from 'tinode-sdk';
+
+import AvatarCrop from './avatar-crop.jsx';
+import AvatarUpload from './avatar-upload.jsx';
+import InPlaceEdit from './in-place-edit.jsx';
+import TagManager from './tag-manager.jsx';
+
+import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
+  MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { arrayEqual, theCard } from '../lib/utils.js';
+
+export default class TopicDescEdit extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    const acs = topic.getAccessMode();
+    this.state = {
+      isMe: Tinode.isMeTopicName(this.props.topic),
+      owner: acs && acs.isOwner(),
+      fullName: topic.public ? topic.public.fn : undefined,
+      private: topic.private ? topic.private.comment : null,
+      description: topic.public ? topic.public.note : undefined,
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      tags: topic.tags() || [],
+      newAvatar: null,
+      newAvatarMime: null
+    };
+
+    this.previousOnTags = null;
+
+    this.tnNewTags = this.tnNewTags.bind(this);
+    this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
+    this.handleImageUpdated = this.handleImageUpdated.bind(this);
+    this.handleAvatarCropped = this.handleAvatarCropped.bind(this);
+    this.handlePrivateUpdate = this.handlePrivateUpdate.bind(this);
+    this.handleDescriptionUpdate = this.handleDescriptionUpdate.bind(this);
+    this.uploadAvatar = this.uploadAvatar.bind(this);
+    this.handleAvatarCropCancel = this.handleAvatarCropCancel.bind(this);
+    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+  }
+
+  componentDidMount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    this.previousOnTags = topic.onTagsUpdated;
+    topic.onTagsUpdated = this.tnNewTags;
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    topic.onTagsUpdated = this.previousOnTags;
+  }
+
+  tnNewTags(tags) {
+    this.setState({tags: tags});
+  }
+
+  handleFullNameUpdate(fn) {
+    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
+    if (fn && this.state.fullName !== fn) {
+      this.setState({fullName: fn});
+      this.props.onUpdateTopicDesc(this.props.topic, theCard(fn, null));
+    }
+  }
+
+  handlePrivateUpdate(comment) {
+    comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
+    if (this.state.private !== comment) {
+      this.setState({private: comment});
+      this.props.onUpdateTopicDesc(this.props.topic, null, comment || Tinode.DEL_CHAR);
+    }
+  }
+
+  handleDescriptionUpdate(desc) {
+    desc = desc.trim().substring(0, MAX_TOPIC_DESCRIPTION_LENGTH);
+    if (desc) {
+      this.setState({description: desc});
+      this.props.onUpdateTopicDesc(this.props.topic, theCard(null, null, null, desc));
+    }
+  }
+
+  // AvatarUpload widget has changed the avatar: received a new file or deleted the avatar.
+  handleImageUpdated(mime, img) {
+    // This will show the AvatarCropView is img is not null.
+    this.setState({newAvatar: img, newAvatarMime: mime});
+    if (!img) {
+      // Deleting the avatar.
+      this.setState({avatar: null});
+      this.props.onUpdateTopicDesc(this.props.topic, theCard(null, Tinode.DEL_CHAR));
+    }
+  }
+
+  // AvatarCropView calls this method when the user has cropped the image.
+  handleAvatarCropped(mime, blob, width, height) {
+    const url = blob ? URL.createObjectURL(blob) : null;
+    this.setState({avatar: url, newAvatar: null, newAvatarMime: null});
+    if (blob) {
+      this.uploadAvatar(mime, blob, width, height);
+    }
+  }
+
+  // Utility method for converting cropped avatar blob to bytes for sending inband or
+  // for uploading it to the server out of band.
+  uploadAvatar(mime, blob, width, height) {
+    const readyToUpload = (mime, blob, width, height) => {
+      if (blob.size > MAX_AVATAR_BYTES) {
+        // Too large to send inband - uploading out of band and sending as a link.
+        const uploader = this.props.tinode.getLargeFileHelper();
+
+        this.setState({uploading: true});
+        uploader.upload(blob)
+          .then((url) => {
+            this.props.onUpdateTopicDesc(this.props.topic, theCard(null, url));
+          })
+          .catch((err) => {
+            this.props.onError(err, 'err');
+          })
+          .finally(() => {
+            this.setState({uploading: false});
+          });
+      } else {
+        this.setState({uploading: true});
+        // Convert blob to base64-encoded bits.
+        blobToBase64(blob, (unused, base64bits) => {
+          const du = makeImageUrl({data: base64bits, type: mime});
+          this.setState({source: du});
+          this.props.onUpdateTopicDesc(this.props.topic, theCard(null, du));
+          this.setState({uploading: false});
+        });
+      }
+    };
+
+    if (width > AVATAR_SIZE || height > AVATAR_SIZE || width != height) {
+      // Avatar is not square or too large even after cropping. Shrink it and make square.
+      imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
+        readyToUpload,
+        (err) => {
+          this.props.onError(err, 'err');
+        });
+    } else {
+      readyToUpload(mime, blob, width, height);
+    }
+  }
+
+  handleAvatarCropCancel(img) {
+    this.setState({newAvatar: null, newAvatarMime: null});
+  }
+
+  handleTagsUpdated(tags) {
+    // Check if tags have actually changed.
+    if (arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
+      return;
+    }
+    this.props.onUpdateTags(tags);
+  }
+
+  render() {
+    if (this.state.newAvatar) {
+      return (
+        <AvatarCrop
+          avatar={this.state.newAvatar}
+          mime={this.state.newAvatarMime}
+          onSubmit={this.handleAvatarCropped}
+          onCancel={this.handleAvatarCropCancel}
+          onError={this.props.onError} />
+      );
+    }
+
+    const editable = this.state.isMe || this.state.owner;
+
+    return (
+      <>
+      <div className="panel-form-column">
+        <center>
+          <AvatarUpload
+            tinode={this.props.tinode}
+            avatar={this.state.avatar}
+            readOnly={!editable}
+            uid={this.props.topic}
+            title={this.state.fullName}
+            onImageUpdated={this.handleImageUpdated}
+            onError={this.props.onError} />
+        </center>
+        {this.state.isMe ?
+          <div className="group">
+            <label className="small">
+              <FormattedMessage id="label_your_name" defaultMessage="Your name"
+              description="Label for full name editing" />
+            </label>
+            <div>
+              <FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
+                description="Input placeholder for person's full name">{
+                (full_name_placeholder) => <InPlaceEdit
+                  placeholder={full_name_placeholder}
+                  value={this.state.fullName}
+                  required={true}
+                  onFinished={this.handleFullNameUpdate} />
+              }</FormattedMessage>
+            </div>
+          </div>
+        :
+          <>
+            <div className="group">
+              <div><label className="small">
+                <FormattedMessage id="label_topic_name" defaultMessage="Name"
+                  description="Label for editing topic name" />
+              </label></div>
+              <div>
+                <FormattedMessage id="topic_name_editing_placeholder" defaultMessage="Freeform name of the group"
+                  description="Prompt for entering topic name">{
+                  (group_name_placeholder) => <InPlaceEdit
+                    placeholder={group_name_placeholder}
+                    readOnly={!editable}
+                    value={this.state.fullName}
+                    required={true}
+                    onFinished={this.handleFullNameUpdate} />
+                }</FormattedMessage>
+              </div>
+            </div>
+            <div className="group">
+              <div>
+                <label className="small">
+                  <FormattedMessage id="label_private" defaultMessage="Private comment"
+                    description="Label for editing 'private'" />
+                </label>
+              </div>
+              <div>
+                <FormattedMessage id="private_editing_placeholder" defaultMessage="Visible to you only"
+                  description="Placeholder for editing 'private'">{
+                  (private_placeholder) => <InPlaceEdit
+                    placeholder={private_placeholder}
+                    value={this.state.private}
+                    onFinished={this.handlePrivateUpdate} />
+                }</FormattedMessage>
+              </div>
+            </div>
+          </>
+        }
+        {editable || this.state.description ?
+          <div className="group">
+            <div><label className="small">
+              <FormattedMessage id="label_description" defaultMessage="Description"
+                description="Label for editing topic description" />
+            </label></div>
+            <div>
+              <FormattedMessage id="description_editing_placeholder"
+                defaultMessage="Description (optional)"
+                description="Placeholder for editing topic description">{
+                (private_placeholder) => <InPlaceEdit
+                  placeholder={private_placeholder}
+                  readOnly={!editable}
+                  value={this.state.description}
+                  multiline={2}
+                  onFinished={this.handleDescriptionUpdate} />
+              }</FormattedMessage>
+            </div>
+          </div>
+          : null
+        }
+      </div>
+      {editable ?
+        <>
+          <div className="hr" />
+          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
+            description="Section title for TagManager">{
+              (title_tag_manager) => <TagManager
+                tinode={this.props.tinode}
+                title={title_tag_manager}
+                activated={false}
+                tags={this.state.tags}
+                onSubmit={this.handleTagsUpdated} />
+          }</FormattedMessage>
+        </>
+        : null
+      }
+      </>
+    );
+  }
+};

src/widgets/topic-security.jsx

@@ -0,0 +1,252 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import InPlaceEdit from './in-place-edit.jsx';
+
+import { NO_ACCESS_MODE } from '../config.js';
+
+const messages = defineMessages({
+  clear_messages: {
+    id: 'action_clear_messages',
+    defaultMessage: 'Clear Messages',
+    description: 'Flat button [Clear Messages] (soft-delete messages)'
+  },
+  clear_messages_warning: {
+    id: 'clear_messages_warning',
+    defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
+    description: 'Alert dialog warning when deleting all messages.'
+  },
+  delete_messages: {
+    id: 'action_delete_messages',
+    defaultMessage: 'Clear Messages for All',
+    description: 'Flat button [Clear for All] (hard-delete all messages)'
+  },
+  delete_messages_warning: {
+    id: 'delete_messages_warning',
+    defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
+    description: 'Alert dialog warning when hard-deleting all messages.'
+  },
+  topic_delete: {
+    id: 'topic_delete',
+    defaultMessage: 'Delete Conversation',
+    description: 'Alert title when deleting the topic.'
+  },
+  topic_delete_warning: {
+    id: 'topic_delete_warning',
+    defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',
+    description: 'Alert warning when deleting entire topic'
+  },
+  leave_chat: {
+    id: 'action_leave_chat',
+    defaultMessage: 'Leave Conversation',
+    description: 'Flat button [Leave Conversation]'
+  },
+  leave_chat_warning: {
+    id: 'leave_chat_warning',
+    defaultMessage: 'Are you sure you want to leave this conversation?',
+    description: 'Alert dialog warning when unsubscribing from a chat.'
+  },
+  block_contact: {
+    id: 'action_block_contact',
+    defaultMessage: "Block Contact",
+    description: "Flat button [Block Contact]"
+  },
+  block_contact_warning: {
+    id: 'block_contact_warning',
+    defaultMessage: 'Are you sure you want to block this contact?',
+    description: 'Alert dialog warning when blocking a contact.'
+  },
+  report_chat: {
+    id: 'action_report_chat',
+    defaultMessage: 'Report Conversation',
+    description: 'Flat button [Report Group]'
+  },
+  report_chat_warning: {
+    id: 'report_chat_warning',
+    defaultMessage: 'Are you sure you want to block and report this conversation?',
+    description: 'Alert dialog warning when reporting a conversation for abuse'
+  },
+  other_user: {
+    id: 'label_other_user',
+    defaultMessage: 'Other',
+    description: 'Label for the other user when the user is unnamed'
+  },
+});
+
+class TopicSecurity extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleDeleteTopic = this.handleDeleteTopic.bind(this);
+    this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
+    this.handleLeave = this.handleLeave.bind(this);
+    this.handleBlock = this.handleBlock.bind(this);
+    this.handleReport = this.handleReport.bind(this);
+  }
+
+  handleDeleteTopic(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.topic_delete), // title
+      formatMessage(messages.topic_delete_warning), // content
+      (() => { this.props.onDeleteTopic(this.props.topic); }), // onConfirm
+      null, // "OK"
+      true, // Show Reject button
+      null  // "Cancel"
+    );
+  }
+
+  handleDeleteMessages(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages), // title
+      formatMessage(this.props.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
+      (() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
+      null, // "OK"
+      true, // Show Reject button
+      null  // "Cancel"
+    );
+  }
+
+  handleLeave(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.leave_chat), // title
+      formatMessage(messages.leave_chat_warning), // content
+      (() => { this.props.onLeaveTopic(this.props.topic); }), // onConfirm
+      null, // "OK"
+      true, // Show Reject button
+      null  // "Cancel"
+    );
+  }
+
+  handleBlock(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.block_contact), // title
+      formatMessage(messages.block_contact_warning), // content
+      (() => { this.props.onBlockTopic(this.props.topic); }), // onConfirm
+      null, // "OK"
+      true, // Show Reject button
+      null  // "Cancel"
+    );
+  }
+
+  handleReport(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.report_chat), // title
+      formatMessage(messages.report_chat_warning), // content
+      (() => { this.props.onReportTopic(this.props.topic); }), // onConfirm
+      null, // "OK"
+      true, // Show Reject button
+      null  // "Cancel"
+    );
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          {!this.props.channel ?
+            <a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
+              <i className="material-icons">delete_outline</i> &nbsp;{
+                formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages)
+              }
+            </a>
+            :
+            null
+          }
+          {this.props.owner ?
+            <a href="#" className="danger flat-button" onClick={this.handleDeleteTopic}>
+              <i className="material-icons">delete</i> &nbsp;{formatMessage(messages.topic_delete)}
+            </a>
+            :
+            <a href="#" className="danger flat-button" onClick={this.handleLeave}>
+              <i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
+            </a>
+          }
+          {!this.props.groupTopic ?
+            <a href="#" className="danger flat-button" onClick={this.handleBlock}>
+              <i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
+            </a>
+            :
+            null
+          }
+          {!this.props.owner ?
+            <a href="#" className="danger flat-button" onClick={this.handleReport}>
+              <i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
+            </a>
+            :
+            null
+          }
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          {this.props.groupTopic ?
+            <>
+              <div className="group">
+                <label>
+                  <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
+                    description="Label for current user permissions" />
+                </label> <tt className="clickable"
+                  onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
+                  {this.props.access}
+                </tt>
+              </div>
+              <div className="group">
+                <div>
+                  <label className="small">
+                    <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
+                    description="Label for default access mode" />
+                  </label>
+                </div>
+                <div className="quoted">
+                  <div>Auth: <tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('auth')}}>{this.props.auth}</tt>
+                  </div>
+                  <div>Anon: <tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('anon')}}>{this.props.anon}</tt>
+                  </div>
+                </div>
+              </div>
+            </>
+            :
+            <div className="group">
+              <div>
+                <label className="small">
+                  <FormattedMessage id="label_permissions" defaultMessage="Permissions:"
+                    description="Section title" />
+                </label>
+              </div>
+              <div className="quoted">
+                <div>
+                  <FormattedMessage id="label_you" defaultMessage="You:"
+                    description="Label for the current user" /> <tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
+                    {this.props.access}
+                  </tt>
+                </div>
+                <div>{this.props.fullName ? this.props.fullName : formatMessage(messages.other_user)}:
+                  &nbsp;<tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('given')}}>
+                    {this.props.modeGiven2}
+                  </tt>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    );
+  }
+};
+
+export default injectIntl(TopicSecurity);

version.js

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