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

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) => {

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([

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(
+> = observer(({ menu, appState, application, mfaProvider, userProvider }) => {
-  ({
+  switch (menu.selectedPaneId) {
-     menu,
+    case 'general':
-     appState,
+      return (
-     application,
+        <General
-     mfaProvider,
+          appState={appState}
-     userProvider
+          application={application}
-   }) => {
+          extensionsLatestVersions={menu.extensionsLatestVersions}
-    switch (menu.selectedPaneId) {
+        />
-      case 'general':
+      );
+    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);

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>
+  );
+};

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>
 );

app/assets/javascripts/preferences/panes/backups-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 importFileSelected = async (
-    const { files } = (event.target as HTMLInputElement);
+    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 (
+    if (application.protocolService.supportedVersions().includes(version)) {
-      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" >
+          <div class="flex flex-row items-center mt-3">
-            <Button type="normal" label="Import Backup" onClick={handleImportFile} />
+            <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>
     </>
   );

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>
+  );
+});

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>
+  );
+};

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>
+  );
+};

app/assets/javascripts/preferences/panes/backups-segments/index.ts

@@ -0,0 +1,3 @@
+export * from './DataBackups';
+export * from './EmailBackups';
+export * from './cloud-backups';

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';

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.',

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';
+};

app/assets/stylesheets/_main.scss

@@ -245,3 +245,21 @@ $footer-height: 2rem;
 .z-index-purchase-flow {
   z-index: $z-index-purchase-flow;
 }
+
+textarea {
+  &.non-interactive {
+    user-select: text !important;
+    resize: none;
+    background-color: transparent;
+    border-color: var(--sn-stylekit-border-color);
+    font-family: monospace;
+    outline: 0;
+
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+  }
+}

app/assets/stylesheets/_sn.scss

@@ -813,3 +813,9 @@
     }
   }
 }
+
+.dimmed {
+  opacity: .5;
+  cursor: default;
+  pointer-events: none;
+}

app/assets/stylesheets/_ui.scss

@@ -206,6 +206,10 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   cursor: default;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .fill-current {
   fill: currentColor;
 }

package.json

@@ -88,8 +88,9 @@
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "@standardnotes/features": "1.20.6",
+    "@standardnotes/settings": "^1.9.0",
     "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.35.0",
+    "@standardnotes/snjs": "2.35.3",
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.2",
     "preact": "^10.5.15",

yarn.lock

@@ -2628,7 +2628,7 @@
   dependencies:
     "@standardnotes/auth" "^3.8.1"
 
-"@standardnotes/features@1.20.6", "@standardnotes/features@^1.20.6":
+"@standardnotes/features@1.20.6":
   version "1.20.6"
   resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.20.6.tgz#94d397892dd12f76a10c89c70092933627a9c457"
   integrity sha512-/w8+/8J8UNJ+DAsOud8XbWkeUBN6eb+5+Ic4NgkXYkx/wv6sTDk9XVc+mOhxOkYlb2iy85JDmoLAwu+GW/3Gtg==
@@ -2636,6 +2636,14 @@
     "@standardnotes/auth" "3.8.3"
     "@standardnotes/common" "1.2.1"
 
+"@standardnotes/features@^1.20.7":
+  version "1.20.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.20.7.tgz#d666569492e942eaecc05e40a79d50d33df4fbe9"
+  integrity sha512-eaZu/+PvHYXWaq6r3ET87t52lZqFknZVUEjspAL34Fdr+5cDma5ZRoylx6hPCVDO9VpHd6fjGWlS+5kZ+qJ+bA==
+  dependencies:
+    "@standardnotes/auth" "3.8.3"
+    "@standardnotes/common" "1.2.1"
+
 "@standardnotes/settings@^1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.9.0.tgz#0f01da5f6782363e4d77ee584b40f8614c555626"
@@ -2655,15 +2663,15 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.35.0":
+"@standardnotes/snjs@2.35.3":
-  version "2.35.0"
+  version "2.35.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.35.0.tgz#c24d13d7be68767b865b9f3e728d21b473bbe006"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.35.3.tgz#e8604329930317000fbec239534a3020d7e7aefb"
-  integrity sha512-dbjFMlEShsgo8sjaiwEFtbvm6vZHIgylZEtzqcJxl0TzEEIO1q4baomzUFj0ayzmM7g7S38o7zBfj+2AoXxPeA==
+  integrity sha512-Cooby9VKS92Zo5xWKQbtCDPTzr2ugsuHzp054NaQTwhGJO/WpgAX1VVoW9MsN4dQxOi6Kf2sIRBUZU4TL+caTQ==
   dependencies:
     "@standardnotes/auth" "3.8.1"
     "@standardnotes/common" "1.2.1"
     "@standardnotes/domain-events" "2.5.1"
-    "@standardnotes/features" "^1.20.6"
+    "@standardnotes/features" "^1.20.7"
     "@standardnotes/settings" "^1.9.0"
     "@standardnotes/sncrypto-common" "1.5.2"