[NEW][ENTERPRISE] Device Management

apps/meteor/app/api/server/lib/users.ts

@@ -5,6 +5,7 @@ import { Users } from '@rocket.chat/models';
 
 import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission';
 
+type UserAutoComplete = Required<Pick<IUser, '_id' | 'name' | 'username' | 'nickname' | 'status' | 'avatarETag'>>;
 export async function findUsersToAutocomplete({
 	uid,
 	selector,
@@ -16,7 +17,7 @@ export async function findUsersToAutocomplete({
 		term: string;
 	};
 }): Promise<{
-	items: Required<Pick<IUser, '_id' | 'name' | 'username' | 'nickname' | 'status' | 'avatarETag'>>[];
+	items: UserAutoComplete[];
 }> {
 	if (!(await hasPermissionAsync(uid, 'view-outside-room'))) {
 		return { items: [] };
@@ -37,7 +38,7 @@ export async function findUsersToAutocomplete({
 		limit: 10,
 	};
 
-	const users = await Users.findActiveByUsernameOrNameRegexWithExceptionsAndConditions(
+	const users = await Users.findActiveByUsernameOrNameRegexWithExceptionsAndConditions<UserAutoComplete>(
 		new RegExp(escapeRegExp(selector.term), 'i'),
 		exceptions,
 		conditions,

apps/meteor/app/lib/server/startup/email.ts

@@ -102,6 +102,9 @@ settingsRegistry.addGroup('Email', function () {
 	}
 	.social {
 		font-size: 12px
+	}
+	.rc-color {
+		color: #F5455C;
 	}
 			`,
 			{

apps/meteor/app/models/server/models/Users.js

@@ -59,7 +59,6 @@ export class Users extends Base {
 		this.tryEnsureIndex({ statusLivechat: 1 }, { sparse: true });
 		this.tryEnsureIndex({ extension: 1 }, { sparse: true, unique: true });
 		this.tryEnsureIndex({ language: 1 }, { sparse: true });
-
 		this.tryEnsureIndex({ 'active': 1, 'services.email2fa.enabled': 1 }, { sparse: true }); // used by statistics
 		this.tryEnsureIndex({ 'active': 1, 'services.totp.enabled': 1 }, { sparse: true }); // used by statistics
 

apps/meteor/app/statistics/server/lib/SAUMonitor.ts

@@ -2,14 +2,15 @@ import { Meteor } from 'meteor/meteor';
 import { SyncedCron } from 'meteor/littledata:synced-cron';
 import UAParser from 'ua-parser-js';
 import mem from 'mem';
-import type { ISession, ISessionDevice, ISocketConnection, IUser } from '@rocket.chat/core-typings';
+import type { ISession, ISessionDevice, ISocketConnectionLogged, IUser } from '@rocket.chat/core-typings';
 import { Sessions, Users } from '@rocket.chat/models';
 
 import { UAParserMobile, UAParserDesktop } from './UAParserCustom';
 import { aggregates } from '../../../../server/models/raw/Sessions';
 import { Logger } from '../../../../server/lib/logger/Logger';
 import { getMostImportantRole } from '../../../../lib/roles/getMostImportantRole';
 import { sauEvents } from '../../../../server/services/sauMonitor/events';
+import { getClientAddress } from '../../../../server/lib/getClientAddress';
 
 type DateObj = { day: number; month: number; year: number };
 
@@ -121,20 +122,25 @@ export class SAUMonitorClass {
 			if (!this.isRunning()) {
 				return;
 			}
+			const { id: sessionId } = connection;
 
-			await Sessions.logoutByInstanceIdAndSessionIdAndUserId(connection.instanceId, connection.id, userId);
+			await Sessions.logoutBySessionIdAndUserId({ sessionId, userId });
 		});
 	}
 
 	private async _handleSession(
-		connection: ISocketConnection,
+		connection: ISocketConnectionLogged,
 		params: Pick<ISession, 'userId' | 'mostImportantRole' | 'loginAt' | 'day' | 'month' | 'year' | 'roles'>,
 	): Promise<void> {
 		const data = this._getConnectionInfo(connection, params);
+
 		if (!data) {
 			return;
 		}
-		await Sessions.createOrUpdate(data);
+
+		const searchTerm = this._getSearchTerm(data);
+
+		await Sessions.insertOne({ ...data, searchTerm, createdAt: new Date() });
 	}
 
 	private async _finishSessionsFromDate(yesterday: Date, today: Date): Promise<void> {
@@ -181,30 +187,37 @@ export class SAUMonitorClass {
 		// TODO missing an action to perform on dangling sessions (for example remove sessions not closed one month ago)
 	}
 
+	private _getSearchTerm(session: Omit<ISession, '_id' | '_updatedAt' | 'createdAt' | 'searchTerm'>): string {
+		return [session.device?.name, session.device?.type, session.device?.os.name, session.sessionId, session.userId]
+			.filter(Boolean)
+			.join('');
+	}
+
 	private _getConnectionInfo(
-		connection: ISocketConnection,
+		connection: ISocketConnectionLogged,
 		params: Pick<ISession, 'userId' | 'mostImportantRole' | 'loginAt' | 'day' | 'month' | 'year' | 'roles'>,
-	): Omit<ISession, '_id' | '_updatedAt' | 'createdAt'> | undefined {
+	): Omit<ISession, '_id' | '_updatedAt' | 'createdAt' | 'searchTerm'> | undefined {
 		if (!connection) {
 			return;
 		}
 
-		const ip = connection.clientAddress || connection.httpHeaders?.['x-real-ip'] || connection.httpHeaders?.['x-forwarded-for'];
+		const ip = getClientAddress(connection);
 
-		const host = connection.httpHeaders?.host || '';
+		const host = connection.httpHeaders?.host ?? '';
 
 		return {
 			type: 'session',
 			sessionId: connection.id,
 			instanceId: connection.instanceId,
-			ip: (Array.isArray(ip) ? ip[0] : ip) || '',
+			...(connection.loginToken && { loginToken: connection.loginToken }),
+			ip,
 			host,
 			...this._getUserAgentInfo(connection),
 			...params,
 		};
 	}
 
-	private _getUserAgentInfo(connection: ISocketConnection): { device: ISessionDevice } | undefined {
+	private _getUserAgentInfo(connection: ISocketConnectionLogged): { device: ISessionDevice } | undefined {
 		if (!connection?.httpHeaders?.['user-agent']) {
 			return;
 		}
@@ -315,13 +328,6 @@ export class SAUMonitorClass {
 		date.setDate(date.getDate() - 0); // yesterday
 		const yesterday = getDateObj(date);
 
-		const match = {
-			type: 'session',
-			year: { $lte: yesterday.year },
-			month: { $lte: yesterday.month },
-			day: { $lte: yesterday.day },
-		};
-
 		for await (const record of aggregates.dailySessionsOfYesterday(Sessions.col, yesterday)) {
 			await Sessions.updateOne(
 				{ _id: `${record.userId}-${record.year}-${record.month}-${record.day}` },
@@ -330,11 +336,19 @@ export class SAUMonitorClass {
 			);
 		}
 
-		await Sessions.updateMany(match, {
-			$set: {
-				type: 'computed-session',
-				_computedAt: new Date(),
+		await Sessions.updateMany(
+			{
+				type: 'session',
+				year: { $lte: yesterday.year },
+				month: { $lte: yesterday.month },
+				day: { $lte: yesterday.day },
 			},
-		});
+			{
+				$set: {
+					type: 'computed-session',
+					_computedAt: new Date(),
+				},
+			},
+		);
 	}
 }

apps/meteor/app/ui-login/client/index.js

@@ -6,3 +6,4 @@ import './username/username.html';
 import './login/form';
 import './login/services';
 import './username/username';
+import './login/startup';

apps/meteor/app/ui-login/client/login/layout.html

@@ -2,6 +2,9 @@
 	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			{{> loginLayoutHeader}}
+			{{#if showForcedLogoutBanner}}
+				{{> loggedOutBanner}}
+			{{/if}}
 			{{> loginForm}}
 			{{> loginLayoutFooter}}
 		</div>

apps/meteor/app/ui-login/client/login/layout.js

@@ -1,3 +1,4 @@
+import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 
 import { settings } from '../../../settings';
@@ -10,4 +11,7 @@ Template.loginLayout.helpers({
 			return `${prefix}/${asset.url || asset.defaultUrl}`;
 		}
 	},
+	showForcedLogoutBanner() {
+		return Session.get('force_logout');
+	},
 });

apps/meteor/app/ui-login/client/login/startup.ts

@@ -0,0 +1,19 @@
+import { Meteor } from 'meteor/meteor';
+import { Session } from 'meteor/session';
+import { Tracker } from 'meteor/tracker';
+
+import { Notifications } from '../../../notifications/client';
+
+Meteor.startup(() => {
+	Tracker.autorun(() => {
+		const userId = Meteor.userId();
+
+		if (!userId) {
+			return;
+		}
+
+		Notifications.onUser('force_logout', () => {
+			Session.set('force_logout', true);
+		});
+	});
+});

apps/meteor/app/utils/client/lib/RestApiClient.ts

@@ -48,7 +48,7 @@ APIClient.use(async function (request, next) {
 					return resolve(
 						next(request[0], request[1], {
 							...request[2],
-							headers: { ...request[2].headers, 'x-2fa-code': code, 'x-2fa-method': method },
+							headers: { ...request[2]?.headers, 'x-2fa-code': code, 'x-2fa-method': method },
 						}),
 					);
 				},

apps/meteor/client/components/GenericModal.tsx

@@ -74,7 +74,7 @@ const GenericModal: FC<GenericModalProps> = ({
 			<Modal.Header>
 				{renderIcon(icon, variant)}
 				<Modal.Title>{title ?? t('Are_you_sure')}</Modal.Title>
-				<Modal.Close onClick={onClose} />
+				<Modal.Close title={t('Close')} onClick={onClose} />
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>{children}</Modal.Content>
 			<Modal.Footer>

apps/meteor/client/startup/banners.ts

@@ -4,14 +4,28 @@ import { Tracker } from 'meteor/tracker';
 
 import { Notifications } from '../../app/notifications/client';
 import { APIClient } from '../../app/utils/client';
+import DeviceManagementFeatureModal from '../../ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal';
 import * as banners from '../lib/banners';
+import { imperativeModal } from '../lib/imperativeModal';
 
 const fetchInitialBanners = async (): Promise<void> => {
 	const response = await APIClient.get('/v1/banners', {
 		platform: BannerPlatform.Web,
 	});
 
 	for (const banner of response.banners) {
+		if (banner._id === 'device-management') {
+			setTimeout(() => {
+				imperativeModal.open({
+					component: DeviceManagementFeatureModal,
+					props: {
+						close: imperativeModal.close,
+					},
+				});
+			}, 2000);
+			continue;
+		}
+
 		banners.open({
 			...banner.view,
 			viewId: banner.view.viewId || banner._id,

apps/meteor/client/templates.ts

@@ -157,3 +157,7 @@ createTemplateForComponent('roomNotFound', () => import('./views/room/Room/RoomN
 createTemplateForComponent('ComposerNotAvailablePhoneCalls', () => import('./components/voip/composer/NotAvailableOnCall'), {
 	renderContainerView: () => HTML.DIV({ style: 'display: flex; height: 100%; width: 100%' }),
 });
+
+createTemplateForComponent('loggedOutBanner', () => import('../ee/client/components/deviceManagement/LoggedOutBanner'), {
+	renderContainerView: () => HTML.DIV({ style: 'max-width: 520px; margin: 0 auto;' }),
+});

apps/meteor/ee/app/license/server/bundles.ts

@@ -10,6 +10,7 @@ export type BundleFeature =
 	| 'scalability'
 	| 'teams-mention'
 	| 'saml-enterprise'
+	| 'device-management'
 	| 'oauth-enterprise'
 	| 'federation'
 	| 'videoconference-enterprise';
@@ -32,6 +33,7 @@ const bundles: IBundle = {
 		'teams-mention',
 		'saml-enterprise',
 		'oauth-enterprise',
+		'device-management',
 		'federation',
 		'videoconference-enterprise',
 	],

apps/meteor/ee/client/components/deviceManagement/LoggedOutBanner.tsx

@@ -0,0 +1,15 @@
+import { Banner, Box, Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+const LoggedOutBanner = (): ReactElement => {
+	const t = useTranslation();
+
+	return (
+		<Banner variant='warning' icon={<Icon name='warning' size={24} />}>
+			<Box textAlign='left'>{t('Logged_Out_Banner_Text')}</Box>
+		</Banner>
+	);
+};
+
+export default LoggedOutBanner;

apps/meteor/ee/client/deviceManagement/components/DeviceIcon.tsx

@@ -0,0 +1,25 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+import React, { ComponentProps, ReactElement } from 'react';
+
+const iconMap: Record<string, ComponentProps<typeof Icon>['name']> = {
+	browser: 'desktop',
+	mobile: 'mobile',
+};
+
+const DeviceIcon = ({ deviceType }: { deviceType: string }): ReactElement => (
+	<Box
+		is='span'
+		display='inline-flex'
+		alignItems='center'
+		justifyContent='center'
+		p='x4'
+		bg='neutral-500-50'
+		size='x24'
+		borderRadius='full'
+		mie='x8'
+	>
+		<Icon name={iconMap[deviceType]} size='x14' color='info' />
+	</Box>
+);
+
+export default DeviceIcon;