[FIX] Missing dropdown to select custom status color on user's profile (#16537)

Co-authored-by: Gabriel Henriques <gabriel.henriques@rocket.chat>
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/ui-account/client/accountProfile.html

@@ -115,8 +115,9 @@
 									<label class="rc-input__label">
 										<div class="rc-input__title">{{_ "StatusMessage"}}</div>
 										<div class="rc-input__wrapper">
-											<div class="rc-input__icon">
-												{{> icon block="rc-input__icon-svg" icon="edit"}}
+											<div class="rc-input__icon js-status-type edit-status-type-icon--{{statusType}}">
+												{{> icon block="rc-input__icon-svg" icon="circle"}}
+												{{> icon block="rc-input__icon-svg" icon="arrow-down"}}
 											</div>
 
 											<input type="text" class="rc-input__element" maxlength="120" name="statusText" id="statusText" placeholder="{{_ "StatusMessage_Placeholder" }}" value="{{get 'statusText'}}" {{ifThenElse canChange '' 'disabled'}}>

app/ui-account/client/accountProfile.js

@@ -9,11 +9,12 @@ import _ from 'underscore';
 import s from 'underscore.string';
 import toastr from 'toastr';
 
-import { modal, SideNav } from '../../ui-utils';
+import { modal, SideNav, popover } from '../../ui-utils';
 import { t, handleError } from '../../utils';
 import { settings } from '../../settings';
 import { Notifications } from '../../notifications';
 import { callbacks } from '../../callbacks';
