feat: add multitransport

_locales/_untranslated_en.json

@@ -79,5 +79,29 @@
   },
   "accounts_list_item_menu_label": {
     "message": "Actions with Profile"
+  },
+  "transports": {
+    "message": "Transports"
+  },
+  "transport_settings": {
+    "message": "Transport Settings"
+  },
+  "add_transport": {
+    "message": "Add Transport"
+  },
+  "edit_transport": {
+    "message": "Edit Transport"
+  },
+  "remove_transport": {
+    "message": "Remove Transport"
+  },
+  "confirm_add_transport": {
+    "message": "Are you sure you want to add this transport?"
+  },
+  "confirm_remove_transport": {
+    "message": "Are you sure you want to remove this transport? %1$s"
+  },
+  "invalid_transport_qr": {
+    "message": "The scanned QR code does not contain a valid transport"
   }
 }

packages/frontend/scss/_icons.scss

@@ -61,6 +61,12 @@ i.material-icon-trash {
   transform: translate(0px, -0.07em);
 }
 
+i.material-icon-edit {
+  mask-image: url(./images/icons/edit.svg);
+  -webkit-mask-image: url(./images/icons/edit.svg);
+  transform: translate(0px, -0.07em);
+}
+
 i.material-icon-copy {
   mask-image: url(./images/icons/copy.svg);
   -webkit-mask-image: url(./images/icons/copy.svg);

packages/frontend/src/components/Settings/Advanced.tsx

@@ -16,6 +16,7 @@ import DesktopSettingsSwitch from './DesktopSettingsSwitch'
 import { AutostartState } from '@deltachat-desktop/shared/shared-types'
 import ProxyConfiguration from '../dialogs/ProxyConfiguration'
 import { selectedAccountId } from '../../ScreenController'
+import TransportsDialog from '../dialogs/Transports'
 
 type Props = {
   settingsStore: SettingsStoreState
@@ -31,6 +32,15 @@ export default function Advanced({ settingsStore }: Props) {
     })
   }
 
