Skip to content

Commit e190072

Browse files
VaalaCatVaalaCat
committed
fix: field immutable
1 parent 6269957 commit e190072

File tree

3 files changed

+61
-55
lines changed

3 files changed

+61
-55
lines changed

‎www/components/frpc/proxy_form.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button'
99
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
1010
import { Input } from '@/components/ui/input'
1111
import { Label } from '@/components/ui/label'
12-
import { useStore } from '@nanostores/react'
1312
import { YesIcon } from '@/components/ui/icon'
1413
import { useTranslation } from 'react-i18next'
1514
import { useQuery } from '@tanstack/react-query'
@@ -54,29 +53,26 @@ const IPField = ({
5453
control,
5554
name,
5655
label,
57-
defaultValue,
5856
}: {
5957
control: Control<any>
6058
name: string
6159
label: string
62-
defaultValue?: string
6360
}) => {
6461
const { t } = useTranslation()
6562

6663
return (
6764
<FormField
6865
name={name}
6966
control={control}
70-
render={({ field }) => (
67+
render={({ field, fieldState }) => (
7168
<FormItem>
7269
<FormLabel>{t(label)}</FormLabel>
7370
<FormControl>
7471
<Input placeholder="127.0.0.1" {...field} />
7572
</FormControl>
76-
<FormMessage />
73+
<FormMessage> {fieldState.error?.message && t(fieldState.error?.message)}</FormMessage>
7774
</FormItem>
7875
)}
79-
defaultValue={defaultValue}
8076
/>
8177
)
8278
}
@@ -85,29 +81,29 @@ const PortField = ({
8581
control,
8682
name,
8783
label,
88-
defaultValue,
8984
}: {
9085
control: Control<any>
9186
name: string
9287
label: string
93-
defaultValue?: number
9488
}) => {
9589
const { t } = useTranslation()
9690

9791
return (
9892
<FormField
9993
name={name}
10094
control={control}
101-
render={({ field }) => (
95+
render={({ field, fieldState }) => {
96+
const k = t(fieldState.error?.message as any)
97+
console.log(k)
98+
return (
10299
<FormItem>
103100
<FormLabel>{t(label)}</FormLabel>
104101
<FormControl>
105102
<Input placeholder="8080" {...field} />
106103
</FormControl>
107104
<FormMessage />
108105
</FormItem>
109-
)}
110-
defaultValue={defaultValue}
106+
)}}
111107
/>
112108
)
113109
}
@@ -116,29 +112,26 @@ const SecretKeyField = ({
116112
control,
117113
name,
118114
label,
119-
defaultValue,
120115
}: {
121116
control: Control<any>
122117
name: string
123118
label: string
124-
defaultValue?: string
125119
}) => {
126120
const { t } = useTranslation()
127121

128122
return (
129123
<FormField
130124
name={name}
131125
control={control}
132-
render={({ field }) => (
126+
render={({ field, fieldState }) => (
133127
<FormItem>
134128
<FormLabel>{t(label)}</FormLabel>
135129
<FormControl>
136130
<Input placeholder="secret key" {...field} />
137131
</FormControl>
138-
<FormMessage />
132+
<FormMessage>{fieldState.error?.message && t(fieldState.error?.message)}</FormMessage>
139133
</FormItem>
140134
)}
141-
defaultValue={defaultValue}
142135
/>
143136
)
144137
}
@@ -148,6 +141,11 @@ export const TCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
148141
const [_, setTCPConfig] = useState<TCPProxyConfig | undefined>()
149142
const form = useForm<z.infer<typeof TCPConfigSchema>>({
150143
resolver: zodResolver(TCPConfigSchema),
144+
defaultValues: {
145+
remotePort: defaultConfig?.remotePort || 4321,
146+
localIP: defaultConfig?.localIP || '127.0.0.1',
147+
localPort: defaultConfig?.localPort || 1234,
148+
}
151149
})
152150

153151
useEffect(() => {
@@ -208,19 +206,16 @@ export const TCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
208206
control={form.control}
209207
name="localPort"
210208
label="proxy.form.local_port"
211-
defaultValue={defaultConfig?.localPort || 1234}
212209
/>
213210
<IPField
214211
control={form.control}
215212
name="localIP"
216213
label="proxy.form.local_ip"
217-
defaultValue={defaultConfig?.localIP || '127.0.0.1'}
218214
/>
219215
<PortField
220216
control={form.control}
221217
name="remotePort"
222218
label="proxy.form.remote_port"
223-
defaultValue={defaultConfig?.remotePort || 4321}
224219
/>
225220
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
226221
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
@@ -236,6 +231,11 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
236231
const [_, setSTCPConfig] = useState<STCPProxyConfig | undefined>()
237232
const form = useForm<z.infer<typeof STCPConfigSchema>>({
238233
resolver: zodResolver(STCPConfigSchema),
234+
defaultValues: {
235+
localPort: defaultConfig?.localPort || 1234,
236+
localIP: defaultConfig?.localIP || '127.0.0.1',
237+
secretKey: defaultConfig?.secretKey,
238+
}
239239
})
240240

241241
useEffect(() => {
@@ -266,12 +266,12 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
266266

267267
const { t } = useTranslation()
268268

269-
const { data: server } = useQuery({
270-
queryKey: ['getServer', serverID],
271-
queryFn: () => {
272-
return getServer({ serverId: serverID })
273-
},
274-
})
269+
// const { data: server } = useQuery({
270+
// queryKey: ['getServer', serverID],
271+
// queryFn: () => {
272+
// return getServer({ serverId: serverID })
273+
// },
274+
// })
275275

276276
return (
277277
<Form {...form}>
@@ -280,15 +280,17 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
280280
control={form.control}
281281
name="localPort"
282282
label="proxy.form.local_port"
283-
defaultValue={defaultConfig?.localPort || 1234}
284283
/>
285284
<IPField
286285
control={form.control}
287286
name="localIP"
288287
label="proxy.form.local_ip"
289-
defaultValue={defaultConfig?.localIP || '127.0.0.1'}
290288
/>
291-
<SecretKeyField control={form.control} name="secretKey" label="proxy.form.secret_key" defaultValue={defaultConfig?.secretKey} />
289+
<SecretKeyField
290+
control={form.control}
291+
name="secretKey"
292+
label="proxy.form.secret_key"
293+
/>
292294
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
293295
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
294296
{t('proxy.form.save_changes')}
@@ -299,9 +301,15 @@ export const STCPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
299301
}
300302

301303
export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, defaultProxyConfig, proxyName, clientProxyConfigs, setClientProxyConfigs }) => {
304+
const defaultConfig = defaultProxyConfig as UDPProxyConfig
302305
const [_, setUDPConfig] = useState<UDPProxyConfig | undefined>()
303306
const form = useForm<z.infer<typeof UDPConfigSchema>>({
304307
resolver: zodResolver(UDPConfigSchema),
308+
defaultValues: {
309+
localPort: defaultConfig?.localPort || 1234,
310+
localIP: defaultConfig?.localIP || '127.0.0.1',
311+
remotePort: defaultConfig?.remotePort || 1234,
312+
}
305313
})
306314

307315
useEffect(() => {
@@ -344,9 +352,8 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
344352
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
345353
<Label className="text-sm font-medium">{t('proxy.form.access_method')}</Label>
346354
<p className="text-sm border rounded p-2 my-2 font-mono overflow-auto">
347-
{`${server?.server?.ip}:${(defaultProxyConfig as UDPProxyConfig).remotePort} -> ${
348-
defaultProxyConfig?.localIP
349-
}:${defaultProxyConfig?.localPort}`}
355+
{`${server?.server?.ip}:${(defaultProxyConfig as UDPProxyConfig).remotePort} -> ${defaultProxyConfig?.localIP
356+
}:${defaultProxyConfig?.localPort}`}
350357
</p>
351358
<FormField
352359
control={form.control}
@@ -360,7 +367,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
360367
<FormMessage />
361368
</FormItem>
362369
)}
363-
defaultValue={defaultProxyConfig === undefined ? 1234 : defaultProxyConfig.localPort}
364370
/>
365371
<FormField
366372
control={form.control}
@@ -374,7 +380,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
374380
<FormMessage />
375381
</FormItem>
376382
)}
377-
defaultValue={defaultProxyConfig === undefined ? '127.0.0.1' : defaultProxyConfig.localIP}
378383
/>
379384
<FormField
380385
control={form.control}
@@ -388,7 +393,6 @@ export const UDPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, def
388393
<FormMessage />
389394
</FormItem>
390395
)}
391-
defaultValue={defaultProxyConfig === undefined ? 4321 : (defaultProxyConfig as UDPProxyConfig).remotePort}
392396
/>
393397
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
394398
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>
@@ -452,9 +456,8 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
452456
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
453457
<Label className="text-sm font-medium">{t('proxy.form.access_method')}</Label>
454458
<p className="text-sm border rounded p-2 my-2 font-mono overflow-auto">
455-
{`http://${(defaultProxyConfig as HTTPProxyConfig).subdomain}.${serverConfig?.subDomainHost}:${
456-
serverConfig?.vhostHTTPPort
457-
} -> ${defaultProxyConfig?.localIP}:${defaultProxyConfig?.localPort}`}
459+
{`http://${(defaultProxyConfig as HTTPProxyConfig).subdomain}.${serverConfig?.subDomainHost}:${serverConfig?.vhostHTTPPort
460+
} -> ${defaultProxyConfig?.localIP}:${defaultProxyConfig?.localPort}`}
458461
</p>
459462
<FormField
460463
control={form.control}
@@ -468,7 +471,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
468471
<FormMessage />
469472
</FormItem>
470473
)}
471-
defaultValue={defaultProxyConfig === undefined ? 1234 : defaultProxyConfig.localPort}
472474
/>
473475
<FormField
474476
control={form.control}
@@ -482,7 +484,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
482484
<FormMessage />
483485
</FormItem>
484486
)}
485-
defaultValue={defaultProxyConfig === undefined ? '127.0.0.1' : defaultProxyConfig.localIP}
486487
/>
487488
<FormField
488489
control={form.control}
@@ -496,7 +497,6 @@ export const HTTPProxyForm: React.FC<ProxyFormProps> = ({ serverID, clientID, de
496497
<FormMessage />
497498
</FormItem>
498499
)}
499-
defaultValue={defaultProxyConfig === undefined ? '' : (defaultProxyConfig as HTTPProxyConfig).subdomain}
500500
/>
501501
<Button type="submit" disabled={isSaveDisabled} variant={'outline'}>
502502
<YesIcon className={`mr-2 h-4 w-4 ${isSaveDisabled ? '' : 'hidden'}`}></YesIcon>

