feat: fix all i18n support (#63)

* feat: add i18n support for rule files * update: use User-Agent uniformly
casbin · Aug 10, 2024 · 0dfac51 · 0dfac51
1 parent c085f09
commit 0dfac51
Show file tree

Hide file tree

Showing 18 changed files with 301 additions and 68 deletions.
diff --git a/web/src/RecordEditPage.js b/web/src/RecordEditPage.js
@@ -147,7 +147,7 @@ class RecordEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: "10px"}} >
           <Col style={{marginTop: "5px"}} span={2}>
-            {i18next.t("general:UserAgent")}:
+            {i18next.t("general:User-Agent")}:
           </Col>
           <Col span={22} >
             <Input value={this.state.record.userAgent} onChange={e => {

diff --git a/web/src/RecordListPage.js b/web/src/RecordListPage.js
@@ -153,7 +153,7 @@ class RecordListPage extends BaseListPage {
         sorter: (a, b) => a.clientIp.localeCompare(b.clientIp),
       },
       {
-        title: i18next.t("general:User agent"),
+        title: i18next.t("general:User-Agent"),
         dataIndex: "userAgent",
         key: "userAgent",
         width: "240px",

diff --git a/web/src/RuleEditPage.js b/web/src/RuleEditPage.js
@@ -77,7 +77,7 @@ class RuleEditPage extends React.Component {
       } style={{marginTop: 10}} type="inner">
         <Row style={{marginTop: "20px"}}>
           <Col span={2} style={{marginTop: "5px"}}>
-            {i18next.t("rule:Name")}:
+            {i18next.t("general:Name")}:
           </Col>
           <Col span={22}>
             <Input value={this.state.rule.name} disabled={true} />
@@ -96,7 +96,7 @@ class RuleEditPage extends React.Component {
                   {value: "WAF", text: "WAF"},
                   {value: "IP", text: "IP"},
                   {value: "User-Agent", text: "User-Agent"},
-                  {value: "IP Rate Limiting", text: "IP Rate Limiting"},
+                  {value: "IP Rate Limiting", text: i18next.t("rule:IP Rate Limiting")},
                   // {value: "complex", text: "Complex"},
                 ].map((item, index) => <Option key={index} value={item.value}>{item.text}</Option>)
               }
@@ -105,7 +105,7 @@ class RuleEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={2}>
-            Expressions:
+            {i18next.t("rule:Expressions")}:
           </Col>
           <Col span={22} >
             {
@@ -144,7 +144,7 @@ class RuleEditPage extends React.Component {
             {
               this.state.rule.type === "IP Rate Limiting" ? (
                 <IpRateRuleTable
-                  title={"IP Rate Limiting"}
+                  title={i18next.t("rule:IP Rate Limiting")}
                   table={this.state.rule.expressions}
                   ruleName={this.state.rule.name}
                   account={this.props.account}
@@ -158,17 +158,17 @@ class RuleEditPage extends React.Component {
           this.state.rule.type !== "WAF" && (
             <Row style={{marginTop: "20px"}}>
               <Col span={2} style={{marginTop: "5px"}}>
-                {i18next.t("rule:Action")}:
+                {i18next.t("general:Action")}:
               </Col>
               <Col span={22}>
                 <Select virtual={false} value={this.state.rule.action} defaultValue={"Block"} style={{width: "100%"}} onChange={value => {
                   this.updateRuleField("action", value);
                 }}>
                   {
                     [
-                      {value: "Allow", text: "Allow"},
+                      {value: "Allow", text: i18next.t("rule:Allow")},
                       // {value: "redirect", text: "Redirect"},
-                      {value: "Block", text: "Block"},
+                      {value: "Block", text: i18next.t("rule:Block")},
                       // {value: "drop", text: "Drop"},
                     ].map((item, index) => <Option key={index} value={item.value}>{item.text}</Option>)
                   }

diff --git a/web/src/RuleListPage.js b/web/src/RuleListPage.js
@@ -121,13 +121,20 @@ class RuleListPage extends BaseListPage {
         },
       },
       {
-        title: i18next.t("general:Type"),
+        title: i18next.t("rule:Type"),
         dataIndex: "type",
         key: "type",
         sorter: (a, b) => a.type.localeCompare(b.type),
+        render: (text, rule, index) => {
+          return (
+            <Tag color="blue">
+              {i18next.t(`rule:${text}`)}
+            </Tag>
+          );
+        },
       },
       {
-        title: i18next.t("general:Expressions"),
+        title: i18next.t("rule:Expressions"),
         dataIndex: "expressions",
         key: "expressions",
         sorter: (a, b) => a.expressions.localeCompare(b.expressions),
@@ -173,7 +180,7 @@ class RuleListPage extends BaseListPage {
         bordered
         title={() => (
           <div>
-            {i18next.t("general:Rule")}&nbsp;&nbsp;&nbsp;&nbsp;
+            {i18next.t("general:Rules")}&nbsp;&nbsp;&nbsp;&nbsp;
             <Button type="primary" size="small" onClick={() => this.addRule()}>{i18next.t("general:Add")}</Button>
           </div>
         )}

diff --git a/web/src/components/IpRateRuleTable.js b/web/src/components/IpRateRuleTable.js
@@ -50,7 +50,7 @@ class IpRateRuleTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: i18next.t("rule:Name"),
+        title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
         width: "20%",
@@ -77,7 +77,7 @@ class IpRateRuleTable extends React.Component {
         key: "value",
         width: "100%",
         render: (text, record, index) => (
-          <InputNumber style={{"width": "100%"}} value={Number(record.value)} addonAfter={i18next.t("rule:seconds")} onChange={e => {
+          <InputNumber style={{"width": "100%"}} value={Number(record.value)} addonAfter={i18next.t("usage:seconds")} onChange={e => {
             this.updateField(table, index, "value", e);
           }} />
         ),

diff --git a/web/src/components/IpRuleTable.js b/web/src/components/IpRuleTable.js
@@ -16,6 +16,7 @@ import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Select, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
+import i18next from "i18next";
 
 const {Option} = Select;
 
@@ -102,7 +103,7 @@ class IpRuleTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: "Name",
+        title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
         width: "180px",
@@ -113,7 +114,7 @@ class IpRuleTable extends React.Component {
         ),
       },
       {
-        title: "Operator",
+        title: i18next.t("rule:Operator"),
         dataIndex: "operator",
         key: "operator",
         width: "180px",
@@ -123,18 +124,17 @@ class IpRuleTable extends React.Component {
           }}>
             {
               [
-                {value: "is in", text: "is in"},
-                {value: "is not in", text: "is not in"},
+                {value: "is in", text: i18next.t("rule:is in")},
+                {value: "is not in", text: i18next.t("rule:is not in")},
               ].map((item, index) => <Option key={index} value={item.value}>{item.text}</Option>)
             }
           </Select>
         ),
       },
       {
-        title: "Value",
+        title: i18next.t("rule:IP List"),
         dataIndex: "value",
         key: "value",
-        width: "100%",
         render: (text, record, index) => (
           <Select
             mode="tags"
@@ -147,7 +147,7 @@ class IpRuleTable extends React.Component {
         ),
       },
       {
-        title: "Action",
+        title: i18next.t("general:Action"),
         key: "action",
         width: "100px",
         render: (text, record, index) => (
@@ -170,8 +170,8 @@ class IpRuleTable extends React.Component {
         title={() => (
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{"Add"}</Button>
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.restore()}>{"Restore"}</Button>
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.restore()}>{i18next.t("general:Restore")}</Button>
           </div>
         )}
       />

diff --git a/web/src/components/RuleTable.js b/web/src/components/RuleTable.js
@@ -16,6 +16,7 @@ import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Row, Select, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
+import i18next from "i18next";
 
 const {Option} = Select;
 
@@ -68,7 +69,7 @@ class RuleTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: "Name",
+        title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
         width: "180px",
@@ -108,7 +109,7 @@ class RuleTable extends React.Component {
         title={() => (
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{"Add"}</Button>
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
           </div>
         )}
       />

diff --git a/web/src/components/UaRuleTable.js b/web/src/components/UaRuleTable.js
@@ -79,7 +79,7 @@ class UaRuleTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: i18next.t("rule:Name"),
+        title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
         width: "180px",
@@ -100,11 +100,11 @@ class UaRuleTable extends React.Component {
           }}>
             {
               [
-                {value: "equals", text: "equals"},
-                {value: "does not equal", text: "does not equal"},
-                {value: "contains", text: "contains"},
-                {value: "does not contain", text: "does not contain"},
-                {value: "match", text: "regex match"},
+                {value: "equals", text: i18next.t("rule:equals")},
+                {value: "does not equal", text: i18next.t("rule:does not equal")},
+                {value: "contains", text: i18next.t("rule:contains")},
+                {value: "does not contain", text: i18next.t("rule:does not contain")},
+                {value: "match", text: i18next.t("rule:regex match")},
               ].map((item, index) => <Option key={index} value={item.value}>{item.text}</Option>)
             }
           </Select>
@@ -114,9 +114,8 @@ class UaRuleTable extends React.Component {
         title: i18next.t("rule:Value"),
         dataIndex: "value",
         key: "value",
-        width: "100%",
         render: (text, record, index) => (
-          <Input value={text} placeholder="Split with Space" onChange={e => {
+          <Input value={text} onChange={e => {
             this.updateField(table, index, "value", e.target.value);
           }} onBlur={e => {
             this.updateField(table, index, "value", e.target.value.replace(/\s+/g, " ").trim());

diff --git a/web/src/components/WafRuleTable.js b/web/src/components/WafRuleTable.js
@@ -16,6 +16,7 @@ import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
+import i18next from "i18next";
 
 class WafRuleTable extends React.Component {
   constructor(props) {
@@ -86,7 +87,7 @@ class WafRuleTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: "Name",
+        title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
         width: "180px",
@@ -99,7 +100,7 @@ class WafRuleTable extends React.Component {
         },
       },
       {
-        title: "Value",
+        title: i18next.t("rule:Expression"),
         dataIndex: "value",
         key: "value",
         render: (text, record, index) => {
@@ -111,7 +112,7 @@ class WafRuleTable extends React.Component {
         },
       },
       {
-        title: "Action",
+        title: i18next.t("general:Action"),
         key: "action",
         width: "100px",
         render: (text, record, index) => {
@@ -137,8 +138,8 @@ class WafRuleTable extends React.Component {
         title={() => (
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{"Add"}</Button>
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.restore()}>{"Restore"}</Button>
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.restore()}>{i18next.t("general:Restore")}</Button>
           </div>
         )}
       />

diff --git a/web/src/locales/de/data.json b/web/src/locales/de/data.json
@@ -51,6 +51,8 @@
     "Owner": "Owner",
     "Path": "Path",
     "Records": "Records",
+    "Restore": "Restore",
+    "Rules": "Rules",
     "Save": "Save",
     "Self": "Self",
     "Sites": "Sites",
@@ -61,9 +63,31 @@
     "Top 10 User-Agents": "Top 10 User-Agents",
     "Total Request Count": "Total Request Count",
     "Unique IP Count": "Unique IP Count",
-    "User agent": "User agent",
     "User-Agent": "User-Agent",
-    "UserAgent": "UserAgent"
+    "Update time": "Update time"
+  },
+  "rule": {
+    "Allow": "Allow",
+    "Block": "Block",
+    "Block Duration": "Block Duration",
+    "Edit Rule": "Edit Rule",
+    "Expression": "Expression",
+    "Expressions": "Expressions",
+    "IP List": "IP List",
+    "IP Rate Limiting": "IP Rate Limiting",
+    "Operator": "Operator",
+    "Rate": "Rate",
+    "Reason": "Reason",
+    "Status Code": "Status Code",
+    "Type": "Type",
+    "Value": "Value",
+    "contains": "contains",
+    "does not contain": "does not contain",
+    "does not equal": "does not equal",
+    "equals": "equals",
+    "regex match": "regex match",
+    "is in": "is in",
+    "is not in": "is not in"
   },
   "site": {
     "Casdoor app": "Casdoor app",
@@ -87,6 +111,7 @@
     "Day": "Day",
     "Hour": "Hour",
     "Month": "Month",
-    "Week": "Week"
+    "Week": "Week",
+    "seconds": "seconds"
   }
 }