Add a new template for OTR-related toolbar buttons

The OTR functionality is now fully decoupled and can be removed entirely
without breakage.

main.js

@@ -157,6 +157,7 @@ require.config({
         "status_option":            "src/templates/status_option",
         "toggle_chats":             "src/templates/toggle_chats",
         "toolbar":                  "src/templates/toolbar",
+        "toolbar_otr":              "src/templates/toolbar_otr",
         "trimmed_chat":             "src/templates/trimmed_chat",
         "vcard":                    "src/templates/vcard"
     },

src/converse-otr.js

@@ -110,6 +110,7 @@
                 },
 
                 createMessage: function ($message, $delay, archive_id) {
+                    var converse = this._super.converse;
                     var $body = $message.children('body');
                     var text = ($body.length > 0 ? $body.text() : undefined);
                     if ((!text) || (!converse.allow_otr)) {
@@ -136,6 +137,7 @@
                 },
                 
                 getSession: function (callback) {
+                    var converse = this._super.converse;
                     var cipher = CryptoJS.lib.PasswordBasedCipher;
                     var pass, instance_tag, saved_key, pass_check;
                     if (converse.cache_otr_key) {
@@ -226,6 +228,7 @@
                     // send the query message to them.
                     this.save({'otr_status': UNENCRYPTED});
                     this.getSession(function (session) {
+                        var converse = this._super.converse;
                         this.otr = new otr.OTR({
                             fragment_size: 140,
                             send_interval: 200,
@@ -272,6 +275,7 @@
                 },
 
                 initialize: function () {
+                    var converse = this._super.converse;
                     this._super.initialize.apply(this, arguments);
                     this.model.on('change:otr_status', this.onOTRStatusChanged, this);
                     this.model.on('showOTRError', this.showOTRError, this);
@@ -296,6 +300,7 @@
                 },
 
                 onMessageSubmitted: function (text) {
+                    var converse = this._super.converse;
                     if (!converse.connection.authenticated) {
                         return this.showHelpMessages(
                             ['Sorry, the connection has been lost, '+
@@ -340,6 +345,7 @@
                 },
 
                 showOTRError: function (msg) {
+                    var converse = this._super.converse;
                     if (msg === 'Message cannot be sent at this time.') {
                         this.showHelpMessages(
                             [__('Your message could not be sent')], 'error');
@@ -371,6 +377,7 @@
                 },
 
                 authOTR: function (ev) {
+                    var converse = this._super.converse;
                     var scheme = $(ev.target).data().scheme;
                     var result, question, answer;
                     if (scheme === 'fingerprint') {
@@ -417,6 +424,7 @@
                 },
 
                 renderToolbar: function (options) {
+                    var converse = this._super.converse;
                     if (!converse.show_toolbar) {
                         return;
                     }
@@ -426,7 +434,7 @@
                         UNENCRYPTED: UNENCRYPTED,
                         UNVERIFIED: UNVERIFIED,
                         VERIFIED: VERIFIED,
-                        // Leaky abstraction
+                        // FIXME: Leaky abstraction MUC
                         allow_otr: converse.allow_otr && !this.is_chatroom,
                         label_end_encrypted_conversation: __('End encrypted conversation'),
                         label_refresh_encrypted_conversation: __('Refresh encrypted conversation'),
@@ -439,6 +447,10 @@
                         otr_translated_status: OTR_TRANSLATED_MAPPING[data.otr_status],
                     });
                     this._super.renderToolbar.call(this, options);
+                    this.$el.find('.chat-toolbar').append(
+                            converse.templates.toolbar_otr(
+                                _.extend(this.model.toJSON(), options || {})
+                            ));
                     return this;
                 }
             },

src/templates.js

@@ -49,6 +49,7 @@ define("converse-templates", [
     "tpl!status_option",
     "tpl!toggle_chats",
     "tpl!toolbar",
+    "tpl!toolbar_otr",
     "tpl!trimmed_chat",
     "tpl!vcard",
 ], function () {
@@ -103,7 +104,8 @@ define("converse-templates", [
         status_option:          arguments[47],
         toggle_chats:           arguments[48],
         toolbar:                arguments[49],
-        trimmed_chat:           arguments[50],
-        vcard:                  arguments[51]
+        toolbar_otr:            arguments[50],
+        trimmed_chat:           arguments[51],
+        vcard:                  arguments[52]
     };
 });

src/templates/toolbar.html

@@ -26,34 +26,3 @@
 {[ if (show_clear_button)  { ]}
 <li class="toggle-clear"><a class="icon-remove" title="{{label_clear}}"></a></li>
 {[ } ]}
-{[ if (allow_otr)  { ]}
-    <li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">
-        <span class="chat-toolbar-text">{{otr_translated_status}}</span>
-        {[ if (otr_status == UNENCRYPTED) { ]}
-            <span class="icon-unlocked"></span>
-        {[ } ]}
-        {[ if (otr_status == UNVERIFIED) { ]}
-            <span class="icon-lock"></span>
-        {[ } ]}
-        {[ if (otr_status == VERIFIED) { ]}
-            <span class="icon-lock"></span>
-        {[ } ]}
-        {[ if (otr_status == FINISHED) { ]}
-            <span class="icon-unlocked"></span>
-        {[ } ]}
-        <ul>
-            {[ if (otr_status == UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{label_start_encrypted_conversation}}</a></li>
-            {[ } ]}
-            {[ if (otr_status != UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{label_refresh_encrypted_conversation}}</a></li>
-               <li><a class="end-otr" href="#">{{label_end_encrypted_conversation}}</a></li>
-               <li><a class="auth-otr" data-scheme="smp" href="#">{{label_verify_with_smp}}</a></li>
-            {[ } ]}
-            {[ if (otr_status == UNVERIFIED) { ]}
-               <li><a class="auth-otr" data-scheme="fingerprint" href="#">{{label_verify_with_fingerprints}}</a></li>
-            {[ } ]}
-            <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">{{label_whats_this}}</a></li>
-        </ul>
-    </li>
-{[ } ]}