Close #1635; Add textarea for adding custom CSS/JS

i18n/en.i18n.json

@@ -153,6 +153,8 @@
   "Created_at_s_by_s" : "Created at <strong>%s</strong> by <strong>%s</strong>",
   "Custom_oauth_helper" : "When setting up your OAuth Provider, you'll have to inform a Callback URL. Use <pre>%s</pre> .",
   "Custom_oauth_unique_name" : "Custom oauth unique name",
+  "Custom_Script_Logged_In" : "Custom Script for logged in users",
+  "Custom_Script_Logged_Out" : "Custom Script for logged out users",
   "days" : "days",
   "Deactivate" : "Deactivate",
   "Default" : "Default",
@@ -732,4 +734,4 @@
   "Your_Open_Source_solution" : "Your own Open Source chat solution",
   "Your_password_is_wrong" : "Your password is wrong!",
   "Your_push_was_sent_to_s_devices" : "Your push was sent to %s devices"
-}
\ No newline at end of file
+}

packages/rocketchat-integrations/client/views/integrationsIncoming.coffee

@@ -138,12 +138,14 @@ Template.integrationsIncoming.events
 				FlowRouter.go "admin-integrations"
 
 	"click .button-fullscreen": ->
-		$('.code-mirror-box').addClass('code-mirror-box-fullscreen');
-		$('.CodeMirror')[0].CodeMirror.refresh()
+		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
+		codeMirrorBox.addClass('code-mirror-box-fullscreen')
+		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .button-restore": ->
-		$('.code-mirror-box').removeClass('code-mirror-box-fullscreen');
-		$('.CodeMirror')[0].CodeMirror.refresh()
+		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
+		codeMirrorBox.removeClass('code-mirror-box-fullscreen')
+		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .submit > .save": ->
 		enabled = $('[name=enabled]:checked').val().trim()

packages/rocketchat-lib/server/startup/settings.coffee

@@ -155,13 +155,17 @@ RocketChat.settings.addGroup 'Layout', ->
 
 	@section 'Content', ->
 		@add 'Layout_Home_Title', 'Home', { type: 'string', public: true }
-		@add 'Layout_Home_Body', 'Welcome to Rocket.Chat <br> Go to APP SETTINGS -> Layout to customize this intro.', { type: 'string', multiline: true, public: true }
-		@add 'Layout_Terms_of_Service', 'Terms of Service <br> Go to APP SETTINGS -> Layout to customize this page.', { type: 'string', multiline: true, public: true }
-		@add 'Layout_Privacy_Policy', 'Privacy Policy <br> Go to APP SETTINGS -> Layout to customize this page.', { type: 'string', multiline: true, public: true }
-		@add 'Layout_Sidenav_Footer', '<div><a href="https://github.com/RocketChat/Rocket.Chat" class="logo" target="_blank"> <img src="/images/logo/logo.svg?v=3" /></a><div class="github-tagline"><span class="octicon octicon-pencil" style="color: #994C00"></span> with <span class="octicon octicon-heart" style="color: red"></span> on <span class="octicon octicon-mark-github"></span></div></div>', { type: 'string', public: true, i18nDescription: 'Layout_Sidenav_Footer_description' }
+		@add 'Layout_Home_Body', 'Welcome to Rocket.Chat <br> Go to APP SETTINGS -> Layout to customize this intro.', { type: 'code', code: 'text/html', multiline: true, public: true }
+		@add 'Layout_Terms_of_Service', 'Terms of Service <br> Go to APP SETTINGS -> Layout to customize this page.', { type: 'code', code: 'text/html', multiline: true, public: true }
+		@add 'Layout_Privacy_Policy', 'Privacy Policy <br> Go to APP SETTINGS -> Layout to customize this page.', { type: 'code', code: 'text/html', multiline: true, public: true }
+		@add 'Layout_Sidenav_Footer', '<div><a href="https://github.com/RocketChat/Rocket.Chat" class="logo" target="_blank"> <img src="/images/logo/logo.svg?v=3" /></a><div class="github-tagline"><span class="octicon octicon-pencil" style="color: #994C00"></span> with <span class="octicon octicon-heart" style="color: red"></span> on <span class="octicon octicon-mark-github"></span></div></div>', { type: 'code', code: 'text/html', public: true, i18nDescription: 'Layout_Sidenav_Footer_description' }
+
+	@section 'Custom Scripts', ->
+		@add 'Custom_Script_Logged_Out', '//Add your script', { type: 'code', multiline: true, public: true }
+		@add 'Custom_Script_Logged_In', '//Add your script', { type: 'code', multiline: true, public: true }
 
 	@section 'Login', ->
