Skip to content

Commit

Permalink
fix: field immutable
Browse files Browse the repository at this point in the history
  • Loading branch information
@VaalaCat
VaalaCat committed Dec 9, 2024
1 parent 6269957 commit dd0bd1f
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 153 deletions.
237 changes: 99 additions & 138 deletions www/components/frpc/proxy_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useStore } from '@nanostores/react'
import { YesIcon } from '@/components/ui/icon'
import { useTranslation } from 'react-i18next'
import { useQuery } from '@tanstack/react-query'
Expand Down Expand Up @@ -50,104 +49,16 @@ export interface ProxyFormProps {
setClientProxyConfigs: React.Dispatch<React.SetStateAction<TypedProxyConfig[]>>
}

const IPField = ({
control,
name,
label,
defaultValue,
}: {
control: Control<any>
name: string
label: string
defaultValue?: string
}) => {
const { t } = useTranslation()

return (
<FormField
name={name}
control={control}
render={({ field }) => (
<FormItem>
<FormLabel>{t(label)}</FormLabel>
<FormControl>
<Input placeholder="127.0.0.1" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
defaultValue={defaultValue}
/>
)
}

const PortField = ({
control,
name,
label,
defaultValue,
}: {
control: Control<any>
name: string
label: string
defaultValue?: number
}) => {
const { t } = useTranslation()

return (
<FormField
name={name}
control={control}
render={({ field }) => (
<FormItem>
<FormLabel>{t(label)}</FormLabel>
<FormControl>
<Input placeholder="8080" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
defaultValue={defaultValue}
/>
)
}

const SecretKeyField = ({
control,
name,
label,
defaultValue,
}: {
control: Control<any>
name: string
label: string
defaultValue?: string
}) => {
const { t } = useTranslation()

return (
<FormField
name={name}
control={control}
render={({ field }) => (
<FormItem>
<FormLabel>{t(label)}</FormLabel>
<FormControl>
<Input placeholder="secret key" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
defaultValue={defaultValue}
/>
)
}

export const TCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, defaultProxyConfig, proxyName, clientProxyConfigs, setClientProxyConfigs }) => {
const defaultConfig = defaultProxyConfig as TCPProxyConfig
const [_, setTCPConfig] = useState<TCPProxyConfig | undefined>()
const form = useForm<z.infer<typeof TCPConfigSchema>>({
resolver: zodResolver(TCPConfigSchema),
defaultValues: {
remotePort: defaultConfig?.remotePort,
localIP: defaultConfig?.localIP,
localPort: defaultConfig?.localPort,
}
})

useEffect(() => {
Expand Down Expand Up @@ -204,24 +115,43 @@ export const TCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
/>
</div>
)}
<PortField
control={form.control}
<FormField
name="localPort"
label="proxy.form.local_port"
defaultValue={defaultConfig?.localPort || 1234}
/>
<IPField
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.local_port')}</FormLabel>
<FormControl>
<Input placeholder="1234" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<FormField
name="localIP"
label="proxy.form.local_ip"
defaultValue={defaultConfig?.localIP || '127.0.0.1'}
/>
<PortField
control={form.control}
name="remotePort"
label="proxy.form.remote_port"
defaultValue={defaultConfig?.remotePort || 4321}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.local_ip')}</FormLabel>
<FormControl>
<Input placeholder="127.0.0.1" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="remotePort"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.remote_port')}</FormLabel>
<FormControl>
<Input placeholder="4321" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
{t('proxy.form.save_changes')}
Expand All @@ -236,6 +166,11 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
const [_, setSTCPConfig] = useState<STCPProxyConfig | undefined>()
const form = useForm<z.infer<typeof STCPConfigSchema>>({
resolver: zodResolver(STCPConfigSchema),
defaultValues: {
localPort: defaultConfig?.localPort,
localIP: defaultConfig?.localIP,
secretKey: defaultConfig?.secretKey,
}
})

useEffect(() => {
Expand Down Expand Up @@ -266,29 +201,47 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de

const { t } = useTranslation()

const { data: server } = useQuery({
queryKey: ['getServer', serverID],
queryFn: () => {
return getServer({ serverId: serverID })
},
})

return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<PortField
control={form.control}
<FormField
name="localPort"
label="proxy.form.local_port"
defaultValue={defaultConfig?.localPort || 1234}
/>
<IPField
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.local_port')}</FormLabel>
<FormControl>
<Input placeholder="1234" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<FormField
name="localIP"
label="proxy.form.local_ip"
defaultValue={defaultConfig?.localIP || '127.0.0.1'}
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.local_ip')}</FormLabel>
<FormControl>
<Input placeholder="127.0.0.1" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="secretKey"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t('proxy.form.secret_key')}</FormLabel>
<FormControl>
<Input placeholder="secret" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SecretKeyField control={form.control} name="secretKey" label="proxy.form.secret_key" defaultValue={defaultConfig?.secretKey} />
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
{t('proxy.form.save_changes')}
Expand All @@ -299,9 +252,15 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
}

export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, defaultProxyConfig, proxyName, clientProxyConfigs, setClientProxyConfigs }) => {
const defaultConfig = defaultProxyConfig as UDPProxyConfig
const [_, setUDPConfig] = useState<UDPProxyConfig | undefined>()
const form = useForm<z.infer<typeof UDPConfigSchema>>({
resolver: zodResolver(UDPConfigSchema),
defaultValues: {
localPort: defaultConfig?.localPort,
localIP: defaultConfig?.localIP || '127.0.0.1',
remotePort: defaultConfig?.remotePort || 1234,
}
})

useEffect(() => {
Expand Down Expand Up @@ -342,12 +301,21 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<Label className="text-sm font-medium">{t('proxy.form.access_method')}</Label>
<p className="text-sm border rounded p-2 my-2 font-mono overflow-auto">
{`${server?.server?.ip}:${(defaultProxyConfig as UDPProxyConfig).remotePort} -> ${
defaultProxyConfig?.localIP
}:${defaultProxyConfig?.localPort}`}
</p>
{server?.server?.ip && defaultConfig.remotePort && defaultConfig.localIP && defaultConfig.localPort && (
<div className="flex items-center space-x-2">
<Input
value={`${server?.server?.ip}:${defaultConfig?.remotePort}`}
className="text-sm font-mono"
disabled
/>{' '}
<ArrowRightIcon className="h-4 w-4" />{' '}
<Input
value={`${defaultConfig?.localIP}:${defaultConfig?.localPort}`}
className="text-sm font-mono"
disabled
/>
</div>
)}
<FormField
control={form.control}
name="localPort"
Expand All @@ -360,7 +328,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? 1234 : defaultProxyConfig.localPort}
/>
<FormField
control={form.control}
Expand All @@ -374,7 +341,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? '127.0.0.1' : defaultProxyConfig.localIP}
/>
<FormField
control={form.control}
Expand All @@ -388,7 +354,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? 4321 : (defaultProxyConfig as UDPProxyConfig).remotePort}
/>
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
Expand Down Expand Up @@ -452,9 +417,8 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<Label className="text-sm font-medium">{t('proxy.form.access_method')}</Label>
<p className="text-sm border rounded p-2 my-2 font-mono overflow-auto">
{`http://${(defaultProxyConfig as HTTPProxyConfig).subdomain}.${serverConfig?.subDomainHost}:${
serverConfig?.vhostHTTPPort
} -> ${defaultProxyConfig?.localIP}:${defaultProxyConfig?.localPort}`}
{`http://${(defaultProxyConfig as HTTPProxyConfig).subdomain}.${serverConfig?.subDomainHost}:${serverConfig?.vhostHTTPPort
} -> ${defaultProxyConfig?.localIP}:${defaultProxyConfig?.localPort}`}
</p>
<FormField
control={form.control}
Expand All @@ -468,7 +432,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? 1234 : defaultProxyConfig.localPort}
/>
<FormField
control={form.control}
Expand All @@ -482,7 +445,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? '127.0.0.1' : defaultProxyConfig.localIP}
/>
<FormField
control={form.control}
Expand All @@ -496,7 +458,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
<FormMessage />
</FormItem>
)}
defaultValue={defaultProxyConfig === undefined ? '' : (defaultProxyConfig as HTTPProxyConfig).subdomain}
/>
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
Expand Down
4 changes: 3 additions & 1 deletion www/components/ui/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useF

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { useTranslation } from 'react-i18next'

const Form = FormProvider

Expand Down Expand Up @@ -113,7 +114,8 @@ FormDescription.displayName = 'FormDescription'
const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
const { t } = useTranslation()
const body = error ? t(String(error?.message)) : children

if (!body) {
return null
Expand Down
Loading

0 comments on commit dd0bd1f

Please sign in to comment.