+  const openTransportSettings = () => {
+    openDialog(TransportsDialog, {
+      accountId: selectedAccountId(),
+      configured: true,
+    })
+  }
+
+  const addr = settingsStore.settings.addr
+
   return (
     <>
       <SettingsButton onClick={() => runtime.openLogFile()}>
@@ -61,7 +71,7 @@ export default function Advanced({ settingsStore }: Props) {
       <SettingsButton
         onClick={() => {
           openDialog(EditAccountAndPasswordDialog, {
-            settingsStore,
+            addr,
           })
         }}
         dataTestid='open-account-and-password'
@@ -76,6 +86,14 @@ export default function Advanced({ settingsStore }: Props) {
       >
         {tx('proxy_settings')}
       </SettingsButton>
+      <SettingsButton
+        onClick={() => {
+          openTransportSettings()
+        }}
+        dataTestid='open-transport-settings'
+      >
+        {tx('transport_settings')}
+      </SettingsButton>
 
       {settingsStore.settings.is_chatmail === '0' && (
         <ImapFolderHandling settingsStore={settingsStore} />

packages/frontend/src/components/dialogs/ProxyQrScanner.tsx → packages/frontend/src/components/dialogs/BasicScanner.tsx

@@ -4,23 +4,19 @@ import Dialog, { DialogBody, DialogFooter, FooterActions } from '../Dialog'
 import FooterActionButton from '../Dialog/FooterActionButton'
 import { QrReader, QrCodeScanRef } from '../QrReader'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
-import { processQr } from '../../backend/qr'
 import useAlertDialog from '../../hooks/dialog/useAlertDialog'
-import { selectedAccountId } from '../../ScreenController'
 
 import type { DialogProps } from '../../contexts/DialogContext'
 
 /**
- * QR code scanner for proxy configuration
- * Processes scanned QR code and calls onSuccess if it is a valid proxy QR code
- * copied from dialogs/QrCode.tsx
+ * Basic QR code scanner
+ * Just returns the scanned QR code as string
  */
-export default function ProxyQrScanner({
+export default function BasicQrScanner({
   onSuccess,
   onClose,
 }: DialogProps & { onSuccess: (result: string) => void }) {
   const tx = useTranslationFunction()
-  const accountId = selectedAccountId()
   const openAlertDialog = useAlertDialog()
   const qrReaderRef = useRef<QrCodeScanRef | null>(null)
 
@@ -29,25 +25,18 @@ export default function ProxyQrScanner({
       const errorMessage = error?.message || error.toString()
       openAlertDialog({
         message: `${tx('qrscan_failed')} ${errorMessage}`,
-        dataTestid: 'proxy-scan-failed',
+        dataTestid: 'scan-failed',
       })
     },
     [openAlertDialog, tx]
   )
 
   const handleScan = useCallback(
     async (data: string) => {
-      if (data) {
-        const { qr } = await processQr(accountId, data)
-        if (qr.kind === 'proxy') {
-          onSuccess(data)
-          onClose()
-        } else {
-          handleError(new Error(tx('proxy_invalid')))
-        }
-      }
+      onSuccess(data)
+      onClose()
     },
-    [onSuccess, onClose, accountId, handleError, tx]
+    [onSuccess, onClose]
   )
 
   const pasteClipboard = useCallback(async () => {
@@ -57,7 +46,7 @@ export default function ProxyQrScanner({
   }, [])
 
   return (
-    <Dialog onClose={onClose} dataTestid='proxy-qrscan-dialog'>
+    <Dialog onClose={onClose} dataTestid='transport-qrscan-dialog'>
       <DialogBody>
         <QrReader
           onScanSuccess={handleScan}

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

@@ -17,22 +17,29 @@
 import AlertDialog from './AlertDialog'
 import { T } from '@deltachat/jsonrpc-client'
 
+type AccountAndPasswordDialogProps = DialogProps & {
+  addr?: string
+}
+
 /**
  * uses a prefilled LoginForm with existing
  * credentials to edit transport settings
  */
-export default function EditAccountAndPasswordDialog({ onClose }: DialogProps) {
+export default function EditAccountAndPasswordDialog({
+  onClose,
+  addr,
+}: AccountAndPasswordDialogProps) {
   const tx = useTranslationFunction()
 
   return (
     <Dialog canOutsideClickClose={false} onClose={onClose}>
       <DialogHeader title={tx('login_header')} />
-      {EditAccountInner(onClose)}
+      {EditAccountInner(onClose, addr)}
     </Dialog>
   )
 }
 
-function EditAccountInner(onClose: DialogProps['onClose']) {
+function EditAccountInner(onClose: DialogProps['onClose'], addr?: string) {
   const [initialSettings, setInitialAccountSettings] =
     useState<Credentials>(defaultCredentials())
 
@@ -51,7 +58,15 @@
     if (transports.length === 0) {
       throw new Error('no transport found')
     }
-    const accountSettings: T.EnteredLoginParam = transports[0]
+    const configuredAddress =
+      addr || (await BackendRemote.rpc.getConfig(accountId, 'configured_addr'))
+    const accountSettings: T.EnteredLoginParam | undefined = transports.find(
+      t => t.addr === configuredAddress
+    )
+
+    if (!accountSettings) {
+      throw new Error('configured transport not found in transport list')
+    }
 
     setInitialAccountSettings(accountSettings)
     setAccountSettings(accountSettings)
@@ -59,7 +74,7 @@
 
   useEffect(() => {
     loadSettings()
   }, [])
 
   const onUpdate = useCallback(async () => {
     const onSuccess = () => onClose()

packages/frontend/src/components/dialogs/ProxyConfiguration/index.tsx

@@ -19,7 +19,8 @@ import { getLogger } from '@deltachat-desktop/shared/logger'
 import { unknownErrorToString } from '../../helpers/unknownErrorToString'
 
 import ProxyItemRow from './ProxyItemRow'
-import ProxyQrScanner from '../ProxyQrScanner'
+import { processQr } from '../../../backend/qr'
+import BasicQrScanner from '../BasicScanner'
 
 const log = getLogger('proxy-configuration')
 
@@ -210,12 +211,21 @@ export default function ProxyConfiguration(
   )
 
   const openQrScanner = useCallback(() => {
-    openDialog(ProxyQrScanner, {
-      onSuccess: (result: string) => {
-        addProxy(result)
+    openDialog(BasicQrScanner, {
+      onSuccess: async (result: string) => {
+        if (result) {
+          const { qr } = await processQr(accountId, result)
+          if (qr.kind === 'proxy') {
+            addProxy(result)
+          } else {
+            openAlertDialog({
+              message: tx('proxy_invalid'),
+            })
+          }
+        }
       },
     })
-  }, [openDialog, addProxy])
+  }, [openDialog, accountId, addProxy, openAlertDialog, tx])
 
   const changeActiveProxy = useCallback(
     (proxyUrl: string) => {