[#828] Adds tooltips for encrypt and sign labels

We added a tooltip on the "encrypted" and "signed" label
to inform the user what these flags mean.
And we did some refactoring.

With @tayanefernandes

4 files changed, 92 insertions, 57 deletions

diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 4c9dce30..4315226c 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -96,72 +96,79 @@ define(
       };
 
       this.checkEncrypted = function(mail) {
-        if(_.isEmpty(mail.security_casing.locks)) {
-          return {
-            cssClass: 'security-status__label--not-encrypted',
-            label: 'not-encrypted'
-          };
-        }
-
-        var statusClass = ['security-status__label--encrypted'];
+        var statusClass = ['security-status__label'];
         var statusLabel;
+        var tooltip;
 
-        var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
-          return lock.state === 'valid';
-        });
-
-        if(hasAnyEncryptionInfo) {
-          statusLabel = 'encrypted';
+        if(_.isEmpty(mail.security_casing.locks)) {
+          statusClass.push('--not-encrypted');
+          statusLabel = 'not-encrypted';
+          tooltip = 'This message is not encrypted.';
         } else {
-          statusClass.push('--with-error');
-          statusLabel = 'encryption-error';
+          statusClass.push('--encrypted');
+
+          var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
+            return lock.state === 'valid';
+          });
+
+          if(hasAnyEncryptionInfo) {
+            statusLabel = 'encrypted';
+            tooltip = 'This message was encrypted.';
+          } else {
+            statusClass.push('--with-error');
+            statusLabel = 'encryption-error';
+            tooltip = 'This message had an encryption error.';
+          }
         }
 
         return {
           cssClass: statusClass.join(''),
-          label: statusLabel
+          label: statusLabel,
+          tooltipText: tooltip
         };
       };
 
       this.checkSigned = function(mail) {
-        var statusNotSigned = {
-          cssClass: 'security-status__label--not-signed',
-          label: 'not-signed'
-        };
-
-        if(_.isEmpty(mail.security_casing.imprints)) {
-          return statusNotSigned;
-        }
+        var statusClass = ['security-status__label'];
+        var statusLabel = [];
+        var tooltip;
 
         var hasNoSignatureInformation = _.any(mail.security_casing.imprints, function (imprint) {
           return imprint.state === 'no_signature_information';
         });
 
-        if(hasNoSignatureInformation) {
-          return statusNotSigned;
-        }
-
-        var statusClass = ['security-status__label--signed'];
-        var statusLabel = ['signed'];
-
-        if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
-          statusClass.push('--revoked');
-          statusLabel.push('signature-revoked');
-        }
+        if(_.isEmpty(mail.security_casing.imprints) || hasNoSignatureInformation) {
+          statusClass.push('--not-signed');
+          statusLabel.push('not-signed');
+          tooltip = 'The sender could not be verified.';
+        } else {
+          statusClass.push('--signed');
+          statusLabel.push('signed');
+          tooltip = 'You are communicating with the real sender.';
+
+          if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
+            statusClass.push('--revoked');
+            statusLabel.push('signature-revoked');
+            tooltip = 'The sender could not be verified.';
+          }
 
-        if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
-          statusClass.push('--expired');
-          statusLabel.push('signature-expired');
-        }
+          if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
+            statusClass.push('--expired');
+            statusLabel.push('signature-expired');
+            tooltip = 'The sender could not be verified.';
+          }
 
-        if(this.isNotTrusted(mail)) {
-          statusClass.push('--not-trusted');
-          statusLabel.push('signature-not-trusted');
+          if(this.isNotTrusted(mail)) {
+            statusClass.push('--not-trusted');
+            statusLabel.push('signature-not-trusted');
+            tooltip = 'The sender could not be verified.';
+          }
         }
 
         return {
           cssClass: statusClass.join(''),
-          label: statusLabel.join(' ')
+          label: statusLabel.join(' '),
+          tooltipText: tooltip
         };
       };
 
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
index ac966ded..5319eb1d 100644
--- a/web-ui/app/scss/views/_security-labels.scss
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -8,11 +8,19 @@
     background: $success;
     color: $white;
     border-radius: 12px;
+    position: relative;
 
     &:before {
       font-family: FontAwesome;
     }
 
