diff --git a/.meteor/packages b/.meteor/packages index cca744ee60f7..072c1ba6056d 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -15,6 +15,7 @@ jquery less meteor-platform reactive-var +reactive-dict service-configuration chrismbeckett:toastr diff --git a/client/lib/chatMessages.coffee b/client/lib/chatMessages.coffee index 682b0e97d691..4e21b41fe5ac 100644 --- a/client/lib/chatMessages.coffee +++ b/client/lib/chatMessages.coffee @@ -19,7 +19,7 @@ # self.scrollable resize = -> - dif = 60 + $(".messages-container").find("footer").outerHeight() + dif = 60 + $(".messages-container").find("footer").outerHeight() + $(".messages-container").find(".security-banner").outerHeight() $(".messages-box").css height: "calc(100% - #{dif}px)" diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less index b6627ddd9e26..2cac4bc7a51d 100644 --- a/client/stylesheets/base.less +++ b/client/stylesheets/base.less @@ -1748,11 +1748,25 @@ a.github-fork { color: @primary-font-color; } } + .security-banner.U { background-color: @unclassified-background-color; } + .security-banner.C { background-color: @confidential-background-color; } + .security-banner.S { background-color: @secret-background-color; } + .security-banner.TS { background-color: @top-secret-background-color; } + .security-banner { + position: relative; + margin: 60px 20px 0px 0px; + padding: 5px 0px 5px 0px; + width: 100%; + text-align: center; + /* default */ + color:white; + background-color: @unclassified-background-color; + } .wrapper { position: absolute; width: 100%; - height: 100%; - top: 0; + height: 100%; + top: 0; left: 0; overflow-y: auto; overflow-x: hidden; @@ -1882,10 +1896,10 @@ a.github-fork { .messages-box { position: relative; - margin: 60px 20px 0px 0px; + margin: 0px 20px 0px 0px; overflow: hidden; width: 100%; - .calc(height, ~'100% - 120px'); + .calc(height, ~'100% - 155px'); ul { padding: 21px 0 10px; } diff --git a/client/stylesheets/global/_variables.less b/client/stylesheets/global/_variables.less index ddadf7606b91..53b9c01889b5 100644 --- a/client/stylesheets/global/_variables.less +++ b/client/stylesheets/global/_variables.less @@ -16,6 +16,11 @@ @secondary-background-color: #F4F4F4; @tertiary-background-color: #EAEAEA; +@unclassified-background-color: green; +@confidential-background-color: blue; +@secret-background-color: red; +@top-secret-background-color: orange; + @link-font-color: #008CE3; @primary-font-color: #444444; diff --git a/client/views/app/room.coffee b/client/views/app/room.coffee index b659463e3594..fb9ba35da30a 100644 --- a/client/views/app/room.coffee +++ b/client/views/app/room.coffee @@ -283,6 +283,28 @@ Template.room.helpers noRtcLayout: -> return (!Session.get('rtcLayoutmode') || (Session.get('rtcLayoutmode') == 0) ? true: false); + bannerData: -> + # The data context only contains the room id. one way to get the banner data is to just pass + # this id to a server-side method and let it look up the room details (such as permissions) + # and then return the banner info. + # + # HOWEVER, doing it this way does not allow the banner to be reactive in case the underlying + # room data changes (eg, if someone edits Mongo manually). This is because the template has + # no way of knowing if anything changed, so the method never gets called again. One way around + # this is to make "bannerData" itself reactive by having it depend directly on the room data. + # Then, since that data gets synchronized with the server, the template will be reprocessed + # when the data changes. + accessPermissions = ChatRoom.findOne(this._id)?.accessPermissions || [] + Template.instance().updateBannerData(accessPermissions) + return Template.instance().bannerData + + # For helpers "classificationId" and "securityBannerText", "this" refers to what is returned + # from "bannerData" + classificationId: -> + return this.get 'classificationId' + + securityBannerText: -> + return this.get 'text' Template.room.events @@ -528,10 +550,24 @@ Template.room.events Template.room.onCreated -> console.log 'room.onCreated' if window.rocketDebug + self = this # this.scrollOnBottom = true this.showUsersOffline = new ReactiveVar false this.atBottom = true + this.bannerData = new ReactiveDict + this.bannerData.set 'text', 'Unknown' + this.bannerData.set 'classificationId', 'U' + + this.updateBannerData = (accessPermissions) -> + Meteor.call 'getSecurityBanner', accessPermissions, (error, result) -> + if error + toastr.error error.reason + else + self.bannerData.set 'text', result.text + self.bannerData.set 'classificationId', result.classificationId + + Template.room.onRendered -> console.log 'room.onRendered' if window.rocketDebug FlexTab.check() diff --git a/client/views/app/room.html b/client/views/app/room.html index 3cd8e3c08922..7d8f4dace5f9 100644 --- a/client/views/app/room.html +++ b/client/views/app/room.html @@ -19,6 +19,11 @@

{{/if}}

+ {{#with bannerData}} +
+ {{securityBannerText}} +
+ {{/with}}