From 08298ed0087ff3387fbb9a9768836795e6570f02 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 1 Jul 2023 12:47:08 +0800
Subject: [PATCH] feat(configure-node): add translations

---
 src/components/NodeModal/HTTPForm.tsx   | 14 +++++----
 src/components/NodeModal/SSForm.tsx     | 10 +++---
 src/components/NodeModal/SSRForm.tsx    | 20 +++++++-----
 src/components/NodeModal/Socks5Form.tsx | 12 ++++---
 src/components/NodeModal/TrojanForm.tsx | 18 ++++++-----
 src/components/NodeModal/V2rayForm.tsx  | 42 ++++++++++++++-----------
 src/components/NodeModal/index.tsx      | 10 +++---
 src/i18n/locales/en.json                | 31 ++++++++++++++++++
 src/i18n/locales/zh-Hans.json           | 31 ++++++++++++++++++
 9 files changed, 134 insertions(+), 54 deletions(-)

diff --git a/src/components/NodeModal/HTTPForm.tsx b/src/components/NodeModal/HTTPForm.tsx
index 31e6118d..05653bab 100644
--- a/src/components/NodeModal/HTTPForm.tsx
+++ b/src/components/NodeModal/HTTPForm.tsx
@@ -1,5 +1,6 @@
 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'
@@ -7,6 +8,7 @@ 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,7 +38,7 @@ export const HTTPForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         data={[
           { label: 'HTTP', value: 'http' },
           { label: 'HTTPS', value: 'https' },
@@ -44,15 +46,15 @@ export const HTTPForm = () => {
         {...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
index c7d5d3c6..94b456a1 100644
--- 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
index 5387c248..082d5ebf 100644
--- 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
index edbf1e94..d8a85dd7 100644
--- a/src/components/NodeModal/Socks5Form.tsx
+++ b/src/components/NodeModal/Socks5Form.tsx
@@ -1,5 +1,6 @@
 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'
@@ -7,6 +8,7 @@ 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
index 5b0441b7..bc6a06b3 100644
--- a/src/components/NodeModal/TrojanForm.tsx
+++ b/src/components/NodeModal/TrojanForm.tsx
@@ -1,5 +1,6 @@
 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'
@@ -7,6 +8,7 @@ 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
index d5406f36..528fd419 100644
--- a/src/components/NodeModal/V2rayForm.tsx
+++ b/src/components/NodeModal/V2rayForm.tsx
@@ -1,6 +1,7 @@
 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'
@@ -8,6 +9,7 @@ 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,7 +82,7 @@ export const V2rayForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <Select
-        label="Protocol"
+        label={t('configureNode.protocol')}
         data={[
           { label: 'VMESS', value: 'vmess' },
           { label: 'VLESS', value: 'vless' },
@@ -88,11 +90,11 @@ export const V2rayForm = () => {
         {...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')} />
 
@@ -100,7 +102,7 @@ export const V2rayForm = () => {
 
       {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,10 +158,10 @@ 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')}
         />
@@ -167,14 +169,14 @@ export const V2rayForm = () => {
 
       {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
index 34f3717f..b62341f1 100644
--- 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
       >
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ef5bd26d..1bfb2139 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -39,6 +39,37 @@
   "checkTolerance": "Check Tolerance",
   "collapse": "collapse",
   "config": "Config",
+  "configureNode": {
+    "dtlsObfuscation": "Obfuscated as DTLS1.2 Packets",
+    "forceTLS": "forcibly TLS on",
+    "host": "Host",
+    "hostObfuscation": "Host",
+    "httpObfuscation": "Obfuscated as HTTP",
+    "name": "Name",
+    "network": "Network",
+    "noObfuscation": "No obfuscation",
+    "obfs": "Obfuscation",
+    "obfsParam": "Obfs Param",
+    "origin": "origin",
+    "password": "Password",
+    "path": "Path",
+    "pathObfuscation": "Path",
+    "port": "Port",
+    "protocol": "Protocol",
+    "protocolParam": "Protocol Param",
+    "security": "Security",
+    "seedObfuscation": "Seed",
+    "servername": "Servername",
+    "srtpObfuscation": "Obfuscated as Video Calls (SRTP)",
+    "title": "Configure Node",
+    "type": "Type",
+    "username": "Username",
+    "utpObfuscation": "Obfuscated as Bittorrent (uTP)",
+    "websocketHost": "WebSocket Host",
+    "websocketPath": "WebSocket Path",
+    "wechatVideoObfuscation": "Obfuscated as Wechat Video Calls",
+    "wireguardObfuscation": "Obfuscated as WireGuard Packets"
+  },
   "confirmModal": {
     "cancel": "No, It's a mistake",
     "confirm": "Yes, I'm sure",
diff --git a/src/i18n/locales/zh-Hans.json b/src/i18n/locales/zh-Hans.json
index 0f57f150..23a57852 100644
--- a/src/i18n/locales/zh-Hans.json
+++ b/src/i18n/locales/zh-Hans.json
@@ -39,6 +39,37 @@
   "checkTolerance": "检测公差",
   "collapse": "折叠",
   "config": "配置",
+  "configureNode": {
+    "dtlsObfuscation": "伪装为 DTLS1.2 数据包",
+    "forceTLS": "强制开启 TLS",
+    "host": "主机地址",
+    "hostObfuscation": "域名 (host)",
+    "httpObfuscation": "伪装为 HTTP",
+    "name": "名字",
+    "network": "网络",
+    "noObfuscation": "不伪装",
+    "obfs": "混淆",
+    "obfsParam": "混淆参数",
+    "origin": "原版",
+    "password": "密码",
+    "path": "路径",
+    "pathObfuscation": "路径 (path)",
+    "port": "端口号",
+    "protocol": "协议",
+    "protocolParam": "协议参数",
+    "security": "安全",
+    "seedObfuscation": "混淆种子",
+    "servername": "节点名称",
+    "srtpObfuscation": "伪装视频通话 (SRTP)",
+    "title": "配置节点",
+    "type": "类型",
+    "username": "用户名",
+    "utpObfuscation": "伪装为 BT 下载 (uTP)",
+    "websocketHost": "WebSocket 地址",
+    "websocketPath": "WebSocket 路径",
+    "wechatVideoObfuscation": "伪装为微信视频通话",
+    "wireguardObfuscation": "伪装为 WireGuard 数据包"
+  },
   "confirmModal": {
     "cancel": "不， 我点错了",
     "confirm": "是，我确定",