feat: add option to force encryption (deltachat#6410)

* fix: only save e2ee setting after successful login

Author: nicodh

_locales/_untranslated_en.json

@@ -53,7 +53,7 @@
   "prevent_dialog_spam_checkbox": {
     "message": "Don't allow the app to open this dialog again"
   },
-  "react_more_emojis" : {
+  "react_more_emojis": {
     "message": "More emojis..."
   },
   "channel_name_changed": {

packages/frontend/scss/login/_login.scss

@@ -152,6 +152,23 @@ div.delta-form-group {
     }
   }
 
+  &.delta-switch {
+    > label {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: auto;
+      font-size: 15px;
+      line-height: normal;
+      cursor: pointer;
+      color: var(--deltaChatPrimaryFgLight);
+      padding-inline-end: 5px;
+      padding-block-end: 4px;
+    }
+  }
+
   &.delta-input {
     input {
       appearance: none;

packages/frontend/src/components/LoginForm.tsx

@@ -12,6 +12,8 @@ import { I18nContext } from '../contexts/I18nContext'
 const log = getLogger('renderer/loginForm')
 
 import type { Credentials } from './Settings/DefaultCredentials'
+import { useSettingsStore } from '../stores/settings'
+import Switch from './Switch'
 
 const Socket = {
   automatic: 'automatic',
@@ -29,19 +31,26 @@ const CertificateChecks = {
 type LoginProps = React.PropsWithChildren<{
   credentials: Credentials
   setCredentials: (credentials: Credentials) => void
+  forceEncryption?: boolean
+  setForceEncryption?: (forceEncryption: boolean) => void
   /** whether editing existing account */
   isEdit?: true
 }>
 
 export default function LoginForm({
   credentials,
   setCredentials,
+  forceEncryption: forceEncryptionProp,
+  setForceEncryption,
   isEdit,
 }: LoginProps) {
   const [uiShowAdvanced, setUiShowAdvanced] = useState<boolean>(false)
   const [providerInfo, setProviderInfo] = useState<
     Type.ProviderInfo | undefined
   >()
+  const settingsStore = useSettingsStore()[0]
+  const forceEncryption =
+    forceEncryptionProp ?? settingsStore?.settings['force_encryption'] === '1'
 
   const handleCredentialsChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -260,7 +269,6 @@ export default function LoginForm({
               <option value={Socket.starttls}>STARTTLS</option>
               <option value={Socket.plain}>{tx('off')}</option>
             </DeltaSelect>
-
             <DeltaSelect
               id='certificateChecks'
               label={tx('login_certificate_checks')}
@@ -275,6 +283,22 @@ export default function LoginForm({
                 {tx('accept_invalid_certificates')}
               </option>
             </DeltaSelect>
+            <div className='delta-form-group delta-switch'>
+              <label>
+                <span>{tx('enforce_e2ee')}</span>
+                {/** be aware that this setting applies to all relays! */}
+                <Switch
+                  checked={forceEncryption}
+                  disabled={settingsStore == null}
+                  onChange={() => {
+                    if (setForceEncryption) {
+                      setForceEncryption(!forceEncryption)
+                      return
+                    }
+                  }}
+                />
+              </label>
+            </div>
           </Collapse>
           <br />
         </div>

packages/frontend/src/components/dialogs/EditAccountAndPasswordDialog.tsx

@@ -16,7 +16,7 @@ import useDialog from '../../hooks/dialog/useDialog'
 import type { DialogProps } from '../../contexts/DialogContext'
 import AlertDialog from './AlertDialog'
 import { T } from '@deltachat/jsonrpc-client'
-import { useSettingsStore } from '../../stores/settings'
+import SettingsStoreInstance, { useSettingsStore } from '../../stores/settings'
 import { getLogger } from '@deltachat-desktop/shared/logger'
 
 type AccountAndPasswordDialogProps = DialogProps & {
@@ -57,11 +57,15 @@ function EditAccountInner({
   onClose: DialogProps['onClose']
   addr?: string
 }) {
+  const settingsStore = useSettingsStore()[0]
   const [initialSettings, setInitialAccountSettings] =
     useState<Credentials>(defaultCredentials())
 
   const [accountSettings, setAccountSettings] =
     useState<Credentials>(defaultCredentials())
+  const [forceEncryption, setForceEncryption] = useState<boolean>(
+    settingsStore?.settings['force_encryption'] === '1'
+  )
 
   const { openDialog } = useDialog()
   const tx = useTranslationFunction()
@@ -105,7 +109,18 @@ function EditAccountInner({
   }, [addr])
 
   const onUpdate = useCallback(async () => {
-    const onSuccess = () => onClose()
+    const onSuccess = async () => {
+      const forceEncryptionValue = forceEncryption ? '1' : '0'
+      if (
+        settingsStore?.settings['force_encryption'] !== forceEncryptionValue
+      ) {
+        await SettingsStoreInstance.effect.setCoreSetting(
+          'force_encryption',
+          forceEncryptionValue
+        )
+      }
+      onClose()
+    }
 
     const update = () => {
       openDialog(ConfigureProgressDialog, {
@@ -121,8 +136,16 @@ function EditAccountInner({
       log.error('changing email addres of transport is not allowed')
       return
     }
+
     update()
-  }, [accountSettings, initialSettings, onClose, openDialog])
+  }, [
+    accountSettings,
+    forceEncryption,
+    initialSettings,
+    onClose,
+    openDialog,
+    settingsStore,
+  ])
 
   const onOk = useCallback(async () => {
     await onUpdate()
@@ -137,6 +160,8 @@ function EditAccountInner({
             <LoginForm
               credentials={accountSettings}
               setCredentials={setAccountSettings}
+              forceEncryption={forceEncryption}
+              setForceEncryption={setForceEncryption}
               isEdit
             />
           )}

packages/frontend/src/components/screens/AccountSetupScreen.tsx

@@ -16,6 +16,7 @@ import useTranslationFunction from '../../hooks/useTranslationFunction'
 import useDialog from '../../hooks/dialog/useDialog'
 import { DialogId } from '../../contexts/DialogContext'
 import AlertDialog from '../dialogs/AlertDialog'
+import SettingsStoreInstance, { useSettingsStore } from '../../stores/settings'
 
 import type ScreenController from '../../ScreenController'
 
@@ -32,25 +33,43 @@ export default function AccountSetupScreen({
 
   const [credentials, setCredentials] =
     useState<Credentials>(defaultCredentials())
-
-  const onClickLogin = useCallback(
-    () =>
-      openDialog(ConfigureProgressDialog, {
-        credentials,
-        onSuccess: () => {
-          selectAccount(accountId)
-        },
-        onFail: (error: string) =>
-          setPromptDialogId(
-            openDialog(AlertDialog, {
-              message: error,
-              cb: () => setPromptDialogId(null),
-            })
-          ),
-      }),
-    [accountId, openDialog, selectAccount, credentials]
+  const settingsStore = useSettingsStore()[0]
+  const [forceEncryption, setForceEncryption] = useState<boolean>(
+    settingsStore?.settings['force_encryption'] === '1'
   )
 
+  const onClickLogin = useCallback(() => {
+    openDialog(ConfigureProgressDialog, {
+      credentials,
+      onSuccess: async () => {
+        const forceEncryptionValue = forceEncryption ? '1' : '0'
+        if (
+          settingsStore?.settings['force_encryption'] !== forceEncryptionValue
+        ) {
+          await SettingsStoreInstance.effect.setCoreSetting(
+            'force_encryption',
+            forceEncryptionValue
+          )
+        }
+        selectAccount(accountId)
+      },
+      onFail: (error: string) =>
+        setPromptDialogId(
+          openDialog(AlertDialog, {
+            message: error,
+            cb: () => setPromptDialogId(null),
+          })
+        ),
+    })
+  }, [
+    accountId,
+    credentials,
+    forceEncryption,
+    openDialog,
+    selectAccount,
+    settingsStore,
+  ])
+
   // TODO(maxph): we're now using <dialog> and can submit result via input
   // and not an explicit keyboard handling
   const onKeyDown = useCallback(
@@ -88,6 +107,8 @@ export default function AccountSetupScreen({
             <LoginForm
               credentials={credentials}
               setCredentials={setCredentials}
+              forceEncryption={forceEncryption}
+              setForceEncryption={setForceEncryption}
             />
           </DialogContent>
         </DialogBody>

packages/frontend/src/stores/settings.ts

@@ -18,6 +18,7 @@ export interface SettingsStoreState {
       bcc_self: string
       delete_device_after: string
       download_limit: string
+      force_encryption: '0' | '1'
       media_quality: string
       is_chatmail: '0' | '1'
       who_can_call_me: WhoCanCallMe
@@ -36,6 +37,7 @@ const settingsKeys = [
   'bcc_self',
   'delete_device_after',
   'download_limit',
+  'force_encryption',
   'media_quality',
   'is_chatmail',
   'who_can_call_me',