From d501ae441050ccc0a184d480aefbd009c0919e3a Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Wed, 26 Apr 2023 19:02:19 +0530 Subject: [PATCH] chore: preferences changes --- .../src/Preferences/PreferenceId.ts | 1 - .../Preferences/Panes/Backups/Backups.tsx | 2 - .../CloudBackups/CloudBackupProvider.tsx | 220 ------------------ .../Backups/CloudBackups/CloudBackups.tsx | 155 ------------ .../Preferences/Panes/CloudLink.tsx | 81 ------- .../Preferences/Panes/General/Labs/Labs.tsx | 6 +- .../Components/Preferences/PreferencesMenu.ts | 1 - .../Preferences/PreferencesMenuView.tsx | 36 +-- 8 files changed, 10 insertions(+), 492 deletions(-) delete mode 100644 packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx delete mode 100644 packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx delete mode 100644 packages/web/src/javascripts/Components/Preferences/Panes/CloudLink.tsx diff --git a/packages/ui-services/src/Preferences/PreferenceId.ts b/packages/ui-services/src/Preferences/PreferenceId.ts index 808b34cd8..923de784d 100644 --- a/packages/ui-services/src/Preferences/PreferenceId.ts +++ b/packages/ui-services/src/Preferences/PreferenceId.ts @@ -10,7 +10,6 @@ const PREFERENCE_IDS = [ 'get-free-month', 'help-feedback', 'whats-new', - 'filesend', ] as const export type PreferenceId = typeof PREFERENCE_IDS[number] diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/Backups.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/Backups.tsx index d494c826f..b8daf70fc 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/Backups.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/Backups.tsx @@ -2,7 +2,6 @@ import { WebApplication } from '@/Application/Application' import { ViewControllerManager } from '@/Controllers/ViewControllerManager' import { FunctionComponent } from 'react' import PreferencesPane from '@/Components/Preferences/PreferencesComponents/PreferencesPane' -import CloudLink from './CloudBackups/CloudBackups' import DataBackups from './DataBackups' import EmailBackups from './EmailBackups' import FileBackupsCrossPlatform from './Files/FileBackupsCrossPlatform' @@ -19,7 +18,6 @@ const Backups: FunctionComponent = ({ application, viewControllerManager - ) } diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx deleted file mode 100644 index 79507e609..000000000 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import { - useCallback, - useEffect, - useState, - FunctionComponent, - KeyboardEventHandler, - ChangeEventHandler, - MouseEventHandler, -} from 'react' -import { - ButtonType, - SettingName, - CloudProvider, - DropboxBackupFrequency, - GoogleDriveBackupFrequency, - OneDriveBackupFrequency, -} from '@standardnotes/snjs' -import { WebApplication } from '@/Application/Application' -import Button from '@/Components/Button/Button' -import { openInNewTab } from '@/Utils' -import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content' -import { KeyboardKey } from '@standardnotes/ui-services' - -type Props = { - application: WebApplication - providerName: CloudProvider - isEntitledToCloudBackups: boolean -} - -const CloudBackupProvider: FunctionComponent = ({ application, providerName, isEntitledToCloudBackups }) => { - const [authBegan, setAuthBegan] = useState(false) - const [successfullyInstalled, setSuccessfullyInstalled] = useState(false) - const [backupFrequency, setBackupFrequency] = useState(undefined) - const [confirmation, setConfirmation] = useState('') - - const disable: MouseEventHandler = async (event) => { - event.stopPropagation() - - try { - const shouldDisable = await application.alertService.confirm( - 'Are you sure you want to disable this integration?', - 'Disable?', - 'Disable', - ButtonType.Danger, - 'Cancel', - ) - if (shouldDisable) { - await application.settings.deleteSetting(backupFrequencySettingName) - await application.settings.deleteSetting(backupTokenSettingName) - - setBackupFrequency(undefined) - } - } catch (error) { - application.alertService.alert(error as string).catch(console.error) - } - } - - const installIntegration: MouseEventHandler = (event) => { - if (!isEntitledToCloudBackups) { - return - } - event.stopPropagation() - - const authUrl = application.getCloudProviderIntegrationUrl(providerName) - openInNewTab(authUrl) - setAuthBegan(true) - } - - const performBackupNow = async () => { - // A backup is performed anytime the setting is updated with the integration token, so just update it here - try { - await application.settings.updateSetting(backupFrequencySettingName, backupFrequency as string) - void application.alertService.alert( - 'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.', - ) - } catch (err) { - application.alertService - .alert('There was an error while trying to trigger a backup for this provider. Please try again.') - .catch(console.error) - } - } - - const backupSettingsData = { - [CloudProvider.Dropbox]: { - backupTokenSettingName: SettingName.create(SettingName.NAMES.DropboxBackupToken).getValue(), - backupFrequencySettingName: SettingName.create(SettingName.NAMES.DropboxBackupFrequency).getValue(), - defaultBackupFrequency: DropboxBackupFrequency.Daily, - }, - [CloudProvider.Google]: { - backupTokenSettingName: SettingName.create(SettingName.NAMES.GoogleDriveBackupToken).getValue(), - backupFrequencySettingName: SettingName.create(SettingName.NAMES.GoogleDriveBackupFrequency).getValue(), - defaultBackupFrequency: GoogleDriveBackupFrequency.Daily, - }, - [CloudProvider.OneDrive]: { - backupTokenSettingName: SettingName.create(SettingName.NAMES.OneDriveBackupToken).getValue(), - backupFrequencySettingName: SettingName.create(SettingName.NAMES.OneDriveBackupFrequency).getValue(), - defaultBackupFrequency: OneDriveBackupFrequency.Daily, - }, - } - const { backupTokenSettingName, backupFrequencySettingName, defaultBackupFrequency } = - backupSettingsData[providerName] - - const getCloudProviderIntegrationTokenFromUrl = (url: URL) => { - const urlSearchParams = new URLSearchParams(url.search) - let integrationTokenKeyInUrl = '' - - switch (providerName) { - case CloudProvider.Dropbox: - integrationTokenKeyInUrl = 'dbt' - break - case CloudProvider.Google: - integrationTokenKeyInUrl = 'key' - break - case CloudProvider.OneDrive: - integrationTokenKeyInUrl = 'key' - break - default: - throw new Error('Invalid Cloud Provider name') - } - return urlSearchParams.get(integrationTokenKeyInUrl) - } - - const handleKeyPress: KeyboardEventHandler = async (event) => { - if (event.key === KeyboardKey.Enter) { - try { - const decryptedCode = atob(confirmation) - const urlFromDecryptedCode = new URL(decryptedCode) - const cloudProviderToken = getCloudProviderIntegrationTokenFromUrl(urlFromDecryptedCode) - - if (!cloudProviderToken) { - throw new Error() - } - await application.settings.updateSetting(backupTokenSettingName, cloudProviderToken) - await application.settings.updateSetting(backupFrequencySettingName, defaultBackupFrequency) - - setBackupFrequency(defaultBackupFrequency) - - setAuthBegan(false) - setSuccessfullyInstalled(true) - setConfirmation('') - - await application.alertService.alert( - `${providerName} has been successfully installed. Your first backup has also been queued and should be reflected in your external cloud's folder within the next few minutes.`, - ) - } catch (e) { - await application.alertService.alert('Invalid code. Please try again.') - } - } - } - - const handleChange: ChangeEventHandler = (event) => { - setConfirmation(event.target.value) - } - - const getIntegrationStatus = useCallback(async () => { - if (!application.getUser()) { - return - } - const frequency = await application.settings.getSetting(backupFrequencySettingName) - setBackupFrequency(frequency) - }, [application, backupFrequencySettingName]) - - useEffect(() => { - getIntegrationStatus().catch(console.error) - }, [getIntegrationStatus]) - - const isExpanded = authBegan || successfullyInstalled - const shouldShowEnableButton = !backupFrequency && !authBegan - const additionalClass = isEntitledToCloudBackups ? '' : 'opacity-50 cursor-default pointer-events-none' - - return ( -
-
- {providerName} - - {successfullyInstalled &&

{providerName} has been successfully enabled.

} -
- {authBegan && ( -
-

- Complete authentication from the newly opened window. Upon completion, a confirmation code will be - displayed. Enter this code below: -

-
- -
-
- )} - {shouldShowEnableButton && ( -
-
- )} - - {backupFrequency && ( -
-
- )} -
- ) -} - -export default CloudBackupProvider diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx deleted file mode 100644 index 1dff27e7a..000000000 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import CloudBackupProvider from './CloudBackupProvider' -import { useCallback, useEffect, useState, FunctionComponent, Fragment } from 'react' -import { WebApplication } from '@/Application/Application' -import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content' -import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator' -import { - FeatureStatus, - FeatureIdentifier, - CloudProvider, - MuteFailedCloudBackupsEmailsOption, - SettingName, -} from '@standardnotes/snjs' - -import Switch from '@/Components/Switch/Switch' -import { convertStringifiedBooleanToBoolean } from '@/Utils' -import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings' -import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup' -import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment' -import Spinner from '@/Components/Spinner/Spinner' - -const providerData = [{ name: CloudProvider.Dropbox }, { name: CloudProvider.Google }, { name: CloudProvider.OneDrive }] - -type Props = { - application: WebApplication -} - -const CloudLink: FunctionComponent = ({ application }) => { - const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] = useState(false) - const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true) - const [isLoading, setIsLoading] = useState(false) - const additionalClass = isEntitledToCloudBackups ? '' : 'opacity-50 cursor-default pointer-events-none' - - const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => { - if (!application.getUser()) { - return - } - setIsLoading(true) - - try { - const userSettings = await application.settings.listSettings() - setIsFailedCloudBackupEmailMuted( - convertStringifiedBooleanToBoolean( - userSettings.getSettingValue( - SettingName.create(SettingName.NAMES.MuteFailedCloudBackupsEmails).getValue(), - MuteFailedCloudBackupsEmailsOption.NotMuted, - ), - ), - ) - } catch (error) { - console.error(error) - } finally { - setIsLoading(false) - } - }, [application]) - - useEffect(() => { - const dailyDropboxBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyDropboxBackup) - const dailyGdriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyGDriveBackup) - const dailyOneDriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyOneDriveBackup) - const isCloudBackupsAllowed = [dailyDropboxBackupStatus, dailyGdriveBackupStatus, dailyOneDriveBackupStatus].every( - (status) => status === FeatureStatus.Entitled, - ) - - setIsEntitledToCloudBackups(isCloudBackupsAllowed) - loadIsFailedCloudBackupEmailMutedSetting().catch(console.error) - }, [application, loadIsFailedCloudBackupEmailMutedSetting]) - - const updateSetting = async (settingName: SettingName, payload: string): Promise => { - try { - await application.settings.updateSetting(settingName, payload) - return true - } catch (e) { - application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error) - return false - } - } - - const toggleMuteFailedCloudBackupEmails = async () => { - if (!isEntitledToCloudBackups) { - return - } - const previousValue = isFailedCloudBackupEmailMuted - setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted) - - const updateResult = await updateSetting( - SettingName.create(SettingName.NAMES.MuteFailedCloudBackupsEmails).getValue(), - `${!isFailedCloudBackupEmailMuted}`, - ) - if (!updateResult) { - setIsFailedCloudBackupEmailMuted(previousValue) - } - } - - return ( - - - Cloud Backups - {!isEntitledToCloudBackups && ( - <> - - A Plus or Pro subscription plan - is required to enable Cloud Backups.{' '} - - Learn more - - . - - - - )} -
- - Configure the integrations below to enable automatic daily backups of your encrypted data set to your - third-party cloud provider. - -
- -
- {providerData.map(({ name }) => ( - - - - - ))} -
-
- -
- Email preferences -
-
- Receive a notification email if a cloud backup fails. -
- {isLoading ? ( - - ) : ( - - )} -
-
-
- - - ) -} - -export default CloudLink diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/CloudLink.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/CloudLink.tsx deleted file mode 100644 index 6f04bc19b..000000000 --- a/packages/web/src/javascripts/Components/Preferences/Panes/CloudLink.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { FunctionComponent } from 'react' -import { Title, Subtitle, Text, LinkButton } from '@/Components/Preferences/PreferencesComponents/Content' -import PreferencesPane from '../PreferencesComponents/PreferencesPane' -import PreferencesGroup from '../PreferencesComponents/PreferencesGroup' -import PreferencesSegment from '../PreferencesComponents/PreferencesSegment' - -const CloudLink: FunctionComponent = () => ( - - - - Frequently asked questions -
- Who can read my private notes? - - Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government agency. As long as you - keep your password safe, and your password is reasonably strong, then you are the only person in the world - with the ability to decrypt your notes. For more on how we handle your privacy and security, check out our - easy to read{' '} - - Privacy Manifesto. - - - - - Can I collaborate with others on a note? - - Because of our encrypted architecture, Standard Notes does not currently provide a real-time collaboration - solution. Multiple users can share the same account however, but editing at the same time may result in sync - conflicts, which may result in the duplication of notes. - - - - Can I use Standard Notes totally offline? - - Standard Notes can be used totally offline without an account, and without an internet connection. You can - find{' '} - - more details here. - - - - - Can’t find your question here? - - - - - - Community forum - - If you have an issue, found a bug or want to suggest a feature, you can browse or post to the forum. It’s - recommended for non-account related issues. Please read our{' '} - - Longevity statement - {' '} - before advocating for a feature request. - - - - - - - Community groups - - Want to meet other passionate note-takers and privacy enthusiasts? Want to share your feedback with us? Join - the Standard Notes community groups for discussions on security, themes, editors and more. - - - - - - - Account related issue? - Send an email to help@standardnotes.com and we’ll sort it out. - - - - -) - -export default CloudLink diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx index cab02a1cc..07fff3908 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx @@ -30,11 +30,11 @@ const LabsPane: FunctionComponent = ({ application }) => { const [experimentalFeatures, setExperimentalFeatures] = useState([]) const [isPaneGesturesEnabled, setIsPaneGesturesEnabled] = useState(() => - application.getPreference(PrefKey.PaneGesturesEnabled, false), + application.getPreference(PrefKey.PaneGesturesEnabled), ) useEffect(() => { return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => { - setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false)) + setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled)) }) }, [application]) @@ -69,7 +69,7 @@ const LabsPane: FunctionComponent = ({ application }) => { { void application.setPreference(PrefKey.PaneGesturesEnabled, !isPaneGesturesEnabled) }} diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts index 2e4078e45..1f344d32d 100644 --- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts +++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts @@ -42,7 +42,6 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [ { id: 'appearance', label: 'Appearance', icon: 'themes' }, { id: 'listed', label: 'Listed', icon: 'listed' }, { id: 'help-feedback', label: 'Help & feedback', icon: 'help' }, - { id: 'filesend', label: 'FileSend', icon: 'open-in' }, ] export class PreferencesMenu { diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx index 2f52f5be0..ef5669c90 100644 --- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx +++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx @@ -1,12 +1,11 @@ import { observer } from 'mobx-react-lite' -import { FunctionComponent, useCallback, useMemo } from 'react' +import { FunctionComponent, useMemo } from 'react' import Dropdown from '../Dropdown/Dropdown' import { DropdownItem } from '../Dropdown/DropdownItem' import PreferencesMenuItem from './PreferencesComponents/MenuItem' import { PreferencesMenu } from './PreferencesMenu' import { PreferenceId } from '@standardnotes/ui-services' -import { useApplication } from '../ApplicationProvider' -import { classNames, Environment } from '@standardnotes/snjs' +import { classNames } from '@standardnotes/snjs' import { isIOS } from '@/Utils' type Props = { @@ -14,35 +13,18 @@ type Props = { } const PreferencesMenuView: FunctionComponent = ({ menu }) => { - const application = useApplication() const { selectedPaneId, selectPane, menuItems } = menu const dropdownMenuItems: DropdownItem[] = useMemo( () => - menuItems - .filter((pref) => pref.id !== 'filesend') - .map((menuItem) => ({ - icon: menuItem.icon, - label: menuItem.label, - value: menuItem.id, - })), + menuItems.map((menuItem) => ({ + icon: menuItem.icon, + label: menuItem.label, + value: menuItem.id, + })), [menuItems], ) - const openFileSend = useCallback(() => { - const link = 'https://filesend.standardnotes.com/' - - if (application.isNativeMobileWeb()) { - application.mobileDevice().openUrl(link) - return - } else if (application.environment === Environment.Desktop) { - application.desktopDevice?.openUrl(link) - return - } - - window.open(link, '_blank') - }, [application]) - return (
= ({ menu }) => { selected={pref.selected} hasBubble={pref.hasBubble} onClick={() => { - if (pref.id === 'filesend') { - openFileSend() - return - } selectPane(pref.id) }} />