Rocket.Chat/client/admin/apps/CloudLoginModal.js

import { Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
import React from 'react';

import { useSetModal } from '../../contexts/ModalContext';
import { useRoute } from '../../contexts/RouterContext';
import { useTranslation } from '../../contexts/TranslationContext';

const CloudLoginModal = (props) => {
	const t = useTranslation();
	const setModal = useSetModal();
	const cloudRoute = useRoute('cloud');

	const handleCloseButtonClick = () => {
		setModal(null);
	};

	const handleCancelButtonClick = () => {
		setModal(null);
	};

	const handleLoginButtonClick = () => {
		cloudRoute.push();
		setModal(null);
	};

	return <Modal {...props}>
		<Modal.Header>
			<Icon color='danger' name='info-circled' size={20}/>
			<Modal.Title>{t('Apps_Marketplace_Login_Required_Title')}</Modal.Title>
			<Modal.Close onClick={handleCloseButtonClick}/>
		</Modal.Header>
		<Modal.Content fontScale='p1'>
			{t('Apps_Marketplace_Login_Required_Description')}
		</Modal.Content>
		<Modal.Footer>
			<ButtonGroup align='end'>
				<Button ghost onClick={handleCancelButtonClick}>{t('Cancel')}</Button>
				<Button primary danger onClick={handleLoginButtonClick}>{t('Login')}</Button>
			</ButtonGroup>
		</Modal.Footer>
	</Modal>;
};

export default CloudLoginModal;