Allow avatar and alias customization

i18n/en.i18n.json

@@ -65,6 +65,7 @@
   "Add_Members" : "Add Members",
   "Add_users" : "Add users",
   "Administration" : "Administration",
+  "Alias" : "Alias",
   "All_channels" : "All channels",
   "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.",
@@ -79,6 +80,7 @@
   "Are_you_sure" : "Are you sure?",
   "Auto_Load_Images" : "Auto Load Images",
   "Avatar_changed_successfully" : "Avatar changed successfully",
+  "Avatar_URL" : "Avatar URL",
   "Avatar_url_invalid_or_error" : "The url provided is invalid or not accessible. Please try again, but with a different url.",
   "away" : "away",
   "Away" : "Away",
@@ -102,6 +104,7 @@
   "Channels" : "Channels",
   "Channels_list" : "List of public channels",
   "Chat_Rooms" : "Chat Rooms",
+  "Choose_the_alias_that_will_appear_before_the_username_in_messages" : "Choose the alias that will appear before the username in messages.",
   "Choose_the_username_that_this_integration_will_post_as" : "Choose the username that this integration will post as.",
   "Clear_all_unreads_question" : "Clear all unreads?",
   "close" : "close",
@@ -402,6 +405,7 @@
   "Send_your_JSON_payloads_to_this_URL" : "Send your JSON payloads to this URL.",
   "Settings" : "Settings",
   "Settings_updated" : "Settings updated",
+  "Should_be_a_URL_of_an_image" : "Should be a URL of an image.",
   "Should_exists_a_user_with_this_username" : "Should exists a user with this username.",
   "Showing_online_users" : "Showing <b>__total_online__</b> of __total__ users",
   "Showing_results" : "<p>Showing <b>%s</b> results</p>",
@@ -506,6 +510,7 @@
   "Yes_clear_all" : "Yes, clear all!",
   "Yes_delete_it" : "Yes, delete it!",
   "you_are_in_preview_mode_of" : "You are in preview mode of channel #<strong>__room_name__</strong>",
+  "You_can_change_a_different_avatar_too" : "You can change a different avatar too",
   "You_need_confirm_email" : "You need to confirm your email to login!",
   "You_should_name_it_to_easily_manage_your_integrations" : "You should name it to easily manage your integrations.",
   "You_will_not_be_able_to_recover" : "You will not be able to recover this message!",

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

+Template.integrationsIncoming.onCreated ->
+	@record = new ReactiveVar
+		username: 'rocket.cat'
+
+
 Template.integrationsIncoming.helpers
 
 	hasPermission: ->
@@ -10,14 +15,17 @@ Template.integrationsIncoming.helpers
 			data = ChatIntegrations.findOne({_id: params.id})
 			if data?
 				data.url = Meteor.absoluteUrl("hooks/#{encodeURIComponent(data._id)}/#{encodeURIComponent(data.userId)}/#{encodeURIComponent(data.token)}")
+				Template.instance().record.set data
 				return data
 
-		return {} =
-			username: 'rocket.cat'
+		return Template.instance().record.curValue
 
 	example: ->
+		record = Template.instance().record.get()
 		return {} =
 			_id: Random.id()
+			alias: record.alias
+			avatar: record.avatar
 			msg: 'Example message'
 			bot:
 				i: Random.id()
@@ -31,10 +39,18 @@ Template.integrationsIncoming.helpers
 			ts: new Date
 			u:
 				_id: Random.id()
-				username: "rocket.cat"
+				username: record.username
 
 
 Template.integrationsIncoming.events
+	"blur input": (e, t) ->
+		t.record.set
+			name: $('[name=name]').val().trim()
+			alias: $('[name=alias]').val().trim()
+			avatar: $('[name=avatar]').val().trim()
+			channel: $('[name=channel]').val().trim()
+			username: $('[name=username]').val().trim()
+
 	"click .submit > .delete": ->
 		params = Template.instance().data.params()
 
@@ -61,6 +77,8 @@ Template.integrationsIncoming.events
 
 	"click .submit > .save": ->
 		name = $('[name=name]').val().trim()
+		alias = $('[name=alias]').val().trim()
+		avatar = $('[name=avatar]').val().trim()
 		channel = $('[name=channel]').val().trim()
 		username = $('[name=username]').val().trim()
 
@@ -72,6 +90,8 @@ Template.integrationsIncoming.events
 
 		integration =
 			channel: channel
