diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/mail_view.js | 47 | ||||
| -rw-r--r-- | web-ui/app/scss/style.scss | 2 | ||||
| -rw-r--r-- | web-ui/app/scss/views/_security-labels.scss | 67 | ||||
| -rw-r--r-- | web-ui/app/templates/mails/full_view.hbs | 11 |
4 files changed, 109 insertions, 18 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..d1fba8c4 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> |