blocked chats display

css/base.css

@@ -37,6 +37,11 @@ a.red:focus {
   color: #F44336;
 }
 
+a.gray:hover,
+a.gray:focus {
+  color: #999;
+}
+
 a.flat-button {
   display: flex;
   align-items: center;

src/i18n/en.json

@@ -14,6 +14,7 @@
   "button_logout": "Logout",
   "button_delete_account": "Delete account",
   "label_default_access_mode": "Default access mode:",
+  "blocked_contacts_link": "Blocked contacts ({count})",
   "link_contact_us": "Contact Us",
   "link_terms_of_service": "Terms of Service",
   "link_privacy_policy": "Privacy Policy",
@@ -93,6 +94,7 @@
   "sidepanel_title_cred": "Confirm Credentials",
   "sidepanel_title_reset": "Reset Password",
   "sidepanel_title_archive": "Archived Chats",
+  "sidepanel_title_blocked": "Blocked Chats",
   "update_available": "Update available. <a href=\"\">Reload</a>.",
   "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
   "reconnect_now": "Try now",

src/i18n/ru.json

@@ -163,5 +163,7 @@
   "label_server_address": "Адрес сервера:",
   "button_edit": "Редактировать",
   "button_add_another": "Добавить",
-  "sidepanel_title_acc_general": "Общие настройки"
+  "sidepanel_title_acc_general": "Общие настройки",
+  "blocked_contacts_link": "Заблокированные ({count})",
+  "sidepanel_title_blocked": ":!![MISSING]!!:Blocked Chats"
 }

src/i18n/zh.json

@@ -163,5 +163,7 @@
   "label_server_address": "服务器地址：",
   "button_edit": "编辑",
   "button_add_another": "加上另一个",
-  "sidepanel_title_acc_general": "常用设定"
+  "sidepanel_title_acc_general": "常用设定",
+  "blocked_contacts_link": "封锁的联络人 ({count})",
+  "sidepanel_title_blocked": "被阻止的聊天"
 }

src/messages.json

@@ -15,6 +15,7 @@
     "button_logout": "Logout",
     "button_delete_account": "Delete account",
     "label_default_access_mode": "Default access mode:",
+    "blocked_contacts_link": "Blocked contacts ({count})",
     "link_contact_us": "Contact Us",
     "link_terms_of_service": "Terms of Service",
     "link_privacy_policy": "Privacy Policy",
@@ -94,6 +95,7 @@
     "sidepanel_title_cred": "Confirm Credentials",
     "sidepanel_title_reset": "Reset Password",
     "sidepanel_title_archive": "Archived Chats",
+    "sidepanel_title_blocked": "Blocked Chats",
     "update_available": "Update available. <a href=\"\">Reload</a>.",
     "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
     "reconnect_now": "Try now",
@@ -331,7 +333,8 @@
     "label_server_address": "Адрес сервера:",
     "button_edit": "Редактировать",
     "button_add_another": "Добавить",
-    "sidepanel_title_acc_general": "Общие настройки"
+    "sidepanel_title_acc_general": "Общие настройки",
+    "blocked_contacts_link": "Заблокированные ({count})"
   },
   "zh": {
     "archived_contacts": "已归档联系人 ({count})",
@@ -498,6 +501,8 @@
     "label_server_address": "服务器地址：",
     "button_edit": "编辑",
     "button_add_another": "加上另一个",
-    "sidepanel_title_acc_general": "常用设定"
+    "sidepanel_title_acc_general": "常用设定",
+    "blocked_contacts_link": "封锁的联络人 ({count})",
+    "sidepanel_title_blocked": "被阻止的聊天"
   }
 }

src/views/acc-security-view.jsx

@@ -23,11 +23,18 @@ class AccSecurityView extends React.Component {
     super(props);
 
     const me = this.props.tinode.getMeTopic();
+    let blockedCount = 0;
+    me.contacts((c) => {
+      if (c.acs && !c.acs.isJoiner()) {
+        blockedCount ++;
+      }
+    });
     const defacs = me.getDefaultAccess();
     this.state = {
       auth: defacs ? defacs.auth : null,
       anon: defacs ? defacs.anon : null,
       showPermissionEditorFor: undefined,
+      blockedCount: blockedCount,
     };
 
     this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
@@ -127,6 +134,18 @@ class AccSecurityView extends React.Component {
                 onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
             </div>
           </div>
+          {this.state.blockedCount > 0 ?
+            <>
+              <div className="hr" />
+              <div className="panel-form-row">
+                <i className="material-icons">block</i>&nbsp;
+                <a href="#" className="gray" onClick={(e) => {e.preventDefault(); this.props.onShowBlocked();}}>
+                  <FormattedMessage id="blocked_contacts_link" defaultMessage="Blocked contacts ({count})"
+                    values={{ count: this.state.blockedCount }} description="Blocked contacts link" />
+                </a>
+              </div>
+            </>
+            : null }
         </div>
       }</React.Fragment>
     );

src/views/contacts-view.jsx

