From e611094dfc396179a680c0c41cfe7bfe57dcb89c Mon Sep 17 00:00:00 2001 From: Thais Siqueira Date: Wed, 18 Jan 2017 17:58:40 -0200 Subject: [#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 --- web-ui/app/js/mail_view/ui/mail_view.js | 95 +++++++++++++------------ web-ui/app/scss/views/_security-labels.scss | 8 +++ web-ui/app/templates/mails/full_view.hbs | 4 +- web-ui/test/spec/mail_view/ui/mail_view.spec.js | 42 ++++++++--- 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 @@
{{#if signatureStatus}} - + {{t signatureStatus.label }} {{/if}} {{#if encryptionStatus}} - + {{t encryptionStatus.label }} {{/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() { -- cgit v1.2.3