summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/js/mail_view/ui/mail_view.js95
-rw-r--r--web-ui/app/scss/views/_security-labels.scss8
-rw-r--r--web-ui/app/templates/mails/full_view.hbs4
-rw-r--r--web-ui/test/spec/mail_view/ui/mail_view.spec.js42
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() {
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-04 09:35:33 +0000