diff --git a/packages/desktop-client/src/components/settings/Encryption.js b/packages/desktop-client/src/components/settings/Encryption.js index 5d44764d3c487f655a18957974a83d142a151e70..5b3176aeaaa80ed2e12c308ce47d7532cb5ccc4c 100644 --- a/packages/desktop-client/src/components/settings/Encryption.js +++ b/packages/desktop-client/src/components/settings/Encryption.js @@ -9,6 +9,9 @@ import { Setting } from './UI'; export default function EncryptionSettings({ prefs, pushModal }) { const serverURL = useServerURL(); + const missingCryptoAPI = !( + window.crypto && Object.hasOwnProperty.call(crypto, 'subtle') + ); function onChangeKey() { pushModal('create-encryption-key', { recreate: true }); @@ -34,6 +37,22 @@ export default function EncryptionSettings({ prefs, pushModal }) { </a> </Text> </Setting> + ) : missingCryptoAPI ? ( + <Setting primaryAction={<Button disabled>Enable encryption…</Button>}> + <Text> + <strong>End-to-end encryption</strong> is not available when making an + unencrypted connection to a remote server. You’ll need to enable HTTPS + on your server to use end-to-end encryption. This problem may also occur + if your browser is too old to work with Actual.{' '} + <a + href="https://actualbudget.github.io/docs/Installing/HTTPS" + target="_blank" + rel="noopener noreferrer" + > + Learn more… + </a> + </Text> + </Setting> ) : serverURL ? ( <Setting primaryAction={