diff --git a/.eslintrc b/.eslintrc index 28f7be1df..74fa349e3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,7 +7,7 @@ "prettier", "plugin:react-hooks/recommended" ], - "plugins": ["@typescript-eslint", "react"], + "plugins": ["@typescript-eslint", "react", "react-hooks"], "parserOptions": { "project": "./app/assets/javascripts/tsconfig.json" }, @@ -17,7 +17,9 @@ "no-console": "off", "semi": 1, "camelcase": "warn", - "sort-imports": "off" + "sort-imports": "off", + "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks + "react-hooks/exhaustive-deps": "error" // Checks effect dependencies }, "env": { "browser": true diff --git a/app/assets/icons/ic-settings-filled.svg b/app/assets/icons/ic-settings-filled.svg deleted file mode 100644 index 0a7c8b835..000000000 --- a/app/assets/icons/ic-settings-filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/icons/ic-settings.svg b/app/assets/icons/ic-settings.svg new file mode 100644 index 000000000..cc14f94a8 --- /dev/null +++ b/app/assets/icons/ic-settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts index 01898de3c..a4969b733 100644 --- a/app/assets/javascripts/app.ts +++ b/app/assets/javascripts/app.ts @@ -34,7 +34,6 @@ import { } from './directives/functional'; import { - AccountMenu, ActionsMenu, ComponentModal, ComponentView, @@ -59,6 +58,7 @@ import { SessionsModalDirective } from './components/SessionsModal'; import { NoAccountWarningDirective } from './components/NoAccountWarning'; import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning'; import { SearchOptionsDirective } from './components/SearchOptions'; +import { AccountMenuDirective } from './components/AccountMenu'; import { ConfirmSignoutDirective } from './components/ConfirmSignoutModal'; import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNotes'; import { NotesContextMenuDirective } from './components/NotesContextMenu'; @@ -138,7 +138,6 @@ const startApplication: StartApplication = async function startApplication( // Directives - Views angular .module('app') - .directive('accountMenu', () => new AccountMenu()) .directive('accountSwitcher', () => new AccountSwitcher()) .directive('actionsMenu', () => new ActionsMenu()) .directive('challengeModal', () => new ChallengeModal()) @@ -154,6 +153,7 @@ const startApplication: StartApplication = async function startApplication( .directive('historyMenu', () => new HistoryMenu()) .directive('syncResolutionMenu', () => new SyncResolutionMenu()) .directive('sessionsModal', SessionsModalDirective) + .directive('accountMenu', AccountMenuDirective) .directive('noAccountWarning', NoAccountWarningDirective) .directive('protectedNotePanel', NoProtectionsdNoteWarningDirective) .directive('searchOptions', SearchOptionsDirective) diff --git a/app/assets/javascripts/components/AccountMenu/Authentication.tsx b/app/assets/javascripts/components/AccountMenu/Authentication.tsx new file mode 100644 index 000000000..a3b42a0b8 --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/Authentication.tsx @@ -0,0 +1,386 @@ +import { confirmDialog } from '@Services/alertService'; +import { + STRING_ACCOUNT_MENU_UNCHECK_MERGE, + STRING_GENERATING_LOGIN_KEYS, + STRING_GENERATING_REGISTER_KEYS, + STRING_NON_MATCHING_PASSWORDS +} from '@/strings'; +import { JSXInternal } from 'preact/src/jsx'; +import TargetedEvent = JSXInternal.TargetedEvent; +import TargetedKeyboardEvent = JSXInternal.TargetedKeyboardEvent; +import { WebApplication } from '@/ui_models/application'; +import { useEffect, useRef, useState } from 'preact/hooks'; +import TargetedMouseEvent = JSXInternal.TargetedMouseEvent; +import { observer } from 'mobx-react-lite'; +import { AppState } from '@/ui_models/app_state'; + +type Props = { + application: WebApplication; + appState: AppState; +} + +const Authentication = observer(({ + application, + appState, + }: Props) => { + + const [showAdvanced, setShowAdvanced] = useState(false); + const [isAuthenticating, setIsAuthenticating] = useState(false); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [passwordConfirmation, setPasswordConfirmation] = useState(''); + const [status, setStatus] = useState(undefined); + const [isEmailFocused, setIsEmailFocused] = useState(false); + + const [isEphemeral, setIsEphemeral] = useState(false); + const [isStrictSignIn, setIsStrictSignIn] = useState(false); + const [shouldMergeLocal, setShouldMergeLocal] = useState(true); + + const { + server, + notesAndTagsCount, + showLogin, + showRegister, + setShowLogin, + setShowRegister, + setServer, + closeAccountMenu + } = appState.accountMenu; + + const user = application.getUser(); + + useEffect(() => { + if (isEmailFocused) { + emailInputRef.current.focus(); + setIsEmailFocused(false); + } + }, [isEmailFocused]); + + // Reset password and confirmation fields when hiding the form + useEffect(() => { + if (!showLogin && !showRegister) { + setPassword(''); + setPasswordConfirmation(''); + } + }, [showLogin, showRegister]); + + const handleHostInputChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setServer(value); + application.setCustomHost(value); + }; + + const emailInputRef = useRef(); + const passwordInputRef = useRef(); + const passwordConfirmationInputRef = useRef(); + + const handleSignInClick = () => { + setShowLogin(true); + setIsEmailFocused(true); + }; + + const handleRegisterClick = () => { + setShowRegister(true); + setIsEmailFocused(true); + }; + + const blurAuthFields = () => { + emailInputRef.current.blur(); + passwordInputRef.current.blur(); + passwordConfirmationInputRef.current?.blur(); + }; + + const login = async () => { + setStatus(STRING_GENERATING_LOGIN_KEYS); + setIsAuthenticating(true); + + const response = await application.signIn( + email, + password, + isStrictSignIn, + isEphemeral, + shouldMergeLocal + ); + const error = response.error; + if (!error) { + setIsAuthenticating(false); + setPassword(''); + setShowLogin(false); + + closeAccountMenu(); + return; + } + + setShowLogin(true); + setStatus(undefined); + setPassword(''); + + if (error.message) { + await application.alertService.alert(error.message); + } + + setIsAuthenticating(false); + }; + + const register = async () => { + if (passwordConfirmation !== password) { + application.alertService.alert(STRING_NON_MATCHING_PASSWORDS); + return; + } + setStatus(STRING_GENERATING_REGISTER_KEYS); + setIsAuthenticating(true); + + const response = await application.register( + email, + password, + isEphemeral, + shouldMergeLocal + ); + + const error = response.error; + if (error) { + setStatus(undefined); + setIsAuthenticating(false); + + application.alertService.alert(error.message); + } else { + setIsAuthenticating(false); + setShowRegister(false); + closeAccountMenu(); + } + }; + + const handleAuthFormSubmit = (event: + TargetedEvent | + TargetedMouseEvent | + TargetedKeyboardEvent + ) => { + event.preventDefault(); + + if (!email || !password) { + return; + } + + blurAuthFields(); + + if (showLogin) { + login(); + } else { + register(); + } + }; + + const handleKeyPressKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + handleAuthFormSubmit(event as TargetedKeyboardEvent); + } + }; + + const handlePasswordChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setPassword(value); + }; + + const handleEmailChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setEmail(value); + }; + + const handlePasswordConfirmationChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setPasswordConfirmation(value); + }; + + const handleMergeLocalData = async (event: TargetedEvent) => { + const { checked } = event.target as HTMLInputElement; + + setShouldMergeLocal(checked); + if (!checked) { + const confirmResult = await confirmDialog({ + text: STRING_ACCOUNT_MENU_UNCHECK_MERGE, + confirmButtonStyle: 'danger' + }); + setShouldMergeLocal(!confirmResult); + } + }; + + return ( + <> + {!user && !showLogin && !showRegister && ( +
+
+
Sign in or register to enable sync and end-to-end encryption.
+
+
+ + +
+
+ Standard Notes is free on every platform, and comes + standard with sync and encryption. +
+
+ )} + {(showLogin || showRegister) && ( +
+
+ {showLogin ? 'Sign In' : 'Register'} +
+
+
+ + + {showRegister && + } +
+ +
+ {showAdvanced && ( +
+
+
+ Advanced Options +
+
+ + +
+ {showLogin && ( + + )} +
+
+ )} + {!isAuthenticating && ( +
+ +
+ )} + {showRegister && ( +
+
No Password Reset.
+
+ Because your notes are encrypted using your password, + Standard Notes does not have a password reset option. + You cannot forget your password. +
+
+ )} + {status && ( +
+
+
+
{status}
+
+
+ )} + {!isAuthenticating && ( +
+ + {notesAndTagsCount > 0 && ( + + )} +
+ )} + +
+ )} + ); +}); + +export default Authentication; diff --git a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx new file mode 100644 index 000000000..e7bff8a1a --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx @@ -0,0 +1,180 @@ +import { isDesktopApplication } from '@/utils'; +import { alertDialog } from '@Services/alertService'; +import { + STRING_IMPORT_SUCCESS, + STRING_INVALID_IMPORT_FILE, + STRING_UNSUPPORTED_BACKUP_FILE_VERSION, + StringImportError +} from '@/strings'; +import { BackupFile } from '@standardnotes/snjs'; +import { 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'; + +type Props = { + application: WebApplication; + appState: AppState; +} + +const DataBackup = observer(({ + application, + appState + }: Props) => { + + const fileInputRef = useRef(null); + const [isImportDataLoading, setIsImportDataLoading] = useState(false); + + const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu; + + const downloadDataArchive = () => { + application.getArchiveService().downloadBackup(isBackupEncrypted); + }; + + const readFile = async (file: File): Promise => { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = (e) => { + try { + const data = JSON.parse(e.target!.result as string); + resolve(data); + } catch (e) { + application.alertService.alert(STRING_INVALID_IMPORT_FILE); + } + }; + reader.readAsText(file); + }); + }; + + const performImport = async (data: BackupFile) => { + setIsImportDataLoading(true); + + const result = await application.importData(data); + + setIsImportDataLoading(false); + + if (!result) { + return; + } + + let statusText = STRING_IMPORT_SUCCESS; + if ('error' in result) { + statusText = result.error; + } else if (result.errorCount) { + statusText = StringImportError(result.errorCount); + } + void alertDialog({ + text: statusText + }); + }; + + const importFileSelected = async (event: TargetedEvent) => { + const { files } = (event.target as HTMLInputElement); + + if (!files) { + return; + } + const file = files[0]; + const data = await readFile(file); + if (!data) { + return; + } + + const version = data.version || data.keyParams?.version || data.auth_params?.version; + if (!version) { + await performImport(data); + return; + } + + if ( + application.protocolService.supportedVersions().includes(version) + ) { + await performImport(data); + } else { + setIsImportDataLoading(false); + void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION }); + } + }; + + // Whenever "Import Backup" is either clicked or key-pressed, proceed the import + const handleImportFile = (event: TargetedEvent | KeyboardEvent) => { + if (event instanceof KeyboardEvent) { + const { code } = event; + + // Process only when "Enter" or "Space" keys are pressed + if (code !== 'Enter' && code !== 'Space') { + return; + } + // Don't proceed the event's default action + // (like scrolling in case the "space" key is pressed) + event.preventDefault(); + } + + (fileInputRef.current as HTMLInputElement).click(); + }; + + return ( + <> + {isImportDataLoading ? ( +
+ ) : ( +
+
Data Backups
+
Download a backup of all your data.
+ {isEncryptionEnabled && ( +
+
+ + +
+
+ )} +
+
+ + +
+ {isDesktopApplication() && ( +

+ Backups are automatically created on desktop and can be managed + via the "Backups" top-level menu. +

+ )} +
+
+ )} + + ); +}); + +export default DataBackup; diff --git a/app/assets/javascripts/components/AccountMenu/Encryption.tsx b/app/assets/javascripts/components/AccountMenu/Encryption.tsx new file mode 100644 index 000000000..1a98f2404 --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/Encryption.tsx @@ -0,0 +1,33 @@ +import { AppState } from '@/ui_models/app_state'; +import { observer } from 'mobx-react-lite'; + +type Props = { + appState: AppState; +} + +const Encryption = observer(({ appState }: Props) => { + const { isEncryptionEnabled, encryptionStatusString, notesAndTagsCount } = appState.accountMenu; + + const getEncryptionStatusForNotes = () => { + const length = notesAndTagsCount; + return `${length}/${length} notes and tags encrypted`; + }; + + return ( +
+
+ Encryption +
+ {isEncryptionEnabled && ( +
+ {getEncryptionStatusForNotes()} +
+ )} +

+ {encryptionStatusString} +

+
+ ); +}); + +export default Encryption; diff --git a/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx b/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx new file mode 100644 index 000000000..92784557e --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx @@ -0,0 +1,80 @@ +import { useState } from 'preact/hooks'; +import { storage, StorageKey } from '@Services/localStorage'; +import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting'; +import { alertDialog } from '@Services/alertService'; +import { observer } from 'mobx-react-lite'; +import { AppState } from '@/ui_models/app_state'; + +type Props = { + appState: AppState; +} + +const ErrorReporting = observer(({ appState }: Props) => { + const [isErrorReportingEnabled] = useState(() => storage.get(StorageKey.DisableErrorReporting) === false); + const [errorReportingIdValue] = useState(() => errorReportingId()); + + const toggleErrorReportingEnabled = () => { + if (isErrorReportingEnabled) { + disableErrorReporting(); + } else { + enableErrorReporting(); + } + if (!appState.sync.inProgress) { + window.location.reload(); + } + }; + + const openErrorReportingDialog = () => { + alertDialog({ + title: 'Data sent during automatic error reporting', + text: ` + We use Bugsnag + to automatically report errors that occur while the app is running. See + + this article, paragraph 'Browser' under 'Sending diagnostic data', + + to see what data is included in error reports. +

