Indicate whether a room occupant is online or not.

css/converse.css

@@ -2040,9 +2040,12 @@
             padding: 2px 5px;
             text-overflow: ellipsis;
             white-space: nowrap;
+            color: #A8ABA1;
             width: 100px; }
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.moderator {
-              color: #D24E2B; }
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.online {
+              color: #1A9707; }
+              #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.online.moderator {
+                color: #D24E2B; }
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
         border-bottom-left-radius: 4px;

sass/_chatrooms.scss

@@ -101,9 +101,13 @@
                             padding: 2px 5px;
                             text-overflow: ellipsis;
                             white-space: nowrap;
+                            color: $light-text-color;
                             width: 100px;
-                            &.moderator {
-                                color: $moderator-color;
+                            &.online {
+                                color: $online-color;
+                                &.moderator {
+                                    color: $moderator-color;
+                                }
                             }
                         }
                     }

sass/_variables.scss

@@ -8,6 +8,7 @@ $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
 $text-color: #818479 !default;
+$light-text-color: #A8ABA1 !default;
 $border-color: #CCC !default;
 $icon-color: #114327 !default;
 $save-button-color: #436F64 !default;
@@ -37,6 +38,7 @@ $toolbar-height: 25px !default;
 $toolbar-color: #FFF5EE !default;
 
 $moderator-color: #D24E2B !default;
+$online-color: #1A9707 !default;
 
 $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;

src/converse-muc.js

@@ -678,14 +678,20 @@
                 },
 
                 onConfigSaved: function (stanza) {
+                    /*
+                     * When changing a room to members-only, do we want to then
+                     * add all current users to the membership list?
+                     *
                     var members = [];
                     this.occupantsview.model.each(function (occupant) {
+                        var affiliation = occupant.get('affiliation');
                         members.push({
                             'affiliation': affiliation !== 'none' ? affiliation : 'member',
                             'jid': Strophe.getBareJidFromJid(occupant.get('jid'))
                         });
                     });
-                    // this.updateMembersList(members);
+                    this.updateMembersList(members);
+                    */
                 },
 
                 onErrorConfigSaved: function (stanza) {
@@ -995,10 +1001,14 @@
             });
 
             converse.ChatRoomOccupant = Backbone.Model.extend({
-                initialize: function () {
-                    this.set({'id': converse.connection.getUniqueId()});
+                initialize: function (attributes) {
+                    this.set(_.extend({
+                        'id': converse.connection.getUniqueId(),
+                        'online': false
+                    }, attributes));
                 }
             });
+
             converse.ChatRoomOccupantView = Backbone.View.extend({
                 tagName: 'li',
                 initialize: function () {
@@ -1125,8 +1135,10 @@
 
                     switch (data.type) {
                         case 'unavailable':
-                            if (occupant) {
-                                occupant[0].destroy();
+                            if (_.contains(['owner', 'admin', 'member'], occupant.get('affiliation'))) {
+                                occupant.save({'online': false});
+                            } else {
+                                occupant.destroy();
                             }
                             break;
                         default:

src/templates/occupant.html

-<li class="{{role}}" id="{{id}}"
+<li class="{{role}} {[ if (online) { ]} online {[ } ]}" id="{{id}}"
     {[ if (role === "moderator") { ]}
        title="{{desc_moderator}}"
     {[ } ]}
@@ -7,5 +7,4 @@
     {[ } ]}
     {[ if (role === "visitor") { ]}
        title="{{desc_visitor}}"
-    {[ } ]}
->{{nick}}</li>
+    {[ } ]}>{{nick}}</li>