+			alias: alias if alias isnt ''
+			avatar: avatar if avatar isnt ''
 			name: name if name isnt ''
 
 		params = Template.instance().data.params?()

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

@@ -32,6 +32,21 @@
 								<div class="settings-description">{{_ "Should_exists_a_user_with_this_username"}}</div>
 							</div>
 						</div>
+						<div class="input-line double-col">
+							<label>{{_ "Alias"}} ({{_ "optional"}})</label>
+							<div>
+								<input type="text" name="alias" value="{{data.alias}}" placeholder="{{_ 'Optional'}}" />
+								<div class="settings-description">{{_ "Choose_the_alias_that_will_appear_before_the_username_in_messages"}}</div>
+							</div>
+						</div>
+						<div class="input-line double-col">
+							<label>{{_ "Avatar_URL"}} ({{_ "optional"}})</label>
+							<div>
+								<input type="url" name="avatar" value="{{data.avatar}}" placeholder="{{_ 'Optional'}}" />
+								<div class="settings-description">{{_ "You_can_change_a_different_avatar_too"}}</div>
+								<div class="settings-description">{{_ "Should_be_a_URL_of_an_image"}}</div>
+							</div>
+						</div>
 						{{#if data.token}}
 							<div class="input-line double-col">
 								<label>Webhook URL</label>
@@ -42,7 +57,7 @@
 								</div>
 							</div>
 						{{/if}}
-						<div class="input-line double-col message-example">
+						<div class="input-line message-example">
 							{{#nrr nrrargs 'message' example}}{{/nrr}}
 						</div>
 					</div>

packages/rocketchat-integrations/server/api/api.coffee

@@ -71,6 +71,8 @@ Api.addRoute ':integrationId/:userId/:token', authRequired: true,
 						error: 'invalid-channel-type'
 
 		message =
+			avatar: integration.avatar
+			alias: integration.alias
 			msg: @bodyParams.text or ''
 			attachments: @bodyParams.attachments
 			parseUrls: false

packages/rocketchat-integrations/server/methods/updateIntegration.coffee

@@ -39,6 +39,8 @@ Meteor.methods
 		RocketChat.models.Integrations.update integrationId,
 			$set:
 				name: integration.name
+				avatar: integration.avatar
+				alias: integration.alias
 				channel: integration.channel
 				_updatedAt: new Date
 				_updatedBy: RocketChat.models.Users.findOne @userId, {fields: {username: 1}}

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -427,6 +427,7 @@ select,
 input[type='text'],
 input[type='number'],
 input[type='email'],
+input[type='url'],
 input[type='password'] {
 	-webkit-appearance: none;
 	height: 35px;
@@ -466,6 +467,7 @@ form.inline {
 	input[type='text'],
 	input[type='number'],
 	input[type='email'],
+	input[type='url'],
 	input[type='password'] {
 		width: auto;
 	}
@@ -2700,6 +2702,11 @@ a.github-fork {
 	&.temp .body {
 		opacity: .5;
 	}
+	.message-alias {
+		color: #aaa;
+		font-weight: 400;
+		padding-left: 2px;
+	}
 }
 
 .compact {

packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less

@@ -136,6 +136,7 @@ select,
 input[type='text'],
 input[type='number'],
 input[type='email'],
+input[type='url'],
 input[type='password'] {
 	border-color: #E7E7E7;
 	background-color: #fff;

packages/rocketchat-ui-message/message/message.html

 <template name="message">
 	<li id="{{_id}}" class="message sequential {{system}} {{t}} {{own}} {{isTemp}} {{chatops}}" data-username="{{u.username}}" data-bot="{{isBot}}" data-date="{{date}}">
-		<a class="thumb user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</a>
-		<a class="user user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{u.username}}</a>
+		{{#if avatar}}
+			<a class="thumb user-card-message" href="#" data-username="{{u.username}}" tabindex="1">
+				<div class="avatar">
+					<div class="avatar-image" style="background-image:url({{avatar}});"></div>
+				</div>
+			</a>
+		{{else}}
+			<a class="thumb user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</a>
+		{{/if}}
+		{{#if alias}}
+			<a class="user user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{alias}} <span class="message-alias">@{{u.username}}</span></a>
+		{{else}}
+			<a class="user user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{u.username}}</a>
+		{{/if}}
 		<span class="info">
 			{{#if isBot}}
 				<span class="is-bot">BOT</span>