+ Error reports never include IP addresses and are fully + anonymized. We use error reports to be alerted when something in our + code is causing unexpected errors and crashes in your application + experience. + ` + }); + }; + + return ( +
+
Error Reporting
+
+ Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'} +
+

+ Help us improve Standard Notes by automatically submitting + anonymized error reports. +

+ {errorReportingIdValue && ( + <> +

+ Your random identifier is {errorReportingIdValue} +

+

+ Disabling error reporting will remove that identifier from your + local storage, and a new identifier will be created should you + decide to enable error reporting again in the future. +

+ + )} +
+ +
+ +
+ ); +}); + +export default ErrorReporting; diff --git a/app/assets/javascripts/components/AccountMenu/Footer.tsx b/app/assets/javascripts/components/AccountMenu/Footer.tsx new file mode 100644 index 000000000..50f67f5d0 --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/Footer.tsx @@ -0,0 +1,68 @@ +import { AppState } from '@/ui_models/app_state'; +import { useState } from 'preact/hooks'; +import { WebApplication } from '@/ui_models/application'; +import { observer } from 'mobx-react-lite'; + +type Props = { + application: WebApplication; + appState: AppState; +} + +const Footer = observer(({ + application, + appState, + }: Props) => { + const { + showLogin, + showRegister, + setShowLogin, + setShowRegister, + setSigningOut + } = appState.accountMenu; + + const user = application.getUser(); + + const { showBetaWarning, disableBetaWarning: disableAppStateBetaWarning } = appState; + + const [appVersion] = useState(() => `v${((window as any).electronAppVersion || application.bridge.appVersion)}`); + + const disableBetaWarning = () => { + disableAppStateBetaWarning(); + }; + + const signOut = () => { + setSigningOut(true); + }; + + const hidePasswordForm = () => { + setShowLogin(false); + setShowRegister(false); + }; + + return ( +
+
+
+ {appVersion} + {showBetaWarning && ( + + ( + Hide beta warning + ) + + )} +
+ {(showLogin || showRegister) && ( + Cancel + )} + {!showLogin && !showRegister && ( + + {user ? 'Sign out' : 'Clear session data'} + + )} +
+
+ ); +}); + +export default Footer; diff --git a/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx b/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx new file mode 100644 index 000000000..69d675e1a --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx @@ -0,0 +1,273 @@ +import { + STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE, + STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED, + STRING_NON_MATCHING_PASSCODES, + StringUtils, + Strings +} from '@/strings'; +import { WebApplication } from '@/ui_models/application'; +import { preventRefreshing } from '@/utils'; +import { JSXInternal } from 'preact/src/jsx'; +import TargetedEvent = JSXInternal.TargetedEvent; +import { alertDialog } from '@Services/alertService'; +import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; +import { ApplicationEvent } from '@standardnotes/snjs'; +import TargetedMouseEvent = JSXInternal.TargetedMouseEvent; +import { observer } from 'mobx-react-lite'; +import { AppState } from '@/ui_models/app_state'; + +type Props = { + application: WebApplication; + appState: AppState; +}; + +const PasscodeLock = observer(({ + application, + appState, + }: Props) => { + const keyStorageInfo = StringUtils.keyStorageInfo(application); + const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions(); + + const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu; + + const passcodeInputRef = useRef(); + + const [passcode, setPasscode] = useState(undefined); + const [passcodeConfirmation, setPasscodeConfirmation] = useState(undefined); + const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState(null); + const [isPasscodeFocused, setIsPasscodeFocused] = useState(false); + const [showPasscodeForm, setShowPasscodeForm] = useState(false); + const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession()); + const [hasPasscode, setHasPasscode] = useState(application.hasPasscode()); + + + const handleAddPassCode = () => { + setShowPasscodeForm(true); + setIsPasscodeFocused(true); + }; + + const changePasscodePressed = () => { + handleAddPassCode(); + }; + + const reloadAutoLockInterval = useCallback(async () => { + const interval = await application.getAutolockService().getAutoLockInterval(); + setSelectedAutoLockInterval(interval); + }, [application]); + + const refreshEncryptionStatus = useCallback(() => { + const hasUser = application.hasAccount(); + const hasPasscode = application.hasPasscode(); + + setHasPasscode(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]); + + const selectAutoLockInterval = async (interval: number) => { + if (!(await application.authorizeAutolockIntervalChange())) { + return; + } + await application.getAutolockService().setAutoLockInterval(interval); + reloadAutoLockInterval(); + }; + + const removePasscodePressed = async () => { + await preventRefreshing( + STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, + async () => { + if (await application.removePasscode()) { + await application + .getAutolockService() + .deleteAutolockPreference(); + await reloadAutoLockInterval(); + refreshEncryptionStatus(); + } + } + ); + }; + + const handlePasscodeChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setPasscode(value); + }; + + const handleConfirmPasscodeChange = (event: TargetedEvent) => { + const { value } = event.target as HTMLInputElement; + setPasscodeConfirmation(value); + }; + + const submitPasscodeForm = async (event: TargetedEvent | TargetedMouseEvent) => { + event.preventDefault(); + + if (!passcode || passcode.length === 0) { + await alertDialog({ + text: Strings.enterPasscode, + }); + } + + if (passcode !== passcodeConfirmation) { + await alertDialog({ + text: STRING_NON_MATCHING_PASSCODES + }); + setIsPasscodeFocused(true); + return; + } + + await preventRefreshing( + STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE, + async () => { + const successful = application.hasPasscode() + ? await application.changePasscode(passcode as string) + : await application.addPasscode(passcode as string); + + if (!successful) { + setIsPasscodeFocused(true); + } + } + ); + + setPasscode(undefined); + setPasscodeConfirmation(undefined); + setShowPasscodeForm(false); + + refreshEncryptionStatus(); + }; + + useEffect(() => { + refreshEncryptionStatus(); + }, [refreshEncryptionStatus]); + + // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial + // value of `selectedAutoLockInterval` + useEffect(() => { + reloadAutoLockInterval(); + }, [reloadAutoLockInterval]); + + useEffect(() => { + if (isPasscodeFocused) { + passcodeInputRef.current.focus(); + setIsPasscodeFocused(false); + } + }, [isPasscodeFocused]); + + // Add the required event observers + useEffect(() => { + const removeKeyStatusChangedObserver = application.addEventObserver( + async () => { + setCanAddPasscode(!application.isEphemeralSession()); + setHasPasscode(application.hasPasscode()); + setShowPasscodeForm(false); + }, + ApplicationEvent.KeyStatusChanged + ); + + return () => { + removeKeyStatusChangedObserver(); + }; + }, [application]); + + return ( +
+
Passcode Lock
+ {!hasPasscode && ( +
+ {canAddPasscode && ( + <> + {!showPasscodeForm && ( +
+ +
+ )} +

+ Add a passcode to lock the application and + encrypt on-device key storage. +

+ {keyStorageInfo && ( +

{keyStorageInfo}

+ )} + + )} + {!canAddPasscode && ( +

+ Adding a passcode is not supported in temporary sessions. Please sign + out, then sign back in with the "Stay signed in" option checked. +

+ )} +
+ )} + {showPasscodeForm && ( +
+
+ + + + + + )} + {hasPasscode && !showPasscodeForm && ( + <> +
Passcode lock is enabled
+
+
Options
+
+
+
+
Autolock
+ {passcodeAutoLockOptions.map(option => { + return ( + selectAutoLockInterval(option.value)}> + {option.label} + + ); + })} +
+
+
The autolock timer begins when the window or tab loses focus.
+ +
+ + )} +
+ ); +}); + +export default PasscodeLock; diff --git a/app/assets/javascripts/components/AccountMenu/Protections.tsx b/app/assets/javascripts/components/AccountMenu/Protections.tsx new file mode 100644 index 000000000..8e7b1f229 --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/Protections.tsx @@ -0,0 +1,100 @@ +import { WebApplication } from '@/ui_models/application'; +import { FunctionalComponent } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; +import { useEffect } from 'preact/hooks'; +import { ApplicationEvent } from '@standardnotes/snjs'; +import { isSameDay } from '@/utils'; + +type Props = { + application: WebApplication; +}; + +const Protections: FunctionalComponent = ({ application }) => { + const enableProtections = () => { + application.clearProtectionSession(); + }; + + const [hasProtections, setHasProtections] = useState(() => application.hasProtectionSources()); + + const getProtectionsDisabledUntil = useCallback((): string | null => { + const protectionExpiry = application.getProtectionSessionExpiryDate(); + const now = new Date(); + if (protectionExpiry > now) { + let f: Intl.DateTimeFormat; + if (isSameDay(protectionExpiry, now)) { + f = new Intl.DateTimeFormat(undefined, { + hour: 'numeric', + minute: 'numeric' + }); + } else { + f = new Intl.DateTimeFormat(undefined, { + weekday: 'long', + day: 'numeric', + month: 'short', + hour: 'numeric', + minute: 'numeric' + }); + } + + return f.format(protectionExpiry); + } + return null; + }, [application]); + + const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil()); + + useEffect(() => { + const removeProtectionSessionExpiryDateChangedObserver = application.addEventObserver( + async () => { + setProtectionsDisabledUntil(getProtectionsDisabledUntil()); + }, + ApplicationEvent.ProtectionSessionExpiryDateChanged + ); + + const removeKeyStatusChangedObserver = application.addEventObserver( + async () => { + setHasProtections(application.hasProtectionSources()); + }, + ApplicationEvent.KeyStatusChanged + ); + + return () => { + removeProtectionSessionExpiryDateChangedObserver(); + removeKeyStatusChangedObserver(); + }; + }, [application, getProtectionsDisabledUntil]); + + if (!hasProtections) { + return null; + } + + return ( +
+
Protections
+ {protectionsDisabledUntil && ( +
+ Protections are disabled until {protectionsDisabledUntil} +
+ )} + {!protectionsDisabledUntil && ( +
+ Protections are enabled +
+ )} +

+ Actions like viewing protected notes, exporting decrypted backups, + or revoking an active session, require additional authentication + like entering your account password or application passcode. +

+ {protectionsDisabledUntil && ( +
+ +
+ )} +
+ ); +}; + +export default Protections; diff --git a/app/assets/javascripts/components/AccountMenu/User.tsx b/app/assets/javascripts/components/AccountMenu/User.tsx new file mode 100644 index 000000000..07e5f58ac --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/User.tsx @@ -0,0 +1,69 @@ +import { observer } from 'mobx-react-lite'; +import { AppState } from '@/ui_models/app_state'; +import { PasswordWizardType } from '@/types'; +import { WebApplication } from '@/ui_models/application'; +import { User } from '@standardnotes/snjs/dist/@types/services/api/responses'; + +type Props = { + appState: AppState; + application: WebApplication; +} + +const User = observer(({ + appState, + application, + }: Props) => { + const { server, closeAccountMenu } = appState.accountMenu; + const user = application.getUser(); + + const openPasswordWizard = () => { + closeAccountMenu(); + application.presentPasswordWizard(PasswordWizardType.ChangePassword); + }; + + const openSessionsModal = () => { + closeAccountMenu(); + appState.openSessionsModal(); + }; + + return ( +
+ {appState.sync.errorMessage && ( +
+
Sync Unreachable
+
+ Hmm...we can't seem to sync your account. + The reason: {appState.sync.errorMessage} +
+ + Need help? + +
+ )} +
+
+
+ {(user as User).email} +
+
+ {server} +
+
+
+ + ); +}); + +export default User; diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx new file mode 100644 index 000000000..cf8c45b2f --- /dev/null +++ b/app/assets/javascripts/components/AccountMenu/index.tsx @@ -0,0 +1,91 @@ +import { observer } from 'mobx-react-lite'; +import { toDirective } from '@/components/utils'; +import { AppState } from '@/ui_models/app_state'; +import { WebApplication } from '@/ui_models/application'; +import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal'; +import Authentication from '@/components/AccountMenu/Authentication'; +import Footer from '@/components/AccountMenu/Footer'; +import User from '@/components/AccountMenu/User'; +import Encryption from '@/components/AccountMenu/Encryption'; +import Protections from '@/components/AccountMenu/Protections'; +import PasscodeLock from '@/components/AccountMenu/PasscodeLock'; +import DataBackup from '@/components/AccountMenu/DataBackup'; +import ErrorReporting from '@/components/AccountMenu/ErrorReporting'; +import { useEffect } from 'preact/hooks'; + +type Props = { + appState: AppState; + application: WebApplication; +}; + +const AccountMenu = observer(({ application, appState }: Props) => { + const { + show: showAccountMenu, + showLogin, + showRegister, + setShowLogin, + setShowRegister, + closeAccountMenu + } = appState.accountMenu; + + const user = application.getUser(); + + useEffect(() => { + // Reset "Login" and "Registration" sections state when hiding account menu, + // so the next time account menu is opened these sections are closed + if (!showAccountMenu) { + setShowLogin(false); + setShowRegister(false); + } + }, [setShowLogin, setShowRegister, showAccountMenu]); + + return ( +
+
+
+
Account
+ Close +
+
+ + {!showLogin && !showRegister && ( +
+ {user && ( + + )} + + + + + +
+ )} +
+ +
+
+
+ ); +}); + +export const AccountMenuDirective = toDirective( + AccountMenu +); diff --git a/app/assets/javascripts/components/ConfirmSignoutModal.tsx b/app/assets/javascripts/components/ConfirmSignoutModal.tsx index 6d1b9ef8f..6a9ae8226 100644 --- a/app/assets/javascripts/components/ConfirmSignoutModal.tsx +++ b/app/assets/javascripts/components/ConfirmSignoutModal.tsx @@ -15,7 +15,7 @@ type Props = { appState: AppState; }; -const ConfirmSignoutContainer = observer((props: Props) => { +export const ConfirmSignoutContainer = observer((props: Props) => { if (!props.appState.accountMenu.signingOut) { return null; } diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx index 721c1cec5..e9c9a8b1e 100644 --- a/app/assets/javascripts/components/Icon.tsx +++ b/app/assets/javascripts/components/Icon.tsx @@ -19,12 +19,13 @@ import HelpIcon from '../../icons/ic-help.svg'; import KeyboardIcon from '../../icons/ic-keyboard.svg'; import ListedIcon from '../../icons/ic-listed.svg'; import SecurityIcon from '../../icons/ic-security.svg'; -import SettingsFilledIcon from '../../icons/ic-settings-filled.svg'; +import SettingsIcon from '../../icons/ic-settings.svg'; import StarIcon from '../../icons/ic-star.svg'; import ThemesIcon from '../../icons/ic-themes.svg'; import UserIcon from '../../icons/ic-user.svg'; import { toDirective } from './utils'; +import { FunctionalComponent } from 'preact'; const ICONS = { 'pencil-off': PencilOffIcon, @@ -47,7 +48,7 @@ const ICONS = { keyboard: KeyboardIcon, listed: ListedIcon, security: SecurityIcon, - 'settings-filled': SettingsFilledIcon, + settings: SettingsIcon, star: StarIcon, themes: ThemesIcon, user: UserIcon, @@ -60,7 +61,7 @@ type Props = { className?: string; }; -export const Icon: React.FC = ({ type, className }) => { +export const Icon: FunctionalComponent = ({ type, className }) => { const IconComponent = ICONS[type]; return ; }; diff --git a/app/assets/javascripts/components/preferences/content.tsx b/app/assets/javascripts/components/preferences/content.tsx new file mode 100644 index 000000000..efdaa7109 --- /dev/null +++ b/app/assets/javascripts/components/preferences/content.tsx @@ -0,0 +1,28 @@ +import { FunctionalComponent } from 'preact'; + +export const Title: FunctionalComponent = ({ children }) => ( +

{children}

+); + +export const Subtitle: FunctionalComponent = ({ children }) => ( +

{children}

+); + +export const Text: FunctionalComponent = ({ children }) => ( +

{children}

+); + +export const Button: FunctionalComponent<{ label: string; link: string }> = ({ + label, + link, +}) => ( + + {label} + +); diff --git a/app/assets/javascripts/components/preferences/help-feedback.tsx b/app/assets/javascripts/components/preferences/help-feedback.tsx new file mode 100644 index 000000000..0f9ead7a9 --- /dev/null +++ b/app/assets/javascripts/components/preferences/help-feedback.tsx @@ -0,0 +1,92 @@ +import { FunctionalComponent } from 'preact'; +import { PreferencesGroup, PreferencesPane, PreferencesSegment } from './pane'; +import { Title, Subtitle, Text, Button } from './content'; + +export const HelpAndFeedback: FunctionalComponent = () => ( + + + + 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? +