+import { getPopoverStatusConfig } from '../../ui/client';
 
 const validateEmail = (email) => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
 const validateUsername = (username) => {
@@ -118,6 +119,8 @@ Template.accountProfile.helpers({
 		const instance = Template.instance();
 		instance.dep.depend();
 		const realname = instance.realname.get();
+
+		const statusType = instance.statusType.get();
 		const statusText = instance.fields.get('statusText');
 		const bio = instance.fields.get('bio');
 		const username = instance.username.get();
@@ -137,9 +140,11 @@ Template.accountProfile.helpers({
 				return;
 			}
 		}
-		if (!avatar && user.bio === bio && user.name === realname && user.username === username && getUserEmailAddress(user) === email && statusText === user.statusText && !password) {
+
+		if (!avatar && user.bio === bio && user.name === realname && user.username === username && getUserEmailAddress(user) === email && statusText === user.statusText && !password && statusType === user.status) {
 			return ret;
 		}
+
 		if (!validateEmail(email) || !validatePassword(password, confirmationPassword) || (!validateUsername(username) || usernameAvaliable !== true) || !validateName(realname) || !validateStatusMessage(statusText)) {
 			return ret;
 		}
@@ -186,6 +191,9 @@ Template.accountProfile.helpers({
 	customFields() {
 		return Meteor.user().customFields;
 	},
+	statusType() {
+		return Meteor.user().status;
+	},
 	get(field) {
 		return Template.instance().fields.get(field);
 	},
@@ -211,6 +219,7 @@ Template.accountProfile.onCreated(function() {
 	self.url = new ReactiveVar('');
 	self.usernameAvaliable = new ReactiveVar(true);
 	self.statusText = new ReactiveVar(user.statusText);
+	self.statusType = new ReactiveVar(user.status);
 
 	Notifications.onLogged('updateAvatar', () => self.avatar.set());
 	self.getSuggestions = function() {
@@ -289,6 +298,9 @@ Template.accountProfile.onCreated(function() {
 		if (s.trim(self.fields.get('bio')) !== user.statusText) {
 			data.bio = s.trim(self.fields.get('bio'));
 		}
+		if (self.statusType.get() !== user.statusType) {
+			data.statusType = self.statusType.get();
+		}
 		if (s.trim(self.username.get()) !== user.username) {
 			if (!settings.get('Accounts_AllowUsernameChange')) {
 				toastr.remove();
@@ -379,6 +391,9 @@ Template.accountProfile.events({
 			},
 		}, [e, instance, ...args]);
 	},
+	'click .js-status-type'(e, instance) {
+		popover.open(getPopoverStatusConfig(e.currentTarget, (status) => instance.statusType.set(status)));
+	},
 	'input .js-avatar-url-input'(e, instance) {
 		const text = e.target.value;
 		instance.url.set(text);

app/ui/client/index.js

@@ -66,5 +66,6 @@ export { Login, animationSupport, animeBack, Button, preLoadImgs } from './lib/r
 export { AudioRecorder } from './lib/recorderjs/audioRecorder';
 export { VideoRecorder } from './lib/recorderjs/videoRecorder';
 export { chatMessages } from './views/app/room';
+export * from './lib/userPopoverStatus';
 
 createTemplateForComponent('RoomForeword', () => import('./views/app/RoomForeword'));

app/ui/client/lib/userPopoverStatus.js

@@ -0,0 +1,57 @@
+import { t } from '../../../utils';
+
+export const getPopoverStatusConfig = (currentTarget, actionCallback) => ({
+	popoverClass: 'edit-status-type',
+	columns: [
+		{
+			groups: [
+				{
+					items: [
+						{
+							icon: 'circle',
+							name: t('Online'),
+							modifier: 'online',
+							action: () => {
+								(typeof actionCallback === 'function') && actionCallback('online');
+								$('input[name=statusType]').val('online');
+								$(currentTarget).prop('class', 'rc-input__icon js-status-type edit-status-type-icon--online');
+							},
+						},
+						{
+							icon: 'circle',
+							name: t('Away'),
+							modifier: 'away',
+							action: () => {
+								(typeof actionCallback === 'function') && actionCallback('away');
+								$('input[name=statusType]').val('away');
+								$(currentTarget).prop('class', 'rc-input__icon js-status-type edit-status-type-icon--away');
+							},
+						},
+						{
+							icon: 'circle',
+							name: t('Busy'),
+							modifier: 'busy',
+							action: () => {
+								(typeof actionCallback === 'function') && actionCallback('busy');
+								$('input[name=statusType]').val('busy');
+								$(currentTarget).prop('class', 'rc-input__icon js-status-type edit-status-type-icon--busy');
+							},
+						},
+						{
+							icon: 'circle',
+							name: t('Invisible'),
+							modifier: 'offline',
+							action: () => {
+								(typeof actionCallback === 'function') && actionCallback('offline');
+								$('input[name=statusType]').val('offline');
+								$(currentTarget).prop('class', 'rc-input__icon js-status-type edit-status-type-icon--offline');
+							},
+						},
+					],
+				},
+			],
+		},
+	],
+	currentTarget,
+	offsetVertical: currentTarget.clientHeight,
+});

app/ui/client/views/app/editStatus.html

@@ -8,7 +8,7 @@
 							<label class="rc-input__label">
 								<div class="rc-input__title">{{_ "StatusMessage"}}</div>
 								<div class="rc-input__wrapper edit-status">
-									<div class="rc-input__icon edit-status-type-icon--{{statusType}}">
+									<div class="rc-input__icon js-status-type edit-status-type-icon--{{statusType}}">
 										{{> icon block="rc-input__icon-svg" icon="circle"}}
 										{{> icon block="rc-input__icon-svg" icon="arrow-down"}}
 									</div>

app/ui/client/views/app/editStatus.js

@@ -6,6 +6,7 @@ import s from 'underscore.string';
 import { settings } from '../../../../settings';
 import { t } from '../../../../utils';
 import { popover } from '../../../../ui-utils';
+import { getPopoverStatusConfig } from '../..';
 
 Template.editStatus.helpers({
 	canChange() {
@@ -20,61 +21,8 @@ Template.editStatus.helpers({
 });
 
 Template.editStatus.events({
-	'click .edit-status .rc-input__icon'(e) {
-		const options = [
-			{
-				icon: 'circle',
-				name: t('Online'),
-				modifier: 'online',
-				action: () => {
-					$('input[name=statusType]').val('online');
-					$('.edit-status .rc-input__icon').prop('class', 'rc-input__icon edit-status-type-icon--online');
-				},
-			},
-			{
-				icon: 'circle',
-				name: t('Away'),
-				modifier: 'away',
-				action: () => {
-					$('input[name=statusType]').val('away');
-					$('.edit-status .rc-input__icon').prop('class', 'rc-input__icon edit-status-type-icon--away');
-				},
-			},
-			{
-				icon: 'circle',
-				name: t('Busy'),
-				modifier: 'busy',
-				action: () => {
-					$('input[name=statusType]').val('busy');
-					$('.edit-status .rc-input__icon').prop('class', 'rc-input__icon edit-status-type-icon--busy');
-				},
-			},
-			{
-				icon: 'circle',
-				name: t('Invisible'),
-				modifier: 'offline',
-				action: () => {
-					$('input[name=statusType]').val('offline');
-					$('.edit-status .rc-input__icon').prop('class', 'rc-input__icon edit-status-type-icon--offline');
-				},
-			},
-		];
-
-		const config = {
-			popoverClass: 'edit-status-type',
-			columns: [
-				{
-					groups: [
-						{
-							items: options,
-						},
-					],
-				},
-			],
-			currentTarget: e.currentTarget,
-			offsetVertical: e.currentTarget.clientHeight,
-		};
-		popover.open(config);
+	'click .js-status-type'(e) {
+		popover.open(getPopoverStatusConfig(e.currentTarget));
 	},
 
 	'submit .edit-status__content'(e, instance) {

server/methods/saveUserProfile.js

@@ -42,6 +42,10 @@ Meteor.methods({
 			Meteor.call('setUserStatus', null, settings.statusText);
 		}
 
+		if (settings.statusType) {
+			Meteor.call('setUserStatus', settings.statusType, null);
+		}
+
 		if (settings.bio) {
 			if (typeof settings.bio !== 'string' || settings.bio.length > 260) {
 				throw new Meteor.Error('error-invalid-field', 'bio', {