‎www/components/ui/form.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useF
55

66
import { cn } from '@/lib/utils'
77
import { Label } from '@/components/ui/label'
8+
import { useTranslation } from 'react-i18next'
89

910
const Form = FormProvider
1011

@@ -113,7 +114,8 @@ FormDescription.displayName = 'FormDescription'
113114
const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
114115
({ className, children, ...props }, ref) => {
115116
const { error, formMessageId } = useFormField()
116-
const body = error ? String(error?.message) : children
117+
const { t } = useTranslation()
118+
const body = error ? t(String(error?.message)) : children
117119

118120
if (!body) {
119121
return null

‎www/lib/consts.ts‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import * as z from 'zod'
22
import { Client, Server } from './pb/common'
33
import { GetPlatformInfoResponse } from './pb/api_user'
4-
import i18next from 'i18next';
54

65
export const API_PATH = '/api/v1'
76
export const SET_TOKEN_HEADER = 'x-set-authorization'
87
export const X_CLIENT_REQUEST_ID = 'x-client-request-id'
98
export const LOCAL_STORAGE_TOKEN_KEY = 'token'
109
export const ZodPortSchema = z.coerce
11-
.number()
12-
.min(1, { message: i18next.t('validation.portRange.min') })
13-
.max(65535, { message: i18next.t('validation.portRange.max') })
14-
export const ZodIPSchema = z.string().regex(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, { message: i18next.t('validation.ipAddress') })
15-
export const ZodStringSchema = z.string().min(1, { message: i18next.t('validation.required') })
16-
export const ZodEmailSchema = z.string().min(1, { message: i18next.t('validation.required') }).email({ message: i18next.t('auth.email.invalid') })
10+
.number({required_error: 'validation.required'})
11+
.min(1, { message: 'validation.portRange.min' })
12+
.max(65535, { message: 'validation.portRange.max' })
13+
14+
export const ZodIPSchema = z.string({required_error: 'validation.required'})
15+
.regex(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, { message: 'validation.ipAddress' })
16+
export const ZodStringSchema = z.string({required_error: 'validation.required'})
17+
.min(1, { message: 'validation.required' })
18+
export const ZodEmailSchema = z.string({required_error: 'validation.required'})
19+
.min(1, { message: 'validation.required' })
20+
.email({ message: 'auth.email.invalid' })
1721

1822
// .refine((e) => e === "abcd@fg.com", "This email is not in our database")
1923

@@ -32,13 +36,13 @@ export const WindowsInstallCommand = <T extends Client | Server>(
3236
item: T,
3337
info: GetPlatformInfoResponse,
3438
) => {
35-
return `[Net.ServicePointManager]::SecurityProtocol = `+
36-
`[Net.SecurityProtocolType]::Ssl3 -bor `+
37-
`[Net.SecurityProtocolType]::Tls -bor ` +
38-
`[Net.SecurityProtocolType]::Tls11 -bor ` +
39-
`[Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;`+
40-
`Invoke-WebRequest https://raw.githubusercontent.com/VaalaCat/frp-panel/main/install.ps1 `+
41-
`-OutFile C:\install.ps1;powershell.exe C:\install.ps1 ${ExecCommandStr(type, item, info, ' ')}`
39+
return `[Net.ServicePointManager]::SecurityProtocol = ` +
40+
`[Net.SecurityProtocolType]::Ssl3 -bor ` +
41+
`[Net.SecurityProtocolType]::Tls -bor ` +
42+
`[Net.SecurityProtocolType]::Tls11 -bor ` +
43+
`[Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;` +
44+
`Invoke-WebRequest https://raw.githubusercontent.com/VaalaCat/frp-panel/main/install.ps1 ` +
45+
`-OutFile C:\install.ps1;powershell.exe C:\install.ps1 ${ExecCommandStr(type, item, info, ' ')}`
4246
}
4347

4448
export const LinuxInstallCommand = <T extends Client | Server>(

0 commit comments

Comments
 (0)