Add ability to enable room encryption
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
0ddeb02d23
commit
63a0adaa6e
3 changed files with 65 additions and 0 deletions
55
src/app/molecules/room-encryption/RoomEncryption.jsx
Normal file
55
src/app/molecules/room-encryption/RoomEncryption.jsx
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import './RoomEncryption.scss';
|
||||||
|
|
||||||
|
import initMatrix from '../../../client/initMatrix';
|
||||||
|
|
||||||
|
import Text from '../../atoms/text/Text';
|
||||||
|
import Toggle from '../../atoms/button/Toggle';
|
||||||
|
import SettingTile from '../setting-tile/SettingTile';
|
||||||
|
|
||||||
|
function RoomEncryption({ roomId }) {
|
||||||
|
const mx = initMatrix.matrixClient;
|
||||||
|
const room = mx.getRoom(roomId);
|
||||||
|
const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
|
||||||
|
const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
|
||||||
|
const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());
|
||||||
|
|
||||||
|
const handleEncryptionEnable = () => {
|
||||||
|
const joinRule = room.getJoinRule();
|
||||||
|
const confirmMsg1 = 'It is not recommended to add encryption in public room. Anyone can find and join public rooms, so anyone can read messages in them.';
|
||||||
|
const confirmMsg2 = 'Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly';
|
||||||
|
if (joinRule === 'public' ? confirm(confirmMsg1) : true) {
|
||||||
|
if (confirm(confirmMsg2)) {
|
||||||
|
setIsEncrypted(true);
|
||||||
|
mx.sendStateEvent(roomId, 'm.room.encryption', {
|
||||||
|
algorithm: 'm.megolm.v1.aes-sha2',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="room-encryption">
|
||||||
|
<SettingTile
|
||||||
|
title="Enable room encryption"
|
||||||
|
content={(
|
||||||
|
<Text variant="b3">Once enabled, encryption cannot be disabled.</Text>
|
||||||
|
)}
|
||||||
|
options={(
|
||||||
|
<Toggle
|
||||||
|
isActive={isEncrypted}
|
||||||
|
onToggle={handleEncryptionEnable}
|
||||||
|
disabled={isEncrypted || !canEnableEncryption}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
RoomEncryption.propTypes = {
|
||||||
|
roomId: PropTypes.string.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RoomEncryption;
|
5
src/app/molecules/room-encryption/RoomEncryption.scss
Normal file
5
src/app/molecules/room-encryption/RoomEncryption.scss
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
.room-encryption {
|
||||||
|
& .setting-tile {
|
||||||
|
margin: var(--sp-normal);
|
||||||
|
}
|
||||||
|
}
|
|
@ -18,6 +18,7 @@ import RoomNotification from '../../molecules/room-notification/RoomNotification
|
||||||
import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
|
import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
|
||||||
import RoomAliases from '../../molecules/room-aliases/RoomAliases';
|
import RoomAliases from '../../molecules/room-aliases/RoomAliases';
|
||||||
import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
|
import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
|
||||||
|
import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
|
||||||
|
|
||||||
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
|
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
|
||||||
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
|
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
|
||||||
|
@ -99,6 +100,10 @@ GeneralSettings.propTypes = {
|
||||||
function SecuritySettings({ roomId }) {
|
function SecuritySettings({ roomId }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<div className="room-settings__card">
|
||||||
|
<MenuHeader>Encryption</MenuHeader>
|
||||||
|
<RoomEncryption roomId={roomId} />
|
||||||
|
</div>
|
||||||
<div className="room-settings__card">
|
<div className="room-settings__card">
|
||||||
<MenuHeader>Message history visibility (Who can read history)</MenuHeader>
|
<MenuHeader>Message history visibility (Who can read history)</MenuHeader>
|
||||||
<RoomHistoryVisibility roomId={roomId} />
|
<RoomHistoryVisibility roomId={roomId} />
|
||||||
|
|
Loading…
Reference in a new issue