Merge pull request #9229 from RocketChat/avatar-url

Fix: Missing option to set user's avatar from a url

packages/rocketchat-theme/client/imports/forms/select-avatar.css

@@ -31,6 +31,10 @@
 			margin-right: 10px;
 			margin-bottom: 10px;
 
+			&.disabled {
+				opacity: 0.4;
+			}
+
 			cursor: pointer;
 
 			& .avatar {

packages/rocketchat-ui-account/client/accountProfile.html

@@ -47,9 +47,23 @@
 													</label>
 													<input type="file" name="" value="" id="upload-avatar" style="display:none;">
 												</div>
+												<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}"  aria-label="{{_ "Use_url_for_avatar" }}">
+													<label class="rc-select-avatar__upload-label avatar">
+														{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
+													</label>
+												</div>
 												{{#each service in services}}
 													{{ > avatarService service}}
 												{{/each}}
+												<div class="rc-input">
+
+													<label class="rc-input__label">
+														<div class="rc-input__title">{{_ "Use_url_for_avatar"}}</div>
+														<div class="rc-input__wrapper">
+															<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
+														</div>
+													</label>
+												</div>
 											</div>
 										{{else}}
 											<div class="rc-select-avatar__loading">

packages/rocketchat-ui-account/client/accountProfile.js

@@ -51,6 +51,9 @@ Template.accountProfile.helpers({
 	nameInvalid() {
 		return !validateName(Template.instance().realname.get());
 	},
+	selectUrl() {
+		return Template.instance().url.get().trim() ? '' : 'disabled';
+	},
 	services() {
 		const suggestions = Template.instance().suggestions.get();
 		return ['gravatar', 'facebook', 'google', 'github', 'gitlab', 'linkedIn', 'twitter']
@@ -153,6 +156,7 @@ Template.accountProfile.onCreated(function() {
 	self.password = new ReactiveVar;
 	self.suggestions = new ReactiveVar;
 	self.avatar = new ReactiveVar;
+	self.url = new ReactiveVar('');
 	self.usernameAvaliable = new ReactiveVar(true);
 
 	RocketChat.Notifications.onLogged('updateAvatar', () => self.avatar.set());
@@ -185,7 +189,12 @@ Template.accountProfile.onCreated(function() {
 	this.save = function(typedPassword, cb) {
 		const avatar = self.avatar.get();
 		if (avatar) {
-			Meteor.call('setAvatarFromService', avatar.blob, avatar.contentType, avatar.service, function(err) {
+			const params = [avatar.blob];
+
+			params.push(avatar.contentType);
+
+			params.push(avatar.service);
+			Meteor.call('setAvatarFromService', ...params, function(err) {
 				if (err && err.details && err.details.timeToReset) {
 					toastr.error(t('error-too-many-requests', {
 						seconds: parseInt(err.details.timeToReset / 1000)
@@ -295,6 +304,23 @@ Template.accountProfile.events({
 			}
 		});
 	},
+	'click .js-select-avatar-url'(e, instance, ...args) {
+		const url = instance.url.get().trim();
+		if (!url) {
+			return;
+		}
+		setAvatar.apply({
+			suggestion: {
+				service: 'url',
+				blob: url,
+				contentType: ''
+			}
+		}, [e, instance, ...args]);
+	},
+	'input .js-avatar-url-input'(e, instance) {
+		const text = e.target.value;
+		instance.url.set(text);
+	},
 	'click .js-select-avatar'(...args) {
 		this.suggestion ? setAvatar.apply(this, args) : loginWith.apply(this, args);
 	},