User info tab bar improvements (#2893)

* New user info animation

* Better room's members list show/hide control

* Remove all references to showUserInfo Session variable

* Spread the new role for the user

* New UI for user profile. Also unified view from room and admin

client/routes/adminRouter.coffee

 FlowRouter.route '/admin/users',
 	name: 'admin-users'
-	triggersExit: [ ->
-		Session.set 'showUserInfo'
-	]
 	action: ->
-		Session.set 'showUserInfo'
 		RocketChat.TabBar.showGroup 'adminusers'
 		BlazeLayout.render 'main', {center: 'adminUsers'}
 

client/startup/defaultRoomTypes.coffee

@@ -9,7 +9,6 @@ RocketChat.roomTypes.add 'c', 10,
 		name: 'channel'
 		path: '/channel/:name'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo'
 			openRoom 'c', params.name
 			RocketChat.TabBar.showGroup 'channel'
 		link: (sub) ->
@@ -24,7 +23,6 @@ RocketChat.roomTypes.add 'd', 20,
 		name: 'direct'
 		path: '/direct/:username'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo', params.username
 			openRoom 'd', params.username
 			RocketChat.TabBar.showGroup 'directmessage'
 		link: (sub) ->
@@ -39,7 +37,6 @@ RocketChat.roomTypes.add 'p', 30,
 		name: 'group'
 		path: '/group/:name'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo'
 			openRoom 'p', params.name
 			RocketChat.TabBar.showGroup 'privategroup'
 		link: (sub) ->

packages/rocketchat-lib/server/methods/setAdminStatus.coffee

@@ -6,9 +6,9 @@ Meteor.methods
 		unless RocketChat.authz.hasPermission( Meteor.userId(), 'assign-admin-role') is true
 			throw new Meteor.Error 'not-authorized', '[methods] setAdminStatus -> Not authorized'
 
+		user = Meteor.users.findOne({ _id: userId }, { fields: { username: 1 } })
+
 		if admin
-			RocketChat.authz.addUserRoles( userId, 'admin')
+			return Meteor.call('authorization:addUserToRole', 'admin', user.username);
 		else
-			RocketChat.authz.removeUserFromRoles( userId, 'admin')
-
-		return true
+			return Meteor.call('authorization:removeUserFromRole', 'admin', user.username);

packages/rocketchat-livechat/client/ui.js

@@ -7,7 +7,6 @@ RocketChat.roomTypes.add('l', 5, {
 		name: 'live',
 		path: '/live/:name',
 		action: (params/*, queryParams*/) => {
-			Session.set('showUserInfo');
 			openRoom('l', params.name);
 			RocketChat.TabBar.showGroup('livechat', 'search');
 		},

packages/rocketchat-slashcommands-kick/client.coffee

@@ -3,9 +3,6 @@ RocketChat.slashCommands.add 'kick', (command, params, item) ->
 	if username is ''
 		return
 	username = username.replace('@', '')
-
-	if Session.get('showUserInfo') is username
-		Session.set('showUserInfo', null)
 ,
 	description: TAPi18n.__ 'Remove_someone_from_room'
 	params: '@username'

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

@@ -2977,13 +2977,13 @@ body:not(.is-cordova) {
 }
 
 .list-view {
+	z-index: 10;
 	padding: 5px 30px 20px;
 	.list {
 		display: flex;
 		flex-flow: column nowrap;
 		position: relative;
 		width: 100%;
-		height: 100%;
 	}
 	> .status {
 		margin: 5px 0 15px;
@@ -3051,33 +3051,55 @@ body:not(.is-cordova) {
 }
 
 .user-view {
-	padding: 20px;
+	z-index: 15;
+	overflow-y: auto;
+	overflow-x: hidden;
 	.about {
 		width: 100%;
 		margin-bottom: 20px;
 	}
 	.thumb {
-		float: left;
-		width: 100px;
-		height: 100px;
+		width: 100%;
+		height: 200px;
+
+		.transition(height .4s ease);
+
+		cursor: zoom-in;
+		cursor: -moz-zoom-in;
+		cursor: -webkit-zoom-in;
+
+		&.bigger {
+			height: 350px;
+			cursor: zoom-out;
+			cursor: -moz-zoom-out;
+			cursor: -webkit-zoom-out;
+		}
+
+		.avatar {
+			border-radius: 0;
+
+			.avatar-image {
+				border-radius: 0;
+			}
+		}
 	}
 	nav {
 		margin-left: -4px;
+		padding: 0 20px;
 		.back {
 			float: right;
 		}
 	}
 	.info {
-		margin-left: 120px;
 		white-space: normal;
-		.calc(width, ~'100% - 120px');
+		padding: 0 20px;
 		h3 {
 			-webkit-user-select: text;
 			-moz-user-select: text;
 			-ms-user-select: text;
 			user-select: text;
 			font-size: 24px;
-			margin-bottom: 8px;
+			margin: 8px 0;
 			line-height: 27px;
 			text-overflow: ellipsis;
 			width: 100%;
@@ -3223,6 +3245,7 @@ body:not(.is-cordova) {
 		}
 	}
 	.edit-form {
+		padding: 20px 20px 0 20px;
 		white-space: normal;
 		h3 {
 			font-size: 24px;
@@ -4007,19 +4030,6 @@ body:not(.is-cordova) {
 }
 
 @media all and(max-width: 500px) {
-	.user-view {
-		.thumb {
-			width: 60px;
-			height: 60px;
-		}
-		.info {
-			margin-left: 75px;
-			.calc(width, ~'100% - 120px');
-			h3 {
-				font-size: 20px;
-			}
-		}
-	}
 	.messages-container {
 		.message-form {
 			> .formatting-tips {

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

@@ -281,6 +281,7 @@
 	.flex-tab {
 		border-left: unset;
 		border-right: 1px solid;
+		border-right-color: @tertiary-background-color;
 		.left(0);
 		.transform(translateX(-100%));
 		.control {
@@ -380,18 +381,12 @@
 	}
 
 	.user-view {
-		.thumb {
-			float: right;
-		}
 		nav {
 			.margin-right(-4px);
 			.back {
 				float: left;
 			}
 		}
-		.info {
-			.margin-right(120px);
-		}
 		.stats {
 			li {
 				border-right: unset;

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

@@ -418,6 +418,7 @@ a.github-fork {
 	//background-color: @primary-background-color;
 	background-color: transparent;
 	color: @tertiary-font-color;
+
 	.custom-scroll(transparent, @custom-scrollbar-color);
 	header {
 		background-color: @primary-background-color;
@@ -884,10 +885,18 @@ a.github-fork {
 	}
 	.content {
 		.custom-scroll(transparent, #DADADA);
+
+		> div {
+			background-color: @secondary-background-color;
+		}
 	}
 }
 
 .list-view {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto;
+	overflow-x: hidden;
+	.custom-scroll(transparent, #DADADA);
 	> .status {
 		p {
 			color: @secondary-font-color;
@@ -900,6 +909,8 @@ a.github-fork {
 }
 
 .user-view {
+	-webkit-overflow-scrolling: touch;
+	.custom-scroll(transparent, #DADADA);
 	.info {
 		h3 {
 			i.status-offline {

packages/rocketchat-ui-admin/admin/users/adminUserEdit.coffee

@@ -17,16 +17,14 @@ Template.adminUserEdit.events
 		t.save()
 
 Template.adminUserEdit.onCreated ->
-	@user = this.data
+	@user = this.data.user
 
-	@cancel = =>
+	@cancel = (username) =>
 		if @user
-			RocketChat.TabBar.setTemplate 'adminUserInfo'
-			RocketChat.TabBar.setData @user
-			RocketChat.TabBar.showGroup 'adminusers-selected'
+			@data.back(username)
 		else
 			RocketChat.TabBar.closeFlex()
-			RocketChat.TabBar.showGroup 'adminusers'
+			@data.back(username)
 
 	@getUserData = =>
 		userData = { _id: @user?._id }
@@ -62,11 +60,8 @@ Template.adminUserEdit.onCreated ->
 						toastr.success t('User_updated_successfully')
 					else
 						toastr.success t('User_added_successfully')
-						@user = Meteor.users.findOne result
 
-					Meteor.subscribe 'fullUserData', userData.username, 1, =>
-						Session.set 'showUserInfo', @user._id
-						this.cancel()
+					@cancel(userData.username)
 
 				if error
 					toastr.error error.reason

packages/rocketchat-ui-admin/admin/users/adminUserInfo.coffee

-Template.adminUserInfo.helpers
-	name: ->
-		return if @name then @name else TAPi18n.__ 'Unnamed'
-	email: ->
-		return @emails?[0]?.address
-	phoneNumber: ->
-		return '' unless @phoneNumber
-		if @phoneNumber.length > 10
-			return "(#{@phoneNumber.substr(0,2)}) #{@phoneNumber.substr(2,5)}-#{@phoneNumber.substr(7)}"
-		else
-			return "(#{@phoneNumber.substr(0,2)}) #{@phoneNumber.substr(2,4)}-#{@phoneNumber.substr(6)}"
-	lastLogin: ->
-		if @lastLogin
-			return moment(@lastLogin).format('LLL')
-	utcOffset: ->
-		if @utcOffset?
-			if @utcOffset > 0
-				@utcOffset = "+#{@utcOffset}"
-
-			return "UTC #{@utcOffset}"
-	hasAdminRole: ->
-		return RocketChat.authz.hasRole(@_id, 'admin')
-	active: ->
-		if @_id
-			user = Meteor.users.findOne(@_id)
-			return user && user.active
-
-Template.adminUserInfo.events
-	'click .deactivate': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		Meteor.call 'setUserActiveStatus', Template.currentData()._id, false, (error, result) ->
-			if result
-				toastr.success t('User_has_been_deactivated')
-			if error
-				toastr.error error.reason
-
-	'click .activate': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		Meteor.call 'setUserActiveStatus', Template.currentData()._id, true, (error, result) ->
-			if result
-				toastr.success t('User_has_been_activated')
-			if error
-				toastr.error error.reason
-
-	'click .make-admin': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		Meteor.call 'setAdminStatus', Template.currentData()._id, true, (error, result) ->
-			if result
-				toastr.success t('User_is_now_an_admin')
-			if error
-				toastr.error error.reason
-
-	'click .remove-admin': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		Meteor.call 'setAdminStatus', Template.currentData()._id, false, (error, result) ->
-			if result
-				toastr.success t('User_is_no_longer_an_admin')
-			if error
-				toastr.error error.reason
-
-	'click .delete': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		_id = Template.currentData()._id
-		swal {
-			title: t('Are_you_sure')
-			text: t('Delete_User_Warning')
-			type: 'warning'
-			showCancelButton: true
-			confirmButtonColor: '#DD6B55'
-			confirmButtonText: t('Yes_delete_it')
-			cancelButtonText: t('Cancel')
-			closeOnConfirm: false
-			html: false
-		}, ->
-			swal
-				title: t('Deleted')
-				text: t('User_has_been_deleted')
-				type: 'success'
-				timer: 2000
-				showConfirmButton: false
-
-			Meteor.call 'deleteUser', _id, (error, result) ->
-				if error
-					toastr.error error.reason
-
-				RocketChat.TabBar.setData()
-				RocketChat.TabBar.closeFlex()
-				RocketChat.TabBar.showGroup 'adminusers'
-
-				Session.set 'showUserInfo'
-
-	'click .edit-user': (e) ->
-		e.stopPropagation()
-		e.preventDefault()
-		RocketChat.TabBar.setTemplate 'adminUserEdit'
-		RocketChat.TabBar.setData Meteor.users.findOne(Template.currentData()._id)

packages/rocketchat-ui-admin/admin/users/adminUserInfo.html

 <template name="adminUserInfo">
-	{{> userInfo user=.}}
-	<nav>
-		{{#if hasPermission 'edit-other-user-info'}}
-		<button class='button lightblue edit-user button-block'><span><i class='icon-edit'></i> {{_ "Edit"}}</span></button>
-		{{/if}}
-		{{#if hasPermission 'assign-admin-role'}}
-			{{#if hasAdminRole}}
-			<button class='button lightblue remove-admin button-block'><span><i class='icon-shield'></i> {{_ "Remove_Admin"}}</span></button>
-			{{else}}
-			<button class='button lightblue make-admin button-block'><span><i class='icon-shield'></i> {{_ "Make_Admin"}}</span></button>
-			{{/if}}
-		{{/if}}
-		{{#if hasPermission 'edit-other-user-active-status'}}
-			{{#if active}}
-			<button class='button deactivate button-block'><span><i class='icon-block'></i> {{_ "Deactivate"}}</span></button>
-			{{else}}
-			<button class='button activate button-block'><span><i class='icon-ok-circled'></i> {{_ "Activate"}}</span></button>
-			{{/if}}
-		{{/if}}
-		{{#if hasPermission 'delete-user'}}
-		<button class='button delete red button-block'><span><i class='icon-trash'></i> {{_ "Delete"}}</span></button>
-		{{/if}}
-	</nav>
-</template>
\ No newline at end of file
+	<div class="content">
+		<div class="user-view">
+			{{> userInfo .}}
+		</div>
+	</div>
+</template>

packages/rocketchat-ui-admin/admin/users/adminUsers.coffee

@@ -95,7 +95,6 @@ Template.adminUsers.events
 
 	'click .user-info': (e) ->
 		e.preventDefault()
-		Session.set 'showUserInfo', @_id
 		RocketChat.TabBar.setTemplate 'adminUserInfo'
 		RocketChat.TabBar.setData Meteor.users.findOne @_id
 		RocketChat.TabBar.openFlex()

packages/rocketchat-ui-admin/admin/users/adminUsers.html

@@ -53,8 +53,6 @@
 		</div>
 	</section>
 	<section class="flex-tab">
-		<div class="user-view">
-			{{> Template.dynamic template=flexTemplate data=flexData}}
-		</div>
+		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>

packages/rocketchat-ui-admin/package.js

@@ -48,7 +48,6 @@ Package.onUse(function(api) {
 	api.addFiles('admin/users/adminInviteUser.coffee', 'client');
 	api.addFiles('admin/users/adminUserChannels.coffee', 'client');
 	api.addFiles('admin/users/adminUserEdit.coffee', 'client');
-	api.addFiles('admin/users/adminUserInfo.coffee', 'client');
 	api.addFiles('admin/users/adminUsers.coffee', 'client');
 
 	api.addFiles('publications/adminRooms.js', 'server');

packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.coffee

@@ -80,20 +80,22 @@ Template.membersList.helpers
 			]
 		}
 
-	flexUserInfo: ->
-		username = Session.get('showUserInfo')
-		return Meteor.users.findOne({ username: String(username) }) or { username: String(username) }
-
 	showUserInfo: ->
 		webrtc = WebRTC.getInstanceByRoomId(this.rid)
 		videoActive = webrtc?.localUrl?.get()? or webrtc?.remoteItems?.get()?.length > 0
-		return Session.get('showUserInfo') and not videoActive
+		return Template.instance().showDetail.get() and not videoActive
 
-Template.membersList.events
-	"click .flex-tab .user-image > a" : (e) ->
-		RocketChat.TabBar.openFlex()
-		Session.set('showUserInfo', $(e.currentTarget).data('username'))
+	userInfoDetail: ->
+		room = ChatRoom.findOne(this.rid, { fields: { t: 1 } })
+
+		return {
+			username: Template.instance().userDetail.get()
+			clear: Template.instance().clearUserDetail
+			showAll: room?.t in ['c', 'p']
+			video: room?.t in ['d']
+		}
 
+Template.membersList.events
 	'click .see-all': (e, instance) ->
 		seeAll = instance.showAllUsers.get()
 		instance.showAllUsers.set(!seeAll)
@@ -122,7 +124,24 @@ Template.membersList.events
 	'click .show-more-users': (e, instance) ->
 		instance.usersLimit.set(instance.usersLimit.get() + 100)
 
-
 Template.membersList.onCreated ->
 	@showAllUsers = new ReactiveVar false
 	@usersLimit = new ReactiveVar 100
+	@userDetail = new ReactiveVar
+	@showDetail = new ReactiveVar false
+
+	@clearUserDetail = =>
+		@showDetail.set(false)
+		setTimeout =>
+			@clearRoomUserDetail()
+		, 500
+
+	@showUserDetail = (username) =>
+		@showDetail.set(username?)
+		@userDetail.set(username)
+
+	@clearRoomUserDetail = @data.clearUserDetail
+
+	@autorun =>
+		data = Template.currentData()
+		@showUserDetail data.userDetail

packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.html

@@ -2,7 +2,7 @@
 	<div class="content">
 		{{> videoCall}}
 		{{#if isGroupChat}}
-			<div class="list-view{{#if $.Session.get 'showUserInfo'}} animated-hidden{{/if}}">
+			<div class="list-view animated">
 				{{#with roomUsers}}
 					<div class="status">
 						<h2>{{_ "Members_List"}}</h2>
@@ -39,7 +39,7 @@
 			</div>
 		{{/if}}
 		<div class="user-view animated{{#unless showUserInfo}} animated-hidden{{/unless}}">
-			{{> userInfo user=flexUserInfo showAll=isGroupChat video=isDirectChat}}
+			{{> userInfo (userInfoDetail)}}
 		</div>
 	</div>
 </template>

packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.coffee

 Template.userInfo.helpers
-	utc: ->
-		if @utcOffset?
-			if @utcOffset > 0
-				return '+' + @utcOffset
-			return @utcOffset
+	name: ->
+		user = Template.instance().user.get()
+		return if user.name then user.name else TAPi18n.__ 'Unnamed'
+
+	username: ->
+		user = Template.instance().user.get()
+		return user.username
+
+	email: ->
+		user = Template.instance().user.get()
+		return user.emails?[0]?.address
 
 	phoneNumber: ->
-		return '' unless @phoneNumber
-		if @phoneNumber.length > 10
-			return "(#{@phoneNumber.substr(0,2)}) #{@phoneNumber.substr(2,5)}-#{@phoneNumber.substr(7)}"
+		user = Template.instance().user.get()
+		return '' unless user.phoneNumber
+		if user.phoneNumber.length > 10
+			return "(#{user.phoneNumber.substr(0,2)}) #{user.phoneNumber.substr(2,5)}-#{user.phoneNumber.substr(7)}"
 		else
-			return "(#{@phoneNumber.substr(0,2)}) #{@phoneNumber.substr(2,4)}-#{@phoneNumber.substr(6)}"
+			return "(#{user.phoneNumber.substr(0,2)}) #{user.phoneNumber.substr(2,4)}-#{user.phoneNumber.substr(6)}"
+
+	utc: ->
+		user = Template.instance().user.get()
+		if user.utcOffset?
+			if user.utcOffset > 0
+				return '+' + user.utcOffset
+			return user.utcOffset
 
 	lastLogin: ->
-		if @lastLogin
-			return moment(@lastLogin).format('LLL')
+		user = Template.instance().user.get()
+		if user.lastLogin
+			return moment(user.lastLogin).format('LLL')
 
 	createdAt: ->
-		if @createdAt
-			return moment(@createdAt).format('LLL')
+		user = Template.instance().user.get()
+		if user.createdAt
+			return moment(user.createdAt).format('LLL')
 
 	canDirectMessage: (username) ->
 		return Meteor.user()?.username isnt username
 
 	linkedinUsername: ->
-		return s.strRight @services.linkedin.publicProfileUrl, '/in/'
+		user = Template.instance().user.get()
+		return s.strRight user?.services?.linkedin?.publicProfileUrl, '/in/'
 
 	servicesMeteor: ->
-		return @services?['meteor-developer']
+		user = Template.instance().user.get()
+		return user.services?['meteor-developer']
 
 	userTime: ->
-		if @utcOffset?
-			return Template.instance().now.get().utcOffset(@utcOffset).format('LT')
+		user = Template.instance().user.get()
+		if user.utcOffset?
+			return Template.instance().now.get().utcOffset(user.utcOffset).format('LT')
 
 	canRemoveUser: ->
 		return RocketChat.authz.hasAllPermission('remove-user', Session.get('openedRoom'))
@@ -41,31 +60,62 @@ Template.userInfo.helpers
 
 	userMuted: ->
 		room = ChatRoom.findOne(Session.get('openedRoom'))
-		if _.isArray(room?.muted) and room.muted.indexOf(Session.get('showUserInfo')) isnt -1
-			return true
-		return false
+		user = Template.instance().user.get()
+
+		return _.isArray(room?.muted) and room.muted.indexOf(user?.username) isnt -1
 
 	canSetModerator: ->
 		return RocketChat.authz.hasAllPermission('set-moderator', Session.get('openedRoom'))
 
 	isModerator: ->
-		return !!RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user?._id, roles: 'moderator' })
+		return !!RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": Template.instance().user.get()?._id, roles: 'moderator' })
 
 	canSetOwner: ->
 		return RocketChat.authz.hasAllPermission('set-owner', Session.get('openedRoom'))
 
 	isOwner: ->
-		return !!RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user?._id, roles: 'owner' })
+		return !!RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": Template.instance().user.get()?._id, roles: 'owner' })
+
+	user: ->
+		return Template.instance().user.get()
+
+	isLoading: ->
+		return Template.instance().loadingUserInfo.get()
+
+	hasAdminRole: ->
+		return RocketChat.authz.hasRole(Template.instance().user.get()?._id, 'admin')
+
+	active: ->
+		user = Template.instance().user.get()
+		return user?.active
+
+	editingUser: ->
+		return Template.instance().editingUser.get()
+
+	userToEdit: ->
+		instance = Template.instance()
+		return {
+			user: instance.user.get()
+			back: (username) ->
+				instance.editingUser.set()
+
+				if username?
+					user = instance.user.get()
+					if user?.username isnt username
+						instance.loadedUsername.set username
+		}
 
 Template.userInfo.events
+	'click .thumb': (e) ->
+		$(e.currentTarget).toggleClass('bigger')
+
 	'click .pvt-msg': (e) ->
-		Meteor.call 'createDirectMessage', Session.get('showUserInfo'), (error, result) ->
-			console.log result
+		Meteor.call 'createDirectMessage', @username, (error, result) =>
 			if error
 				return toastr.error error.reason
 
 			if result?.rid?
-				FlowRouter.go('direct', { username: Session.get('showUserInfo') })
+				FlowRouter.go('direct', { username: @username })
 
 	"click .flex-tab  .video-remote" : (e) ->
 		if RocketChat.TabBar.isFlexOpen()
@@ -93,10 +143,10 @@ Template.userInfo.events
 						if i.msRequestFullscreen
 							i.msRequestFullscreen()
 
-	'click .back': (e) ->
-		Session.set('showUserInfo', null)
+	'click .back': (e, instance) ->
+		instance.clear()
 
-	'click .remove-user': (e) ->
+	'click .remove-user': (e, instance) ->
 		e.preventDefault()
 		rid = Session.get('openedRoom')
 		room = ChatRoom.findOne rid
@@ -112,7 +162,7 @@ Template.userInfo.events
 				closeOnConfirm: false
 				html: false
 			}, =>
-				Meteor.call 'removeUserFromRoom', { rid: rid, username: @user.username }, (err, result) ->
+				Meteor.call 'removeUserFromRoom', { rid: rid, username: instance.user.get()?.username }, (err, result) =>
 					if err
 						return toastr.error(err.reason or err.message)
 					swal
@@ -121,11 +171,12 @@ Template.userInfo.events
 						type: 'success'
 						timer: 2000
 						showConfirmButton: false
-					Session.set('showUserInfo', null)
+
+					instance.clear()
 		else
 			toastr.error(TAPi18n.__ 'Not_allowed')
 
-	'click .mute-user': (e) ->
+	'click .mute-user': (e, instance) ->
 		e.preventDefault()
 		rid = Session.get('openedRoom')
 		room = ChatRoom.findOne rid
@@ -141,7 +192,7 @@ Template.userInfo.events
 				closeOnConfirm: false
 				html: false
 			}, =>
-				Meteor.call 'muteUserInRoom', { rid: rid, username: @user.username }, (err, result) ->
+				Meteor.call 'muteUserInRoom', { rid: rid, username: instance.user.get()?.username }, (err, result) ->
 					if err
 						return toastr.error(err.reason or err.message)
 					swal
@@ -156,7 +207,7 @@ Template.userInfo.events
 		rid = Session.get('openedRoom')
 		room = ChatRoom.findOne rid
 		if RocketChat.authz.hasAllPermission('mute-user', rid)
-			Meteor.call 'unmuteUserInRoom', { rid: rid, username: @user.username }, (err, result) ->
+			Meteor.call 'unmuteUserInRoom', { rid: rid, username: t.user.get()?.username }, (err, result) ->
 				if err
 					return toastr.error(err.reason or err.message)
 				toastr.success TAPi18n.__ 'User_unmuted_in_room'
@@ -166,54 +217,169 @@ Template.userInfo.events
 	'click .set-moderator': (e, t) ->
 		e.preventDefault()
 
-		userModerator = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user._id, roles: 'moderator' }, { fields: { _id: 1 } })
+		userModerator = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": t.user.get()?._id, roles: 'moderator' }, { fields: { _id: 1 } })
 		unless userModerator?
-			Meteor.call 'addRoomModerator', Session.get('openedRoom'), @user._id, (err, results) =>
+			Meteor.call 'addRoomModerator', Session.get('openedRoom'), t.user.get()?._id, (err, results) =>
 				if err
 					return toastr.error(err.reason or err.message)
 
 				room = ChatRoom.findOne(Session.get('openedRoom'))
-				toastr.success TAPi18n.__ 'User__username__is_now_a_moderator_of__room_name_', { username: @user.username, room_name: room.name }
+				toastr.success TAPi18n.__ 'User__username__is_now_a_moderator_of__room_name_', { username: @username, room_name: room.name }
 
 	'click .unset-moderator': (e, t) ->
 		e.preventDefault()
 
-		userModerator = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user._id, roles: 'moderator' }, { fields: { _id: 1 } })
+		userModerator = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": t.user.get()?._id, roles: 'moderator' }, { fields: { _id: 1 } })
 		if userModerator?
-			Meteor.call 'removeRoomModerator', Session.get('openedRoom'), @user._id, (err, results) =>
+			Meteor.call 'removeRoomModerator', Session.get('openedRoom'), t.user.get()?._id, (err, results) =>
 				if err
 					return toastr.error(err.reason or err.message)
 
 				room = ChatRoom.findOne(Session.get('openedRoom'))
-				toastr.success TAPi18n.__ 'User__username__removed_from__room_name__moderators', { username: @user.username, room_name: room.name }
+				toastr.success TAPi18n.__ 'User__username__removed_from__room_name__moderators', { username: @username, room_name: room.name }
 
 	'click .set-owner': (e, t) ->
 		e.preventDefault()
 
-		userOwner = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user._id, roles: 'owner' }, { fields: { _id: 1 } })
+		userOwner = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": t.user.get()?._id, roles: 'owner' }, { fields: { _id: 1 } })
 		unless userOwner?
-			Meteor.call 'addRoomOwner', Session.get('openedRoom'), @user._id, (err, results) =>
+			Meteor.call 'addRoomOwner', Session.get('openedRoom'), t.user.get()?._id, (err, results) =>
 				if err
 					return toastr.error(err.reason or err.message)
 
 				room = ChatRoom.findOne(Session.get('openedRoom'))
-				toastr.success TAPi18n.__ 'User__username__is_now_a_owner_of__room_name_', { username: @user.username, room_name: room.name }
+				toastr.success TAPi18n.__ 'User__username__is_now_a_owner_of__room_name_', { username: @username, room_name: room.name }
 
 	'click .unset-owner': (e, t) ->
 		e.preventDefault()
 
-		userOwner = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": @user._id, roles: 'owner' }, { fields: { _id: 1 } })
+		userOwner = RoomRoles.findOne({ rid: Session.get('openedRoom'), "u._id": t.user.get()?._id, roles: 'owner' }, { fields: { _id: 1 } })
 		if userOwner?
-			Meteor.call 'removeRoomOwner', Session.get('openedRoom'), @user._id, (err, results) =>
+			Meteor.call 'removeRoomOwner', Session.get('openedRoom'), t.user.get()?._id, (err, results) =>
 				if err
 					return toastr.error(TAPi18n.__(err.error))
 
 				room = ChatRoom.findOne(Session.get('openedRoom'))
-				toastr.success TAPi18n.__ 'User__username__removed_from__room_name__owners', { username: @user.username, room_name: room.name }
+				toastr.success TAPi18n.__ 'User__username__removed_from__room_name__owners', { username: @username, room_name: room.name }
+
+	'click .deactivate': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+		Meteor.call 'setUserActiveStatus', instance.user.get()?._id, false, (error, result) ->
+			if result
+				toastr.success t('User_has_been_deactivated')
+			if error
+				toastr.error error.reason
+
+	'click .activate': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+		Meteor.call 'setUserActiveStatus', instance.user.get()?._id, true, (error, result) ->
+			if result
+				toastr.success t('User_has_been_activated')
+			if error
+				toastr.error error.reason
+
+	'click .make-admin': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+		Meteor.call 'setAdminStatus', instance.user.get()?._id, true, (error, result) ->
+			if result
+				toastr.success t('User_is_now_an_admin')
+			if error
+				toastr.error error.reason
+
+	'click .remove-admin': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+		Meteor.call 'setAdminStatus', instance.user.get()?._id, false, (error, result) ->
+			if result
+				toastr.success t('User_is_no_longer_an_admin')
+			if error
+				toastr.error error.reason
+
+	'click .delete': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+		_id = instance.user.get()?._id
+		swal {
+			title: t('Are_you_sure')
+			text: t('Delete_User_Warning')
+			type: 'warning'
+			showCancelButton: true
+			confirmButtonColor: '#DD6B55'
+			confirmButtonText: t('Yes_delete_it')
+			cancelButtonText: t('Cancel')
+			closeOnConfirm: false
+			html: false
+		}, ->
+			swal.disableButtons()
+
+			Meteor.call 'deleteUser', _id, (error, result) ->
+				if error
+					toastr.error error.reason
+					swal.enableButtons()
+				else
+					swal
+						title: t('Deleted')
+						text: t('User_has_been_deleted')
+						type: 'success'
+						timer: 2000
+						showConfirmButton: false
+
+					RocketChat.TabBar.closeFlex()
+
+	'click .edit-user': (e, instance) ->
+		e.stopPropagation()
+		e.preventDefault()
+
+		instance.editingUser.set instance.user.get()._id
 
 Template.userInfo.onCreated ->
 	@now = new ReactiveVar moment()
-	self = @
-	Meteor.setInterval ->
-		self.now.set moment()
+
+	@user = new ReactiveVar
+
+	@editingUser = new ReactiveVar
+
+	@loadingUserInfo = new ReactiveVar true
+
+	@loadedUsername = new ReactiveVar
+
+	Meteor.setInterval =>
+		@now.set moment()
 	, 30000
+
+	@autorun =>
+		username = @loadedUsername.get()
+
+		if not username?
+			@loadingUserInfo.set false
+			return
+
+		@loadingUserInfo.set true
+
+		@subscribe 'fullUserData', username, 1, =>
+			@loadingUserInfo.set false
+
+	@autorun =>
+		data = Template.currentData()
+		if data.clear?
+			@clear = data.clear
+
+	@autorun =>
+		data = Template.currentData()
+		user = @user.get()
+		@loadedUsername.set user?.username or data?.username
+
+	@autorun =>
+		data = Template.currentData()
+		if data.username?
+			filter = { username: data.username }
+		else if data._id?
+			filter = { _id: data._id }
+
+		user = Meteor.users.findOne(filter)
+
+		@user.set user
+

packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.html

 <template name="userInfo">
-	{{#if $.Session.get 'showUserInfo'}}
-		{{#with user}}
-		<div class="about clearfix">
-			<div class="thumb">
-				{{> avatar username=username}}
+	{{#if isLoading}}
+		{{> loading}}
+	{{else}}
+		{{#if editingUser}}
+			{{> adminUserEdit (userToEdit)}}
+		{{else}}
+			{{#with user}}
+			<div class="about clearfix">
+				<div class="thumb">
+					{{> avatar username=username}}
+				</div>
+				<div class="info">
+					<h3 title="{{username}}"><i class="status-{{status}}"></i> {{username}}</h3>
+					<p>{{name}}</p>
+					{{#if utc}}<p><i class="icon-clock"></i>{{userTime}} (UTC {{utc}})</p>{{/if}}
+					{{#if hasPermission 'view-full-other-user-info'}}
+						{{#each emails}} <p><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok"></i>{{/if}}</p> {{/each}}
+						{{#each phone}} <p><i class="icon-phone"></i> {{phoneNumber}}</p> {{/each}}
+						{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Created_at"}}: {{createdAt}}</p> {{/if}}
+						{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Last_login"}}: {{lastLogin}}</p> {{/if}}
+						{{#if services.facebook.id}} <p><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
+						{{#if services.github.id}} <p><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
+						{{#if services.gitlab.id}} <p><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
+						{{#if services.google.id}} <p><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
+						{{#if services.linkedin.id}} <p><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
+						{{#if servicesMeteor.id}} <p><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
+						{{#if services.twitter.id}} <p><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
+						{{#if services.wordpress.id}} <p><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
+					{{/if}}
+				</div>
 			</div>
-			<div class="info">
-				<h3 title="{{username}}"><i class="status-{{status}}"></i> {{username}}</h3>
-				<p>{{name}}</p>
-				{{#if utc}}<p><i class="icon-clock"></i>{{userTime}} (UTC {{utc}})</p>{{/if}}
-				{{#if hasPermission 'view-full-other-user-info'}}
-					{{#each emails}} <p><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok"></i>{{/if}}</p> {{/each}}
-					{{#each phone}} <p><i class="icon-phone"></i> {{phoneNumber}}</p> {{/each}}
-					{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Created_at"}}: {{createdAt}}</p> {{/if}}
-					{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Last_login"}}: {{lastLogin}}</p> {{/if}}
-					{{#if services.facebook.id}} <p><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
-					{{#if services.github.id}} <p><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
-					{{#if services.gitlab.id}} <p><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
-					{{#if services.google.id}} <p><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
-					{{#if services.linkedin.id}} <p><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
-					{{#if servicesMeteor.id}} <p><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
-					{{#if services.twitter.id}} <p><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
-					{{#if services.wordpress.id}} <p><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
+			{{/with}}
+			<nav>
+				{{> videoButtons}}
+
+				{{#if showAll}}
+					{{#if canDirectMessage user.username}}
+						<button class='button button-block pvt-msg'><span><i class='icon-chat'></i> {{_ "Conversation"}}</span></button>
+					{{/if}}
+					{{#if canSetOwner}}
+						{{#if isOwner}}
+							<button class="button button-block unset-owner lightblue"><span>{{_ "Remove_as_owner"}}</span></button>
+						{{else}}
+							<button class="button button-block set-owner lightblue"><span>{{_ "Set_as_owner"}}</span></button>
+						{{/if}}
+					{{/if}}
+					{{#if canSetModerator}}
+						{{#if isModerator}}
+							<button class="button button-block unset-moderator lightblue"><span>{{_ "Remove_as_moderator"}}</span></button>
+						{{else}}
+							<button class="button button-block set-moderator lightblue"><span>{{_ "Set_as_moderator"}}</span></button>
+						{{/if}}
+					{{/if}}
+					{{#if canRemoveUser}}
+						<button class="button button-block remove-user red"><span>{{_ "Remove_from_room"}}</span></button>
+					{{/if}}
+					{{#if canMuteUser}}
+						{{#if userMuted}}
+							<button class="button button-block unmute-user primary"><span>{{_ "Unmute_user"}}</span></button>
+						{{else}}
+							<button class="button button-block mute-user red"><span>{{_ "Mute_user"}}</span></button>
+						{{/if}}
+					{{/if}}
 				{{/if}}
-			</div>
-		</div>
-		{{/with}}
-		<nav>
-			{{> videoButtons}}
 
-			{{#if showAll}}
-				{{#if canDirectMessage user.username}}
-					<button class='button button-block pvt-msg'><span><i class='icon-chat'></i> {{_ "Conversation"}}</span></button>
+				{{#if hasPermission 'edit-other-user-info'}}
+				<button class='button lightblue edit-user button-block'><span><i class='icon-edit'></i> {{_ "Edit"}}</span></button>
 				{{/if}}
-				{{#if canSetOwner}}
-					{{#if isOwner}}
-						<button class="button button-block unset-owner lightblue"><span>{{_ "Remove_as_owner"}}</span></button>
+				{{#if hasPermission 'assign-admin-role'}}
+					{{#if hasAdminRole}}
+					<button class='button lightblue remove-admin button-block'><span><i class='icon-shield'></i> {{_ "Remove_Admin"}}</span></button>
 					{{else}}
-						<button class="button button-block set-owner lightblue"><span>{{_ "Set_as_owner"}}</span></button>
+					<button class='button lightblue make-admin button-block'><span><i class='icon-shield'></i> {{_ "Make_Admin"}}</span></button>
 					{{/if}}
 				{{/if}}
-				{{#if canSetModerator}}
-					{{#if isModerator}}
-						<button class="button button-block unset-moderator lightblue"><span>{{_ "Remove_as_moderator"}}</span></button>
+				{{#if hasPermission 'edit-other-user-active-status'}}
+					{{#if active}}
+					<button class='button deactivate button-block'><span><i class='icon-block'></i> {{_ "Deactivate"}}</span></button>
 					{{else}}
-						<button class="button button-block set-moderator lightblue"><span>{{_ "Set_as_moderator"}}</span></button>
+					<button class='button activate button-block'><span><i class='icon-ok-circled'></i> {{_ "Activate"}}</span></button>
 					{{/if}}
 				{{/if}}
-				{{#if canRemoveUser}}
-					<button class="button button-block remove-user red"><span>{{_ "Remove_from_room"}}</span></button>
+				{{#if hasPermission 'delete-user'}}
+				<button class='button delete red button-block'><span><i class='icon-trash'></i> {{_ "Delete"}}</span></button>
 				{{/if}}
-				{{#if canMuteUser}}
-					{{#if userMuted}}
-						<button class="button button-block unmute-user primary"><span>{{_ "Unmute_user"}}</span></button>
-					{{else}}
-						<button class="button button-block mute-user red"><span>{{_ "Mute_user"}}</span></button>
-					{{/if}}
+
+				{{#if showAll}}
+					<button class='button secondary back'><span>{{_ "View_All"}} <i class='icon-angle-right'></i></span></button>
 				{{/if}}
-				<button class='button secondary back'><span>{{_ "View_All"}} <i class='icon-angle-right'></i></span></button>
-			{{/if}}
-		</nav>
+			</nav>
+		{{/if}}
 	{{/if}}
 </template>

packages/rocketchat-ui/views/app/room.coffee

@@ -7,8 +7,6 @@ isSubscribed = (_id) ->
 favoritesEnabled = ->
 	return !RocketChat.settings.get 'Disable_Favorite_Rooms'
 
-
-# @TODO bug com o botão para "rolar até o fim" (novas mensagens) quando há uma mensagem com texto que gere rolagem horizontal
 Template.room.helpers
 	# showFormattingTips: ->
 	# 	return RocketChat.settings.get('Message_ShowFormattingTips') and (RocketChat.Markdown or RocketChat.Highlight)
@@ -186,7 +184,11 @@ Template.room.helpers
 		return RocketChat.TabBar.getTemplate()
 
 	flexData: ->
-		return _.extend { rid: this._id }, RocketChat.TabBar.getData()
+		return _.extend {
+			rid: this._id
+			userDetail: Template.instance().userDetail.get(),
+			clearUserDetail: Template.instance().clearUserDetail
+		}, RocketChat.TabBar.getData()
 
 	adminClass: ->
 		return 'admin' if RocketChat.authz.hasRole(Meteor.userId(), 'admin')
@@ -354,17 +356,14 @@ Template.room.events
 			$('#room-title-field').focus().select()
 		, 10
 
-	"click .flex-tab .user-image > a" : (e) ->
+	"click .flex-tab .user-image > a" : (e, instance) ->
 		RocketChat.TabBar.openFlex()
-		Session.set('showUserInfo', @username)
+		instance.setUserDetail @username
 
-	'click .user-card-message': (e) ->
+	'click .user-card-message': (e, instance) ->
 		roomData = Session.get('roomData' + this._arguments[1].rid)
 		if roomData.t in ['c', 'p']
-			# Session.set('flexOpened', true)
-			Session.set('showUserInfo', $(e.currentTarget).data('username'))
-		# else
-			# Session.set('flexOpened', true)
+			instance.setUserDetail this._arguments[1].u.username
 		RocketChat.TabBar.setTemplate 'membersList'
 
 	'scroll .wrapper': _.throttle (e, instance) ->
@@ -410,14 +409,15 @@ Template.room.events
 	'click .message-dropdown-close': ->
 		$('.message-dropdown:visible').hide()
 
-	"click .mention-link": (e) ->
+	"click .mention-link": (e, instance) ->
 		channel = $(e.currentTarget).data('channel')
 		if channel?
 			FlowRouter.go 'channel', {name: channel}
 			return
 
 		RocketChat.TabBar.setTemplate 'membersList'
-		Session.set('showUserInfo', $(e.currentTarget).data('username'))
+		instance.setUserDetail $(e.currentTarget).data('username')
+
 		RocketChat.TabBar.openFlex()
 
 	'click .image-to-download': (event) ->
@@ -464,24 +464,6 @@ Template.room.events
 
 		fileUpload filesToUpload
 
-	'click .deactivate': ->
-		username = Session.get('showUserInfo')
-		user = Meteor.users.findOne { username: String(username) }
-		Meteor.call 'setUserActiveStatus', user?._id, false, (error, result) ->
-			if result
-				toastr.success t('User_has_been_deactivated')
-			if error
-				toastr.error error.reason
-
-	'click .activate': ->
-		username = Session.get('showUserInfo')
-		user = Meteor.users.findOne { username: String(username) }
-		Meteor.call 'setUserActiveStatus', user?._id, true, (error, result) ->
-			if result
-				toastr.success t('User_has_been_activated')
-			if error
-				toastr.error error.reason
-
 	'load img': (e, template) ->
 		template.sendToBottomIfNecessary?()
 
@@ -527,6 +509,8 @@ Template.room.onCreated ->
 	this.selectedRange = []
 	this.selectablePointer = null
 
+	this.userDetail = new ReactiveVar FlowRouter.getParam('username')
+
 	this.resetSelection = (enabled) =>
 		this.selectable.set(enabled)
 		$('.messages-box .message.selected').removeClass 'selected'
@@ -561,8 +545,11 @@ Template.room.onCreated ->
 
 		return previewMessages
 
-	@autorun =>
-		@subscribe 'fullUserData', Session.get('showUserInfo'), 1
+	this.setUserDetail = (username) =>
+		this.userDetail.set username
+
+	this.clearUserDetail = =>
+		this.userDetail.set null
 
 	Meteor.call 'getRoomRoles', @data._id, (error, results) ->
 		if error

server/publications/fullUserData.coffee

@@ -18,8 +18,9 @@ Meteor.publish 'fullUserData', (filter, limit) ->
 			lastLogin: 1
 			active: 1
 			services: 1
-			requirePasswordChange : 1
-			requirePasswordChangeReason : 1
+			requirePasswordChange: 1
+			requirePasswordChangeReason: 1
+			roles: 1
 	else
 		limit = 1