refs #4794 Add proxy settings

locales/en/translation.json

@@ -173,12 +173,25 @@
   },
   "settings": {
     "title": "Settings",
+    "cancel": "Cancel",
+    "save": "Save",
     "language": "Language",
     "font_size": "Font size",
     "mode": "Color mode",
     "dark_mode": "Dark mode",
     "light_mode": "Light mode",
-    "theme": "Color theme"
+    "theme": "Color theme",
+    "proxy": {
+      "title": "Proxy",
+      "no": "No proxy",
+      "os": "Use system proxy settings",
+      "manual": "Manual proxy configuration",
+      "protocol": "Protocol",
+      "http": "http",
+      "socks": "socks",
+      "host": "Host",
+      "port": "Port"
+    }
   },
   "thirdparty": {
     "title": "Third-party licenses"

main/background.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { app, ipcMain, shell, IpcMainInvokeEvent } from 'electron'
+import { app, ipcMain, shell, IpcMainInvokeEvent, BrowserWindow } from 'electron'
 import serve from 'electron-serve'
 import { createWindow } from './helpers'
 
@@ -11,6 +11,8 @@ if (isProd) {
   app.setPath('userData', `${app.getPath('userData')} (development)`)
 }
 
+let main: BrowserWindow = null
+
 ;(async () => {
   await app.whenReady()
 
@@ -24,6 +26,7 @@ if (isProd) {
       preload: path.join(__dirname, 'preload.js')
     }
   })
+  main = mainWindow
 
   if (isProd) {
     await mainWindow.loadURL('app://./')
@@ -45,3 +48,24 @@ ipcMain.on('message', async (event, arg) => {
 ipcMain.handle('open-browser', (_event: IpcMainInvokeEvent, url: string) => {
   shell.openExternal(url)
 })
+
+ipcMain.handle('set-proxy', (_event: IpcMainInvokeEvent, data: any) => {
+  if (main === null) return
+  const { mode, protocol, host, port } = data
+  switch (mode) {
+    case 'os':
+      console.log('Using system proxy')
+      main.webContents.session.setProxy({ mode: 'system' })
+      break
+    case 'manual':
+      console.log(`Using proxy: ${protocol}=${host}:${port}`)
+      main.webContents.session.setProxy({
+        proxyRules: `${protocol}=${host}:${port}`
+      })
+      break
+    default:
+      console.log('No proxy configuration')
+      main.webContents.session.setProxy({ mode: 'direct' })
+      break
+  }
+})

renderer/components/Settings.tsx

@@ -1,7 +1,7 @@
 import { localeType } from '@/provider/i18n'
-import { Dialog, DialogBody, DialogHeader, Input, Option, Radio, Select, Typography } from '@material-tailwind/react'
+import { Button, Dialog, DialogBody, DialogFooter, DialogHeader, Input, Option, Radio, Select, Typography } from '@material-tailwind/react'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 type Props = {
   opened: boolean
@@ -59,11 +59,18 @@ const themes = [
   }
 ]
 
+type ProxyValue = 'no' | 'os' | 'manual'
+
 export default function Settings(props: Props) {
   const [language, setLanguage] = useState<localeType>('en')
   const [fontSize, setFontSize] = useState<number>(16)
   const [theme, setTheme] = useState<string>('theme-blue')
   const [isDark, setIsDark] = useState(false)
+  const [proxy, setProxy] = useState<ProxyValue>('no')
+  const [proxyProtocol, setProxyProtocol] = useState<string | null>(null)
+  const [proxyHost, setProxyHost] = useState<string | null>(null)
+  const [proxyPort, setProxyPort] = useState<string | null>(null)
+  const { formatMessage } = useIntl()
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -79,6 +86,22 @@ export default function Settings(props: Props) {
       } else {
         setIsDark(false)
       }
+      const proxyMode = localStorage.getItem('proxyMode')
+      if (proxyMode) {
+        setProxy(proxyMode as ProxyValue)
+      }
+      const proxyProtocol = localStorage.getItem('proxyProtocol')
+      if (proxyProtocol) {
+        setProxyProtocol(proxyProtocol)
+      }
+      const proxyHost = localStorage.getItem('proxyHost')
+      if (proxyHost) {
+        setProxyHost(proxyHost)
+      }
+      const proxyPort = localStorage.getItem('proxyPort')
+      if (proxyPort) {
+        setProxyPort(proxyPort)
+      }
     }
   }, [])
 
@@ -118,6 +141,17 @@ export default function Settings(props: Props) {
     props.reloadSettings()
   }
 
+  const save = () => {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('proxyMode', proxy)
+      localStorage.setItem('proxyProtocol', proxyProtocol)
+      localStorage.setItem('proxyHost', proxyHost)
+      localStorage.setItem('proxyPort', proxyPort)
+    }
+    props.reloadSettings()
+    props.close()
+  }
+
   return (
     <Dialog open={props.opened} handler={props.close} size="sm">
       <DialogHeader>
@@ -190,8 +224,86 @@ export default function Settings(props: Props) {
               </Select>
             </div>
           </div>
+          <div>
+            <div className="mb-2">
+              <Typography>
+                <FormattedMessage id="settings.proxy.title" />
+              </Typography>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Radio
+                name="proxy"
+                color="blue"
+                label={<FormattedMessage id="settings.proxy.no" />}
+                defaultChecked={proxy === 'no'}
+                onClick={() => setProxy('no')}
+              />
+              <Radio
+                name="proxy"
+                color="blue"
+                label={<FormattedMessage id="settings.proxy.os" />}
+                defaultChecked={proxy === 'os'}
+                onClick={() => setProxy('os')}
+              />
+              <Radio
+                name="proxy"
+                color="blue"
+                label={
+                  <div>
+                    <FormattedMessage id="settings.proxy.manual" />
+                    <div className="flex gap-2">
+                      <div className="w-1/5">
+                        <Select
+                          label={formatMessage({ id: 'settings.proxy.protocol' })}
+                          containerProps={{
+                            className: '!min-w-2'
+                          }}
+                          value={proxyProtocol}
+                          onChange={val => setProxyProtocol(val)}
+                        >
+                          <Option value="http">
+                            <FormattedMessage id="settings.proxy.http" />
+                          </Option>
+                          <Option value="socks">
+                            <FormattedMessage id="settings.proxy.socks" />
+                          </Option>
+                        </Select>
+                      </div>
+                      <div className="w-3/5">
+                        <Input
+                          defaultValue={proxyHost}
+                          label={formatMessage({ id: 'settings.proxy.host' })}
+                          onChange={e => setProxyHost(e.target.value)}
+                        />
+                      </div>
+                      <div className="w-1/5">
+                        <Input
+                          defaultValue={proxyPort}
+                          label={formatMessage({ id: 'settings.proxy.port' })}
+                          containerProps={{
+                            className: '!min-w-2'
+                          }}
+                          onChange={e => setProxyPort(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                }
+                defaultChecked={proxy === 'manual'}
+                onClick={() => setProxy('manual')}
+              />
+            </div>
+          </div>
         </div>
       </DialogBody>
+      <DialogFooter>
+        <Button variant="text" color="red" onClick={props.close}>
+          <FormattedMessage id="settings.cancel" />
+        </Button>
+        <Button variant="gradient" color="blue" onClick={save}>
+          <FormattedMessage id="settings.save" />
+        </Button>
+      </DialogFooter>
     </Dialog>
   )
 }

renderer/components/layouts/account.tsx

@@ -21,6 +21,7 @@ import {
 import Thirdparty from '../Thirdparty'
 import { useUnreads } from '@/provider/unreads'
 import { useAccounts } from '@/provider/accounts'
+import { invoke } from '@/utils/invoke'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -128,12 +129,16 @@ export default function Layout({ children }: LayoutProps) {
         setTheme(t)
       }
       const dark = localStorage.getItem('color-mode')
-      console.log(dark)
       if (dark && dark === 'dark') {
         setIsDark(true)
       } else {
         setIsDark(false)
       }
+      const proxyMode = localStorage.getItem('proxyMode')
+      const proxyProtocol = localStorage.getItem('proxyProtocol')
+      const proxyHost = localStorage.getItem('proxyHost')
+      const proxyPort = localStorage.getItem('proxyPort')
+      invoke('set-proxy', { mode: proxyMode, protocol: proxyProtocol, host: proxyHost, port: proxyPort })
     }
   }
 

renderer/utils/invoke.tsx

@@ -7,6 +7,9 @@ export function invoke(event: string, data: any) {
     case 'open-browser':
       window.open(data, '_blank').focus()
       return
+    case 'set-proxy':
+      console.warn('Can not use proxy in this environment')
+      return
     default:
       console.error(`Unknown event: ${event}`)
       return