feat: add support change protocol from client to server

VaalaCat · Dec 22, 2024 · c2dcab7 · c2dcab7
1 parent e116a5a
commit c2dcab7
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 261 deletions.
diff --git a/biz/master/client/update_tunnel.go b/biz/master/client/update_tunnel.go
@@ -82,7 +82,16 @@ func UpdateFrpcHander(c context.Context, req *pb.UpdateFRPCRequest) (*pb.UpdateF
 	}
 
 	cliCfg.ServerAddr = srv.ServerIP
-	cliCfg.ServerPort = srvConf.BindPort
+	switch cliCfg.Transport.Protocol {
+	case "tcp":
+		cliCfg.ServerPort = srvConf.BindPort
+	case "kcp":
+		cliCfg.ServerPort = srvConf.KCPBindPort
+	case "quic":
+		cliCfg.ServerPort = srvConf.QUICBindPort
+	default:
+		cliCfg.ServerPort = srvConf.BindPort
+	}
 	cliCfg.User = userInfo.GetUserName()
 	cliCfg.Auth = v1.AuthClientConfig{}
 	cliCfg.Metadatas = map[string]string{

diff --git a/www/components/base/form-field.tsx b/www/components/base/form-field.tsx
@@ -0,0 +1,164 @@
+import React from 'react'
+import { Control } from 'react-hook-form'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { useTranslation } from 'react-i18next'
+import StringListInput from './list-input'
+
+export const HostField = ({
+  control,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+}: {
+  control: Control<any>
+  name: string
+  label: string
+  placeholder?: string
+  defaultValue?: string
+}) => {
+  const { t } = useTranslation()
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t(label)}</FormLabel>
+          <FormControl>
+            <Input className='text-sm' placeholder={placeholder || '127.0.0.1'} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+      defaultValue={defaultValue}
+    />
+  )
+}
+export const PortField = ({
+  control,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+}: {
+  control: Control<any>
+  name: string
+  label: string
+  placeholder?: string
+  defaultValue?: number
+}) => {
+  const { t } = useTranslation()
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t(label)}</FormLabel>
+          <FormControl>
+            <Input className='text-sm' placeholder={placeholder || '1234'} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+      defaultValue={defaultValue}
+    />
+  )
+}
+export const SecretStringField = ({
+  control,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+}: {
+  control: Control<any>
+  name: string
+  label: string
+  placeholder?: string
+  defaultValue?: string
+}) => {
+  const { t } = useTranslation()
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t(label)}</FormLabel>
+          <FormControl>
+            <Input className='text-sm' placeholder={placeholder || "secret"} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+      defaultValue={defaultValue}
+    />
+  )
+}
+
+export const StringField = ({
+  control,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+}: {
+  control: Control<any>
+  name: string
+  label: string
+  placeholder?: string
+  defaultValue?: string
+}) => {
+  const { t } = useTranslation()
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t(label)}</FormLabel>
+          <FormControl>
+            <Input className='text-sm' placeholder={placeholder || '127.0.0.1'} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+      defaultValue={defaultValue}
+    />
+  )
+}
+
+export const StringArrayField = ({
+  control,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+}: {
+  control: Control<any>
+  name: string
+  label: string
+  placeholder?: string
+  defaultValue?: string[]
+}) => {
+  const { t } = useTranslation()
+  return (
+    <FormField
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t(label)}</FormLabel>
+          <FormControl>
+            <StringListInput placeholder={placeholder || '/path'} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+      defaultValue={defaultValue}
+    />
+  )
+}
diff --git a/www/components/frpc/frpc_card.tsx b/www/components/frpc/frpc_card.tsx
@@ -15,7 +15,6 @@ import { TypedProxyConfig } from '@/types/proxy'
 import { ClientSelector } from '../base/client-selector'
 import { ServerSelector } from '../base/server-selector'
 import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
 
 export interface FRPCFormCardProps {
   clientID?: string

diff --git a/www/components/frpc/frpc_form.tsx b/www/components/frpc/frpc_form.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { useState } from 'react'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Label } from '@radix-ui/react-label'
-import { HTTPProxyForm, STCPProxyForm, TCPProxyForm, TypedProxyForm, UDPProxyForm } from './proxy_form'
+import { TypedProxyForm } from './proxy_form'
 import { Button } from '@/components/ui/button'
 import { Client, RespCode } from '@/lib/pb/common'
 import { ClientConfig } from '@/types/client'
@@ -13,10 +13,11 @@ import { Input } from '@/components/ui/input'
 import { AccordionHeader } from '@radix-ui/react-accordion'
 import { QueryObserverResult, RefetchOptions, useMutation } from '@tanstack/react-query'
 import { updateFRPC } from '@/api/frp'
-import { Card, CardContent } from '@/components/ui/card'
 import { GetClientResponse } from '@/lib/pb/api_client'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
+import { BaseSelector } from '../base/selector'
+import { ConnectionProtocols } from '@/lib/consts'
 
 export interface FRPCFormProps {
   clientID: string
@@ -28,10 +29,17 @@ export interface FRPCFormProps {
   setClientProxyConfigs: React.Dispatch<React.SetStateAction<TypedProxyConfig[]>>
 }
 
-export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client, refetchClient, clientProxyConfigs, setClientProxyConfigs }) => {
+export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, clientConfig, client, refetchClient, clientProxyConfigs, setClientProxyConfigs }) => {
   const { t } = useTranslation()
   const [proxyType, setProxyType] = useState<ProxyType>('http')
   const [proxyName, setProxyName] = useState<string | undefined>()
+  const [protocol, setProtocol] = useState<string | undefined>("tcp")
+
+  useEffect(() => {
+    if (clientConfig.transport?.protocol) {
+      setProtocol(clientConfig.transport?.protocol)
+    }
+  }, [clientConfig])
 
   const handleTypeChange = (value: string) => {
     setProxyType(value as ProxyType)
@@ -68,6 +76,10 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
         config: Buffer.from(
           JSON.stringify({
             proxies: clientProxyConfigs,
+            transport: {
+              ...clientConfig.transport,
+              protocol,
+            }
           } as ClientConfig),
         ),
         serverId: serverID,
@@ -86,7 +98,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
   }
 
   return (
-    <>
+    <div className='flex flex-col space-y-2'>
       <Popover>
         <PopoverTrigger asChild>
           <Button className="my-2">{t('proxy.form.add')}</Button>
@@ -115,6 +127,11 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
           </Button>
         </PopoverContent>
       </Popover>
+      <Label className="text-sm font-medium">{t('proxy.form.protocol')}</Label>
+      <BaseSelector value={protocol} setValue={setProtocol}
+        dataList={ConnectionProtocols.map((item) => { return { label: item, value: item } })}
+        placeholder={t('proxy.form.protocol')}
+        label={t('proxy.form.protocol')} />
       <Accordion type="single" defaultValue="proxies" collapsible key={clientID + serverID + client}>
         <AccordionItem value="proxies">
           <AccordionTrigger>
@@ -165,6 +182,6 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
       >
         {t('proxy.form.submit')}
       </Button>
-    </>
+    </div>
   )
 }