-		@add 'Layout_Login_Header', '<a class="logo" href="/"><img src="/images/logo/logo.svg?v=3" /></a>', { type: 'string', multiline: true, public: true }
+		@add 'Layout_Login_Header', '<a class="logo" href="/"><img src="/images/logo/logo.svg?v=3" /></a>', { type: 'code', code: 'text/html', multiline: true, public: true }
 		@add 'Layout_Login_Terms', 'By proceeding to create your account and use Rocket.Chat, you are agreeing to our <a href="/terms-of-service">Terms of Service</a> and <a href="/privacy-policy">Privacy Policy</a>. If you do not agree, you cannot use Rocket.Chat.', { type: 'string', multiline: true, public: true }
 
 

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

@@ -27,5 +27,6 @@
   "theme-color-status-online" : "Online Status Color",
   "theme-color-tertiary-background-color" : "Tertiary Background Color",
   "theme-color-tertiary-font-color" : "Tertiary Font Color",
-  "theme-color-unread-notification-color" : "Unread Notifications Color"
-}
\ No newline at end of file
+  "theme-color-unread-notification-color" : "Unread Notifications Color",
+  "theme-custom-css" : "Custom CSS"
+}

packages/rocketchat-theme/server/server.coffee

@@ -56,17 +56,23 @@ RocketChat.theme = new class
 	]
 
 	constructor: ->
+		@customCSS = ''
+
 		RocketChat.settings.add 'css', ''
 		RocketChat.settings.addGroup 'Layout'
 
 		compile = _.debounce Meteor.bindEnvironment(@compile.bind(@)), 200
 
 		RocketChat.settings.onload '*', Meteor.bindEnvironment (key, value, initialLoad) =>
-			if /^theme-.+/.test(key) is false then return
-
-			name = key.replace /^theme-[a-z]+-/, ''
-			if @variables[name]?
-				@variables[name].value = value
+			if key is 'theme-custom-css'
+				if value?.trim() isnt ''
+					@customCSS = value
+			else if /^theme-.+/.test(key) is true
+				name = key.replace /^theme-[a-z]+-/, ''
+				if @variables[name]?
+					@variables[name].value = value
+			else
+				return
 
 			compile()
 
@@ -82,6 +88,8 @@ RocketChat.theme = new class
 			if _.isString result
 				content.push result
 
+		content.push @customCSS
+
 		content = content.join '\n'
 
 		options =

packages/rocketchat-theme/server/variables.coffee

@@ -28,3 +28,12 @@ RocketChat.theme.addPublicColor "status-busy", "#d30230"
 RocketChat.theme.addPublicColor "status-offline", "rgba(150, 150, 150, 0.50)"
 RocketChat.theme.addPublicColor "status-online", "#35ac19"
 RocketChat.theme.addPublicColor "unread-notification-color", "#1dce73"
+
+
+RocketChat.settings.add "theme-custom-css", '',
+	group: 'Layout'
+	type: 'code'
+	code: 'less'
+	multiline: true
+	section: 'Custom CSS'
+	public: false

packages/rocketchat-ui-admin/admin/admin.coffee

@@ -119,6 +119,33 @@ Template.admin.helpers
 	random: ->
 		return Random.id()
 
+	getEditorOptions: ->
+		return {} =
+			lineNumbers: true
+			mode: this.code or "javascript"
+			gutters: [
+				"CodeMirror-linenumbers"
+				"CodeMirror-foldgutter"
+			]
+			foldGutter: true
+			matchBrackets: true
+			autoCloseBrackets: true
+			matchTags: true,
+			showTrailingSpace: true
+			highlightSelectionMatches: true
+
+	setEditorOnBlur: (_id) ->
+		Meteor.defer ->
+			codeMirror = $('.code-mirror-box[data-editor-id="'+_id+'"] .CodeMirror')[0].CodeMirror
+			codeMirror.on 'change', ->
+				value = codeMirror.getValue()
+				TempSettings.update {_id: _id},
+					$set:
+						value: value
+						changed: Settings.findOne(_id).value isnt value
+		return
+
+
 Template.admin.events
 	"change .input-monitor": (e, t) ->
 		value = _.trim $(e.target).val()
