refactor: repo (#1070)
This commit is contained in:
Mo
@@ -0,0 +1,27 @@
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { ViewControllerManager } from '@/Services/ViewControllerManager'
|
||||
import { FunctionComponent } from 'react'
|
||||
import PreferencesPane from '@/Components/Preferences/PreferencesComponents/PreferencesPane'
|
||||
import CloudLink from './CloudBackups/CloudBackups'
|
||||
import DataBackups from './DataBackups'
|
||||
import EmailBackups from './EmailBackups'
|
||||
import FileBackupsCrossPlatform from './Files/FileBackupsCrossPlatform'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
|
||||
type Props = {
|
||||
viewControllerManager: ViewControllerManager
|
||||
application: WebApplication
|
||||
}
|
||||
|
||||
const Backups: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
|
||||
return (
|
||||
<PreferencesPane>
|
||||
<DataBackups application={application} viewControllerManager={viewControllerManager} />
|
||||
<FileBackupsCrossPlatform application={application} />
|
||||
<EmailBackups application={application} />
|
||||
<CloudLink application={application} />
|
||||
</PreferencesPane>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(Backups)
|
||||
@@ -0,0 +1,226 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
FunctionComponent,
|
||||
KeyboardEventHandler,
|
||||
ChangeEventHandler,
|
||||
MouseEventHandler,
|
||||
} from 'react'
|
||||
import {
|
||||
ButtonType,
|
||||
SettingName,
|
||||
CloudProvider,
|
||||
DropboxBackupFrequency,
|
||||
GoogleDriveBackupFrequency,
|
||||
OneDriveBackupFrequency,
|
||||
} from '@standardnotes/snjs'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import Button from '@/Components/Button/Button'
|
||||
import { isDev, openInNewTab } from '@/Utils'
|
||||
import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { KeyboardKey } from '@/Services/IOService'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
providerName: CloudProvider
|
||||
isEntitledToCloudBackups: boolean
|
||||
}
|
||||
|
||||
const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerName, isEntitledToCloudBackups }) => {
|
||||
const [authBegan, setAuthBegan] = useState(false)
|
||||
const [successfullyInstalled, setSuccessfullyInstalled] = useState(false)
|
||||
const [backupFrequency, setBackupFrequency] = useState<string | undefined>(undefined)
|
||||
const [confirmation, setConfirmation] = useState('')
|
||||
|
||||
const disable: MouseEventHandler = async (event) => {
|
||||
event.stopPropagation()
|
||||
|
||||
try {
|
||||
const shouldDisable = await application.alertService.confirm(
|
||||
'Are you sure you want to disable this integration?',
|
||||
'Disable?',
|
||||
'Disable',
|
||||
ButtonType.Danger,
|
||||
'Cancel',
|
||||
)
|
||||
if (shouldDisable) {
|
||||
await application.settings.deleteSetting(backupFrequencySettingName)
|
||||
await application.settings.deleteSetting(backupTokenSettingName)
|
||||
|
||||
setBackupFrequency(undefined)
|
||||
}
|
||||
} catch (error) {
|
||||
application.alertService.alert(error as string).catch(console.error)
|
||||
}
|
||||
}
|
||||
|
||||
const installIntegration: MouseEventHandler = (event) => {
|
||||
if (!isEntitledToCloudBackups) {
|
||||
return
|
||||
}
|
||||
event.stopPropagation()
|
||||
|
||||
const authUrl = application.getCloudProviderIntegrationUrl(providerName, isDev)
|
||||
openInNewTab(authUrl)
|
||||
setAuthBegan(true)
|
||||
}
|
||||
|
||||
const performBackupNow = async () => {
|
||||
// A backup is performed anytime the setting is updated with the integration token, so just update it here
|
||||
try {
|
||||
await application.settings.updateSetting(backupFrequencySettingName, backupFrequency as string)
|
||||
void application.alertService.alert(
|
||||
'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.',
|
||||
)
|
||||
} catch (err) {
|
||||
application.alertService
|
||||
.alert('There was an error while trying to trigger a backup for this provider. Please try again.')
|
||||
.catch(console.error)
|
||||
}
|
||||
}
|
||||
|
||||
const backupSettingsData = {
|
||||
[CloudProvider.Dropbox]: {
|
||||
backupTokenSettingName: SettingName.DropboxBackupToken,
|
||||
backupFrequencySettingName: SettingName.DropboxBackupFrequency,
|
||||
defaultBackupFrequency: DropboxBackupFrequency.Daily,
|
||||
},
|
||||
[CloudProvider.Google]: {
|
||||
backupTokenSettingName: SettingName.GoogleDriveBackupToken,
|
||||
backupFrequencySettingName: SettingName.GoogleDriveBackupFrequency,
|
||||
defaultBackupFrequency: GoogleDriveBackupFrequency.Daily,
|
||||
},
|
||||
[CloudProvider.OneDrive]: {
|
||||
backupTokenSettingName: SettingName.OneDriveBackupToken,
|
||||
backupFrequencySettingName: SettingName.OneDriveBackupFrequency,
|
||||
defaultBackupFrequency: OneDriveBackupFrequency.Daily,
|
||||
},
|
||||
}
|
||||
const { backupTokenSettingName, backupFrequencySettingName, defaultBackupFrequency } =
|
||||
backupSettingsData[providerName]
|
||||
|
||||
const getCloudProviderIntegrationTokenFromUrl = (url: URL) => {
|
||||
const urlSearchParams = new URLSearchParams(url.search)
|
||||
let integrationTokenKeyInUrl = ''
|
||||
|
||||
switch (providerName) {
|
||||
case CloudProvider.Dropbox:
|
||||
integrationTokenKeyInUrl = 'dbt'
|
||||
break
|
||||
case CloudProvider.Google:
|
||||
integrationTokenKeyInUrl = 'key'
|
||||
break
|
||||
case CloudProvider.OneDrive:
|
||||
integrationTokenKeyInUrl = 'key'
|
||||
break
|
||||
default:
|
||||
throw new Error('Invalid Cloud Provider name')
|
||||
}
|
||||
return urlSearchParams.get(integrationTokenKeyInUrl)
|
||||
}
|
||||
|
||||
const handleKeyPress: KeyboardEventHandler = async (event) => {
|
||||
if (event.key === KeyboardKey.Enter) {
|
||||
try {
|
||||
const decryptedCode = atob(confirmation)
|
||||
const urlFromDecryptedCode = new URL(decryptedCode)
|
||||
const cloudProviderToken = getCloudProviderIntegrationTokenFromUrl(urlFromDecryptedCode)
|
||||
|
||||
if (!cloudProviderToken) {
|
||||
throw new Error()
|
||||
}
|
||||
await application.settings.updateSetting(backupTokenSettingName, cloudProviderToken)
|
||||
await application.settings.updateSetting(backupFrequencySettingName, defaultBackupFrequency)
|
||||
|
||||
setBackupFrequency(defaultBackupFrequency)
|
||||
|
||||
setAuthBegan(false)
|
||||
setSuccessfullyInstalled(true)
|
||||
setConfirmation('')
|
||||
|
||||
await application.alertService.alert(
|
||||
`${providerName} has been successfully installed. Your first backup has also been queued and should be reflected in your external cloud's folder within the next few minutes.`,
|
||||
)
|
||||
} catch (e) {
|
||||
await application.alertService.alert('Invalid code. Please try again.')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
|
||||
setConfirmation(event.target.value)
|
||||
}
|
||||
|
||||
const getIntegrationStatus = useCallback(async () => {
|
||||
if (!application.getUser()) {
|
||||
return
|
||||
}
|
||||
const frequency = await application.settings.getSetting(backupFrequencySettingName)
|
||||
setBackupFrequency(frequency)
|
||||
}, [application, backupFrequencySettingName])
|
||||
|
||||
useEffect(() => {
|
||||
getIntegrationStatus().catch(console.error)
|
||||
}, [getIntegrationStatus])
|
||||
|
||||
const isExpanded = authBegan || successfullyInstalled
|
||||
const shouldShowEnableButton = !backupFrequency && !authBegan
|
||||
const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
|
||||
shouldShowEnableButton || backupFrequency ? 'flex justify-between items-center' : ''
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Subtitle className={additionalClass}>{providerName}</Subtitle>
|
||||
|
||||
{successfullyInstalled && <p>{providerName} has been successfully enabled.</p>}
|
||||
</div>
|
||||
{authBegan && (
|
||||
<div>
|
||||
<p className="sk-panel-row">
|
||||
Complete authentication from the newly opened window. Upon completion, a confirmation code will be
|
||||
displayed. Enter this code below:
|
||||
</p>
|
||||
<div className={'mt-1'}>
|
||||
<input
|
||||
className="sk-input sk-base center-text"
|
||||
placeholder="Enter confirmation code"
|
||||
value={confirmation}
|
||||
onKeyPress={handleKeyPress}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{shouldShowEnableButton && (
|
||||
<div>
|
||||
<Button
|
||||
variant="normal"
|
||||
label="Enable"
|
||||
className={`px-1 text-xs min-w-40 ${additionalClass}`}
|
||||
onClick={installIntegration}
|
||||
disabled={!isEntitledToCloudBackups}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{backupFrequency && (
|
||||
<div className={'flex flex-col items-end'}>
|
||||
<Button
|
||||
className={`min-w-40 mb-2 ${additionalClass}`}
|
||||
variant="normal"
|
||||
label="Perform Backup"
|
||||
onClick={performBackupNow}
|
||||
/>
|
||||
<Button className="min-w-40" variant="normal" label="Disable" onClick={disable} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CloudBackupProvider
|
||||
@@ -0,0 +1,154 @@
|
||||
import CloudBackupProvider from './CloudBackupProvider'
|
||||
import { useCallback, useEffect, useState, FunctionComponent, Fragment } from 'react'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
import {
|
||||
FeatureStatus,
|
||||
FeatureIdentifier,
|
||||
CloudProvider,
|
||||
MuteFailedCloudBackupsEmailsOption,
|
||||
SettingName,
|
||||
} from '@standardnotes/snjs'
|
||||
|
||||
import Switch from '@/Components/Switch/Switch'
|
||||
import { convertStringifiedBooleanToBoolean } from '@/Utils'
|
||||
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings'
|
||||
import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
|
||||
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
|
||||
|
||||
const providerData = [{ name: CloudProvider.Dropbox }, { name: CloudProvider.Google }, { name: CloudProvider.OneDrive }]
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
}
|
||||
|
||||
const CloudLink: FunctionComponent<Props> = ({ application }) => {
|
||||
const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] = useState(false)
|
||||
const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
|
||||
|
||||
const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
|
||||
if (!application.getUser()) {
|
||||
return
|
||||
}
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const userSettings = await application.settings.listSettings()
|
||||
setIsFailedCloudBackupEmailMuted(
|
||||
convertStringifiedBooleanToBoolean(
|
||||
userSettings.getSettingValue(
|
||||
SettingName.MuteFailedCloudBackupsEmails,
|
||||
MuteFailedCloudBackupsEmailsOption.NotMuted,
|
||||
),
|
||||
),
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [application])
|
||||
|
||||
useEffect(() => {
|
||||
const dailyDropboxBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyDropboxBackup)
|
||||
const dailyGdriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyGDriveBackup)
|
||||
const dailyOneDriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyOneDriveBackup)
|
||||
const isCloudBackupsAllowed = [dailyDropboxBackupStatus, dailyGdriveBackupStatus, dailyOneDriveBackupStatus].every(
|
||||
(status) => status === FeatureStatus.Entitled,
|
||||
)
|
||||
|
||||
setIsEntitledToCloudBackups(isCloudBackupsAllowed)
|
||||
loadIsFailedCloudBackupEmailMutedSetting().catch(console.error)
|
||||
}, [application, loadIsFailedCloudBackupEmailMutedSetting])
|
||||
|
||||
const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
|
||||
try {
|
||||
await application.settings.updateSetting(settingName, payload)
|
||||
return true
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMuteFailedCloudBackupEmails = async () => {
|
||||
if (!isEntitledToCloudBackups) {
|
||||
return
|
||||
}
|
||||
const previousValue = isFailedCloudBackupEmailMuted
|
||||
setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted)
|
||||
|
||||
const updateResult = await updateSetting(
|
||||
SettingName.MuteFailedCloudBackupsEmails,
|
||||
`${!isFailedCloudBackupEmailMuted}`,
|
||||
)
|
||||
if (!updateResult) {
|
||||
setIsFailedCloudBackupEmailMuted(previousValue)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Cloud Backups</Title>
|
||||
{!isEntitledToCloudBackups && (
|
||||
<>
|
||||
<Text>
|
||||
A <span className={'font-bold'}>Plus</span> or <span className={'font-bold'}>Pro</span> subscription plan
|
||||
is required to enable Cloud Backups.{' '}
|
||||
<a target="_blank" href="https://standardnotes.com/features">
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</Text>
|
||||
<HorizontalSeparator classes="mt-3 mb-3" />
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<Text className={additionalClass}>
|
||||
Configure the integrations below to enable automatic daily backups of your encrypted data set to your
|
||||
third-party cloud provider.
|
||||
</Text>
|
||||
<div>
|
||||
<HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
|
||||
<div>
|
||||
{providerData.map(({ name }) => (
|
||||
<Fragment key={name}>
|
||||
<CloudBackupProvider
|
||||
application={application}
|
||||
providerName={name}
|
||||
isEntitledToCloudBackups={isEntitledToCloudBackups}
|
||||
/>
|
||||
<HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={additionalClass}>
|
||||
<Subtitle>Email preferences</Subtitle>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<div className="flex flex-col">
|
||||
<Text>Receive a notification email if a cloud backup fails.</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={'sk-spinner info small'} />
|
||||
) : (
|
||||
<Switch
|
||||
onChange={toggleMuteFailedCloudBackupEmails}
|
||||
checked={!isFailedCloudBackupEmailMuted}
|
||||
disabled={!isEntitledToCloudBackups}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export default CloudLink
|
||||
@@ -0,0 +1,196 @@
|
||||
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,
|
||||
STRING_E2E_ENABLED,
|
||||
STRING_LOCAL_ENC_ENABLED,
|
||||
STRING_ENC_NOT_ENABLED,
|
||||
} from '@/Constants/Strings'
|
||||
import { BackupFile } from '@standardnotes/snjs'
|
||||
import { ChangeEventHandler, MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { ViewControllerManager } from '@/Services/ViewControllerManager'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import Button from '@/Components/Button/Button'
|
||||
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
|
||||
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
viewControllerManager: ViewControllerManager
|
||||
}
|
||||
|
||||
const DataBackups = ({ application, viewControllerManager }: Props) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [isImportDataLoading, setIsImportDataLoading] = useState(false)
|
||||
const {
|
||||
isBackupEncrypted,
|
||||
isEncryptionEnabled,
|
||||
setIsBackupEncrypted,
|
||||
setIsEncryptionEnabled,
|
||||
setEncryptionStatusString,
|
||||
} = viewControllerManager.accountMenuController
|
||||
|
||||
const refreshEncryptionStatus = useCallback(() => {
|
||||
const hasUser = application.hasAccount()
|
||||
const hasPasscode = application.hasPasscode()
|
||||
|
||||
const encryptionEnabled = hasUser || hasPasscode
|
||||
|
||||
const encryptionStatusString = hasUser
|
||||
? STRING_E2E_ENABLED
|
||||
: hasPasscode
|
||||
? STRING_LOCAL_ENC_ENABLED
|
||||
: STRING_ENC_NOT_ENABLED
|
||||
|
||||
setEncryptionStatusString(encryptionStatusString)
|
||||
setIsEncryptionEnabled(encryptionEnabled)
|
||||
setIsBackupEncrypted(encryptionEnabled)
|
||||
}, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled])
|
||||
|
||||
useEffect(() => {
|
||||
refreshEncryptionStatus()
|
||||
}, [refreshEncryptionStatus])
|
||||
|
||||
const downloadDataArchive = () => {
|
||||
application.getArchiveService().downloadBackup(isBackupEncrypted).catch(console.error)
|
||||
}
|
||||
|
||||
const readFile = async (file: File): Promise<any> => {
|
||||
if (file.type === 'application/zip') {
|
||||
application.alertService.alert(STRING_IMPORTING_ZIP_FILE).catch(console.error)
|
||||
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).catch(console.error)
|
||||
}
|
||||
}
|
||||
reader.readAsText(file)
|
||||
})
|
||||
}
|
||||
|
||||
const performImport = async (data: BackupFile) => {
|
||||
setIsImportDataLoading(true)
|
||||
|
||||
const result = await application.mutator.importData(data)
|
||||
|
||||
setIsImportDataLoading(false)
|
||||
|
||||
if (!result) {
|
||||
return
|
||||
}
|
||||
|
||||
let statusText = STRING_IMPORT_SUCCESS
|
||||
if ('error' in result) {
|
||||
statusText = result.error.text
|
||||
} else if (result.errorCount) {
|
||||
statusText = StringImportError(result.errorCount)
|
||||
}
|
||||
void alertDialog({
|
||||
text: statusText,
|
||||
})
|
||||
}
|
||||
|
||||
const importFileSelected: ChangeEventHandler<HTMLInputElement> = async (event) => {
|
||||
const { files } = event.target
|
||||
|
||||
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: MouseEventHandler = (event) => {
|
||||
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 variant="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
|
||||
</PreferencesSegment>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<PreferencesSegment>
|
||||
<Subtitle>Import a previously saved backup file</Subtitle>
|
||||
|
||||
<div className="flex flex-row items-center mt-3">
|
||||
<Button variant="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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(DataBackups)
|
||||
@@ -0,0 +1,179 @@
|
||||
import { convertStringifiedBooleanToBoolean, isDesktopApplication } from '@/Utils'
|
||||
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import Dropdown from '@/Components/Dropdown/Dropdown'
|
||||
import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
|
||||
import Switch from '@/Components/Switch/Switch'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
import {
|
||||
FeatureStatus,
|
||||
FeatureIdentifier,
|
||||
EmailBackupFrequency,
|
||||
MuteFailedBackupsEmailsOption,
|
||||
SettingName,
|
||||
} from '@standardnotes/snjs'
|
||||
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
|
||||
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
}
|
||||
|
||||
const EmailBackups = ({ application }: Props) => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(EmailBackupFrequency.Disabled)
|
||||
const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<DropdownItem[]>([])
|
||||
const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] = useState(true)
|
||||
const [isEntitledToEmailBackups, setIsEntitledToEmailBackups] = useState(false)
|
||||
|
||||
const loadEmailFrequencySetting = useCallback(async () => {
|
||||
if (!application.getUser()) {
|
||||
return
|
||||
}
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const userSettings = await application.settings.listSettings()
|
||||
setEmailFrequency(
|
||||
userSettings.getSettingValue<EmailBackupFrequency>(
|
||||
SettingName.EmailBackupFrequency,
|
||||
EmailBackupFrequency.Disabled,
|
||||
),
|
||||
)
|
||||
setIsFailedBackupEmailMuted(
|
||||
convertStringifiedBooleanToBoolean(
|
||||
userSettings.getSettingValue<MuteFailedBackupsEmailsOption>(
|
||||
SettingName.MuteFailedBackupsEmails,
|
||||
MuteFailedBackupsEmailsOption.NotMuted,
|
||||
),
|
||||
),
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [application])
|
||||
|
||||
useEffect(() => {
|
||||
const emailBackupsFeatureStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyEmailBackup)
|
||||
setIsEntitledToEmailBackups(emailBackupsFeatureStatus === FeatureStatus.Entitled)
|
||||
|
||||
const frequencyOptions = []
|
||||
for (const frequency in EmailBackupFrequency) {
|
||||
const frequencyValue = EmailBackupFrequency[frequency as keyof typeof EmailBackupFrequency]
|
||||
frequencyOptions.push({
|
||||
value: frequencyValue,
|
||||
label: application.settings.getEmailBackupFrequencyOptionLabel(frequencyValue),
|
||||
})
|
||||
}
|
||||
setEmailFrequencyOptions(frequencyOptions)
|
||||
|
||||
loadEmailFrequencySetting().catch(console.error)
|
||||
}, [application, loadEmailFrequencySetting])
|
||||
|
||||
const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
|
||||
try {
|
||||
await application.settings.updateSetting(settingName, payload, false)
|
||||
return true
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const updateEmailFrequency = async (frequency: EmailBackupFrequency) => {
|
||||
const previousFrequency = emailFrequency
|
||||
setEmailFrequency(frequency)
|
||||
|
||||
const updateResult = await updateSetting(SettingName.EmailBackupFrequency, frequency)
|
||||
if (!updateResult) {
|
||||
setEmailFrequency(previousFrequency)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMuteFailedBackupEmails = async () => {
|
||||
if (!isEntitledToEmailBackups) {
|
||||
return
|
||||
}
|
||||
const previousValue = isFailedBackupEmailMuted
|
||||
setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted)
|
||||
|
||||
const updateResult = await updateSetting(SettingName.MuteFailedBackupsEmails, `${!isFailedBackupEmailMuted}`)
|
||||
if (!updateResult) {
|
||||
setIsFailedBackupEmailMuted(previousValue)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEmailFrequencyChange = (item: string) => {
|
||||
if (!isEntitledToEmailBackups) {
|
||||
return
|
||||
}
|
||||
updateEmailFrequency(item as EmailBackupFrequency).catch(console.error)
|
||||
}
|
||||
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Email Backups</Title>
|
||||
{!isEntitledToEmailBackups && (
|
||||
<>
|
||||
<Text>
|
||||
A <span className={'font-bold'}>Plus</span> or <span className={'font-bold'}>Pro</span> subscription plan
|
||||
is required to enable Email Backups.{' '}
|
||||
<a target="_blank" href="https://standardnotes.com/features">
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</Text>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
</>
|
||||
)}
|
||||
<div className={isEntitledToEmailBackups ? '' : 'faded cursor-default pointer-events-none'}>
|
||||
{!isDesktopApplication() && (
|
||||
<Text className="mb-3">
|
||||
Daily encrypted email backups of your entire data set delivered directly to your inbox.
|
||||
</Text>
|
||||
)}
|
||||
<Subtitle>Email frequency</Subtitle>
|
||||
<Text>How often to receive backups.</Text>
|
||||
<div className="mt-2">
|
||||
{isLoading ? (
|
||||
<div className={'sk-spinner info small'} />
|
||||
) : (
|
||||
<Dropdown
|
||||
id="def-editor-dropdown"
|
||||
label="Select email frequency"
|
||||
items={emailFrequencyOptions}
|
||||
value={emailFrequency}
|
||||
onChange={handleEmailFrequencyChange}
|
||||
disabled={!isEntitledToEmailBackups}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<Subtitle>Email preferences</Subtitle>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Text>Receive a notification email if an email backup fails.</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={'sk-spinner info small'} />
|
||||
) : (
|
||||
<Switch
|
||||
onChange={toggleMuteFailedBackupEmails}
|
||||
checked={!isFailedBackupEmailMuted}
|
||||
disabled={!isEntitledToEmailBackups}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(EmailBackups)
|
||||
@@ -0,0 +1,203 @@
|
||||
import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { useCallback, useEffect, useMemo, useState, FunctionComponent } from 'react'
|
||||
import Button from '@/Components/Button/Button'
|
||||
import { FileBackupMetadataFile, FileBackupsConstantsV1, FileItem, FileHandleRead } from '@standardnotes/snjs'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
import Icon from '@/Components/Icon/Icon'
|
||||
import { StreamingFileApi } from '@standardnotes/filepicker'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import EncryptionStatusItem from '../../Security/EncryptionStatusItem'
|
||||
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
}
|
||||
|
||||
const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
|
||||
const [droppedFile, setDroppedFile] = useState<FileBackupMetadataFile | undefined>(undefined)
|
||||
const [decryptedFileItem, setDecryptedFileItem] = useState<FileItem | undefined>(undefined)
|
||||
const [binaryFile, setBinaryFile] = useState<FileHandleRead | undefined>(undefined)
|
||||
const [isSavingAsDecrypted, setIsSavingAsDecrypted] = useState(false)
|
||||
|
||||
const fileSystem = useMemo(() => new StreamingFileApi(), [])
|
||||
|
||||
useEffect(() => {
|
||||
if (droppedFile) {
|
||||
void application.files.decryptBackupMetadataFile(droppedFile).then(setDecryptedFileItem)
|
||||
} else {
|
||||
setDecryptedFileItem(undefined)
|
||||
}
|
||||
}, [droppedFile, application])
|
||||
|
||||
const chooseRelatedBinaryFile = useCallback(async () => {
|
||||
const selection = await application.files.selectFile(fileSystem)
|
||||
|
||||
if (selection === 'aborted' || selection === 'failed') {
|
||||
return
|
||||
}
|
||||
|
||||
setBinaryFile(selection)
|
||||
}, [application, fileSystem])
|
||||
|
||||
const downloadBinaryFileAsDecrypted = useCallback(async () => {
|
||||
if (!decryptedFileItem || !binaryFile) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsSavingAsDecrypted(true)
|
||||
|
||||
const result = await application.files.readBackupFileAndSaveDecrypted(binaryFile, decryptedFileItem, fileSystem)
|
||||
|
||||
if (result === 'success') {
|
||||
void application.alertService.alert(
|
||||
`<strong>${decryptedFileItem.name}</strong> has been successfully decrypted and saved to your chosen directory.`,
|
||||
)
|
||||
setBinaryFile(undefined)
|
||||
setDecryptedFileItem(undefined)
|
||||
setDroppedFile(undefined)
|
||||
} else if (result === 'failed') {
|
||||
void application.alertService.alert(
|
||||
'Unable to save file to local directory. This may be caused by failure to decrypt, or failure to save the file locally.',
|
||||
)
|
||||
}
|
||||
|
||||
setIsSavingAsDecrypted(false)
|
||||
}, [decryptedFileItem, application, binaryFile, fileSystem])
|
||||
|
||||
const handleDragOver = useCallback((event: DragEvent) => {
|
||||
event.stopPropagation()
|
||||
}, [])
|
||||
|
||||
const handleDragIn = useCallback((event: DragEvent) => {
|
||||
event.stopPropagation()
|
||||
}, [])
|
||||
|
||||
const handleDragOut = useCallback((event: DragEvent) => {
|
||||
event.stopPropagation()
|
||||
}, [])
|
||||
|
||||
const handleDrop = useCallback(
|
||||
async (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
const items = event.dataTransfer?.items
|
||||
if (!items || items.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const item = items[0]
|
||||
const file = item.getAsFile()
|
||||
if (!file) {
|
||||
return
|
||||
}
|
||||
|
||||
const text = await file.text()
|
||||
const type = application.files.isFileNameFileBackupRelated(file.name)
|
||||
if (type === false) {
|
||||
return
|
||||
}
|
||||
|
||||
if (type === 'binary') {
|
||||
void application.alertService.alert('Please drag the metadata file instead of the encrypted data file.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const metadata = JSON.parse(text) as FileBackupMetadataFile
|
||||
setDroppedFile(metadata)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
|
||||
event.dataTransfer.clearData()
|
||||
},
|
||||
[application],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('dragenter', handleDragIn)
|
||||
window.addEventListener('dragleave', handleDragOut)
|
||||
window.addEventListener('dragover', handleDragOver)
|
||||
window.addEventListener('drop', handleDrop)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('dragenter', handleDragIn)
|
||||
window.removeEventListener('dragleave', handleDragOut)
|
||||
window.removeEventListener('dragover', handleDragOver)
|
||||
window.removeEventListener('drop', handleDrop)
|
||||
}
|
||||
}, [handleDragIn, handleDrop, handleDragOver, handleDragOut])
|
||||
|
||||
if (!droppedFile) {
|
||||
return (
|
||||
<Text>
|
||||
To decrypt a backup file, drag and drop the file's respective <i>metadata.sn.json</i> file here.
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PreferencesSegment>
|
||||
{!decryptedFileItem && <Text>Attempting to decrypt metadata file...</Text>}
|
||||
|
||||
{decryptedFileItem && (
|
||||
<>
|
||||
<Title>Backup Decryption</Title>
|
||||
|
||||
<EncryptionStatusItem
|
||||
status={decryptedFileItem.name}
|
||||
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
|
||||
checkmark={true}
|
||||
/>
|
||||
|
||||
<HorizontalSeparator classes={'mt-3 mb-3'} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<Subtitle>1. Choose related data file</Subtitle>
|
||||
<Text className={`text-xs mr-3 em ${binaryFile ? 'font-bold success' : ''}`}>
|
||||
{droppedFile.file.uuid}/{FileBackupsConstantsV1.BinaryFileName}
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="normal"
|
||||
label="Choose"
|
||||
className={'px-1 text-xs min-w-40'}
|
||||
onClick={chooseRelatedBinaryFile}
|
||||
disabled={!!binaryFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HorizontalSeparator classes={'mt-3 mb-3'} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<Subtitle>2. Decrypt and save file to your computer</Subtitle>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
variant="normal"
|
||||
label={isSavingAsDecrypted ? undefined : 'Save'}
|
||||
className={'px-1 text-xs min-w-40'}
|
||||
onClick={downloadBinaryFileAsDecrypted}
|
||||
disabled={isSavingAsDecrypted || !binaryFile}
|
||||
>
|
||||
{isSavingAsDecrypted && (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="sk-spinner w-5 h-5 spinner-info"></div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</PreferencesSegment>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default BackupsDropZone
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
|
||||
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { useMemo } from 'react'
|
||||
import BackupsDropZone from './BackupsDropZone'
|
||||
import FileBackupsDesktop from './FileBackupsDesktop'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
}
|
||||
|
||||
const FileBackupsCrossPlatform = ({ application }: Props) => {
|
||||
const fileBackupsService = useMemo(() => application.fileBackups, [application])
|
||||
|
||||
return fileBackupsService ? (
|
||||
<FileBackupsDesktop application={application} backupsService={fileBackupsService} />
|
||||
) : (
|
||||
<>
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>File Backups</Title>
|
||||
<Subtitle>Automatically save encrypted backups of files uploaded to any device to this computer.</Subtitle>
|
||||
<Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
|
||||
</PreferencesSegment>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<PreferencesSegment>
|
||||
<BackupsDropZone application={application} />
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileBackupsCrossPlatform
|
||||
@@ -0,0 +1,122 @@
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import Button from '@/Components/Button/Button'
|
||||
import Switch from '@/Components/Switch/Switch'
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
import Icon from '@/Components/Icon/Icon'
|
||||
import BackupsDropZone from './BackupsDropZone'
|
||||
import EncryptionStatusItem from '../../Security/EncryptionStatusItem'
|
||||
import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
|
||||
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
backupsService: NonNullable<WebApplication['fileBackups']>
|
||||
}
|
||||
|
||||
const FileBackupsDesktop = ({ application, backupsService }: Props) => {
|
||||
const [backupsEnabled, setBackupsEnabled] = useState(false)
|
||||
const [backupsLocation, setBackupsLocation] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
void backupsService.isFilesBackupsEnabled().then(setBackupsEnabled)
|
||||
}, [backupsService])
|
||||
|
||||
useEffect(() => {
|
||||
if (backupsEnabled) {
|
||||
void backupsService.getFilesBackupsLocation().then(setBackupsLocation)
|
||||
}
|
||||
}, [backupsService, backupsEnabled])
|
||||
|
||||
const changeBackupsLocation = useCallback(async () => {
|
||||
await backupsService.changeFilesBackupsLocation()
|
||||
|
||||
setBackupsLocation(await backupsService.getFilesBackupsLocation())
|
||||
}, [backupsService])
|
||||
|
||||
const openBackupsLocation = useCallback(async () => {
|
||||
await backupsService.openFilesBackupsLocation()
|
||||
}, [backupsService])
|
||||
|
||||
const toggleBackups = useCallback(async () => {
|
||||
if (backupsEnabled) {
|
||||
await backupsService.disableFilesBackups()
|
||||
} else {
|
||||
await backupsService.enableFilesBackups()
|
||||
}
|
||||
|
||||
setBackupsEnabled(await backupsService.isFilesBackupsEnabled())
|
||||
}, [backupsService, backupsEnabled])
|
||||
|
||||
return (
|
||||
<>
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>File Backups</Title>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col mr-10">
|
||||
<Subtitle>
|
||||
Automatically save encrypted backups of files uploaded on any device to this computer.
|
||||
</Subtitle>
|
||||
</div>
|
||||
<Switch onChange={toggleBackups} checked={backupsEnabled} />
|
||||
</div>
|
||||
|
||||
{!backupsEnabled && (
|
||||
<>
|
||||
<HorizontalSeparator classes="mt-2.5 mb-4" />
|
||||
<Text>File backups are not enabled. Enable to choose where your files are backed up.</Text>
|
||||
</>
|
||||
)}
|
||||
</PreferencesSegment>
|
||||
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
|
||||
{backupsEnabled && (
|
||||
<>
|
||||
<PreferencesSegment>
|
||||
<>
|
||||
<Text className="mb-3">
|
||||
Files backups are enabled. When you upload a new file on any device and open this application, files
|
||||
will be backed up in encrypted form to:
|
||||
</Text>
|
||||
|
||||
<EncryptionStatusItem
|
||||
status={backupsLocation}
|
||||
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
|
||||
checkmark={false}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row mt-2.5">
|
||||
<Button
|
||||
variant="normal"
|
||||
label="Open Backups Location"
|
||||
className={'mr-3 text-xs'}
|
||||
onClick={openBackupsLocation}
|
||||
/>
|
||||
<Button
|
||||
variant="normal"
|
||||
label="Change Backups Location"
|
||||
className={'mr-3 text-xs'}
|
||||
onClick={changeBackupsLocation}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
</PreferencesSegment>
|
||||
</>
|
||||
)}
|
||||
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
|
||||
<PreferencesSegment>
|
||||
<BackupsDropZone application={application} />
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(FileBackupsDesktop)
|
||||
Reference in New Issue
Block a user