From 1b75d2035efed36a8ea997e2b6e5fd94ca5c73cb Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 2 Mar 2018 17:48:24 +0300
Subject: [PATCH] [Common] Bug in rendering chat and header panel when user id
 contains special characters.

---
 apps/common/main/lib/model/User.js  | 30 ++++++++++++++++++-----------
 apps/common/main/lib/view/Chat.js   |  4 ++--
 apps/common/main/lib/view/Header.js |  4 ++--
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/apps/common/main/lib/model/User.js b/apps/common/main/lib/model/User.js
index 9e861c9ee..f224399a5 100644
--- a/apps/common/main/lib/model/User.js
+++ b/apps/common/main/lib/model/User.js
@@ -40,21 +40,29 @@
  *
  */
 
+if (Common === undefined)
+    var Common = {};
+
+Common.Models = Common.Models || {};
+
 define([
-    'backbone'
-], function(Backbone){
+    'underscore',
+    'backbone',
+    'common/main/lib/component/BaseView'
+], function(_, Backbone){
     'use strict';
 
-    Common.Models = Common.Models || {};
-
     Common.Models.User = Backbone.Model.extend({
-        defaults: {
-            id          : undefined,
-            username    : 'Guest',
-            color       : '#fff',
-            colorval    : null,
-            online      : false,
-            view        : false
+        defaults: function() {
+            return {
+                iid         : Common.UI.getId(), // internal id for rendering
+                id          : undefined,
+                username    : 'Guest',
+                color       : '#fff',
+                colorval    : null,
+                online      : false,
+                view        : false
+            }
         }
     });
 });
diff --git a/apps/common/main/lib/view/Chat.js b/apps/common/main/lib/view/Chat.js
index daf0484d5..53c90cefb 100644
--- a/apps/common/main/lib/view/Chat.js
+++ b/apps/common/main/lib/view/Chat.js
@@ -59,7 +59,7 @@ define([
         storeUsers: undefined,
         storeMessages: undefined,
 
-        tplUser: ['<li id="chat-user-<%= user.get("id") %>"<% if (!user.get("online")) { %> class="offline"<% } %>>',
+        tplUser: ['<li id="<%= user.get("iid") %>"<% if (!user.get("online")) { %> class="offline"<% } %>>',
                         '<div class="color" style="background-color: <%= user.get("color") %>;" >',
                             '<label class="name"><%= scope.getUserName(user.get("username")) %></label>',
                         '</div>',
@@ -169,7 +169,7 @@ define([
 
         _onUsersChanged: function(m) {
             if (m.changed.online != undefined && this.panelUsers) {
-                this.panelUsers.find('#chat-user-'+ m.get('id'))[m.changed.online?'removeClass':'addClass']('offline');
+                this.panelUsers.find('#' + m.get('iid'))[m.changed.online?'removeClass':'addClass']('offline');
                 this.panelUsers.scroller.update({minScrollbarLength  : 25, alwaysVisibleY: true});
             }
         },
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 48ac04a2e..5f2895b03 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -56,7 +56,7 @@ define([
         var $saveStatus;
 
         var templateUserItem =
-                '<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
+                '<li id="<%= user.get("iid") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
                     '<div class="color" style="background-color: <%= user.get("color") %>;" >' +
                         '<label class="name"><%= fnEncode(user.get("username")) %></label>' +
                     '</div>' +
@@ -127,7 +127,7 @@ define([
 
         function onUsersChanged(model, collection) {
             if (model.changed.online != undefined && $userList) {
-                $userList.find('#status-chat-user-'+ model.get('id'))[model.changed.online ? 'removeClass' : 'addClass']('offline');
+                $userList.find('#'+ model.get('iid'))[model.changed.online ? 'removeClass' : 'addClass']('offline');
                 $userList.scroller && $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
             }