...

8 files changed, 62 insertions, 14 deletions

diff --git a/FrontEnd/src/app/locales/en/admin.json b/FrontEnd/src/app/locales/en/admin.json
index 69a88e3b..a0290206 100644
--- a/FrontEnd/src/app/locales/en/admin.json
+++ b/FrontEnd/src/app/locales/en/admin.json
@@ -1 +1,15 @@
-{}

+{

+  "nav": {

+    "users": "Users",

+    "highlightTimelines": "Highlight Timelines"

+  },

+  "create": "Create",

+  "user": {

+    "nickname": "Nickname: ",

+    "uniqueId": "Unique ID: ",

+    "permissions": "Permissions: ",

+    "modify": "Modify",

+    "modifyPermissions": "Modify Permissions",

+    "delete": "Delete"

+  }

+}

diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 662a1aac..cdb6da37 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -13,7 +13,8 @@
   "nav": {
     "settings": "Settings",
     "login": "Login",
-    "about": "About"
+    "about": "About",
+    "administration": "Administration"
   },
   "chooseImage": "Choose a image",
   "loadImageError": "Failed to load image.",
diff --git a/FrontEnd/src/app/locales/zh/admin.json b/FrontEnd/src/app/locales/zh/admin.json
index 69a88e3b..d6895206 100644
--- a/FrontEnd/src/app/locales/zh/admin.json
+++ b/FrontEnd/src/app/locales/zh/admin.json
@@ -1 +1,15 @@
-{}

+{

+  "nav": {

+    "users": "用户",

+    "highlightTimelines": "高光时间线"

+  },

+  "create": "创建",

+  "user": {

+    "nickname": "昵称：",

+    "uniqueId": "唯一ID：",

+    "permissions": "权限：",

+    "modify": "修改",

+    "modifyPermissions": "修改权限",

+    "delete": "删除"

+  }

+}

diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index ecd1df4b..5d28f694 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -13,7 +13,8 @@
   "nav": {
     "settings": "设置",
     "login": "登陆",
-    "about": "关于"
+    "about": "关于",
+    "administration": "管理"
   },
   "chooseImage": "选择一个图片",
   "loadImageError": "加载图片失败",
diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx
index ac640700..94e97713 100644
--- a/FrontEnd/src/app/views/admin/Admin.tsx
+++ b/FrontEnd/src/app/views/admin/Admin.tsx
@@ -4,10 +4,14 @@ import { Container } from "react-bootstrap";
 
 import { AuthUser } from "@/services/user";
 
+import i18n from "@/i18n";
+
 import AdminNav from "./AdminNav";
 import UserAdmin from "./UserAdmin";
 import HighlightTimelineAdmin from "./HighlightTimelineAdmin";
 
+void i18n.loadNamespaces("admin");
+
 interface AdminProps {
   user: AuthUser;
 }
diff --git a/FrontEnd/src/app/views/admin/AdminNav.tsx b/FrontEnd/src/app/views/admin/AdminNav.tsx
index 040b479f..f376beda 100644
--- a/FrontEnd/src/app/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/app/views/admin/AdminNav.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { Nav } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router";
 
 const AdminNav: React.FC = () => {
   const match = useRouteMatch<{ name: string }>();
   const history = useHistory();
 
+  const { t } = useTranslation();
+
   const name = match.params.name;
 
   function toggle(newTab: string): void {
@@ -21,7 +24,7 @@ const AdminNav: React.FC = () => {
             toggle("users");
           }}
         >
-          Users
+          {t("admin:nav.users")}
         </Nav.Link>
       </Nav.Item>
       <Nav.Item>
@@ -31,7 +34,7 @@ const AdminNav: React.FC = () => {
             toggle("highlighttimelines");
           }}
         >
-          Highlight Timelines
+          {t("admin:nav.highlightTimelines")}
         </Nav.Link>
       </Nav.Item>
     </Nav>
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index bd60381f..8fd9b351 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -15,6 +15,7 @@ import {
   kUserPermissionList,
   UserPermission,
 } from "@/http/user";
+import { useTranslation } from "react-i18next";
 
 interface DialogProps<TData = undefined, TReturn = undefined> {
   open: boolean;
@@ -204,6 +205,8 @@ interface UserItemProps {
 }
 
 const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
+  const { t } = useTranslation();
+
   const [editMaskVisible, setEditMaskVisible] = React.useState<boolean>(false);
 
   return (
@@ -214,10 +217,16 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
         onClick={() => setEditMaskVisible(true)}
       />
       <h4 className="text-primary">{user.username}</h4>
-      <div className="text-secondary">nickname: {user.nickname}</div>
-      <div className="text-secondary">unique id: {user.uniqueId}</div>
       <div className="text-secondary">
-        permissions:{" "}
+        {t("admin:user.nickname")}
+        {user.nickname}
+      </div>
+      <div className="text-secondary">
+        {t("admin:user.uniqueId")}
+        {user.uniqueId}
+      </div>
+      <div className="text-secondary">
+        {t("admin:user.permissions")}
         {user.permissions.map((permission) => {
           return (
             <span key={permission} className="text-danger">
@@ -231,13 +240,13 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
         onClick={() => setEditMaskVisible(false)}
       >
         <button className="text-button primary" onClick={on[kModify]}>
-          Modify
+          {t("admin:user.modify")}
         </button>
         <button className="text-button primary" onClick={on[kModifyPermission]}>
-          Modify Permission
+          {t("admin:user.modifyPermissions")}
         </button>
         <button className="text-button danger" onClick={on[kDelete]}>
-          Delete
+          {t("admin:user.delete")}
         </button>
       </div>
     </ListGroup.Item>
@@ -249,6 +258,8 @@ interface UserAdminProps {
 }
 
 const UserAdmin: React.FC<UserAdminProps> = (props) => {
+  const { t } = useTranslation();
+
   type DialogInfo =
     | null
     | {
@@ -384,7 +395,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
                 })
               }
             >
-              Create
+              {t("admin:create")}
             </Button>
           </Col>
         </Row>
diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 11d3de04..c862a6d3 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -63,7 +63,7 @@ const AppBar: React.FC = (_) => {
               activeClassName="active"
               onClick={collapse}
             >
-              Administration
+              {t("nav.administration")}
             </NavLink>
           )}
         </Nav>