upstream-rocketchat/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx

import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';

import RoomE2EENotAllowed from './RoomE2EENotAllowed';
import { e2e } from '../../../lib/e2ee';
import { getStoredItem, STORAGE_KEYS } from '../../../lib/sdk/storage';
import RoomBody from '../body/RoomBody';
import { useRoom } from '../contexts/RoomContext';
import { useE2EERoomState } from '../hooks/useE2EERoomState';
import { useE2EEState } from '../hooks/useE2EEState';

const RoomE2EESetup = () => {
	const room = useRoom();

	const e2eeState = useE2EEState();
	const e2eRoomState = useE2EERoomState(room._id);

	const { t } = useTranslation();
	const randomPassword = getStoredItem(STORAGE_KEYS.E2EE_RANDOM_PASSWORD);

	const onSavePassword = useCallback(() => {
		if (!randomPassword) {
			return;
		}

		e2e.openSaveE2EEPasswordModal(randomPassword);
	}, [randomPassword]);

	const onEnterE2EEPassword = useCallback(() => e2e.decodePrivateKeyFlow(), []);

	if (e2eeState === 'SAVE_PASSWORD') {
		return (
			<RoomE2EENotAllowed
				title={t('__roomName__is_encrypted', { roomName: room.name })}
				subTitle={t('Save_your_encryption_password_to_access')}
				icon='key'
				action={onSavePassword}
				btnText={t('Save_E2EE_password')}
			/>
		);
	}

	if (e2eeState === 'ENTER_PASSWORD') {
		return (
			<RoomE2EENotAllowed
				title={t('__roomName__is_encrypted', { roomName: room.name })}
				subTitle={t('Enter_your_E2E_password_to_access')}
				icon='key'
				action={onEnterE2EEPassword}
				btnText={t('Enter_your_E2E_password')}
			/>
		);
	}

	if (e2eRoomState === 'WAITING_KEYS') {
		return (
			<RoomE2EENotAllowed
				title={t('Check_back_later')}
				subTitle={t('__roomName__encryption_keys_need_to_be_updated', { roomName: room.name })}
				icon='clock'
			/>
		);
	}

	return <RoomBody />;
};

export default RoomE2EESetup;