Don't render message form via separate Backbone.View

Appeared to only complicate things...

src/converse-otr.js

@@ -298,6 +298,10 @@
                     return this.__super__.parseMessageForCommands.apply(this, arguments);
                 },
 
+                isOTREncryptedSession () {
+                    return _.includes([UNVERIFIED, VERIFIED], this.model.get('otr_status'));
+                },
+
                 onMessageSubmitted (text, spoiler_hint) {
                     const { _converse } = this.__super__;
                     if (!_converse.connection.authenticated) {
@@ -306,8 +310,7 @@
                     if (this.parseMessageForCommands(text)) {
                         return;
                     }
-                    if (_.includes([UNVERIFIED, VERIFIED], this.model.get('otr_status'))) {
-                        // Off-the-record encryption is active
+                    if (this.isOTREncryptedSession()) {
                         this.model.otr.sendMsg(text);
                         this.model.trigger('showSentOTRMessage', text);
                     } else {
@@ -453,6 +456,14 @@
                         ));
                 },
 
+                getToolbarOptions (options) {
+                    options = this.__super__.getToolbarOptions();
+                    if (this.model.get('composing_spoiler') && this.isOTREncryptedSession()) {
+                        options.show_spoiler_button = false;
+                    }
+                    return options;
+                },
+
                 renderToolbar (toolbar, options) {
                     const result = this.__super__.renderToolbar.apply(this, arguments);
                     this.addOTRToolbarButton(options);

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-body">
         <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
+        <div class="message-form-container"/>
     </div>
 </div>

src/templates/chatbox_message_form.html

@@ -4,15 +4,13 @@
     {[ if (o.show_toolbar) { ]}
         <ul class="chat-toolbar no-text-select"></ul>
     {[ } ]}
-    {[ if (o.allow_spoiler_messages) { ]}
-        <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
-            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
-    {[ } ]}
+    <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
+           class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
     <textarea
         type="text"
         class="chat-textarea
             {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
-            {[ if (o.sending_spoiler) { ]} spoiler {[ } ]}"
+            {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
         placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea>
     {[ if (o.show_send_button) { ]}
         <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>

src/templates/spoiler_button.html

+{[ if (o.show_spoiler_button)  { ]}
+<!-- XXX: This markup is also in src/templates/toolbar.html -->
 <li class="toggle-spoiler-edit">
-<a class="
-    {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
-    {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
-    title="{{ o.title }}"></a>
+    <a class="
+        {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
+        {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
+        title="{{ o.title }}"></a>
 </li>
+{[ } ]}

src/templates/toolbar.html

@@ -8,7 +8,7 @@
     <a class="
         {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
         {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
-        title="{{ o.title }}"></a>
+        title="{{ o.label_toggle_spoiler }}"></a>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}