108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import './ImportE2ERoomKeys.scss';
|
|
import EventEmitter from 'events';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
import decryptMegolmKeyFile from '../../../util/decryptE2ERoomKeys';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import IconButton from '../../atoms/button/IconButton';
|
|
import Button from '../../atoms/button/Button';
|
|
import Input from '../../atoms/input/Input';
|
|
import Spinner from '../../atoms/spinner/Spinner';
|
|
|
|
import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
|
|
|
|
const viewEvent = new EventEmitter();
|
|
|
|
async function tryDecrypt(file, password) {
|
|
try {
|
|
const arrayBuffer = await file.arrayBuffer();
|
|
viewEvent.emit('importing', true);
|
|
viewEvent.emit('status', 'Decrypting file...');
|
|
const keys = await decryptMegolmKeyFile(arrayBuffer, password);
|
|
|
|
viewEvent.emit('status', 'Decrypting messages...');
|
|
await initMatrix.matrixClient.importRoomKeys(JSON.parse(keys));
|
|
|
|
viewEvent.emit('status', null);
|
|
viewEvent.emit('importing', false);
|
|
} catch (e) {
|
|
viewEvent.emit('status', e.friendlyText || 'Something went wrong!');
|
|
viewEvent.emit('importing', false);
|
|
}
|
|
}
|
|
|
|
function ImportE2ERoomKeys() {
|
|
const [keyFile, setKeyFile] = useState(null);
|
|
const [status, setStatus] = useState(null);
|
|
const [isImporting, setIsImporting] = useState(false);
|
|
const inputRef = useRef(null);
|
|
const passwordRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleIsImporting = (isImp) => setIsImporting(isImp);
|
|
const handleStatus = (msg) => setStatus(msg);
|
|
viewEvent.on('importing', handleIsImporting);
|
|
viewEvent.on('status', handleStatus);
|
|
|
|
return () => {
|
|
viewEvent.removeListener('importing', handleIsImporting);
|
|
viewEvent.removeListener('status', handleStatus);
|
|
};
|
|
}, []);
|
|
|
|
function importE2ERoomKeys() {
|
|
const password = passwordRef.current.value;
|
|
if (password === '' || keyFile === null) return;
|
|
if (isImporting) return;
|
|
|
|
tryDecrypt(keyFile, password);
|
|
}
|
|
|
|
function handleFileChange(e) {
|
|
const file = e.target.files.item(0);
|
|
passwordRef.current.value = '';
|
|
setKeyFile(file);
|
|
setStatus(null);
|
|
}
|
|
function removeImportKeysFile() {
|
|
inputRef.current.value = null;
|
|
passwordRef.current.value = null;
|
|
setKeyFile(null);
|
|
setStatus(null);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isImporting && status === null) {
|
|
removeImportKeysFile();
|
|
}
|
|
}, [isImporting, status]);
|
|
|
|
return (
|
|
<div className="import-e2e-room-keys">
|
|
<input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" />
|
|
|
|
<form className="import-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); importE2ERoomKeys(); }}>
|
|
{ keyFile !== null && (
|
|
<div className="import-e2e-room-keys__file">
|
|
<IconButton onClick={removeImportKeysFile} src={CirclePlusIC} tooltip="Remove file" />
|
|
<Text>{keyFile.name}</Text>
|
|
</div>
|
|
)}
|
|
{keyFile === null && <Button onClick={() => inputRef.current.click()}>Import keys</Button>}
|
|
<Input forwardRef={passwordRef} type="password" placeholder="Password" required />
|
|
<Button disabled={isImporting} variant="primary" type="submit">Decrypt</Button>
|
|
</form>
|
|
{ isImporting && status !== null && (
|
|
<div className="import-e2e-room-keys__process">
|
|
<Spinner size="small" />
|
|
<Text variant="b2">{status}</Text>
|
|
</div>
|
|
)}
|
|
{!isImporting && status !== null && <Text className="import-e2e-room-keys__error" variant="b2">{status}</Text>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ImportE2ERoomKeys;
|