chore: move all components into Components dir with pascal case (#934)
This commit is contained in:
Mo
@@ -0,0 +1,233 @@
|
||||
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 '@/strings';
|
||||
import { BackupFile } from '@standardnotes/snjs';
|
||||
import { useCallback, useEffect, 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,
|
||||
setIsEncryptionEnabled,
|
||||
setEncryptionStatusString,
|
||||
} = appState.accountMenu;
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
import {
|
||||
convertStringifiedBooleanToBoolean,
|
||||
isDesktopApplication,
|
||||
} from '@/utils';
|
||||
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
|
||||
import { useCallback, useEffect, useState } from 'preact/hooks';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import {
|
||||
PreferencesGroup,
|
||||
PreferencesSegment,
|
||||
Subtitle,
|
||||
Text,
|
||||
Title,
|
||||
} from '../../components';
|
||||
import { EmailBackupFrequency, SettingName } from '@standardnotes/settings';
|
||||
import { Dropdown, DropdownItem } from '@/components/Dropdown';
|
||||
import { Switch } from '@/components/Switch';
|
||||
import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
|
||||
import { FeatureIdentifier } from '@standardnotes/features';
|
||||
import { FeatureStatus } from '@standardnotes/snjs';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
};
|
||||
|
||||
export const EmailBackups = observer(({ 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.listSettings();
|
||||
setEmailFrequency(
|
||||
(userSettings.EMAIL_BACKUP_FREQUENCY ||
|
||||
EmailBackupFrequency.Disabled) as EmailBackupFrequency
|
||||
);
|
||||
setIsFailedBackupEmailMuted(
|
||||
convertStringifiedBooleanToBoolean(
|
||||
userSettings[SettingName.MuteFailedBackupsEmails] as string
|
||||
)
|
||||
);
|
||||
} 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.getEmailBackupFrequencyOptionLabel(frequencyValue),
|
||||
});
|
||||
}
|
||||
setEmailFrequencyOptions(frequencyOptions);
|
||||
|
||||
loadEmailFrequencySetting();
|
||||
}, [application, loadEmailFrequencySetting]);
|
||||
|
||||
const updateSetting = async (
|
||||
settingName: SettingName,
|
||||
payload: string
|
||||
): Promise<boolean> => {
|
||||
try {
|
||||
await application.updateSetting(settingName, payload);
|
||||
return true;
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
|
||||
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 () => {
|
||||
const previousValue = isFailedBackupEmailMuted;
|
||||
setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted);
|
||||
|
||||
const updateResult = await updateSetting(
|
||||
SettingName.MuteFailedBackupsEmails,
|
||||
`${!isFailedBackupEmailMuted}`
|
||||
);
|
||||
if (!updateResult) {
|
||||
setIsFailedBackupEmailMuted(previousValue);
|
||||
}
|
||||
};
|
||||
|
||||
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="mt-3 mb-3" />
|
||||
</>
|
||||
)}
|
||||
<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={(item) => {
|
||||
updateEmailFrequency(item as EmailBackupFrequency);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<HorizontalSeparator classes="mt-5 mb-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}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,245 @@
|
||||
import React from 'react';
|
||||
import { useCallback, useEffect, useState } from 'preact/hooks';
|
||||
import { ButtonType, SettingName } from '@standardnotes/snjs';
|
||||
import {
|
||||
CloudProvider,
|
||||
DropboxBackupFrequency,
|
||||
GoogleDriveBackupFrequency,
|
||||
OneDriveBackupFrequency,
|
||||
} from '@standardnotes/settings';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { Button } from '@/components/Button';
|
||||
import { isDev, openInNewTab } from '@/utils';
|
||||
import { Subtitle } from '@/components/Preferences/components';
|
||||
import { KeyboardKey } from '@Services/ioService';
|
||||
import { FunctionComponent } from 'preact';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
providerName: CloudProvider;
|
||||
isEntitledToCloudBackups: boolean;
|
||||
};
|
||||
|
||||
export const CloudBackupProvider: FunctionComponent<Props> = ({
|
||||
application,
|
||||
providerName,
|
||||
isEntitledToCloudBackups,
|
||||
}) => {
|
||||
const [authBegan, setAuthBegan] = useState(false);
|
||||
const [successfullyInstalled, setSuccessfullyInstalled] = useState(false);
|
||||
const [backupFrequency, setBackupFrequency] = useState<string | null>(null);
|
||||
const [confirmation, setConfirmation] = useState('');
|
||||
|
||||
const disable = async (event: 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.deleteSetting(backupFrequencySettingName);
|
||||
await application.deleteSetting(backupTokenSettingName);
|
||||
|
||||
setBackupFrequency(null);
|
||||
}
|
||||
} catch (error) {
|
||||
application.alertService.alert(error as string);
|
||||
}
|
||||
};
|
||||
|
||||
const installIntegration = (event: Event) => {
|
||||
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.updateSetting(
|
||||
backupFrequencySettingName,
|
||||
backupFrequency as string
|
||||
);
|
||||
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.'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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 = async (event: KeyboardEvent) => {
|
||||
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.updateSetting(
|
||||
backupTokenSettingName,
|
||||
cloudProviderToken
|
||||
);
|
||||
await application.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 = (event: Event) => {
|
||||
setConfirmation((event.target as HTMLInputElement).value);
|
||||
};
|
||||
|
||||
const getIntegrationStatus = useCallback(async () => {
|
||||
if (!application.getUser()) {
|
||||
return;
|
||||
}
|
||||
const frequency = await application.getSetting(backupFrequencySettingName);
|
||||
setBackupFrequency(frequency);
|
||||
}, [application, backupFrequencySettingName]);
|
||||
|
||||
useEffect(() => {
|
||||
getIntegrationStatus();
|
||||
}, [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
|
||||
type="normal"
|
||||
label="Enable"
|
||||
className={`px-1 text-xs min-w-40 ${additionalClass}`}
|
||||
onClick={installIntegration}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{backupFrequency && (
|
||||
<div className={'flex flex-col items-end'}>
|
||||
<Button
|
||||
className={`min-w-40 mb-2 ${additionalClass}`}
|
||||
type="normal"
|
||||
label="Perform Backup"
|
||||
onClick={performBackupNow}
|
||||
/>
|
||||
<Button
|
||||
className="min-w-40"
|
||||
type="normal"
|
||||
label="Disable"
|
||||
onClick={disable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import { CloudBackupProvider } from './CloudBackupProvider';
|
||||
import { useCallback, useEffect, useState } from 'preact/hooks';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import {
|
||||
PreferencesGroup,
|
||||
PreferencesSegment,
|
||||
Subtitle,
|
||||
Text,
|
||||
Title,
|
||||
} from '@/components/Preferences/components';
|
||||
import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
|
||||
import { FeatureIdentifier } from '@standardnotes/features';
|
||||
import { FeatureStatus } from '@standardnotes/snjs';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { CloudProvider, SettingName } from '@standardnotes/settings';
|
||||
import { Switch } from '@/components/Switch';
|
||||
import { convertStringifiedBooleanToBoolean } from '@/utils';
|
||||
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
|
||||
|
||||
const providerData = [
|
||||
{
|
||||
name: CloudProvider.Dropbox,
|
||||
},
|
||||
{
|
||||
name: CloudProvider.Google,
|
||||
},
|
||||
{
|
||||
name: CloudProvider.OneDrive,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
};
|
||||
|
||||
export 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.listSettings();
|
||||
setIsFailedCloudBackupEmailMuted(
|
||||
convertStringifiedBooleanToBoolean(
|
||||
userSettings[SettingName.MuteFailedCloudBackupsEmails] as string
|
||||
)
|
||||
);
|
||||
} 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();
|
||||
}, [application, loadIsFailedCloudBackupEmailMutedSetting]);
|
||||
|
||||
const updateSetting = async (
|
||||
settingName: SettingName,
|
||||
payload: string
|
||||
): Promise<boolean> => {
|
||||
try {
|
||||
await application.updateSetting(settingName, payload);
|
||||
return true;
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMuteFailedCloudBackupEmails = async () => {
|
||||
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 }) => (
|
||||
<>
|
||||
<CloudBackupProvider
|
||||
application={application}
|
||||
providerName={name}
|
||||
isEntitledToCloudBackups={isEntitledToCloudBackups}
|
||||
/>
|
||||
<HorizontalSeparator
|
||||
classes={`mt-3 mb-3 ${additionalClass}`}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
</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}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './DataBackups';
|
||||
export * from './EmailBackups';
|
||||
export * from './cloud-backups';
|
||||
Reference in New Issue
Block a user