@@ -28,6 +28,15 @@ export default class ContactsView extends React.Component {
     let unreadThreads = 0;
     let archivedCount = 0;
     props.chatList.map((c) => {
+      const blocked = c.acs && !c.acs.isJoiner();
+      // Show only blocked contacts only when props.blocked == true.
+      if (blocked && props.blocked) {
+        contacts.push(c);
+      }
+      if (blocked || props.blocked) {
+        return;
+      }
+
       if (c.private && c.private.arch) {
         if (props.archive) {
           contacts.push(c);
@@ -39,7 +48,8 @@ export default class ContactsView extends React.Component {
         unreadThreads += c.unread > 0 ? 1 : 0;
       }
     });
-    contacts.sort(function(a, b) {
+
+    contacts.sort((a, b) => {
       return (b.touched || 0) - (a.touched || 0);
     });
 
@@ -58,7 +68,9 @@ export default class ContactsView extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevProps.chatList != this.props.chatList || prevProps.archive != this.props.archive) {
+    if (prevProps.chatList != this.props.chatList ||
+        prevProps.archive != this.props.archive ||
+        prevProps.blocked != this.props.blocked) {
       const newState = ContactsView.deriveStateFromProps(this.props);
       this.setState(newState);
       if (newState.unreadThreads != prevState.unreadThreads) {

src/views/sidepanel-view.jsx

@@ -79,6 +79,11 @@ const messages = defineMessages({
     id: 'sidepanel_title_archive',
     description: 'Sidepanel title for ContactsView-Archive.',
     defaultMessage: 'Archived Chats'
+  },
+  'blocked': {
+    id: 'sidepanel_title_blocked',
+    description: 'Sidepanel title for ContactsView-Blocked.',
+    defaultMessage: 'Blocked Chats'
   }
 });
 
@@ -190,20 +195,22 @@ class SidepanelView extends React.Component {
             onUpdateAccount={this.props.onUpdateAccount}
             onLogout={this.props.onLogout}
             onDeleteAccount={this.props.onDeleteAccount}
-            onShowAlert={this.props.onShowAlert} /> :
+            onShowAlert={this.props.onShowAlert}
+            onShowBlocked={this.props.onShowBlocked} /> :
 
           view === 'support' ?
           <AccSupportView
             serverAddress={this.props.serverAddress}
             serverVersion={this.props.serverVersion} /> :
 
-          (view === 'contacts' || view == 'archive') ?
+          (view === 'contacts' || view == 'archive' || view == 'blocked') ?
           <ContactsView
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
             connected={this.props.connected}
             topicSelected={this.props.topicSelected}
             archive={view == 'archive'}
+            blocked={view == 'blocked'}
             chatList={this.props.chatList}
             showContextMenu={this.props.showContextMenu}
             onTopicSelected={this.props.onTopicSelected}

src/views/tinode-web.jsx

@@ -84,6 +84,7 @@ class TinodeWeb extends React.Component {
     this.handleSettings = this.handleSettings.bind(this);
     this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
     this.handleShowArchive = this.handleShowArchive.bind(this);
+    this.handleShowBlocked = this.handleShowBlocked.bind(this);
     this.handleToggleMessageSounds = this.handleToggleMessageSounds.bind(this);
     this.handleCredAdd = this.handleCredAdd.bind(this);
     this.handleCredDelete = this.handleCredDelete.bind(this);
@@ -301,7 +302,7 @@ class TinodeWeb extends React.Component {
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
       if (['register','settings','edit','notif','security','support','general',
-          'cred','reset','newtpk','archive','contacts',''].includes(hash.path[0])) {
+          'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
         this.setState({sidePanelSelected: hash.path[0]});
       } else {
         console.log("Unknown sidepanel view", hash.path[0]);
@@ -376,7 +377,7 @@ class TinodeWeb extends React.Component {
   handleConnected() {
     const params = this.tinode.getServerInfo();
     this.setState({
-      serverVersion: params.ver + ' ' + (params.build ? params.build : 'none') + '; '
+      serverVersion: params.ver + ' ' + (params.build ? params.build : 'none')
     });
 
     if (this.state.autoLogin) {
@@ -923,6 +924,12 @@ class TinodeWeb extends React.Component {
       this.state.myUserId ? 'archive' : ''));
   }
 
+  // User viewes 'Blocked chats'.
+  handleShowBlocked() {
+    HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash,
+      this.state.myUserId ? 'blocked' : ''));
+  }
+
   // Initialize desktop alerts = push notifications.
   initDesktopAlerts() {
     // Google could not be bothered to mention that
@@ -1011,6 +1018,8 @@ class TinodeWeb extends React.Component {
     let path = '';
     if (['security','support','general','notif'].includes(parsed.path[0])) {
       path = 'edit';
+    } else if ('blocked' == parsed.path[0]) {
+      path = 'security';
     } else if (this.state.myUserId) {
       path = 'contacts';
     }
@@ -1436,6 +1445,7 @@ class TinodeWeb extends React.Component {
           onPasswordResetRequest={this.handlePasswordResetRequest}
           onResetPassword={this.handleResetPassword}
           onShowArchive={this.handleShowArchive}
+          onShowBlocked={this.handleShowBlocked}
 
           onInitFind={this.tnInitFind}
           searchResults={this.state.searchResults}