feat(configure-node): add translations

daeuniverse · Jul 1, 2023 · 08298ed · 08298ed
1 parent f33588e
commit 08298ed
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 54 deletions.
diff --git a/src/components/NodeModal/HTTPForm.tsx b/src/components/NodeModal/HTTPForm.tsx
@@ -1,12 +1,14 @@
 import { NumberInput, Select, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_HTTP_FORM_VALUES, httpSchema } from '~/constants'
 import { GenerateURLParams, generateURL } from '~/utils'
 
 export const HTTPForm = () => {
+  const { t } = useTranslation()
   const { onSubmit, getInputProps, reset } = useForm<z.infer<typeof httpSchema> & { protocol: 'http' | 'https' }>({
     initialValues: {
       protocol: 'http',
@@ -36,23 +38,23 @@ export const HTTPForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         data={[
           { label: 'HTTP', value: 'http' },
           { label: 'HTTPS', value: 'https' },
         ]}
         {...getInputProps('protocol')}
       />
 
-      <TextInput label="Name" {...getInputProps('name')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('name')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('host')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('host')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
-      <TextInput label="Username" {...getInputProps('username')} />
+      <TextInput label={t('configureNode.username')} {...getInputProps('username')} />
 
-      <TextInput label="Password" {...getInputProps('password')} />
+      <TextInput label={t('configureNode.password')} {...getInputProps('password')} />
 
       <FormActions reset={reset} />
     </form>

diff --git a/src/components/NodeModal/SSForm.tsx b/src/components/NodeModal/SSForm.tsx
@@ -1,12 +1,14 @@
 import { NumberInput, Select, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
 import { Base64 } from 'js-base64'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_SS_FORM_VALUES, ssSchema } from '~/constants'
 
 export const SSForm = () => {
+  const { t } = useTranslation()
   const { values, onSubmit, getInputProps, reset } = useForm<z.infer<typeof ssSchema>>({
     initialValues: DEFAULT_SS_FORM_VALUES,
     validate: zodResolver(ssSchema),
@@ -66,13 +68,13 @@ export const SSForm = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Name" {...getInputProps('name')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('name')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('server')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('server')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
-      <TextInput label="Password" withAsterisk {...getInputProps('password')} />
+      <TextInput label={t('configureNode.password')} withAsterisk {...getInputProps('password')} />
 
       <Select
         label="Method"

diff --git a/src/components/NodeModal/SSRForm.tsx b/src/components/NodeModal/SSRForm.tsx
@@ -1,12 +1,14 @@
 import { NumberInput, Select, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
 import { Base64 } from 'js-base64'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_SSR_FORM_VALUES, ssrSchema } from '~/constants'
 
 export const SSRForm = () => {
+  const { t } = useTranslation()
   const { values, onSubmit, getInputProps, reset } = useForm<z.infer<typeof ssrSchema>>({
     initialValues: DEFAULT_SSR_FORM_VALUES,
     validate: zodResolver(ssrSchema),
@@ -25,13 +27,13 @@ export const SSRForm = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Name" {...getInputProps('name')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('name')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('server')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('server')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
-      <TextInput label="Password" withAsterisk {...getInputProps('password')} />
+      <TextInput label={t('configureNode.password')} withAsterisk {...getInputProps('password')} />
 
       <Select
         label="Method"
@@ -65,7 +67,7 @@ export const SSRForm = () => {
       />
 
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         withAsterisk
         data={[
           { label: 'origin', value: 'origin' },
@@ -79,10 +81,12 @@ export const SSRForm = () => {
         {...getInputProps('proto')}
       />
 
-      {values.proto !== 'origin' && <TextInput label="Protocol Param" {...getInputProps('protoParam')} />}
+      {values.proto !== 'origin' && (
+        <TextInput label={t('configureNode.protocolParam')} {...getInputProps('protoParam')} />
+      )}
 
       <Select
-        label="Obfs"
+        label={t('configureNode.obfs')}
         withAsterisk
         data={[
           { label: 'plain', value: 'plain' },
@@ -94,7 +98,7 @@ export const SSRForm = () => {
         {...getInputProps('obfs')}
       />
 
-      {values.obfs !== 'plain' && <TextInput label="Obfs Param" {...getInputProps('obfsParam')} />}
+      {values.obfs !== 'plain' && <TextInput label={t('configureNode.obfsParam')} {...getInputProps('obfsParam')} />}
 
       <FormActions reset={reset} />
     </form>

diff --git a/src/components/NodeModal/Socks5Form.tsx b/src/components/NodeModal/Socks5Form.tsx
@@ -1,12 +1,14 @@
 import { NumberInput, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_SOCKS5_FORM_VALUES, socks5Schema } from '~/constants'
 import { GenerateURLParams, generateURL } from '~/utils'
 
 export const Socks5Form = () => {
+  const { t } = useTranslation()
   const { onSubmit, getInputProps, reset } = useForm<z.infer<typeof socks5Schema>>({
     initialValues: DEFAULT_SOCKS5_FORM_VALUES,
     validate: zodResolver(socks5Schema),
@@ -32,15 +34,15 @@ export const Socks5Form = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Name" {...getInputProps('name')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('name')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('host')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('host')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
-      <TextInput label="Username" {...getInputProps('username')} />
+      <TextInput label={t('configureNode.username')} {...getInputProps('username')} />
 
-      <TextInput label="Password" {...getInputProps('password')} />
+      <TextInput label={t('configureNode.password')} {...getInputProps('password')} />
 
       <FormActions reset={reset} />
     </form>

diff --git a/src/components/NodeModal/TrojanForm.tsx b/src/components/NodeModal/TrojanForm.tsx
@@ -1,12 +1,14 @@
 import { Checkbox, NumberInput, Select, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_TROJAN_FORM_VALUES, trojanSchema } from '~/constants'
 import { generateURL } from '~/utils'
 
 export const TrojanForm = () => {
+  const { t } = useTranslation()
   const { values, onSubmit, getInputProps, reset } = useForm<z.infer<typeof trojanSchema>>({
     initialValues: DEFAULT_TROJAN_FORM_VALUES,
     validate: zodResolver(trojanSchema),
@@ -51,16 +53,16 @@ export const TrojanForm = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Name" {...getInputProps('name')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('name')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('server')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('server')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
-      <TextInput label="Password" withAsterisk {...getInputProps('password')} />
+      <TextInput label={t('configureNode.password')} withAsterisk {...getInputProps('password')} />
 
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         withAsterisk
         data={[
           { label: 'origin', value: 'origin' },
@@ -98,15 +100,15 @@ export const TrojanForm = () => {
       <Select
         label="Obfs"
         data={[
-          { label: 'No obfuscation', value: 'none' },
+          { label: t('configureNode.noObfuscation'), value: 'none' },
           { label: 'websocket', value: 'websocket' },
         ]}
         {...getInputProps('obfs')}
       />
 
-      {values.obfs === 'websocket' && <TextInput label="Websocket Host" {...getInputProps('host')} />}
+      {values.obfs === 'websocket' && <TextInput label={t('configureNode.websocketHost')} {...getInputProps('host')} />}
 
-      {values.obfs === 'websocket' && <TextInput label="Websocket Path" {...getInputProps('path')} />}
+      {values.obfs === 'websocket' && <TextInput label={t('configureNode.websocketPath')} {...getInputProps('path')} />}
 
       <FormActions reset={reset} />
     </form>

diff --git a/src/components/NodeModal/V2rayForm.tsx b/src/components/NodeModal/V2rayForm.tsx
@@ -1,13 +1,15 @@
 import { Checkbox, NumberInput, Select, TextInput } from '@mantine/core'
 import { useForm, zodResolver } from '@mantine/form'
 import { Base64 } from 'js-base64'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
 import { FormActions } from '~/components/FormActions'
 import { DEFAULT_V2RAY_FORM_VALUES, v2raySchema } from '~/constants'
 import { generateURL } from '~/utils'
 
 export const V2rayForm = () => {
+  const { t } = useTranslation()
   const { values, onSubmit, getInputProps, reset } = useForm<
     z.infer<typeof v2raySchema> & { protocol: 'vless' | 'vmess' }
   >({
@@ -80,27 +82,27 @@ export const V2rayForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         data={[
           { label: 'VMESS', value: 'vmess' },
           { label: 'VLESS', value: 'vless' },
         ]}
         {...getInputProps('protocol')}
       />
 
-      <TextInput label="Name" {...getInputProps('ps')} />
+      <TextInput label={t('configureNode.name')} {...getInputProps('ps')} />
 
-      <TextInput label="Host" withAsterisk {...getInputProps('add')} />
+      <TextInput label={t('configureNode.host')} withAsterisk {...getInputProps('add')} />
 
-      <NumberInput label="Port" withAsterisk min={0} max={65535} {...getInputProps('port')} />
+      <NumberInput label={t('configureNode.port')} withAsterisk min={0} max={65535} {...getInputProps('port')} />
 
       <TextInput label="ID" withAsterisk {...getInputProps('id')} />
 
       {values.protocol === 'vmess' && <NumberInput label="AlterID" min={0} max={65535} {...getInputProps('aid')} />}
 
       {values.protocol === 'vmess' && (
         <Select
-          label="Security"
+          label={t('configureNode.security')}
           data={[
             { label: 'auto', value: 'auto' },
             { label: 'aes-128-gcm', value: 'aes-128-gcm' },
@@ -142,7 +144,7 @@ export const V2rayForm = () => {
       )}
 
       <Select
-        label="Network"
+        label={t('configureNode.network')}
         withAsterisk
         data={[
           { label: 'TCP', value: 'tcp' },
@@ -156,25 +158,25 @@ export const V2rayForm = () => {
 
       {values.net === 'tcp' && (
         <Select
-          label="Type"
+          label={t('configureNode.type')}
           data={[
-            { label: 'No obfuscation', value: 'none' },
-            { label: 'Obfuscated as Video Calls (SRTP)', value: 'srtp' },
+            { label: t('configureNode.noObfuscation'), value: 'none' },
+            { label: t('configureNode.httpObfuscation'), value: 'srtp' },
           ]}
           {...getInputProps('type')}
         />
       )}
 
       {values.net === 'kcp' && (
         <Select
-          label="Type"
+          label={t('configureNode.type')}
           data={[
-            { label: 'No obfuscation', value: 'none' },
-            { label: 'Obfuscated as Video Calls (SRTP)', value: 'srtp' },
-            { label: 'Obfuscated as Bittorrent (uTP)', value: 'utp' },
-            { label: 'Obfuscated as Wechat Video Calls', value: 'wechat-video' },
-            { label: 'Obfuscated as DTLS1.2 Packets (forcibly TLS on)', value: 'dtls' },
-            { label: 'Obfuscated as WireGuard Packets', value: 'wireguard' },
+            { label: t('configureNode.noObfuscation'), value: 'none' },
+            { label: t('configureNode.srtpObfuscation'), value: 'srtp' },
+            { label: t('configureNode.utpObfuscation'), value: 'utp' },
+            { label: t('configureNode.wechatVideoObfuscation'), value: 'wechat-video' },
+            { label: t('configureNode.dtlsObfuscation'), value: 'dtls' },
+            { label: t('configureNode.wireguardObfuscation'), value: 'wireguard' },
           ]}
           {...getInputProps('type')}
         />
@@ -183,13 +185,17 @@ export const V2rayForm = () => {
       {(values.net === 'ws' ||
         values.net === 'h2' ||
         values.tls === 'tls' ||
-        (values.net === 'tcp' && values.type === 'http')) && <TextInput label="Host" {...getInputProps('host')} />}
+        (values.net === 'tcp' && values.type === 'http')) && (
+        <TextInput label={t('configureNode.host')} {...getInputProps('host')} />
+      )}
 
       {values.tls === 'tls' && <TextInput label="Alpn" {...getInputProps('alpn')} />}
 
       {values.net === 'ws' ||
         values.net === 'h2' ||
-        (values.net === 'tcp' && values.type === 'http' && <TextInput label="Path" {...getInputProps('path')} />)}
+        (values.net === 'tcp' && values.type === 'http' && (
+          <TextInput label={t('configureNode.path')} {...getInputProps('path')} />
+        ))}
 
       {values.net === 'kcp' && <TextInput label="Seed" {...getInputProps('path')} />}
 

diff --git a/src/components/NodeModal/index.tsx b/src/components/NodeModal/index.tsx
@@ -1,4 +1,5 @@
 import { MantineProvider, Modal, Stack, Tabs } from '@mantine/core'
+import { useTranslation } from 'react-i18next'
 
 import { HTTPForm } from './HTTPForm'
 import { SSForm } from './SSForm'
@@ -8,14 +9,13 @@ import { TrojanForm } from './TrojanForm'
 import { V2rayForm } from './V2rayForm'
 
 export const NodeModal = ({ opened, onClose }: { opened: boolean; onClose: () => void }) => {
+  const { t } = useTranslation()
+
   return (
-    <Modal opened={opened} onClose={onClose} title="Configure Node" size="md">
+    <Modal opened={opened} onClose={onClose} title={t('configureNode.title')} size="md">
       <MantineProvider
         theme={{
-          components: {
-            TabsPanel: { defaultProps: { pt: 'md' } },
-            Stack: { defaultProps: { spacing: 'sm' } },
-          },
+          components: { TabsPanel: { defaultProps: { pt: 'md' } }, Stack: { defaultProps: { spacing: 'sm' } } },
         }}
         inherit
       >