From aa8f5e0edfc136bf39b8be4bc545eb8c6f5420f3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 20 Nov 2020 20:49:05 +0800
Subject: ...

---
 FrontEnd/src/app/locales/en/admin.json            | 22 +++++++++-
 FrontEnd/src/app/locales/zh/admin.json            | 22 +++++++++-
 FrontEnd/src/app/views/admin/UserAdmin.tsx        | 50 +++++++++++++----------
 FrontEnd/src/app/views/common/OperationDialog.tsx |  3 +-
 4 files changed, 72 insertions(+), 25 deletions(-)

(limited to 'FrontEnd/src')

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();
 
-- 
cgit v1.2.3