Merge pull request #659 from cacarrara/security-labels

Issue #647: Refactor security labels stylesheet

5 files changed, 127 insertions, 36 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 85d536f9..6f21b96c 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -142,26 +142,41 @@ define(
       };
 
       this.checkEncrypted = function(mail) {
-        if(_.isEmpty(mail.security_casing.locks)) { return 'not-encrypted'; }
+        if(_.isEmpty(mail.security_casing.locks)) {
+          return {
+            cssClass: 'security-status__label--not-encrypted',
+            label: 'not-encrypted'
+          };
+        }
 
-        var status = ['encrypted'];
+        var statusClass = ['security-status__label--encrypted'];
+        var statusLabel = ['encrypted'];
 
         var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
           return lock.state === 'valid';
         });
 
         if(hasAnyEncryptionInfo) {
-          status.push('encryption-valid');
+          statusLabel.push('encryption-valid');
         } else {
-          status.push('encryption-error');
+          statusClass.push('--with-error');
+          statusLabel.push('encryption-error');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        };
       };
 
       this.checkSigned = function(mail) {
+        var statusNotSigned = {
+          cssClass: 'security-status__label--not-signed',
+          label: 'not-signed'
+        };
+
         if(_.isEmpty(mail.security_casing.imprints)) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
         var hasNoSignatureInformation = _.any(mail.security_casing.imprints, function (imprint) {
@@ -169,23 +184,31 @@ define(
         });
 
         if(hasNoSignatureInformation) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
-        var status = ['signed'];
+        var statusClass = ['security-status__label--signed'];
+        var statusLabel = ['signed'];
 
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
-          status.push('signature-revoked');
+          statusClass.push('--revoked');
+          statusLabel.push('signature-revoked');
         }
+
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
-          status.push('signature-expired');
+          statusClass.push('--expired');
+          statusLabel.push('signature-expired');
         }
 
         if(this.isNotTrusted(mail)) {
-          status.push('signature-not-trusted');
+          statusClass.push('--not-trusted');
+          statusLabel.push('signature-not-trusted');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        };
       };
 
       this.isNotTrusted = function(mail){
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index 05974efb..4dc79398 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -23,6 +23,7 @@
 @import "views/no-message-selected";
 @import "views/no-mails-available";
 @import "views/read-view";
+@import "views/security-labels";
 @import "views/compose-view";
 @import "views/compose-button";
 
@@ -31,6 +32,5 @@
 
 // TODO
 @import "reply";
-@import "security";
 @import "styles";
 
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
new file mode 100644
index 00000000..3a15d99b
--- /dev/null
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -0,0 +1,67 @@
+.security-status {
+  margin: 0 0 5px;
+
+  &__label {
+    display: inline-block;
+    padding: 2px 6px;
+    white-space: nowrap;
+    background: $success;
+    color: $white;
+    border-radius: 12px;
+
+    &:before {
+      font-family: FontAwesome;
+    }
+
+    &--encrypted {
+      &:before {
+        content: "\f023";
+      }
+
+      &--with-error {
+        background: $attention;
+        &:before {
+          content: "\f023 \f057";
+        }
+      }
+    }
+
+    &--not-encrypted {
+      background: $attention;
+
+      &:before {
+        content: "\f13e ";
+      }
+    }
+
+    &--signed {
+      &:before {
+        content: "\f00c";
+      }
+
+      &--revoked, &--expired {
+        background: $attention;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+
+      &--not-trusted {
+        background: $error;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+
+    &--not-signed {
+      background: $attention;
+
+      &:before {
+        content: "\f05e";
+      }
+    }
+  }
+}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 4c0863de..8c486275 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -8,12 +8,13 @@
         <!-- TODO -->
         <div class="column large-12 no-padding security-status">
             {{#if signatureStatus}}
-            <span class="{{signatureStatus}}">
-              {{t signatureStatus }}
+            <span class="security-status__label {{ signatureStatus.cssClass }}">
+              {{t signatureStatus.label }}
             </span>
-            {{/if}} {{#if encryptionStatus}}
-            <span class="{{encryptionStatus}}">
-              {{t encryptionStatus }}
+            {{/if}}
+            {{#if encryptionStatus}}
+            <span class="security-status__label {{ encryptionStatus.cssClass }}">
+              {{t encryptionStatus.label }}
             </span>
             {{/if}}
         </div>
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 093eddb8..850687be 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
@@ -121,85 +121,85 @@ 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)).toEqual('encrypted encryption-valid');
+    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--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)).toEqual('encrypted encryption-error');
+    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--encrypted--with-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)).toEqual('not-encrypted');
+    expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--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)).toEqual('signed');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed');
   });
 
   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)).toEqual('signed signature-revoked');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--revoked');
   });
 
   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)).toEqual('signed signature-not-trusted');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
   });
 
   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)).toEqual('signed signature-not-trusted');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
   });
 
   it('assumes not trusted when the signature is not found', function(){
     var email = testData;
     email.security_casing = {imprints: [{seal: null}]};
-    expect(this.component.checkSigned(email)).toEqual('signed signature-not-trusted');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted');
   });
 
   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)).toEqual('not-signed');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed');
   });
 
   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)).toEqual('not-signed');
+    expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed');
   });
 
   it('shows that mail is encrypted if it is', function() {
-    spyOn(this.component, 'checkEncrypted').and.returnValue('encrypted');
+    spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'security-status__label--encrypted'});
     this.component.displayMail({}, testData);
-    expect(this.component.$node.find('.encrypted')).toExist();
+    expect(this.component.$node.find('.security-status__label--encrypted')).toExist();
   });
 
   it('shows that mail is signed if it is', function() {
-    spyOn(this.component, 'checkSigned').and.returnValue('signed');
+    spyOn(this.component, 'checkSigned').and.returnValue({cssClass: 'security-status__label--signed'});
     this.component.displayMail({}, testData);
-    expect(this.component.$node.find('.signed')).toExist();
+    expect(this.component.$node.find('.security-status__label--signed')).toExist();
   });
 
   it('shows that mail is not encrypted if it isn\'t', function() {
-    spyOn(this.component, 'checkEncrypted').and.returnValue('not-encrypted');
+    spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'security-status__label--not-encrypted'});
     this.component.displayMail({}, testData);
-    expect(this.component.$node.find('.not-encrypted')).toExist();
+    expect(this.component.$node.find('.security-status__label--not-encrypted')).toExist();
   });
 
   it('shows that mail is not signed if it isn\'t', function() {
-    spyOn(this.component, 'checkEncrypted').and.returnValue('not-signed');
+    spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'securty-status__label--not-signed'});
     this.component.displayMail({}, testData);
-    expect(this.component.$node.find('.not-signed')).toExist();
+    expect(this.component.$node.find('.security-status__label--not-signed')).toExist();
   });
 
   it('creates new tag when pressing Enter key on new tag input', function(){