Add option to encrypt & sign with Mailvelope > 2.0

UI elements added to larry and classic skin

program/js/app.js

@@ -3564,7 +3564,11 @@ function rcube_webmail()
         ref.mailvelope_init(action, kr);
       };
 
-    mailvelope.getKeyring(keyring).then(fn, function(err) {
+    mailvelope.getVersion().then(function(v) {
+      mailvelope.VERSION = v;
+      mailvelope.VERSION_MAJOR = Math.floor(parseFloat(v));
+      return mailvelope.getKeyring(keyring);
+    }).then(fn, function(err) {
       // attempt to create a new keyring for this app/user
       mailvelope.createKeyring(keyring).then(fn, function(err) {
         console.error(err);
@@ -3604,8 +3608,12 @@ function rcube_webmail()
     else if (action == 'compose') {
       this.env.compose_commands.push('compose-encrypted');
 
+      var sign_supported = mailvelope.VERSION_MAJOR >= 2;
       var is_html = $('[name="_is_html"]').val() > 0;
 
+      if (sign_supported)
+        this.env.compose_commands.push('compose-encrypted-signed');
+
       if (this.env.pgp_mime_message) {
         // fetch PGP/Mime part and open load into Mailvelope editor
         var lock = this.set_busy(true, this.get_label('loadingdata'));
@@ -3616,6 +3624,8 @@ function rcube_webmail()
           error: function(o, status, err) {
             ref.http_error(o, status, err, lock);
             ref.enable_command('compose-encrypted', !is_html);
+            if (sign_supported)
+              ref.enable_command('compose-encrypted-signed', !is_html);
           },
           success: function(data) {
             ref.set_busy(false, null, lock);
@@ -3627,24 +3637,38 @@ function rcube_webmail()
 
             ref.compose_encrypted({ quotedMail: data });
             ref.enable_command('compose-encrypted', true);
+            ref.enable_command('compose-encrypted-signed', false);
           }
         });
       }
       else {
         // enable encrypted compose toggle
         this.enable_command('compose-encrypted', !is_html);
+        if (sign_supported)
+          this.enable_command('compose-encrypted-signed', !is_html);
       }
 
       // make sure to disable encryption button after toggling editor into HTML mode
       this.addEventListener('actionafter', function(args) {
-        if (args.ret && args.action == 'toggle-editor')
+        if (args.ret && args.action == 'toggle-editor') {
           ref.enable_command('compose-encrypted', !args.props.html);
+        if (sign_supported)
+          ref.enable_command('compose-encrypted-signed', !args.props.html);
+        }
       });
     } else if (action == 'edit-identity') {
       ref.mailvelope_identity_keygen();
     }
   };
 
+    // handler for the 'compose-encrypted-signed' command
+  this.compose_encrypted_signed = function(props)
+  {
+    props = props || {};
+    props.signMsg = true;
+    this.compose_encrypted(props);
+  };
+
   // handler for the 'compose-encrypted' command
   this.compose_encrypted = function(props)
   {
@@ -3677,6 +3701,10 @@ function rcube_webmail()
         options = { predefinedText: $('#' + this.env.composebody).val() };
       }
 
+      if (props.signMsg) {
+        options.signMsg = props.signMsg;
+      }
+
       if (this.env.compose_mode == 'reply') {
         options.quotedMailIndent = true;
         options.quotedMailHeader = this.env.compose_reply_header;

program/localization/en_US/labels.inc

@@ -281,6 +281,7 @@ $labels['encryptmessage'] = 'Encrypt message';
 $labels['encryptmessagemailvelope'] = 'Encrypt message with Mailvelope';
 $labels['importpubkeys']  = 'Import public keys';
 $labels['encryptedsendialog'] = 'Sending encrypted message';
+$labels['encryptandsign'] = 'Encrypt and sign';
 $labels['keyid']          = 'Key ID';
 $labels['keylength']      = 'Bits';
 $labels['keyexpired']     = 'Expired';

skins/classic/functions.js

@@ -665,7 +665,11 @@ enable_command: function(p)
   }
   else if (p.command == 'compose-encrypted') {
     // show the toolbar button for Mailvelope
-    $('#messagetoolbar > a.encrypt').show();
+    $('#messagetoolbar a.encrypt').parent().show();
+  }
+  else if (p.command == 'compose-encrypted-signed') {
+    // enable selector for encrypt and sign
+    $('#encryptionmenulink').show();
   }
 },
 

skins/classic/templates/compose.html

@@ -39,7 +39,10 @@
     </span>
 <roundcube:endif />
     <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="rcmail_ui.show_popup('responsesmenu');return false">&nbsp;</a>
-    <roundcube:button command="compose-encrypted" type="link" class="buttonPas encrypt disabled" classAct="button encrypt" classSel="button encrypt" title="encryptmessagemailvelope" content=" " style="display:none" />
+    <span class="dropbutton" style="display:none">
+        <roundcube:button command="compose-encrypted" type="link" class="buttonPas encrypt disabled" classAct="button encrypt" classSel="button encrypt" title="encryptmessagemailvelope" content=" " />
+        <span id="encryptionmenulink" onclick="rcmail_ui.show_popup('encryptionmenu');return false" style="display:none"></span>
+    </span>
     <roundcube:container name="toolbar" id="compose-toolbar" />
     <roundcube:button name="messageoptions" id="composemenulink" type="link" class="button messagemenu" title="messageoptions" onclick="rcmail_ui.show_popup('composemenu', true);return false" content=" " />
 </div>
@@ -228,6 +231,13 @@
   </ul>
 </div>
 
+<div id="encryptionmenu" class="popupmenu">
+  <ul>
+    <roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" classAct="active" />
+    <roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" classAct="active" />
+  </ul>
+</div>
+
 <script type="text/javascript">
 rcube_init_mail_ui();
 </script>

skins/larry/mail.css

@@ -1256,7 +1256,6 @@ div.message-partheaders .headers-table td.header {
 
 #composebodycontainer.mailvelope > iframe[scrolling='no'] {
 	position: relative;
-	top: -12px;
 }
 
 #composebody {

skins/larry/styles.css

@@ -2063,6 +2063,7 @@ ul.proplist.simplelist li {
 }
 
 .toolbar a.button.encrypt {
+	min-width: 66px;
 	background-position: center -2025px;
 }
 

skins/larry/templates/compose.html

@@ -33,7 +33,10 @@
 	<roundcube:button name="addattachment" type="link" class="button attach" label="attach" title="addattachment" onclick="rcmail.upload_input('uploadform')" aria-haspopup="true" aria-expanded="false" tabindex="2" />
 	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" label="signature" title="insertsignature" tabindex="2" />
 	<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.toggle_popup('responsesmenu',event);return false" tabindex="2" aria-haspopup="true" aria-expanded="false" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a>
-	<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled" classAct="button encrypt" classSel="button encrypt selected" label="encrypt" title="encryptmessagemailvelope" tabindex="2" style="display:none" />
+	<span class="dropbutton" style="display:none">
+		<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled" classAct="button encrypt" classSel="button encrypt selected" label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
+		<a href="#compose-encrypted" class="dropbuttontip" id="encryptionmenulink" onclick="UI.toggle_popup('encryptionmenu',event);return false" aria-haspopup="true" aria-expanded="false" tabindex="2" style="display:none"></a>
+	</span>
 	<roundcube:container name="toolbar" id="compose-toolbar" />
 </div>
 
@@ -223,6 +226,13 @@
 	</ul>
 </div>
 
+<div id="encryptionmenu" class="popupmenu" aria-hidden="true">
+	<ul class="toolbarmenu" role="menu">
+		<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" classAct="active" />
+		<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" classAct="active" />
+	</ul>
+</div>
+
 <roundcube:include file="/includes/footer.html" />
 
 </body>

skins/larry/ui.js

@@ -685,7 +685,11 @@ function rcube_mail_ui()
     }
     else if (p.command == 'compose-encrypted') {
       // show the toolbar button for Mailvelope
-      $('a.button.encrypt').show();
+      $('a.button.encrypt').parent().show();
+    }
+    else if (p.command == 'compose-encrypted-signed') {
+      // enable selector for encrypt and sign
+      $('#encryptionmenulink').show();
     }
   }