+    &:hover:after {
+        content: attr(data-label);
+        font-size: 0.5rem;
+
+        @include tooltip(25px, 0px);
+    }
+
     &--encrypted {
       &:before {
         content: "\f023";
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 736bc854..44ed44ed 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -8,12 +8,12 @@
         <!-- TODO -->
         <div class="column large-12 no-padding security-status">
             {{#if signatureStatus}}
-            <span class="security-status__label {{ signatureStatus.cssClass }}">
+            <span class="security-status__label {{ signatureStatus.cssClass }}" data-label="{{ signatureStatus.tooltipText }}">
               {{t signatureStatus.label }}
             </span>
             {{/if}}
             {{#if encryptionStatus}}
-            <span class="security-status__label {{ encryptionStatus.cssClass }}">
+            <span class="security-status__label {{ encryptionStatus.cssClass }}" data-label="{{ encryptionStatus.tooltipText }}">
               {{t encryptionStatus.label }}
             </span>
             {{/if}}
diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js
index 0e05ddef..75a3895e 100644
--- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js
+++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js
@@ -110,61 +110,81 @@ describeComponent('mail_view/ui/mail_view', function () {
   it('assumes that the mail is encrypted and valid if at least one of the locks are valid', function() {
     var email = testData;
     email.security_casing = {locks: [{state: 'valid'}, {state: 'failure'}]};
-    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--encrypted');
+    var checkEncrypted = this.component.checkEncrypted(email);
+    expect(checkEncrypted.cssClass).toEqual('security-status__label--encrypted');
+    expect(checkEncrypted.tooltipText).toEqual('This message was encrypted.');
   });
 
   it('assumes that the mail is encrypted and failure if all the locks are failed', function() {
     var email = testData;
     email.security_casing = {locks: [{state: 'failure'}, {state: 'failure'}]};
-    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--encrypted--with-error');
+    var checkEncrypted = this.component.checkEncrypted(email);
+    expect(checkEncrypted.cssClass).toEqual('security-status__label--encrypted--with-error');
+    expect(checkEncrypted.tooltipText).toEqual('This message had an encryption error.');
   });
 
   it('assumes that the mail is not encrypted if it doesn\'t have any locks', function() {
     var email = testData;
     email.security_casing = {locks: []};
-    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--not-encrypted');
+    var checkEncrypted = this.component.checkEncrypted(email);
+    expect(checkEncrypted.cssClass).toEqual('security-status__label--not-encrypted');
+    expect(checkEncrypted.tooltipText).toEqual('This message is not encrypted.');
   });
 
   it('assumes that the mail is signed only if all imprints are valid', function() {
     var email = testData;
     email.security_casing = {imprints: [{state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}, {state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--signed');
+    expect(checkSigned.tooltipText).toEqual('You are communicating with the real sender.');
   });
 
   it('assumes that the mail is signed with failures if there is a revoke or expire', function() {
     var email = testData;
     email.security_casing = {imprints: [{state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}, {state: 'from_revoked', seal: {trust: 'marginal', validity: 'marginal'}}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--revoked');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--signed--revoked');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
   it('assumes that mail is not trusted if its signature contains no_trust from the user', function() {
     var email = testData;
     email.security_casing = {imprints: [{seal: {trust: 'no_trust', validity: 'ultimate'}}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--signed--not-trusted');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
   it('uses validity when trust is not present', function() {
     var email = testData;
     email.security_casing = {imprints: [{seal: { validity: 'no_trust'}}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--signed--not-trusted');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
-  it('assumes not trusted when the signature is not found', function(){
+  it('assumes not trusted when the seal signature is not found', function(){
     var email = testData;
     email.security_casing = {imprints: [{seal: null}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--signed--not-trusted');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
   it('assumes that the mail is not signed if there are no imprints', function() {
     var email = testData;
     email.security_casing = {imprints: []};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--not-signed');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
   it('assumes that there is no signature info to show', function() {
     var email = testData;
     email.security_casing = {imprints: [{state: 'no_signature_information'}]};
-    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed');
+    var checkSigned = this.component.checkSigned(email);
+    expect(checkSigned.cssClass).toEqual('security-status__label--not-signed');
+    expect(checkSigned.tooltipText).toEqual('The sender could not be verified.');
   });
 
   it('shows that mail is encrypted if it is', function() {