Make sure to show the invite widget

when the room features change.

spec/chatroom.js

@@ -922,6 +922,11 @@
                     return "Please join!";
                 });
                 var view = _converse.chatboxviews.get('lounge@localhost');
+
+                // XXX: cheating a lttle bit, normally this'll be set after
+                // receiving the features for the room.
+                view.model.set('open', 'true');
+
                 spyOn(view, 'directInvite').andCallThrough();
                 var $input;
                 view.$el.find('.chat-area').remove();

src/config.js

@@ -126,6 +126,7 @@ require.config({
         "chatroom_features":        "src/templates/chatroom_features",
         "chatroom_form":            "src/templates/chatroom_form",
         "chatroom_head":            "src/templates/chatroom_head",
+        "chatroom_invite":          "src/templates/chatroom_invite",
         "chatroom_nickname_form":   "src/templates/chatroom_nickname_form",
         "chatroom_password_form":   "src/templates/chatroom_password_form",
         "chatroom_sidebar":         "src/templates/chatroom_sidebar",

src/converse-muc.js

@@ -17,6 +17,7 @@
             "tpl!chatroom_features",
             "tpl!chatroom_form",
             "tpl!chatroom_head",
+            "tpl!chatroom_invite",
             "tpl!chatroom_nickname_form",
             "tpl!chatroom_password_form",
             "tpl!chatroom_sidebar",
@@ -37,6 +38,7 @@
             tpl_chatroom_features,
             tpl_chatroom_form,
             tpl_chatroom_head,
+            tpl_chatroom_invite,
             tpl_chatroom_nickname_form,
             tpl_chatroom_password_form,
             tpl_chatroom_sidebar,
@@ -1944,8 +1946,12 @@
 
                 initialize: function () {
                     this.model.on("add", this.onOccupantAdded, this);
-                    var debouncedRenderRoomFeatures = _.debounce(this.renderRoomFeatures, 100);
+
                     this.chatroomview = this.model.chatroomview;
+                    this.chatroomview.model.on('change:open', this.renderInviteWidget, this);
+                    this.chatroomview.model.on('change:affiliation', this.renderInviteWidget, this);
+
+                    var debouncedRenderRoomFeatures = _.debounce(this.renderRoomFeatures, 100);
                     this.chatroomview.model.on('change:hidden', debouncedRenderRoomFeatures, this);
                     this.chatroomview.model.on('change:mam_enabled', debouncedRenderRoomFeatures, this);
                     this.chatroomview.model.on('change:membersonly', debouncedRenderRoomFeatures, this);
@@ -1967,22 +1973,39 @@
                             _.extend(this.chatroomview.model.toJSON(), {
                                 'allow_muc_invitations': _converse.allow_muc_invitations,
                                 'label_features': __('Features'),
-                                'label_invitation': __('Invite'),
-                                'label_occupants': __('Occupants'),
+                                'label_occupants': __('Occupants')
                             }))
                     );
                     if (_converse.allow_muc_invitations) {
-                        _converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this));
+                        _converse.api.waitUntil('rosterContactsFetched').then(this.renderInviteWidget.bind(this));
                     }
                     return this.renderRoomFeatures();
                 },
 
+                renderInviteWidget: function () {
+                    var form = this.el.querySelector('form.room-invite');
+                    if (this.shouldInviteWidgetBeShown()) {
+                        if (_.isNull(form)) {
+                            var heading = this.el.querySelector('.occupants-heading');
+                            form = tpl_chatroom_invite({
+                                'label_invitation': __('Invite'),
+                            });
+                            heading.insertAdjacentHTML('afterend', form);
+                            this.initInviteWidget();
+                        }
+                    } else {
+                        if (!_.isNull(form)) {
+                            form.remove();
+                        }
+                    }
+                    return this;
+                },
+
                 renderRoomFeatures: function () {
                     this.$('.features-list').html(
                         tpl_chatroom_features(
                             _.extend(this.chatroomview.model.toJSON(), {
                                 'label_hidden': __('Hidden'),
-                                'label_invitation': __('Invite'),
                                 'label_mam_enabled': __('Message archiving'),
                                 'label_membersonly': __('Members only'),
                                 'label_moderated': __('Moderated'),
@@ -2130,8 +2153,18 @@
                         }});
                 },
 
+                shouldInviteWidgetBeShown: function () {
+                    return _converse.allow_muc_invitations &&
+                        (this.chatroomview.model.get('open') ||
+                            this.chatroomview.model.get('affiliation') === "owner"
+                        );
+                },
+
                 initInviteWidget: function () {
                     var form = this.el.querySelector('form.room-invite');
+                    if (_.isNull(form)) {
+                        return;
+                    }
                     form.addEventListener('submit', this.inviteFormSubmitted.bind(this));
                     var el = this.el.querySelector('input.invited-contact');
                     var list = _converse.roster.map(function (item) {
@@ -2143,7 +2176,6 @@
                         'list': list
                     });
                     el.addEventListener('awesomplete-selectcomplete', this.promptForInvite.bind(this));
-                    return this;
                 }
             });
 

src/templates/chatroom_invite.html

+<form class="pure-form room-invite">
+    <input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/>
+</form>

src/templates/chatroom_sidebar.html

 <!-- <div class="occupants"> -->
 <p class="occupants-heading">{{{label_occupants}}}</p>
-<form class="pure-form room-invite
-    {[ if (!allow_muc_invitations || (!open && affiliation !== "owner")) { ]}
-        hidden
-    {[ } ]}
-    ">
-    <input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/>
-</form>
 <ul class="occupant-list"></ul>
-
 <div class="chatroom-features">
     <p class="occupants-heading">{{{label_features}}}</p>
     <ul class="features-list"></ul>