mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-03-13 06:30:01 +01:00
add options for local backup in user settings
This commit is contained in:
Ajay Bura
parent
b7a7a37eaf
commit
b1e78cce6b
2 changed files with 327 additions and 25 deletions
|
|
@ -4,6 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
|
|||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { LocalBackup } from './LocalBackup';
|
||||
|
||||
type EncryptionProps = {
|
||||
requestClose: () => void;
|
||||
|
|
@ -64,31 +65,7 @@ export function Encryption({ requestClose }: EncryptionProps) {
|
|||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Local Backup</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Export Messages Data"
|
||||
description="Save copy of encryption data on your device to decrypt messages later."
|
||||
/>
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Import Messages Data"
|
||||
description="Load copy of encryption data from device to decrypt your messages."
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
<LocalBackup />
|
||||
</Box>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
|
|
|
|||
325
src/app/features/settings/encryption/LocalBackup.tsx
Normal file
325
src/app/features/settings/encryption/LocalBackup.tsx
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
|
||||
import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds';
|
||||
import FileSaver from 'file-saver';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { PasswordInput } from '../../../components/password-input/PasswordInput';
|
||||
import { ConfirmPasswordMatch } from '../../../components/ConfirmPasswordMatch';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { decryptMegolmKeyFile, encryptMegolmKeyFile } from '../../../../util/cryptE2ERoomKeys';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import { useFilePicker } from '../../../hooks/useFilePicker';
|
||||
|
||||
function ExportKeys() {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const [exportState, exportKeys] = useAsyncCallback<void, Error, [string]>(
|
||||
useCallback(
|
||||
async (password) => {
|
||||
const crypto = mx.getCrypto();
|
||||
if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
|
||||
const keysJSON = await crypto.exportRoomKeysAsJson();
|
||||
|
||||
const encKeys = await encryptMegolmKeyFile(keysJSON, password);
|
||||
|
||||
const blob = new Blob([encKeys], {
|
||||
type: 'text/plain;charset=us-ascii',
|
||||
});
|
||||
FileSaver.saveAs(blob, 'cinny-keys.txt');
|
||||
},
|
||||
[mx]
|
||||
)
|
||||
);
|
||||
|
||||
const exporting = exportState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (exporting) return;
|
||||
|
||||
const { passwordInput, confirmPasswordInput } = evt.target as HTMLFormElement & {
|
||||
passwordInput: HTMLInputElement;
|
||||
confirmPasswordInput: HTMLInputElement;
|
||||
};
|
||||
|
||||
const password = passwordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
|
||||
if (password !== confirmPassword) return;
|
||||
|
||||
exportKeys(password).then(() => {
|
||||
if (alive()) {
|
||||
passwordInput.value = '';
|
||||
confirmPasswordInput.value = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingTile>
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<ConfirmPasswordMatch initialValue>
|
||||
{(match, doMatch, passRef, confPassRef) => (
|
||||
<>
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">New Password</Text>
|
||||
<PasswordInput
|
||||
ref={passRef}
|
||||
name="passwordInput"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
required
|
||||
onChange={doMatch}
|
||||
readOnly={exporting}
|
||||
autoFocus
|
||||
/>
|
||||
</Box>
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Confirm Password</Text>
|
||||
<PasswordInput
|
||||
ref={confPassRef}
|
||||
style={{ color: match ? undefined : color.Critical.Main }}
|
||||
name="confirmPasswordInput"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
required
|
||||
onChange={doMatch}
|
||||
readOnly={exporting}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</ConfirmPasswordMatch>
|
||||
<Button
|
||||
type="submit"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
outlined
|
||||
radii="300"
|
||||
disabled={exporting}
|
||||
before={exporting ? <Spinner size="200" variant="Secondary" fill="Soft" /> : undefined}
|
||||
>
|
||||
<Text as="span" size="B400">
|
||||
Export
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
{exportState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{exportState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
|
||||
function ExportKeysTile() {
|
||||
const [expand, setExpand] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingTile
|
||||
title="Export Messages Data"
|
||||
description="Save password protected copy of encryption data on your device to decrypt messages later."
|
||||
after={
|
||||
<Box>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setExpand(!expand)}
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
outlined
|
||||
radii="300"
|
||||
before={
|
||||
<Icon size="100" src={expand ? Icons.ChevronTop : Icons.ChevronBottom} filled />
|
||||
}
|
||||
>
|
||||
<Text as="span" size="B300" truncate>
|
||||
{expand ? 'Collapse' : 'Expand'}
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
{expand && <ExportKeys />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type ImportKeysProps = {
|
||||
file: File;
|
||||
onDone?: () => void;
|
||||
};
|
||||
function ImportKeys({ file, onDone }: ImportKeysProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const [decryptState, decryptFile] = useAsyncCallback<void, Error, [string]>(
|
||||
useCallback(
|
||||
async (password) => {
|
||||
const crypto = mx.getCrypto();
|
||||
if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
|
||||
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const keys = await decryptMegolmKeyFile(arrayBuffer, password);
|
||||
|
||||
await crypto.importRoomKeysAsJson(keys);
|
||||
},
|
||||
[file, mx]
|
||||
)
|
||||
);
|
||||
|
||||
const decrypting = decryptState.status === AsyncStatus.Loading;
|
||||
|
||||
useEffect(() => {
|
||||
if (decryptState.status === AsyncStatus.Success) {
|
||||
onDone?.();
|
||||
}
|
||||
}, [onDone, decryptState]);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (decrypting) return;
|
||||
|
||||
const { passwordInput } = evt.target as HTMLFormElement & {
|
||||
passwordInput: HTMLInputElement;
|
||||
};
|
||||
|
||||
const password = passwordInput.value;
|
||||
|
||||
if (!password) return;
|
||||
decryptFile(password).then(() => {
|
||||
if (alive()) {
|
||||
passwordInput.value = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingTile>
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Password:</Text>
|
||||
<PasswordInput
|
||||
name="passwordInput"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
required
|
||||
autoFocus
|
||||
readOnly={decrypting}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
type="submit"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
outlined
|
||||
radii="300"
|
||||
disabled={decrypting}
|
||||
before={decrypting ? <Spinner size="200" variant="Secondary" fill="Soft" /> : undefined}
|
||||
>
|
||||
<Text as="span" size="B400">
|
||||
Decrypt
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
{decryptState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{decryptState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportKeysTile() {
|
||||
const [file, setFile] = useState<File>();
|
||||
const pickFile = useFilePicker(setFile);
|
||||
|
||||
const handleDone = useCallback(() => {
|
||||
setFile(undefined);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingTile
|
||||
title="Import Messages Data"
|
||||
description="Load password protected copy of encryption data from device to decrypt your messages."
|
||||
after={
|
||||
<Box>
|
||||
{file ? (
|
||||
<Button
|
||||
style={{ maxWidth: toRem(200) }}
|
||||
type="button"
|
||||
onClick={() => setFile(undefined)}
|
||||
size="300"
|
||||
variant="Warning"
|
||||
fill="Solid"
|
||||
radii="300"
|
||||
before={<Icon size="100" src={Icons.File} filled />}
|
||||
after={<Icon size="100" src={Icons.Cross} />}
|
||||
>
|
||||
<Text as="span" size="B300" truncate>
|
||||
{file.name}
|
||||
</Text>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => pickFile('text/plain')}
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
outlined
|
||||
radii="300"
|
||||
before={<Icon size="100" src={Icons.ArrowRight} />}
|
||||
>
|
||||
<Text as="span" size="B300">
|
||||
Import
|
||||
</Text>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
{file && <ImportKeys file={file} onDone={handleDone} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function LocalBackup() {
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Local Backup</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<ExportKeysTile />
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<ImportKeysTile />
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue