Merge pull request #8260 from RocketChat/read-only

[NEW] Enable read only channel creation

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -159,6 +159,7 @@
   "All_channels": "All channels",
   "All_logs": "All logs",
   "All_messages": "All messages",
+  "All_users_in_the_channel_can_write_new_messages": "All users in the channel can write new messages",
   "Allow_Invalid_SelfSigned_Certs": "Allow Invalid Self-Signed Certs",
   "Allow_Invalid_SelfSigned_Certs_Description": "Allow invalid and self-signed SSL certificate's for link validation and previews.",
   "Allow_switching_departments": "Allow visitor to switch departments",
@@ -1223,6 +1224,7 @@
   "Offline_unavailable": "Offline unavailable",
   "On": "On",
   "Online": "Online",
+  "Only_authorized_users_can_write_new_messages": "Only authorized users can write new messages",
   "Only_On_Desktop": "Desktop mode (only sends with enter on desktop)",
   "Only_you_can_see_this_message": "Only you can see this message",
   "Oops!": "Oops",

packages/rocketchat-theme/client/imports/components/modal/create-channel.css

@@ -31,7 +31,11 @@
 	}
 
 	& .rc-switch {
-		width: 50%;
+		width: 100%;
+
+		&:not(:last-child) {
+			margin-bottom: 2rem;
+		}
 	}
 
 	& .rc-input__icon-svg {
@@ -48,15 +52,3 @@
 		opacity: 1;
 	}
 }
-
-@media (width <= 400px) {
-	.create-channel {
-		& .rc-switch {
-			width: 100%;
-
-			&:not(:last-child) {
-				margin-bottom: 2rem;
-			}
-		}
-	}
-}

packages/rocketchat-ui/client/views/app/createChannel.html

@@ -20,14 +20,15 @@ <h1 class="create-channel__title">{{_ "Create_A_New_Channel"}}</h1>
 				</div>
 				<div class="rc-switch">
 					<label class="rc-switch__label">
-						<input type="checkbox" class="rc-switch__input" name="readOnly" {{readOnlyIsDisabled}}>
+						<input type="checkbox" class="rc-switch__input" name="readOnly">
 						<span class="rc-switch__button">
 							<span class="rc-switch__button-inside"></span>
 						</span>
 						<span class="rc-switch__text">
 							{{_ "Read_only_channel"}}
 						</span>
 					</label>
+					<span class="rc-switch__description">{{readOnlyDescription}}</span>
 				</div>
 			</div>
 			<div class="create-channel__inputs">

packages/rocketchat-ui/client/views/app/createChannel.js

@@ -2,7 +2,7 @@ const acEvents = {
 	'click .rc-popup-list__item'(e, t) {
 		t.ac.onItemClick(this, e);
 	},
-	'keydown [name=users]'(e, t) {
+	'keydown [name="users"]'(e, t) {
 		if ([8, 46].includes(e.keyCode) && e.target.value === '') {
 			const users = t.selectedUsers;
 			const usersArr = users.get();
@@ -12,13 +12,13 @@ const acEvents = {
 
 		t.ac.onKeyDown(e);
 	},
-	'keyup [name=users]'(e, t) {
+	'keyup [name="users"]'(e, t) {
 		t.ac.onKeyUp(e);
 	},
-	'focus [name=users]'(e, t) {
+	'focus [name="users"]'(e, t) {
 		t.ac.onFocus(e);
 	},
-	'blur [name=users]'(e, t) {
+	'blur [name="users"]'(e, t) {
 		t.ac.onBlur(e);
 	}
 };
@@ -74,14 +74,14 @@ Template.createChannel.helpers({
 		const inUse = instance.inUse.get();
 		return invalid || inUse;
 	},
-	readOnlyIsDisabled() {
-		return 'disabled';
-	},
 	typeLabel() {
 		return t(Template.instance().type.get() === 'p' ? t('Private_Channel') : t('Public_Channel'));
 	},
 	typeDescription() {
-		return t(Template.instance().type.get() === 'p' ? t('Just_invited_people_can_access_this_channel'): t('Everyone_can_access_this_channel'));
+		return t(Template.instance().type.get() === 'p' ? t('Just_invited_people_can_access_this_channel') : t('Everyone_can_access_this_channel'));
+	},
+	readOnlyDescription() {
+		return t(Template.instance().readOnly.get() ? t('Only_authorized_users_can_write_new_messages') : t('All_users_in_the_channel_can_write_new_messages'));
 	},
 	createIsDisabled() {
 		const instance = Template.instance();
@@ -105,10 +105,13 @@ Template.createChannel.events({
 		const {username} = Blaze.getData(target);
 		t.selectedUsers.set(t.selectedUsers.get().filter(user => user.username !== username));
 	},
-	'change [name=type]'(e, t) {
+	'change [name="type"]'(e, t) {
 		t.type.set(e.target.checked ? e.target.value : 'd');
 	},
-	'input [name=users]'(e, t) {
+	'change [name="readOnly"]'(e, t) {
+		t.readOnly.set(e.target.checked);
+	},
+	'input [name="users"]'(e, t) {
 		const input = e.target;
 		const position = input.selectionEnd || input.selectionStart;
 		const length = input.value.length;
@@ -118,7 +121,7 @@ Template.createChannel.events({
 
 		t.userFilter.set(modified);
 	},
-	'input [name=name]'(e, t) {
+	'input [name="name"]'(e, t) {
 		const input = e.target;
 		const position = input.selectionEnd || input.selectionStart;
 		const length = input.value.length;
@@ -138,8 +141,8 @@ Template.createChannel.events({
 		e.stopPropagation();
 		const name = e.target.name.value;
 		const type = instance.type.get();
+		const readOnly = instance.readOnly.get();
 		const isPrivate = type === 'p';
-		const readOnly = false;//instance.find('#channel-ro').checked;
 
 		if (instance.invalid.get() || instance.inUse.get()) {
 			return e.target.name.focus();
@@ -169,8 +172,8 @@ Template.createChannel.events({
 Template.createChannel.onRendered(function() {
 	const users = this.selectedUsers;
 
-	this.firstNode.querySelector('[name=name]').focus();
-	this.ac.element = this.firstNode.querySelector('[name=users]');
+	this.firstNode.querySelector('[name="name"]').focus();
+	this.ac.element = this.firstNode.querySelector('[name="users"]');
 	this.ac.$element = $(this.ac.element);
 	this.ac.$element.on('autocompleteselect', function(e, {item}) {
 		const usersArr = users.get();
@@ -190,6 +193,7 @@ Template.createChannel.onCreated(function() {
 
 	this.name = new ReactiveVar('');
 	this.type = new ReactiveVar('p');
+	this.readOnly = new ReactiveVar(false);
 	this.inUse = new ReactiveVar(undefined);
 	this.invalid = new ReactiveVar(false);
 	this.userFilter = new ReactiveVar('');