feat: add "Email Backups" to "Backups" section (#778)
* feat: add "Email Backups" to "Backups" section * chore: remove comment * chore: better wording * chore: put working snjs version * chore: better wording * style: reuse existing css classes and add the missing one * feat: add "No email backup" option * refactor: move the function outside of the useEffect, remove unused utility function * feat (WIP): move CloudLink to backups section * chore: versions bump, type fixes * fix: handle the case when the setting update fails * style: remove dashed border from the confirmation code, UI improvements * feat: implement removing integration, improve interaction on different events * feat: implement non-interactive textarea for showing and copying the code * fix: fix TS errors * feat: implement "Perform backup" logic - remove the code for copying the confirmation code for backup integration - also remove unnecessary parameters passed to Provider * feat: don't show "CloudLink" in preferences pane * chore: show error in console on exception * refactor: better naming, add `coverage` folder to gitignore * fix: return correct setting name * refactor: use async/await for the sake of consistency * chore: remove duplicate line * feat: get urls for cloud backup from snjs * chore: update dependencies * refactor: set both `token` and `frequency` settings when enabling cloud integration; get only `frequency` when checking the integration status * refactor: once the setting is successfully saved, don't get its value from backend; instead, use its value that's still in frontend * feat: move "Receive a notification email if a cloud backup fails." into cloud backups section * fix: text correction * fix: get correct cloud integration url from snjs based on prod/dev environment
This commit is contained in:
Vardan Hakobyan
@@ -1,187 +0,0 @@
|
||||
import { isDesktopApplication } from '@/utils';
|
||||
import { alertDialog } from '@Services/alertService';
|
||||
import {
|
||||
STRING_IMPORT_SUCCESS,
|
||||
STRING_INVALID_IMPORT_FILE,
|
||||
STRING_IMPORTING_ZIP_FILE,
|
||||
STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
|
||||
StringImportError
|
||||
} from '@/strings';
|
||||
import { BackupFile } from '@standardnotes/snjs';
|
||||
import { useRef, useState } from 'preact/hooks';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { JSXInternal } from 'preact/src/jsx';
|
||||
import TargetedEvent = JSXInternal.TargetedEvent;
|
||||
import { AppState } from '@/ui_models/app_state';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { PreferencesGroup, PreferencesSegment, Title, Text, Subtitle } from '../../components';
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
appState: AppState;
|
||||
}
|
||||
|
||||
export const DataBackups = observer(({
|
||||
application,
|
||||
appState
|
||||
}: Props) => {
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isImportDataLoading, setIsImportDataLoading] = useState(false);
|
||||
|
||||
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;
|
||||
|
||||
const downloadDataArchive = () => {
|
||||
application.getArchiveService().downloadBackup(isBackupEncrypted);
|
||||
};
|
||||
|
||||
const readFile = async (file: File): Promise<any> => {
|
||||
if (file.type === 'application/zip') {
|
||||
application.alertService.alert(STRING_IMPORTING_ZIP_FILE);
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.target!.result as string);
|
||||
resolve(data);
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_INVALID_IMPORT_FILE);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
};
|
||||
|
||||
const performImport = async (data: BackupFile) => {
|
||||
setIsImportDataLoading(true);
|
||||
|
||||
const result = await application.importData(data);
|
||||
|
||||
setIsImportDataLoading(false);
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
let statusText = STRING_IMPORT_SUCCESS;
|
||||
if ('error' in result) {
|
||||
statusText = result.error;
|
||||
} else if (result.errorCount) {
|
||||
statusText = StringImportError(result.errorCount);
|
||||
}
|
||||
void alertDialog({
|
||||
text: statusText
|
||||
});
|
||||
};
|
||||
|
||||
const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
|
||||
const { files } = (event.target as HTMLInputElement);
|
||||
|
||||
if (!files) {
|
||||
return;
|
||||
}
|
||||
const file = files[0];
|
||||
const data = await readFile(file);
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
const version = data.version || data.keyParams?.version || data.auth_params?.version;
|
||||
if (!version) {
|
||||
await performImport(data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
application.protocolService.supportedVersions().includes(version)
|
||||
) {
|
||||
await performImport(data);
|
||||
} else {
|
||||
setIsImportDataLoading(false);
|
||||
void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION });
|
||||
}
|
||||
};
|
||||
|
||||
// Whenever "Import Backup" is either clicked or key-pressed, proceed the import
|
||||
const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
|
||||
if (event instanceof KeyboardEvent) {
|
||||
const { code } = event;
|
||||
|
||||
// Process only when "Enter" or "Space" keys are pressed
|
||||
if (code !== 'Enter' && code !== 'Space') {
|
||||
return;
|
||||
}
|
||||
// Don't proceed the event's default action
|
||||
// (like scrolling in case the "space" key is pressed)
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
(fileInputRef.current as HTMLInputElement).click();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Data Backups</Title>
|
||||
|
||||
{!isDesktopApplication() && (
|
||||
<Text className="mb-3">
|
||||
Backups are automatically created on desktop and can be managed
|
||||
via the "Backups" top-level menu.
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Subtitle>Download a backup of all your data</Subtitle>
|
||||
|
||||
{isEncryptionEnabled && (
|
||||
<form className="sk-panel-form sk-panel-row">
|
||||
<div className="sk-input-group">
|
||||
<label className="sk-horizontal-group tight">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => setIsBackupEncrypted(true)}
|
||||
checked={isBackupEncrypted}
|
||||
/>
|
||||
<Subtitle>Encrypted</Subtitle>
|
||||
</label>
|
||||
<label className="sk-horizontal-group tight">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => setIsBackupEncrypted(false)}
|
||||
checked={!isBackupEncrypted}
|
||||
/>
|
||||
<Subtitle>Decrypted</Subtitle>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<Button type="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
|
||||
|
||||
</PreferencesSegment>
|
||||
<PreferencesSegment>
|
||||
|
||||
<Subtitle>Import a previously saved backup file</Subtitle>
|
||||
|
||||
<div class="flex flex-row items-center mt-3" >
|
||||
<Button type="normal" label="Import Backup" onClick={handleImportFile} />
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={importFileSelected}
|
||||
className="hidden"
|
||||
/>
|
||||
{isImportDataLoading && <div className="sk-spinner normal info ml-4" />}
|
||||
</div>
|
||||
|
||||
</PreferencesSegment>
|
||||
|
||||
</PreferencesGroup>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './Encryption';
|
||||
export * from './PasscodeLock';
|
||||
export * from './Protections';
|
||||
export * from './DataBackups';
|
||||
|
||||
Reference in New Issue
Block a user