trusted badges work as expected

src/views/edit-account-view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
 
 import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
@@ -32,6 +33,7 @@ export default class EditAccountView extends React.Component {
                 description="Label for user address (ID)" /></label>&nbsp;
               <tt>{this.props.myUserId}</tt>
             </div>
+            <BadgeList trustedBadges={this.props.trustedBadges} />
           </div>
           <AvatarUpload
             avatar={this.state.avatar}

src/views/info-view.jsx

@@ -5,6 +5,7 @@ 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';
@@ -120,6 +121,7 @@ class InfoView extends React.Component {
       anon: null,
       contactList: [],
       tags: [],
+      trustedBadges: [],
       showMemberPanel: false,
       showPermissionEditorFor: undefined,
       moreInfoExpanded: false,
@@ -219,6 +221,14 @@ 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(),
@@ -228,6 +238,7 @@ class InfoView extends React.Component {
 
       fullName: topic.public ? topic.public.fn : undefined,
       avatar: makeImageDataUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
       private: topic.private ? topic.private.comment : null,
       address: topic.name,
       groupTopic: topic.isGroupType(),
@@ -586,6 +597,7 @@ class InfoView extends React.Component {
                       onFinished={this.handlePrivateUpdate} />
                   }</FormattedMessage>
                 </div>
+                <BadgeList trustedBadges={this.state.trustedBadges} />
               </div>
               <AvatarUpload
                 avatar={this.state.avatar}

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';
@@ -213,6 +214,9 @@ class MessagesView extends React.Component {
         topic: null,
         title: '',
         avatar: null,
+        isVerified: false,
+        isStaff: false,
+        isDangerous: false,
         docPreview: null,
         imagePreview: null,
         imagePostview: null,
@@ -825,6 +829,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;
@@ -929,7 +945,7 @@ 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 ?

src/views/sidepanel-view.jsx

@@ -122,6 +122,7 @@ class SidepanelView extends React.Component {
           state={view}
           title={title}
           avatar={avatar}
+          trustedBadges={this.props.trustedBadges}
           myUserId={this.props.myUserId}
           onSignUp={this.props.onSignUp}
           onSettings={this.props.onSettings}
@@ -162,6 +163,7 @@ class SidepanelView extends React.Component {
           <EditAccountView
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
+            trustedBadges={this.props.trustedBadges}
             onBasicNavigate={this.props.onBasicNavigate} /> :
 
           view === 'general' ?

src/views/tinode-web.jsx

@@ -172,6 +172,7 @@ class TinodeWeb extends React.Component {
       sidePanelSelected: 'login',
       sidePanelTitle: null,
       sidePanelAvatar: null,
+      myTrustedBadges: [],
       loadSpinnerVisible: false,
 
       login: '',
@@ -655,6 +656,17 @@ class TinodeWeb extends React.Component {
           sidePanelAvatar: makeImageDataUrl(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) {
         this.setState({
           incognitoMode: !desc.acs.isPresencer()
@@ -1532,6 +1544,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}