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); },