Start integrating the Mailvelope browser extension via its API.

Thomas Bruederli

2015-05-25 1cd3762b0d7707f4dd665c00ff4d83db6172b4a7

 program/js/app.js

@@ -376,6 +376,8 @@
          this.http_post(postact, postdata);
        }

        this.check_mailvelope(this.env.action);

        // detect browser capabilities
        if (!this.is_framed() && !this.env.extwin)
          this.browser_capabilities_check();
@@ -774,7 +776,7 @@

      case 'list':
        if (props && props != '') {
          this.reset_qsearch();
          this.reset_qsearch(true);
        }
        if (this.env.action == 'compose' && this.env.extwin) {
          window.close();
@@ -894,7 +896,7 @@
          else {
            // reload form
            if (props == 'reload') {
              form.action += '?_reload=1';
              form.action += '&_reload=1';
            }
            else if (this.task == 'settings' && (this.env.identities_level % 2) == 0  &&
              (input = $("input[name='_email']", form)) && input.length && !rcube_check_email(input.val())
@@ -1221,17 +1223,16 @@

      // reset quicksearch
      case 'reset-search':
        var n, s = this.env.search_request || this.env.qsearch,
            ss = this.gui_objects.qsearchbox && this.gui_objects.qsearchbox.value != '';
        var n, s = this.env.search_request || this.env.qsearch;

        this.reset_qsearch();
        this.reset_qsearch(true);
        this.select_all_mode = false;

        if (s && this.env.action == 'compose') {
          if (this.contact_list)
            this.list_contacts_clear();
        }
        else if (s && ss && this.env.mailbox) {
        else if (s && this.env.mailbox) {
          this.list_mailbox(this.env.mailbox, 1);
        }
        else if (s && this.task == 'addressbook') {
@@ -1441,7 +1442,7 @@
    else if (delay)
      setTimeout(function() { ref.reload(); }, delay);
    else if (window.location)
      location.href = this.env.comm_path + (this.env.action ? '&_action='+this.env.action : '');
      location.href = this.url('', {_extwin: this.env.extwin});
  };

  // Add variable to GET string, replace old value if exists
@@ -1608,7 +1609,8 @@

  this.folder_collapsed = function(node)
  {
    var prefname = this.env.task == 'addressbook' ? 'collapsed_abooks' : 'collapsed_folders';
    var prefname = this.env.task == 'addressbook' ? 'collapsed_abooks' : 'collapsed_folders',
      old = this.env[prefname];

    if (node.collapsed) {
      this.env[prefname] = this.env[prefname] + '&'+urlencode(node.id)+'&';
@@ -1624,7 +1626,8 @@
    }

    if (!this.drag_active) {
      this.command('save-pref', { name: prefname, value: this.env[prefname] });
      if (old !== this.env[prefname])
        this.command('save-pref', { name: prefname, value: this.env[prefname] });

      if (this.env.unread_counts)
        this.set_unread_count_display(node.id, false);
@@ -2376,6 +2379,9 @@
  // list messages of a specific mailbox using filter
  this.filter_mailbox = function(filter)
  {
    if (this.filter_disabled)
      return;

    var lock = this.set_busy(true, 'searching');

    this.clear_message_list();
@@ -2409,16 +2415,17 @@
    if (sort)
      url._sort = sort;

    // also send search request to get the right messages
    if (this.env.search_request)
      url._search = this.env.search_request;

    // set page=1 if changeing to another mailbox
    // folder change, reset page, search scope, etc.
    if (this.env.mailbox != mbox) {
      page = 1;
      this.env.current_page = page;
      this.env.search_scope = 'base';
      this.select_all_mode = false;
      this.reset_search_filter();
    }
    // also send search request to get the right messages
    else if (this.env.search_request)
      url._search = this.env.search_request;

    if (!update_only) {
      // unselect selected messages and clear the list and message data
@@ -3250,6 +3257,227 @@
    this.set_alttext('delete', label);
  };

  // Initialize input element for list page jump
  this.init_pagejumper = function(element)
  {
    $(element).addClass('rcpagejumper')
      .on('focus', function(e) {
        // create and display popup with page selection
        var i, html = '';

        for (i = 1; i <= ref.env.pagecount; i++)
          html += '<li>' + i + '</li>';

        html = '<ul class="toolbarmenu">' + html + '</ul>';

        if (!ref.pagejump) {
          ref.pagejump = $('<div id="pagejump-selector" class="popupmenu"></div>')
            .appendTo(document.body)
            .on('click', 'li', function() {
              if (!ref.busy)
                $(element).val($(this).text()).change();
            });
        }

        if (ref.pagejump.data('count') != i)
          ref.pagejump.html(html);

        ref.pagejump.attr('rel', '#' + this.id).data('count', i);

        // display page selector
        ref.show_menu('pagejump-selector', true, e);
        $(this).keydown();
      })
      // keyboard navigation
      .on('keydown keyup click', function(e) {
        var current, selector = $('#pagejump-selector'),
          ul = $('ul', selector),
          list = $('li', ul),
          height = ul.height(),
          p = parseInt(this.value);

        if (e.which != 27 && e.which != 9 && e.which != 13 && !selector.is(':visible'))
          return ref.show_menu('pagejump-selector', true, e);

        if (e.type == 'keydown') {
          // arrow-down
          if (e.which == 40) {
            if (list.length > p)
              this.value = (p += 1);
          }
          // arrow-up
          else if (e.which == 38) {
            if (p > 1 && list.length > p - 1)
              this.value = (p -= 1);
          }
          // enter
          else if (e.which == 13) {
            return $(this).change();
          }
          // esc, tab
          else if (e.which == 27 || e.which == 9) {
            return $(element).val(ref.env.current_page);
          }
        }

        $('li.selected', ul).removeClass('selected');

        if ((current = $(list[p - 1])).length) {
          current.addClass('selected');
          $('#pagejump-selector').scrollTop(((ul.height() / list.length) * (p - 1)) - selector.height() / 2);
        }
      })
      .on('change', function(e) {
        // go to specified page
        var p = parseInt(this.value);
        if (p && p != ref.env.current_page && !ref.busy) {
          ref.hide_menu('pagejump-selector');
          ref.list_page(p);
        }
      });
  };

  // Update page-jumper state on list updates
  this.update_pagejumper = function()
  {
    $('input.rcpagejumper').val(this.env.current_page).prop('disabled', this.env.pagecount < 2);
  };

  // check for mailvelope API
  this.check_mailvelope = function(action)
  {
    if (typeof window.mailvelope !== 'undefined') {
      this.mailvelope_init(action);
    }
    else {
      $(window).on('mailvelope', function() {
        ref.mailvelope_init(action);
      });
    }
  };

  // 
  this.mailvelope_init = function(action)
  {
    if (this.env.browser_capabilities)
      this.env.browser_capabilities['pgpmime'] = 1;

    var keyring = this.get_local_storage_prefix();

    mailvelope.getKeyring(keyring).then(function(kr) {
      ref.mailvelope_keyring = kr;
    }, function(err) {
      // attempt to create a new keyring for this app/user
      mailvelope.createKeyring(keyring).then(function(kr) {
        ref.mailvelope_keyring = kr;
        keyring = keyring.identifier;
      }, function(err) {
        console.error(err)
      });
    });

    if (action == 'show' || action == 'preview') {
      // decrypt text body
      if (this.env.is_pgp_content && window.mailvelope) {
        var data = $(this.env.is_pgp_content).text();
        ref.mailvelope_display_container(this.env.is_pgp_content, data, keyring);
      }
      // load pgp/mime message and pass it to the mailvelope display container
      else if (this.env.pgp_mime_part && window.mailvelope) {
        var msgid = this.display_message(this.get_label('loadingdata'), 'loading'),
          selector = this.env.pgp_mime_container;

        $.ajax({
          type: 'GET',
          url: this.url('get', { '_mbox': this.env.mailbox, '_uid': this.env.uid, '_part': this.env.pgp_mime_part }),
          error: function(o, status, err) {
            ref.hide_message(msgkey);
            ref.http_error(o, status, err, lock);
          },
          success: function(data) {
            ref.mailvelope_display_container(selector, data, keyring, msgid);
          }
        });
      }
    }
    else if (action == 'compose' && window.mailvelope) {
      this.enable_command('compose-encrypted', true);
    }
  };

  // handler for the 'compose-encrypt' command
  this.compose_encrypted = function(props)
  {
    var container = $('#' + this.env.composebody).parent();
    mailvelope.createEditorContainer('#' + container.attr('id'), keyring).then(function(editor) {
      ref.mailvelope_editor = editor;
      container.addClass('mailvelope');
      $('#' + ref.env.composebody).hide();
    });
  };

  // callback to replace the message body with the full armored
  this.mailvelope_submit_messageform = function(draft, saveonly)
  {
    // get recipients
    var recipients = [];
    $.each(['to', 'cc', 'bcc'], function(i,field) {
      var pos, rcpt, val = $.trim($('[name="_' + field + '"]').val());
      while (val.length && rcube_check_email(val, true)) {
        rcpt = RegExp.$2
        recipients.push(rcpt);
        val = val.substr(val.indexOf(rcpt) + rcpt.length + 1).replace(/^\s*,\s*/, '');
        console.log('*', val)
      }
    });

    // check if we have keys for all recipients
    var isvalid = recipients.length > 0;
    ref.mailvelope_keyring.validKeyForAddress(recipients).then(function(status) {
      $.each(status, function(k,v) {
        console.log('validate', k, v)
        if (!v) {
          isvalid = false;
          alert("No key found for "+k)
        }
      });

      if (!isvalid) {
        if (!recipients.length)
          alert(ref.get_label('norecipientwarning'));
        return false;
      }

      ref.mailvelope_editor.encrypt(recipients).then(function(armored) {
        console.log('encrypted message', armored);
        var form = this.gui_objects.messageform;

        // all checks passed, send message
        // var msgid = ref.set_busy(true, draft || saveonly ? 'savingmessage' : 'sendingmessage')

      }, function(err) {
        console.log(err)
      });
    });

    return false;
  };

  // wrapper for the mailvelope.createDisplayContainer API call
  this.mailvelope_display_container = function(selector, data, keyring, msgid)
  {
    mailvelope.createDisplayContainer(selector, data, keyring, {}).then(function() {
      $(selector).addClass('mailvelope').find('.message-part, .part-notice').hide();
      ref.hide_message(msgid);
      setTimeout(function() { $(window).resize(); }, 10);
    }, function(err) {
      console.error(err)
      ref.hide_message(msgid);
      ref.display_message('Message decryption failed: ' + err.message, 'error')
    });
  };


  /*********************************************************/
  /*********       mailbox folders methods         *********/
  /*********************************************************/
@@ -3344,7 +3572,7 @@
    if (!this.gui_objects.messageform)
      return false;

    var i, pos, input_from = $("[name='_from']"),
    var i, elem, pos, input_from = $("[name='_from']"),
      input_to = $("[name='_to']"),
      input_subject = $("input[name='_subject']"),
      input_message = $("[name='_message']").get(0),
@@ -3379,13 +3607,15 @@

    if (!html_mode) {
      pos = this.env.top_posting ? 0 : input_message.value.length;
      this.set_caret_pos(input_message, pos);

      // add signature according to selected identity
      // if we have HTML editor, signature is added in callback
      // if we have HTML editor, signature is added in a callback
      if (input_from.prop('type') == 'select-one') {
        this.change_identity(input_from[0]);
      }

      // set initial cursor position
      this.set_caret_pos(input_message, pos);

      // scroll to the bottom of the textarea (#1490114)
      if (pos) {
@@ -3398,11 +3628,14 @@
      this.compose_restore_dialog(0, html_mode)

    if (input_to.val() == '')
      input_to.focus();
      elem = input_to;
    else if (input_subject.val() == '')
      input_subject.focus();
      elem = input_subject;
    else if (input_message)
      input_message.focus();
      elem = input_message;

    // focus first empty element (need to be visible on IE8)
    $(elem).filter(':visible').focus();

    this.env.compose_focus_elem = document.activeElement;

@@ -3514,6 +3747,10 @@
          }
        }]
      );
    }

    if (this.mailvelope_editor) {
      return this.mailvelope_submit_messageform(draft, saveonly);
    }

    // all checks passed, send message
@@ -4330,14 +4567,28 @@
    return url;
  };

  // reset search filter
  this.reset_search_filter = function()
  {
    this.filter_disabled = true;
    if (this.gui_objects.search_filter)
      $(this.gui_objects.search_filter).val('ALL').change();
    this.filter_disabled = false;
  };

  // reset quick-search form
  this.reset_qsearch = function()
  this.reset_qsearch = function(all)
  {
    if (this.gui_objects.qsearchbox)
      this.gui_objects.qsearchbox.value = '';

    if (this.env.qsearch)
      this.abort_request(this.env.qsearch);

    if (all) {
      this.env.search_scope = 'base';
      this.reset_search_filter();
    }

    this.env.qsearch = null;
    this.env.search_request = null;
@@ -6649,6 +6900,8 @@
  {
    this.enable_command('nextpage', 'lastpage', this.env.pagecount > this.env.current_page);
    this.enable_command('previouspage', 'firstpage', this.env.current_page > 1);

    this.update_pagejumper();
  };

  // mark a mailbox as selected and set environment variable
@@ -6705,6 +6958,9 @@
      repl, cell, col, n, len, tr;

    this.env.listcols = listcols;

    if (!this.env.coltypes)
      this.env.coltypes = {};

    // replace old column headers
    if (thead) {
@@ -7197,7 +7453,7 @@
  // compose a valid url with the given parameters
  this.url = function(action, query)
  {
    var querystring = typeof query === 'string' ? '&' + query : '';
    var querystring = typeof query === 'string' ? query : '';

    if (typeof action !== 'string')
      query = action;
@@ -7209,12 +7465,12 @@
    else if (this.env.action)
      query._action = this.env.action;

    var base = this.env.comm_path, k, param = {};
    var url = this.env.comm_path, k, param = {};

    // overwrite task name
    if (action && action.match(/([a-z0-9_-]+)\/([a-z0-9-_.]+)/)) {
      query._action = RegExp.$2;
      base = base.replace(/\_task=[a-z0-9_-]+/, '_task='+RegExp.$1);
      url = url.replace(/\_task=[a-z0-9_-]+/, '_task=' + RegExp.$1);
    }

    // remove undefined values
@@ -7223,7 +7479,13 @@
        param[k] = query[k];
    }

    return base + (base.indexOf('?') > -1 ? '&' : '?') + $.param(param) + querystring;
    if (param = $.param(param))
      url += (url.indexOf('?') > -1 ? '&' : '?') + param;

    if (querystring)
      url += (url.indexOf('?') > -1 ? '&' : '?') + querystring;

    return url;
  };

  this.redirect = function(url, lock)
@@ -7276,22 +7538,32 @@
  };

  // send a http request to the server
  this.http_request = function(action, query, lock)
  this.http_request = function(action, data, lock)
  {
    var url = this.url(action, query);
    if (typeof data !== 'object')
      data = rcube_parse_query(data);

    data._remote = 1;
    data._unlock = lock ? lock : 0;

    // trigger plugin hook
    var result = this.triggerEvent('request'+action, query);
    var result = this.triggerEvent('request' + action, data);

    if (result !== undefined) {
      // abort if one the handlers returned false
      if (result === false)
        return false;
      else
        url = this.url(action, result);
    // abort if one of the handlers returned false
    if (result === false) {
      if (data._unlock)
        this.set_busy(false, null, data._unlock);
      return false;
    }
    else if (result !== undefined) {
      data = result;
      if (data._action) {
        action = data._action;
        delete data._action;
      }
    }

    url += '&_remote=1';
    var url = this.url(action, data);

    // send request
    this.log('HTTP GET: ' + url);
@@ -7300,33 +7572,39 @@
    this.start_keepalive();

    return $.ajax({
      type: 'GET', url: url, data: { _unlock:(lock?lock:0) }, dataType: 'json',
      success: function(data){ ref.http_response(data); },
      type: 'GET', url: url, dataType: 'json',
      success: function(data) { ref.http_response(data); },
      error: function(o, status, err) { ref.http_error(o, status, err, lock, action); }
    });
  };

  // send a http POST request to the server
  this.http_post = function(action, postdata, lock)
  this.http_post = function(action, data, lock)
  {
    var url = this.url(action);
    if (typeof data !== 'object')
      data = rcube_parse_query(data);

    if (postdata && typeof postdata === 'object') {
      postdata._remote = 1;
      postdata._unlock = (lock ? lock : 0);
    }
    else
      postdata += (postdata ? '&' : '') + '_remote=1' + (lock ? '&_unlock='+lock : '');
    data._remote = 1;
    data._unlock = lock ? lock : 0;

    // trigger plugin hook
    var result = this.triggerEvent('request'+action, postdata);
    if (result !== undefined) {
      // abort if one of the handlers returned false
      if (result === false)
        return false;
      else
        postdata = result;
    var result = this.triggerEvent('request'+action, data);

    // abort if one of the handlers returned false
    if (result === false) {
      if (data._unlock)
        this.set_busy(false, null, data._unlock);
      return false;
    }
    else if (result !== undefined) {
      data = result;
      if (data._action) {
        action = data._action;
        delete data._action;
      }
    }

    var url = this.url(action);

    // send request
    this.log('HTTP POST: ' + url);
@@ -7335,7 +7613,7 @@
    this.start_keepalive();

    return $.ajax({
      type: 'POST', url: url, data: postdata, dataType: 'json',
      type: 'POST', url: url, data: data, dataType: 'json',
      success: function(data){ ref.http_response(data); },
      error: function(o, status, err) { ref.http_error(o, status, err, lock, action); }
    });
@@ -7451,32 +7729,36 @@
        this.env.qsearch = null;
      case 'list':
        if (this.task == 'mail') {
          var is_multifolder = this.is_multifolder_listing();
          var is_multifolder = this.is_multifolder_listing(),
            list = this.message_list,
            uid = this.env.list_uid;

          this.enable_command('show', 'select-all', 'select-none', this.env.messagecount > 0);
          this.enable_command('expunge', this.env.exists && !is_multifolder);
          this.enable_command('purge', this.purge_mailbox_test() && !is_multifolder);
          this.enable_command('import-messages', !is_multifolder);
          this.enable_command('expand-all', 'expand-unread', 'collapse-all', this.env.threading && this.env.messagecount && !is_multifolder);

          if ((response.action == 'list' || response.action == 'search') && this.message_list) {
            var list = this.message_list, uid = this.env.list_uid;

            // highlight message row when we're back from message page
            if (uid) {
              if (!list.rows[uid])
                uid += '-' + this.env.mailbox;
              if (list.rows[uid]) {
                list.select(uid);
          if (list) {
            if (response.action == 'list' || response.action == 'search') {
              // highlight message row when we're back from message page
              if (uid) {
                if (!list.rows[uid])
                  uid += '-' + this.env.mailbox;
                if (list.rows[uid]) {
                  list.select(uid);
                }
                delete this.env.list_uid;
              }
              delete this.env.list_uid;

              this.enable_command('set-listmode', this.env.threads && !is_multifolder);
              if (list.rowcount > 0)
                list.focus();
              this.msglist_select(list);
            }

            this.enable_command('set-listmode', this.env.threads && !is_multifolder);
            if (list.rowcount > 0)
              list.focus();
            this.msglist_select(list);
            this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:list.rowcount });

            if (response.action != 'getunread')
              this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:list.rowcount });
          }
        }
        else if (this.task == 'addressbook') {