feat: upload certificate path

src/components/Settings/UpstreamProxySettings.tsx

@@ -1,4 +1,4 @@
-import { FieldGroup } from '@/components/Form'
+import { FieldGroup, FileUploadInput } from '@/components/Form'
 import { AppSettings } from '@/types/settings'
 import { TextField, Flex, Checkbox, Text } from '@radix-ui/themes'
 import { Controller, useFormContext } from 'react-hook-form'
@@ -9,10 +9,20 @@ export function UpstreamProxySettings() {
     control,
     register,
     formState: { errors },
+    setValue,
+    clearErrors,
   } = useFormContext<AppSettings>()
 
   const { proxy } = watch()
 
+  const handleSelectFile = async () => {
+    const result = await window.studio.settings.selectUpstreamCertificate()
+    const { canceled, filePaths } = result
+    if (canceled || !filePaths.length) return
+    setValue('proxy.certificatePath', filePaths[0], { shouldDirty: true })
+    clearErrors('proxy.certificatePath')
+  }
+
   return (
     <>
       <FieldGroup
@@ -76,6 +86,14 @@ export function UpstreamProxySettings() {
           </FieldGroup>
         </>
       )}
+
+      <FileUploadInput
+        name="proxy.certificatePath"
+        label="Certificate path (optional)"
+        onSelectFile={handleSelectFile}
+        buttonText="Select file"
+        hint="The location of the certificate file (PEM format) used to establish a trusted connection with the upstream server"
+      />
     </>
   )
 }

src/main.ts

@@ -46,7 +46,12 @@ import find from 'find-process'
 import { initializeLogger, openLogFolder } from './logger'
 import log from 'electron-log/main'
 import { AppSettings } from './types/settings'
-import { getSettings, saveSettings, selectBrowserExecutable } from './settings'
+import {
+  getSettings,
+  saveSettings,
+  selectBrowserExecutable,
+  selectUpstreamCertificate,
+} from './settings'
 import { ProxyStatus } from './types'
 
 // handle auto updates
@@ -549,6 +554,10 @@ ipcMain.handle('settings:select-browser-executable', async () => {
   return selectBrowserExecutable()
 })
 
+ipcMain.handle('settings:select-upstream-certificate', async () => {
+  return selectUpstreamCertificate()
+})
+
 ipcMain.handle('proxy:status:get', async () => {
   console.info('proxy:status:get event received')
   return proxyStatus

src/preload.ts

@@ -164,6 +164,9 @@ const settings = {
   selectBrowserExecutable: (): Promise<Electron.OpenDialogReturnValue> => {
     return ipcRenderer.invoke('settings:select-browser-executable')
   },
+  selectUpstreamCertificate: (): Promise<Electron.OpenDialogReturnValue> => {
+    return ipcRenderer.invoke('settings:select-upstream-certificate')
+  },
 }
 
 const studio = {

src/schemas/appSettings.ts

@@ -16,6 +16,7 @@ export const UpstreamProxySettingsSchema = RegularProxySettingsSchema.extend({
   requiresAuth: z.boolean(),
   username: z.string().optional(),
   password: z.string().optional(),
+  certificatePath: z.string().optional(),
 })
 
 export const ProxySettingsSchema = z

src/settings.ts

@@ -91,3 +91,11 @@ export async function selectBrowserExecutable() {
     filters: [{ name: 'Executables', extensions }],
   })
 }
+
+export async function selectUpstreamCertificate() {
+  return dialog.showOpenDialog({
+    title: 'Select certificate',
+    properties: ['openFile'],
+    filters: [{ name: 'PEM certificate', extensions: ['pem'] }],
+  })
+}