@@ -220,6 +247,8 @@ Template.admin.events
 	"click .expand": (e) ->
 		$(e.currentTarget).closest('.section').removeClass('section-collapsed')
 		$(e.currentTarget).closest('button').removeClass('expand').addClass('collapse').find('span').text(TAPi18n.__ "Collapse")
+		$('.code-mirror-box .CodeMirror').each (index, codeMirror) ->
+			codeMirror.CodeMirror.refresh()
 
 	"click .collapse": (e) ->
 		$(e.currentTarget).closest('.section').addClass('section-collapsed')
@@ -238,6 +267,16 @@ Template.admin.events
 
 			toastr.success TAPi18n.__.apply(TAPi18n, args), TAPi18n.__('Success')
 
+	"click .button-fullscreen": ->
+		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
+		codeMirrorBox.addClass('code-mirror-box-fullscreen')
+		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
+
+	"click .button-restore": ->
+		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
+		codeMirrorBox.removeClass('code-mirror-box-fullscreen')
+		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
+
 
 Template.admin.onRendered ->
 	Tracker.afterFlush ->
@@ -248,6 +287,18 @@ Template.admin.onRendered ->
 		$('input.minicolors').minicolors({theme: 'rocketchat'})
 	, 1000
 
+	$('.code-mirror-box').each (index, codeMirrorBox) ->
+		_id = codeMirrorBox.data('code-id')
+		console.log _id
+		codeMirror = codeMirrorBox.find('.CodeMirror')[0].CodeMirror
+		codeMirror.on 'blur', ->
+			value = codeMirror.getValue()
+			console.log('blur', value)
+			TempSettings.update {_id: _id},
+				$set:
+					value: value
+					changed: Settings.findOne(_id).value isnt value
+
 	Tracker.autorun ->
 		FlowRouter.watchPathChange()
 		Meteor.setTimeout ->

packages/rocketchat-ui-admin/admin/admin.html

@@ -86,6 +86,24 @@
 												<input class="input-monitor minicolors" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
 											{{/if}}
 
+											{{#if $eq type 'code'}}
+												<div class="code-mirror-box" data-editor-id="{{_id}}" {{isDisabled}}>
+													<div class="title">
+														{{label}}
+													</div>
+													{{> CodeMirror name=_id options=getEditorOptions code=value }}
+													{{setEditorOnBlur _id}}
+													<div class="buttons">
+														<button class="button button-primary button-fullscreen">
+															Full Screen
+														</button>
+														<button class="button button-primary button-restore">
+															Exit Full Screen
+														</button>
+													</div>
+												</div>
+											{{/if}}
+
 											{{#if $eq type 'action'}}
 												{{#if hasChanges section}}
 													<span style="line-height: 40px; color: #888;">{{_ "Save_to_enable_this_action"}}</span>

packages/rocketchat-ui-master/master/main.coffee

@@ -146,6 +146,12 @@ Template.main.helpers
 	requirePasswordChange: ->
 		return Meteor.user()?.requirePasswordChange is true
 
+	CustomScriptLoggedOut: ->
+		RocketChat.settings.get 'Custom_Script_Logged_Out'
+
+	CustomScriptLoggedIn: ->
+		RocketChat.settings.get 'Custom_Script_Logged_In'
+
 
 Template.main.events
 

packages/rocketchat-ui-master/master/main.html

@@ -47,6 +47,7 @@
 				{{> status}}
 			</div>
 			{{> loginLayout center="loginForm"}}
+			<script>{{{CustomScriptLoggedOut}}}</script>
 		{{else}}
 			{{#unless hasUsername}}
 				{{> username}}
@@ -77,6 +78,7 @@
 					{{> audioNotification }}
 				{{/if}}
 			{{/unless}}
+			<script>{{{CustomScriptLoggedIn}}}</script>
 		{{/unless}}
 	{{/if}}
 </template>