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
2022-01-12 18:48:46 +04:00
parent 7996f4e5a2
commit a342a3a224
18 changed files with 789 additions and 101 deletions
--- a/app/assets/javascripts/components/Dropdown.tsx
+++ b/app/assets/javascripts/components/Dropdown.tsx
@@ -9,7 +9,7 @@ import {
 import VisuallyHidden from '@reach/visually-hidden';
 import { FunctionComponent } from 'preact';
 import { IconType, Icon } from './Icon';
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';

 export type DropdownItem = {
  icon?: IconType;
@@ -64,6 +64,10 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
 }) => {
  const [value, setValue] = useState(defaultValue);

+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
  const labelId = `${id}-label`;

  const handleChange = (value: string) => {
--- a/app/assets/javascripts/preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/preferences/PreferencesMenu.ts
@@ -1,16 +1,20 @@
 import { IconType } from '@/components/Icon';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
-import { ContentType, SNComponent } from '@standardnotes/snjs';
+import {
+  ComponentArea,
+  ContentType,
+  FeatureIdentifier,
+  SNComponent,
+} from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { ComponentArea } from '@standardnotes/snjs';

 const PREFERENCE_IDS = [
  'general',
  'account',
  'appearance',
  'security',
+  'backups',
  'listed',
  'shortcuts',
  'accessibility',
@@ -37,6 +41,7 @@ const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
  { id: 'general', label: 'General', icon: 'settings' },
  { id: 'appearance', label: 'Appearance', icon: 'themes' },
  { id: 'security', label: 'Security', icon: 'security' },
+  { id: 'backups', label: 'Backups', icon: 'restore' },
  { id: 'listed', label: 'Listed', icon: 'listed' },
  { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
  { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
@@ -48,6 +53,7 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
  { id: 'account', label: 'Account', icon: 'user' },
  { id: 'general', label: 'General', icon: 'settings' },
  { id: 'security', label: 'Security', icon: 'security' },
+  { id: 'backups', label: 'Backups', icon: 'restore' },
  { id: 'listed', label: 'Listed', icon: 'listed' },
  { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
 ];
@@ -101,6 +107,7 @@ export class PreferencesMenu {
      FeatureIdentifier.TwoFactorAuthManager,
      'org.standardnotes.batch-manager',
      'org.standardnotes.extensions-manager',
+      FeatureIdentifier.CloudLink,
    ];
    this._extensionPanes = (
      this.application.getItems([
--- a/app/assets/javascripts/preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/preferences/PreferencesView.tsx
@@ -17,6 +17,7 @@ import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { ExtensionPane } from './panes/ExtensionPane';
+import { Backups } from '@/preferences/panes/Backups';

 interface PreferencesProps extends MfaProps {
  application: WebApplication;
@@ -26,16 +27,54 @@ interface PreferencesProps extends MfaProps {

 const PaneSelector: FunctionComponent<
  PreferencesProps & { menu: PreferencesMenu }
-> = observer(
-  ({
-     menu,
-     appState,
-     application,
-     mfaProvider,
-     userProvider
-   }) => {
-    switch (menu.selectedPaneId) {
-      case 'general':
+> = observer(({ menu, appState, application, mfaProvider, userProvider }) => {
+  switch (menu.selectedPaneId) {
+    case 'general':
+      return (
+        <General
+          appState={appState}
+          application={application}
+          extensionsLatestVersions={menu.extensionsLatestVersions}
+        />
+      );
+    case 'account':
+      return (
+        <AccountPreferences application={application} appState={appState} />
+      );
+    case 'appearance':
+      return null;
+    case 'security':
+      return (
+        <Security
+          mfaProvider={mfaProvider}
+          userProvider={userProvider}
+          appState={appState}
+          application={application}
+        />
+      );
+    case 'backups':
+      return <Backups application={application} appState={appState} />;
+    case 'listed':
+      return <Listed application={application} />;
+    case 'shortcuts':
+      return null;
+    case 'accessibility':
+      return null;
+    case 'get-free-month':
+      return null;
+    case 'help-feedback':
+      return <HelpAndFeedback />;
+    default:
+      if (menu.selectedExtension != undefined) {
+        return (
+          <ExtensionPane
+            application={application}
+            appState={appState}
+            extension={menu.selectedExtension}
+            preferencesMenu={menu}
+          />
+        );
+      } else {
        return (
          <General
            appState={appState}
@@ -43,55 +82,9 @@ const PaneSelector: FunctionComponent<
            extensionsLatestVersions={menu.extensionsLatestVersions}
          />
        );
-      case 'account':
-        return (
-          <AccountPreferences
-            application={application}
-            appState={appState}
-          />
-        );
-      case 'appearance':
-        return null;
-      case 'security':
-        return (
-          <Security
-            mfaProvider={mfaProvider}
-            userProvider={userProvider}
-            appState={appState}
-            application={application}
-          />
-        );
-      case 'listed':
-        return <Listed application={application} />;
-      case 'shortcuts':
-        return null;
-      case 'accessibility':
-        return null;
-      case 'get-free-month':
-        return null;
-      case 'help-feedback':
-        return <HelpAndFeedback />;
-      default:
-        if (menu.selectedExtension != undefined) {
-          return (
-            <ExtensionPane
-              application={application}
-              appState={appState}
-              extension={menu.selectedExtension}
-              preferencesMenu={menu}
-            />
-          );
-        } else {
-          return (
-            <General
-              appState={appState}
-              application={application}
-              extensionsLatestVersions={menu.extensionsLatestVersions}
-            />
-          );
-        }
-    }
-  });
+      }
+  }
+});

 const PreferencesCanvas: FunctionComponent<
  PreferencesProps & { menu: PreferencesMenu }
@@ -105,8 +98,13 @@ const PreferencesCanvas: FunctionComponent<
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
  (props) => {
    const menu = useMemo(
-      () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
-      [props.appState.enableUnfinishedFeatures, props.application]);
+      () =>
+        new PreferencesMenu(
+          props.application,
+          props.appState.enableUnfinishedFeatures
+        ),
+      [props.appState.enableUnfinishedFeatures, props.application]
+    );

    useEffect(() => {
      menu.selectPane(props.appState.preferences.currentPane);
--- a/app/assets/javascripts/preferences/panes/Backups.tsx
+++ b/app/assets/javascripts/preferences/panes/Backups.tsx
@@ -0,0 +1,23 @@
+import { WebApplication } from '@/ui_models/application';
+import { AppState } from '@/ui_models/app_state';
+import { FunctionComponent } from 'preact';
+import { PreferencesPane } from '../components';
+import { CloudLink, DataBackups, EmailBackups } from './backups-segments';
+
+interface Props {
+  appState: AppState;
+  application: WebApplication;
+}
+
+export const Backups: FunctionComponent<Props> = ({
+  application,
+  appState,
+}) => {
+  return (
+    <PreferencesPane>
+      <DataBackups application={application} appState={appState} />
+      <EmailBackups application={application} />
+      <CloudLink application={application} />
+    </PreferencesPane>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/Security.tsx
+++ b/app/assets/javascripts/preferences/panes/Security.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
-import { Encryption, PasscodeLock, Protections, DataBackups } from './security-segments';
+import { Encryption, PasscodeLock, Protections } from './security-segments';
 import { TwoFactorAuthWrapper } from './two-factor-auth';
 import { MfaProps } from './two-factor-auth/MfaProps';

@@ -20,6 +20,5 @@ export const Security: FunctionComponent<SecurityProps> = (props) => (
      userProvider={props.userProvider}
    />
    <PasscodeLock appState={props.appState} application={props.application} />
-    <DataBackups application={props.application} appState={props.appState} />
  </PreferencesPane>
 );
--- a/app/assets/javascripts/preferences/panes/security-segments/DataBackups.tsx
+++ b/app/assets/javascripts/preferences/panes/security-segments/DataBackups.tsx
@@ -5,32 +5,68 @@ import {
  STRING_INVALID_IMPORT_FILE,
  STRING_IMPORTING_ZIP_FILE,
  STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
-  StringImportError
+  StringImportError,
+  STRING_E2E_ENABLED,
+  STRING_LOCAL_ENC_ENABLED,
+  STRING_ENC_NOT_ENABLED,
 } from '@/strings';
 import { BackupFile } from '@standardnotes/snjs';
-import { useRef, useState } from 'preact/hooks';
+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 {
+  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) => {
+};

+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 { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = 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);
@@ -74,12 +110,14 @@ export const DataBackups = observer(({
      statusText = StringImportError(result.errorCount);
    }
    void alertDialog({
-      text: statusText
+      text: statusText,
    });
  };

-  const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
-    const { files } = (event.target as HTMLInputElement);
+  const importFileSelected = async (
+    event: TargetedEvent<HTMLInputElement, Event>
+  ) => {
+    const { files } = event.target as HTMLInputElement;

    if (!files) {
      return;
@@ -90,15 +128,14 @@ export const DataBackups = observer(({
      return;
    }

-    const version = data.version || data.keyParams?.version || data.auth_params?.version;
+    const version =
+      data.version || data.keyParams?.version || data.auth_params?.version;
    if (!version) {
      await performImport(data);
      return;
    }

-    if (
-      application.protocolService.supportedVersions().includes(version)
-    ) {
+    if (application.protocolService.supportedVersions().includes(version)) {
      await performImport(data);
    } else {
      setIsImportDataLoading(false);
@@ -107,7 +144,9 @@ export const DataBackups = observer(({
  };

  // Whenever "Import Backup" is either clicked or key-pressed, proceed the import
-  const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
+  const handleImportFile = (
+    event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent
+  ) => {
    if (event instanceof KeyboardEvent) {
      const { code } = event;

@@ -161,26 +200,33 @@ export const DataBackups = observer(({
            </form>
          )}

-          <Button type="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
-
+          <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} />
+          <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" />}
+            {isImportDataLoading && (
+              <div className="sk-spinner normal info ml-4" />
+            )}
          </div>
-
        </PreferencesSegment>
-
      </PreferencesGroup>
    </>
  );
--- a/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx
+++ b/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx
@@ -0,0 +1,188 @@
+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 [isEntitledForEmailBackups, setIsEntitledForEmailBackups] =
+    useState(false);
+
+  const loadEmailFrequencySetting = useCallback(async () => {
+    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.getFeatureStatus(
+      FeatureIdentifier.DailyEmailBackup
+    );
+    setIsEntitledForEmailBackups(
+      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>
+        {!isEntitledForEmailBackups && (
+          <>
+            <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={
+            isEntitledForEmailBackups
+              ? ''
+              : '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}
+                defaultValue={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>
+  );
+});
--- a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -0,0 +1,222 @@
+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 '@/preferences/components';
+import { KeyboardKey } from '@Services/ioService';
+import { FunctionComponent } from 'preact';
+
+type Props = {
+  application: WebApplication;
+  providerName: CloudProvider;
+};
+
+export const CloudBackupProvider: FunctionComponent<Props> = ({
+                                                                application,
+                                                                providerName
+                                                              }) => {
+  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 () => {
+    const frequency = await application.getSetting(backupFrequencySettingName);
+    setBackupFrequency(frequency);
+  }, [application, backupFrequencySettingName]);
+
+  useEffect(() => {
+    getIntegrationStatus();
+  }, [getIntegrationStatus]);
+
+  const isExpanded = authBegan || successfullyInstalled;
+  const shouldShowEnableButton = !backupFrequency && !authBegan;
+
+  return (
+    <div
+      className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
+        shouldShowEnableButton || backupFrequency
+          ? 'flex justify-between items-center'
+          : ''
+      }`}
+    >
+      <div>
+        <Subtitle>{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'}
+            onClick={installIntegration}
+          />
+        </div>
+      )}
+
+      {backupFrequency && (
+        <div className={'flex flex-col items-end'}>
+          <Button
+            className='min-w-40 mb-2'
+            type='normal'
+            label='Perform Backup'
+            onClick={performBackupNow}
+          />
+          <Button
+            className='min-w-40'
+            type='normal'
+            label='Disable'
+            onClick={disable}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx
+++ b/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx
@@ -0,0 +1,150 @@
+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 '@/preferences/components';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { FeatureIdentifier } from '@standardnotes/features';
+import { FeatureStatus } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { CloudProvider, EmailBackupFrequency, 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 [isEntitledForCloudBackups, setIsEntitledForCloudBackups] = useState(false);
+  const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
+    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 cloudBackupsFeatureStatus = application.getFeatureStatus(
+      FeatureIdentifier.CloudLink
+    );
+    setIsEntitledForCloudBackups(
+      cloudBackupsFeatureStatus === FeatureStatus.Entitled
+    );
+    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>
+        {!isEntitledForCloudBackups && (
+          <>
+            <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
+          className={
+            isEntitledForCloudBackups
+              ? ''
+              : 'faded cursor-default pointer-events-none'
+          }
+        >
+          <Text>
+            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'} />
+            <div>
+              {providerData.map(({ name }) => (
+                <>
+                  <CloudBackupProvider application={application} providerName={name} />
+                  <HorizontalSeparator classes={'mt-3 mb-3'} />
+                </>
+              ))}
+            </div>
+          </div>
+
+          <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>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/backups-segments/index.ts
+++ b/app/assets/javascripts/preferences/panes/backups-segments/index.ts
@@ -0,0 +1,3 @@
+export * from './DataBackups';
+export * from './EmailBackups';
+export * from './cloud-backups';
--- a/app/assets/javascripts/preferences/panes/security-segments/index.ts
+++ b/app/assets/javascripts/preferences/panes/security-segments/index.ts
@@ -1,4 +1,3 @@
 export * from './Encryption';
 export * from './PasscodeLock';
 export * from './Protections';
-export * from './DataBackups';
--- a/app/assets/javascripts/strings.ts
+++ b/app/assets/javascripts/strings.ts
@@ -111,6 +111,9 @@ export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade';
 export const STRING_REMOVE_OFFLINE_KEY_CONFIRMATION =
  'This will delete the previously saved offline key.';

+export const STRING_FAILED_TO_UPDATE_USER_SETTING =
+  'There was an error while trying to update your settings. Please try again.';
+
 export const Strings = {
  protectingNoteWithoutProtectionSources:
    'Access to this note will not be restricted until you set up a passcode or account.',
--- a/app/assets/javascripts/utils/index.ts
+++ b/app/assets/javascripts/utils/index.ts
@@ -155,3 +155,12 @@ export function getDesktopVersion() {
 export const isEmailValid = (email: string): boolean => {
  return EMAIL_REGEX.test(email);
 };
+
+export const openInNewTab = (url: string) => {
+  const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+  if (newWindow) newWindow.opener = null;
+};
+
+export const convertStringifiedBooleanToBoolean = (value: string) => {
+  return value !== 'false';
+};