...

4 files changed, 72 insertions, 25 deletions

diff --git a/FrontEnd/src/app/locales/en/admin.json b/FrontEnd/src/app/locales/en/admin.json
index a0290206..098ffb1f 100644
--- a/FrontEnd/src/app/locales/en/admin.json
+++ b/FrontEnd/src/app/locales/en/admin.json
@@ -5,11 +5,31 @@
   },

   "create": "Create",

   "user": {

+    "username": "Username: ",

+    "password": "Password: ",

     "nickname": "Nickname: ",

     "uniqueId": "Unique ID: ",

     "permissions": "Permissions: ",

     "modify": "Modify",

     "modifyPermissions": "Modify Permissions",

-    "delete": "Delete"

+    "delete": "Delete",

+    "dialog": {

+      "create": {

+        "title": "Create User",

+        "prompt": "You are creating a new user."

+      },

+      "delete": {

+        "title": "Delete user",

+        "prompt": "You are deleting <1>username</1> . Caution: This can't be undo."

+      },

+      "modify": {

+        "title": "Modify User",

+        "prompt": "You are modifying user <1>username</1> ."

+      },

+      "modifyPermissions": {

+        "title": "Modify User Permissions",

+        "prompt": "You are modifying permissions of user <1>username</1> ."

+      }

+    }

   }

 }

diff --git a/FrontEnd/src/app/locales/zh/admin.json b/FrontEnd/src/app/locales/zh/admin.json
index d6895206..fed39b2d 100644
--- a/FrontEnd/src/app/locales/zh/admin.json
+++ b/FrontEnd/src/app/locales/zh/admin.json
@@ -5,11 +5,31 @@
   },

   "create": "创建",

   "user": {

+    "username": "用户名：",

+    "password": "密码：",

     "nickname": "昵称：",

     "uniqueId": "唯一ID：",

     "permissions": "权限：",

     "modify": "修改",

     "modifyPermissions": "修改权限",

-    "delete": "删除"

+    "delete": "删除",

+    "dialog": {

+      "create": {

+        "title": "创建用户",

+        "prompt": "您正在创建一个新用户。"

+      },

+      "delete": {

+        "title": "删除用户",

+        "prompt": "您正在删除用户 <1>username</1> 。注意：此操作不可撤销。"

+      },

+      "modify": {

+        "title": "修改用户",

+        "prompt": "您正在修改用户 <1>username</1> 。"

+      },

+      "modifyPermissions": {

+        "title": "修改用户权限",

+        "prompt": "您正在修改用户 <1>username</1> 的权限。"

+      }

+    }

   }

 }

diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 8fd9b351..3cfd5880 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -15,7 +15,7 @@ import {
   kUserPermissionList,
   UserPermission,
 } from "@/http/user";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 interface DialogProps<TData = undefined, TReturn = undefined> {
   open: boolean;
@@ -33,13 +33,13 @@ const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({
 }) => {
   return (
     <OperationDialog
-      title="Create"
+      title="admin:user.dialog.create.title"
       titleColor="create"
-      inputPrompt="You are creating a new user."
+      inputPrompt="admin:user.dialog.create.prompt"
       inputScheme={
         [
-          { type: "text", label: "Username" },
-          { type: "text", label: "Password" },
+          { type: "text", label: "admin:user.username" },
+          { type: "text", label: "admin:user.password" },
         ] as const
       }
       onProcess={([username, password]) =>
@@ -70,12 +70,12 @@ const UserDeleteDialog: React.FC<DialogProps<
     <OperationDialog
       open={open}
       close={close}
-      title="Dangerous"
+      title="admin:user.dialog.delete.title"
       titleColor="dangerous"
       inputPrompt={() => (
-        <>
-          You are deleting user <UsernameLabel>{username}</UsernameLabel> !
-        </>
+        <Trans i18nKey="admin:user.dialog.delete.prompt">
+          0<UsernameLabel>{username}</UsernameLabel>2
+        </Trans>
       )}
       onProcess={() => getHttpUserClient().delete(username, token)}
       onSuccessAndClose={onSuccess}
@@ -93,19 +93,26 @@ const UserModifyDialog: React.FC<DialogProps<
     <OperationDialog
       open={open}
       close={close}
-      title="Caution"
+      title="admin:user.dialog.modify.title"
       titleColor="dangerous"
       inputPrompt={() => (
-        <>
-          You are change the password of user
-          <UsernameLabel>{oldUser.username}</UsernameLabel> !
-        </>
+        <Trans i18nKey="admin:user.dialog.modify.prompt">
+          0<UsernameLabel>{oldUser.username}</UsernameLabel>2
+        </Trans>
       )}
       inputScheme={
         [
-          { type: "text", label: "New Username", initValue: oldUser.username },
-          { type: "text", label: "New Password" },
-          { type: "text", label: "New Nickname", initValue: oldUser.nickname },
+          {
+            type: "text",
+            label: "admin:user.username",
+            initValue: oldUser.username,
+          },
+          { type: "text", label: "admin:user.password" },
+          {
+            type: "text",
+            label: "admin:user.nickname",
+            initValue: oldUser.nickname,
+          },
         ] as const
       }
       onProcess={([username, password, nickname]) =>
@@ -139,13 +146,12 @@ const UserPermissionModifyDialog: React.FC<DialogProps<
     <OperationDialog
       open={open}
       close={close}
-      title="Caution"
+      title="admin:user.dialog.modifyPermissions.title"
       titleColor="dangerous"
       inputPrompt={() => (
-        <>
-          You are modify permission of user
-          <UsernameLabel>{username}</UsernameLabel> !
-        </>
+        <Trans i18nKey="admin:user.dialog.modifyPermissions.prompt">
+          0<UsernameLabel>{username}</UsernameLabel>2
+        </Trans>
       )}
       inputScheme={kUserPermissionList.map<OperationBoolInputInfo>(
         (permission, index) => ({
diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx
index 08baf93a..bca5cb87 100644
--- a/FrontEnd/src/app/views/common/OperationDialog.tsx
+++ b/FrontEnd/src/app/views/common/OperationDialog.tsx
@@ -120,7 +120,8 @@ const OperationDialog = <
 >(
   props: OperationDialogProps<TData, OperationInputInfoList>
 ): React.ReactElement => {
-  const inputScheme = props.inputScheme as readonly OperationInputInfo[];
+  const inputScheme = (props.inputScheme ??
+    []) as readonly OperationInputInfo[];
 
   const { t } = useTranslation();