[FIX] Remove Room info for Direct Messages (#9383) (#12429)

RocketChat · Mar 15, 2019 · e4bb492 · e4bb492
1 parent b57f208
commit e4bb492
Show file tree

Hide file tree

Showing 15 changed files with 1,150 additions and 259 deletions.
diff --git a/app/channel-settings/client/startup/tabBar.js b/app/channel-settings/client/startup/tabBar.js
@@ -3,7 +3,7 @@ import { TabBar } from '/app/ui-utils';
 
 Meteor.startup(() => {
 	TabBar.addButton({
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group'],
 		id: 'channel-settings',
 		anonymous: true,
 		i18nTitle: 'Room_Info',

diff --git a/app/e2e/client/rocketchat.e2e.js b/app/e2e/client/rocketchat.e2e.js
@@ -28,6 +28,7 @@ import {
 
 import './events.js';
 import './accountEncryption.html';
+import './tabbar';
 import './accountEncryption.js';
 
 let failedToDecodeKey = false;

diff --git a/app/e2e/client/tabbar.js b/app/e2e/client/tabbar.js
@@ -0,0 +1,21 @@
+import { Meteor } from 'meteor/meteor';
+import { Session } from 'meteor/session';
+import { hasAllPermission } from '/app/authorization';
+import { call, TabBar } from '/app/ui-utils';
+import { ChatRoom } from '/app/models';
+
+Meteor.startup(() => {
+	TabBar.addButton({
+		groups: ['direct', 'group'],
+		id: 'e2e',
+		i18nTitle: 'E2E',
+		icon: 'key',
+		class: () => (ChatRoom.findOne(Session.get('openedRoom')) || {}).encrypted && 'enabled',
+		action:() => {
+			const room = ChatRoom.findOne(Session.get('openedRoom'));
+			call('saveRoomSettings', room._id, 'encrypted', !room.encrypted);
+		},
+		order: 10,
+		condition: () => hasAllPermission('edit-room', Session.get('openedRoom')),
+	});
+});
diff --git a/app/lib/lib/roomTypes/public.js b/app/lib/lib/roomTypes/public.js
@@ -99,6 +99,8 @@ export class PublicRoomType extends RoomTypeConfig {
 				return !room.broadcast;
 			case RoomSettingsEnum.REACT_WHEN_READ_ONLY:
 				return !room.broadcast && room.ro;
+			case RoomSettingsEnum.E2E:
+				return false;
 			case RoomSettingsEnum.SYSTEM_MESSAGES:
 			default:
 				return true;

diff --git a/app/theme/client/imports/components/header.css b/app/theme/client/imports/components/header.css
@@ -50,8 +50,35 @@
 
 		align-items: center;
 
-		&--action {
+		&-action {
+			position: relative;
+
 			cursor: pointer;
+
+			& + & {
+				&::before,
+				&::after {
+					position: absolute;
+
+					height: 1rem;
+
+					content: "";
+				}
+
+				&::before {
+					border-left: 1px #cccccc solid;
+				}
+
+				.rtl & {
+					&::after {
+						border-right: 1px var(--color-gray) solid;
+					}
+
+					&::before {
+						border-left: 0;
+					}
+				}
+			}
 		}
 	}
 
@@ -208,6 +235,22 @@
 		}
 	}
 
+	&__toggle-encryption {
+		color: var(--header-toggle-encryption-on-color);
+
+		&.empty {
+			color: var(--header-toggle-encryption-off-color);
+
+			& .rc-header__icon {
+				fill: none;
+			}
+		}
+
+		&:hover {
+			color: var(--header-toggle-encryption-on-color);
+		}
+	}
+
 	&__icon {
 		font-size: 1rem;
 	}
@@ -247,6 +290,10 @@
 			color: var(--rc-color-link-active);
 		}
 
+		&.enabled {
+			color: var(--header-toggle-encryption-on-color);
+		}
+
 		&.live {
 			position: relative;
 		}
@@ -345,6 +392,15 @@
 
 		&__block-action {
 			order: 2;
+
+			& + & {
+				border-left: 1px var(--color-gray) solid;
+
+				.rtl & {
+					border-right: 1px var(--color-gray) solid;
+					border-left: 0;
+				}
+			}
 		}
 
 		&__favorite {

diff --git a/app/theme/client/imports/general/variables.css b/app/theme/client/imports/general/variables.css
@@ -279,6 +279,8 @@
 	--header-padding: 16px;
 	--header-toggle-favorite-color: var(--color-gray-medium);
 	--header-toggle-favorite-star-color: var(--rc-color-alert-light);
+	--header-toggle-encryption-off-color: var(--color-gray-medium);
+	--header-toggle-encryption-on-color: var(--rc-color-alert-message-secondary);
 	--header-title-username-color-darker: var(--color-dark);
 	--header-title-font-size: var(--text-default-size);
 	--header-title-font-size--subtitle: var(--text-small-size);

diff --git a/app/ui-flextab/client/flexTabBar.js b/app/ui-flextab/client/flexTabBar.js
@@ -96,6 +96,10 @@ const commonEvents = {
 			return t.tabBar.close();
 		}
 
+		if (this.action) {
+			return this.action();
+		}
+
 		$flexTab.attr('template', this.template);
 		t.tabBar.setData({
 			label: this.i18nTitle,
@@ -111,11 +115,13 @@ const action = function(e, t) {
 	e.preventDefault();
 	const $flexTab = $('.flex-tab-container .flex-tab');
 
+	if (this.actionDefault) {
+		return this.actionDefault();
+	}
 	if (t.tabBar.getState() === 'opened' && t.tabBar.getTemplate() === this.template) {
 		$flexTab.attr('template', '');
 		return t.tabBar.close();
 	}
-
 	$flexTab.attr('template', this.template);
 	t.tabBar.setData({
 		label: this.i18nTitle,
@@ -170,11 +176,12 @@ Template.RoomsActionTab.events({
 		$(e.currentTarget).blur();
 		e.preventDefault();
 		const buttons = TabBar.getButtons().filter((button) => filterButtons(button, t.anonymous, t.data.rid));
-		const groups = [{ items:(t.small.get() ? buttons : buttons.slice(TabBar.size)).map((item) => {
-			item.name = TAPi18n.__(item.i18nTitle);
-			item.action = action;
-			return item;
-		}) }];
+		const groups = [{ items:(t.small.get() ? buttons : buttons.slice(TabBar.size)).map((item) => ({
+			...item,
+			name: TAPi18n.__(item.i18nTitle),
+			actionDefault: item.action !== action && item.action,
+			action,
+		})) }];
 		const columns = [groups];
 		columns[0] = { groups };
 		const config = {

diff --git a/app/ui/client/components/header/headerRoom.html b/app/ui/client/components/header/headerRoom.html
@@ -18,15 +18,11 @@
 				</div>
 			{{/if}}
 
-
 			<!-- TODO: fix it style and helper -->
 			{{#if tokenAccessChannel}}
 				<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
 			{{/if}}
 
-			{{#if encryptedChannel}}
-				<i class="icon-key" aria-label="{{_ "Encrypted_Channel_Label"}}"></i>
-			{{/if}}
 			<div class="rc-header__content rc-header__block">
 				{{#if isDirect}}
 				<div class="rc-header__block">
@@ -64,27 +60,16 @@
 			{{#if isSection}}
 			<span class="rc-header__block">{{_ sectionName}}</span>
 			{{/if}}
-
+			{{#if encryptionState}}
+			<div class="rc-header__block rc-header__block-action rc-header__encryption">
+				<div class="rc-room-actions">
+					<button aria-label="{{_ 'E2E_Enabled'}}" class="rc-tooltip rc-tooltip--down rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
+				</div>
+			</div>
+			{{/if}}
 			{{#if Template.contentBlock}}
-			{{> Template.contentBlock}}
+				{{> Template.contentBlock}}
 			{{/if}}
-
-			{{#unless isChannel}}
-			{{# unless hideHelp}}
-			<div class="rc-header__section-help"></div>
-			{{/unless}}
-			{{/unless}}
-
-			{{#with toolbarButtons}}
-			<div class="iframe-toolbar">
-				{{#each buttons}}
-				<button class="{{id}}">
-					{{#if icon}}<i class="{{icon}}"></i>{{/if}}
-					{{label}}
-				</button>
-				{{/each}}
-			</div>
-			{{/with}}
 		</div>
 	</header>
 </template>
diff --git a/app/ui/client/components/header/headerRoom.js b/app/ui/client/components/header/headerRoom.js
@@ -1,3 +1,4 @@
+import toastr from 'toastr';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Session } from 'meteor/session';
@@ -9,6 +10,8 @@ import { settings } from '/app/settings';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { emoji } from '/app/emoji';
 import { Markdown } from '/app/markdown';
+import { hasAllPermission } from '/app/authorization';
+import { call } from '/app/ui-utils';
 
 const isSubscribed = (_id) => ChatSubscription.find({ rid: _id }).count() > 0;
 
@@ -101,10 +104,9 @@ Template.headerRoom.helpers({
 	tokenAccessChannel() {
 		return Template.instance().hasTokenpass.get();
 	},
-
-	encryptedChannel() {
-		const roomData = Session.get(`roomData${ this._id }`);
-		return roomData && roomData.encrypted;
+	encryptionState() {
+		const room = ChatRoom.findOne(this._id);
+		return (room && room.encrypted) && 'encrypted';
 	},
 
 	userStatus() {
@@ -167,6 +169,18 @@ Template.headerRoom.events({
 		const { prid } = t.currentChannel;
 		FlowRouter.goToRoomById(prid);
 	},
+	'click .js-toggle-encryption'(event) {
+		event.stopPropagation();
+		event.preventDefault();
+		const room = ChatRoom.findOne(this._id);
+		if (hasAllPermission('edit-room', this._id)) {
+			call('saveRoomSettings', this._id, 'encrypted', !(room && room.encrypted)).then(() => {
+				toastr.success(
+					t('Encrypted_setting_changed_successfully')
+				);
+			});
+		}
+	},
 });
 
 Template.headerRoom.onCreated(function() {