diff --git a/packages/rocketchat-theme/client/imports/forms/select-avatar.css b/packages/rocketchat-theme/client/imports/forms/select-avatar.css
index 2a9bbbcc7c2..bb61ffdfb20 100644
--- a/packages/rocketchat-theme/client/imports/forms/select-avatar.css
+++ b/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 {
diff --git a/packages/rocketchat-ui-account/client/accountProfile.html b/packages/rocketchat-ui-account/client/accountProfile.html
index 83854cec4fd..0e29c9e56cc 100644
--- a/packages/rocketchat-ui-account/client/accountProfile.html
+++ b/packages/rocketchat-ui-account/client/accountProfile.html
@@ -47,9 +47,23 @@
+
+
+
{{#each service in services}}
{{ > avatarService service}}
{{/each}}
+
{{else}}
diff --git a/packages/rocketchat-ui-account/client/accountProfile.js b/packages/rocketchat-ui-account/client/accountProfile.js
index 76418e2181c..0904b661e00 100644
--- a/packages/rocketchat-ui-account/client/accountProfile.js
+++ b/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);
},