From a687a23a641ca262dbffd383af129a0069fbc5ee Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 16 Nov 2020 16:30:32 +0800
Subject: ...

---
 FrontEnd/src/app/views/common/AppBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'FrontEnd/src/app/views/common')

diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 8f35b482..11d3de04 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -15,7 +15,7 @@ const AppBar: React.FC = (_) => {
 
   const { t } = useTranslation();
 
-  const isAdministrator = user && user.administrator;
+  const hasAdministrationPermission = user && user.hasAdministrationPermission;
 
   const [expand, setExpand] = React.useState<boolean>(false);
   const collapse = (): void => setExpand(false);
@@ -56,7 +56,7 @@ const AppBar: React.FC = (_) => {
             {t("nav.about")}
           </NavLink>
 
-          {isAdministrator && (
+          {hasAdministrationPermission && (
             <NavLink
               to="/admin"
               className="nav-link"
-- 
cgit v1.2.3


From e51e3b7c3c987f52823798b749e6c6deb2bfbe38 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 17 Nov 2020 17:31:42 +0800
Subject: ...

---
 FrontEnd/src/app/http/user.ts                     |  25 ++
 FrontEnd/src/app/views/admin/AdminSubPage.tsx     |  18 +-
 FrontEnd/src/app/views/admin/UserAdmin.tsx        | 352 +++++++---------------
 FrontEnd/src/app/views/common/OperationDialog.tsx |  31 +-
 4 files changed, 163 insertions(+), 263 deletions(-)

(limited to 'FrontEnd/src/app/views/common')

diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts
index 92a6433e..243846d1 100644
--- a/FrontEnd/src/app/http/user.ts
+++ b/FrontEnd/src/app/http/user.ts
@@ -28,6 +28,8 @@ export interface HttpUser {
 }
 
 export interface HttpUserPatchRequest {
+  username?: string;
+  password?: string;
   nickname?: string;
 }
 
@@ -36,6 +38,11 @@ export interface HttpChangePasswordRequest {
   newPassword: string;
 }
 
+export interface HttpCreateUserRequest {
+  username: string;
+  password: string;
+}
+
 export class HttpUserNotExistError extends Error {
   constructor(public innerError?: AxiosError) {
     super();
@@ -56,6 +63,7 @@ export interface IHttpUserClient {
     req: HttpUserPatchRequest,
     token: string
   ): Promise<HttpUser>;
+  delete(username: string, token: string): Promise<void>;
   getAvatar(username: string): Promise<BlobWithEtag>;
   getAvatar(
     username: string,
@@ -73,6 +81,8 @@ export interface IHttpUserClient {
     permission: UserPermission,
     token: string
   ): Promise<void>;
+
+  createUser(req: HttpCreateUserRequest, token: string): Promise<HttpUser>;
 }
 
 export class HttpUserClient implements IHttpUserClient {
@@ -102,6 +112,13 @@ export class HttpUserClient implements IHttpUserClient {
       .catch(convertToNetworkError);
   }
 
+  delete(username: string, token: string): Promise<void> {
+    return axios
+      .delete(`${apiBaseUrl}/users/${username}?token=${token}`)
+      .catch(convertToNetworkError)
+      .then();
+  }
+
   getAvatar(username: string): Promise<BlobWithEtag>;
   getAvatar(
     username: string,
@@ -171,6 +188,14 @@ export class HttpUserClient implements IHttpUserClient {
       .catch(convertToNetworkError)
       .then();
   }
+
+  createUser(req: HttpCreateUserRequest, token: string): Promise<HttpUser> {
+    return axios
+      .post<HttpUser>(`${apiBaseUrl}/userop/createuser?token=${token}`, req)
+      .then(extractResponseData)
+      .catch(convertToNetworkError)
+      .then();
+  }
 }
 
 let client: IHttpUserClient = new HttpUserClient();
diff --git a/FrontEnd/src/app/views/admin/AdminSubPage.tsx b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
index 5d2df13c..5efe1ee3 100644
--- a/FrontEnd/src/app/views/admin/AdminSubPage.tsx
+++ b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav } from "react-bootstrap";
+import { Container, Nav } from "react-bootstrap";
 import { useHistory, useRouteMatch } from "react-router";
 
 const AdminSubPage: React.FC = ({ children }) => {
@@ -13,8 +13,8 @@ const AdminSubPage: React.FC = ({ children }) => {
   }
 
   return (
-    <>
-      <Nav variant="tabs">
+    <Container>
+      <Nav variant="tabs" className="my-2">
         <Nav.Item>
           <Nav.Link
             active={name === "users"}
@@ -25,19 +25,9 @@ const AdminSubPage: React.FC = ({ children }) => {
             Users
           </Nav.Link>
         </Nav.Item>
-        <Nav.Item>
-          <Nav.Link
-            active={name === "more"}
-            onClick={() => {
-              toggle("more");
-            }}
-          >
-            More
-          </Nav.Link>
-        </Nav.Item>
       </Nav>
       {children}
-    </>
+    </Container>
   );
 };
 
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 856e6136..3432cddf 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
 import {
   ListGroup,
   Row,
@@ -13,77 +12,22 @@ import OperationDialog from "../common/OperationDialog";
 import AdminSubPage from "./AdminSubPage";
 
 import { User, AuthUser } from "@/services/user";
-import { getHttpUserClient } from "@/http/user";
+import { getHttpUserClient, HttpUser } from "@/http/user";
 
-const apiBaseUrl = "/api";
-
-interface CreateUserInfo {
-  username: string;
-  password: string;
-}
-
-async function createUser(user: CreateUserInfo, token: string): Promise<User> {
-  const res = await axios.post<User>(
-    `${apiBaseUrl}/userop/createuser?token=${token}`,
-    user
-  );
-  return res.data;
-}
-
-function deleteUser(username: string, token: string): Promise<void> {
-  return axios.delete(`${apiBaseUrl}/users/${username}?token=${token}`);
-}
-
-function changeUsername(
-  oldUsername: string,
-  newUsername: string,
-  token: string
-): Promise<void> {
-  return axios.patch(`${apiBaseUrl}/users/${oldUsername}?token=${token}`, {
-    username: newUsername,
-  });
-}
-
-function changePassword(
-  username: string,
-  newPassword: string,
-  token: string
-): Promise<void> {
-  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {
-    password: newPassword,
-  });
-}
-
-const kChangeUsername = "changeusername";
-const kChangePassword = "changepassword";
-const kChangePermission = "changepermission";
+const kModify = "modify";
 const kDelete = "delete";
 
-type TChangeUsername = typeof kChangeUsername;
-type TChangePassword = typeof kChangePassword;
-type TChangePermission = typeof kChangePermission;
+type TModify = typeof kModify;
 type TDelete = typeof kDelete;
 
-type ContextMenuItem =
-  | TChangeUsername
-  | TChangePassword
-  | TChangePermission
-  | TDelete;
+type ContextMenuItem = TModify | TDelete;
 
 interface UserCardProps {
-  onContextMenu: (item: ContextMenuItem) => void;
+  on: { [key in ContextMenuItem]: () => void };
   user: User;
 }
 
-const UserItem: React.FC<UserCardProps> = (props) => {
-  const user = props.user;
-
-  const createClickCallback = (item: ContextMenuItem): (() => void) => {
-    return () => {
-      props.onContextMenu(item);
-    };
-  };
-
+const UserItem: React.FC<UserCardProps> = ({ user, on }) => {
   return (
     <ListGroup.Item className="container">
       <Row className="align-items-center">
@@ -101,19 +45,8 @@ const UserItem: React.FC<UserCardProps> = (props) => {
               Manage
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              <Dropdown.Item onClick={createClickCallback(kChangeUsername)}>
-                Change Username
-              </Dropdown.Item>
-              <Dropdown.Item onClick={createClickCallback(kChangePassword)}>
-                Change Password
-              </Dropdown.Item>
-              <Dropdown.Item onClick={createClickCallback(kChangePermission)}>
-                Change Permission
-              </Dropdown.Item>
-              <Dropdown.Item
-                className="text-danger"
-                onClick={createClickCallback(kDelete)}
-              >
+              <Dropdown.Item onClick={on["modify"]}>Modify</Dropdown.Item>
+              <Dropdown.Item className="text-danger" onClick={on["delete"]}>
                 Delete
               </Dropdown.Item>
             </Dropdown.Menu>
@@ -124,16 +57,20 @@ const UserItem: React.FC<UserCardProps> = (props) => {
   );
 };
 
-interface DialogProps {
+interface DialogProps<TData = undefined, TReturn = undefined> {
   open: boolean;
   close: () => void;
+  token: string;
+  data: TData;
+  onSuccess: (data: TReturn) => void;
 }
 
-interface CreateUserDialogProps extends DialogProps {
-  process: (user: CreateUserInfo) => Promise<void>;
-}
-
-const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {
+const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({
+  open,
+  close,
+  token,
+  onSuccess,
+}) => {
   return (
     <OperationDialog
       title="Create"
@@ -146,13 +83,17 @@ const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {
         ] as const
       }
       onProcess={([username, password]) =>
-        props.process({
-          username: username,
-          password: password,
-        })
+        getHttpUserClient().createUser(
+          {
+            username,
+            password,
+          },
+          token
+        )
       }
-      close={props.close}
-      open={props.open}
+      close={close}
+      open={open}
+      onSuccessAndClose={onSuccess}
     />
   );
 };
@@ -161,110 +102,64 @@ const UsernameLabel: React.FC = (props) => {
   return <span style={{ color: "blue" }}>{props.children}</span>;
 };
 
-interface UserDeleteDialogProps extends DialogProps {
-  username: string;
-  process: () => Promise<void>;
-}
-
-const UserDeleteDialog: React.FC<UserDeleteDialogProps> = (props) => {
+const UserDeleteDialog: React.FC<DialogProps<
+  { username: string },
+  unknown
+>> = ({ open, close, token, data: { username }, onSuccess }) => {
   return (
     <OperationDialog
-      open={props.open}
-      close={props.close}
+      open={open}
+      close={close}
       title="Dangerous"
       titleColor="dangerous"
       inputPrompt={() => (
         <>
-          {"You are deleting user "}
-          <UsernameLabel>{props.username}</UsernameLabel>
-          {" !"}
+          You are deleting user <UsernameLabel>{username}</UsernameLabel> !
         </>
       )}
-      onProcess={props.process}
+      onProcess={() => getHttpUserClient().delete(username, token)}
+      onSuccessAndClose={onSuccess}
     />
   );
 };
 
-interface UserModifyDialogProps<T> extends DialogProps {
-  username: string;
-  process: (value: T) => Promise<void>;
-}
-
-const UserChangeUsernameDialog: React.FC<UserModifyDialogProps<string>> = (
-  props
-) => {
+const UserModifyDialog: React.FC<DialogProps<
+  {
+    oldUser: HttpUser;
+  },
+  HttpUser
+>> = ({ open, close, token, data: { oldUser }, onSuccess }) => {
   return (
     <OperationDialog
-      open={props.open}
-      close={props.close}
+      open={open}
+      close={close}
       title="Caution"
       titleColor="dangerous"
       inputPrompt={() => (
         <>
-          {"You are change the username of user "}
-          <UsernameLabel>{props.username}</UsernameLabel>
-          {" !"}
+          You are change the password of user
+          <UsernameLabel>{oldUser.username}</UsernameLabel> !
         </>
       )}
-      inputScheme={[{ type: "text", label: "New Username" }]}
-      onProcess={([newUsername]) => {
-        return props.process(newUsername);
-      }}
-    />
-  );
-};
-
-const UserChangePasswordDialog: React.FC<UserModifyDialogProps<string>> = (
-  props
-) => {
-  return (
-    <OperationDialog
-      open={props.open}
-      close={props.close}
-      title="Caution"
-      titleColor="dangerous"
-      inputPrompt={() => (
-        <>
-          {"You are change the password of user "}
-          <UsernameLabel>{props.username}</UsernameLabel>
-          {" !"}
-        </>
-      )}
-      inputScheme={[{ type: "text", label: "New Password" }]}
-      onProcess={([newPassword]) => {
-        return props.process(newPassword);
-      }}
-    />
-  );
-};
-
-interface UserChangePermissionDialogProps extends DialogProps {
-  username: string;
-  newPermission: boolean;
-  process: () => Promise<void>;
-}
-
-const UserChangePermissionDialog: React.FC<UserChangePermissionDialogProps> = (
-  props
-) => {
-  return (
-    <OperationDialog
-      open={props.open}
-      close={props.close}
-      title="Caution"
-      titleColor="dangerous"
-      inputPrompt={() => (
-        <>
-          {"You are change user "}
-          <UsernameLabel>{props.username}</UsernameLabel>
-          {" to "}
-          <span style={{ color: "orange" }}>
-            {props.newPermission ? "administrator" : "normal user"}
-          </span>
-          {" !"}
-        </>
-      )}
-      onProcess={props.process}
+      inputScheme={
+        [
+          { type: "text", label: "New Username", initValue: oldUser.username },
+          { type: "text", label: "New Password" },
+          { type: "text", label: "New Nickname", initValue: oldUser.nickname },
+        ] as const
+      }
+      onProcess={([username, password, nickname]) =>
+        getHttpUserClient().patch(
+          oldUser.username,
+          {
+            username: username !== oldUser.username ? username : undefined,
+            password: password !== "" ? password : undefined,
+            nickname: nickname !== oldUser.nickname ? nickname : undefined,
+          },
+          token
+        )
+      }
+      onSuccessAndClose={onSuccess}
     />
   );
 };
@@ -279,23 +174,18 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
     | {
         type: "create";
       }
-    | { type: TDelete; username: string }
     | {
-        type: TChangeUsername;
-        username: string;
+        type: TModify;
+        user: HttpUser;
       }
-    | {
-        type: TChangePassword;
-        username: string;
-      }
-    | {
-        type: TChangePermission;
-        username: string;
-        newPermission: boolean;
-      };
+    | { type: TDelete; username: string };
 
   const [users, setUsers] = useState<User[] | null>(null);
   const [dialog, setDialog] = useState<DialogInfo>(null);
+  const [usersVersion, setUsersVersion] = useState<number>(0);
+  const updateUsers = (): void => {
+    setUsersVersion(usersVersion + 1);
+  };
 
   const token = props.user.token;
 
@@ -311,20 +201,19 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
     return () => {
       subscribe = false;
     };
-  }, []);
+  }, [usersVersion]);
 
   let dialogNode: React.ReactNode;
-  if (dialog)
+  if (dialog) {
     switch (dialog.type) {
       case "create":
         dialogNode = (
           <CreateUserDialog
             open
             close={() => setDialog(null)}
-            process={async (user) => {
-              const u = await createUser(user, token);
-              setUsers((oldUsers) => [...(oldUsers ?? []), u]);
-            }}
+            token={token}
+            data={undefined}
+            onSuccess={updateUsers}
           />
         );
         break;
@@ -333,52 +222,25 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
           <UserDeleteDialog
             open
             close={() => setDialog(null)}
-            username={dialog.username}
-            process={async () => {
-              await deleteUser(dialog.username, token);
-              setUsers((oldUsers) =>
-                (oldUsers ?? []).filter((u) => u.username !== dialog.username)
-              );
-            }}
-          />
-        );
-        break;
-      case kChangeUsername:
-        dialogNode = (
-          <UserChangeUsernameDialog
-            open
-            close={() => setDialog(null)}
-            username={dialog.username}
-            process={async (newUsername) => {
-              await changeUsername(dialog.username, newUsername, token);
-              setUsers((oldUsers) => {
-                const users = (oldUsers ?? []).slice();
-                const findedUser = users.find(
-                  (u) => u.username === dialog.username
-                );
-                if (findedUser) findedUser.username = newUsername;
-                return users;
-              });
-            }}
+            token={token}
+            data={{ username: dialog.username }}
+            onSuccess={updateUsers}
           />
         );
         break;
-      case kChangePassword:
+      case kModify:
         dialogNode = (
-          <UserChangePasswordDialog
+          <UserModifyDialog
             open
             close={() => setDialog(null)}
-            username={dialog.username}
-            process={async (newPassword) => {
-              await changePassword(dialog.username, newPassword, token);
-            }}
+            token={token}
+            data={{ oldUser: dialog.user }}
+            onSuccess={updateUsers}
           />
         );
         break;
-      case kChangePermission: {
-        break;
-      }
     }
+  }
 
   if (users) {
     const userComponents = users.map((user) => {
@@ -386,24 +248,40 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         <UserItem
           key={user.username}
           user={user}
-          onContextMenu={(item) => {}}
+          on={{
+            modify: () => {
+              setDialog({
+                type: "modify",
+                user,
+              });
+            },
+            delete: () => {
+              setDialog({
+                type: "delete",
+                username: user.username,
+              });
+            },
+          }}
         />
       );
     });
 
     return (
       <AdminSubPage>
-        <Button
-          variant="success"
-          onClick={() =>
-            setDialog({
-              type: "create",
-            })
-          }
-          className="align-self-end"
-        >
-          Create User
-        </Button>
+        <Row className="justify-content-end my-2">
+          <Col xs="auto">
+            <Button
+              variant="success"
+              onClick={() =>
+                setDialog({
+                  type: "create",
+                })
+              }
+            >
+              Create User
+            </Button>
+          </Col>
+        </Row>
         {userComponents}
         {dialogNode}
       </AdminSubPage>
diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx
index e32e9277..08baf93a 100644
--- a/FrontEnd/src/app/views/common/OperationDialog.tsx
+++ b/FrontEnd/src/app/views/common/OperationDialog.tsx
@@ -77,11 +77,6 @@ type MapOperationInputInfoValueTypeList<
   [Index in keyof Tuple]: MapOperationInputInfoValueType<Tuple[Index]>;
 } & { length: Tuple["length"] };
 
-interface OperationResult {
-  type: "success" | "failure";
-  data: unknown;
-}
-
 export type OperationInputError =
   | {
       [index: number]: I18nText | null | undefined;
@@ -98,6 +93,7 @@ const isNoError = (error: OperationInputError): boolean => {
 };
 
 export interface OperationDialogProps<
+  TData,
   OperationInputInfoList extends readonly OperationInputInfo[]
 > {
   open: boolean;
@@ -106,28 +102,39 @@ export interface OperationDialogProps<
   titleColor?: "default" | "dangerous" | "create" | string;
   onProcess: (
     inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList>
-  ) => Promise<unknown>;
+  ) => Promise<TData>;
   inputScheme?: OperationInputInfoList;
   inputValidator?: (
     inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList>
   ) => OperationInputError;
   inputPrompt?: I18nText | (() => React.ReactNode);
   processPrompt?: () => React.ReactNode;
-  successPrompt?: (data: unknown) => React.ReactNode;
+  successPrompt?: (data: TData) => React.ReactNode;
   failurePrompt?: (error: unknown) => React.ReactNode;
-  onSuccessAndClose?: () => void;
+  onSuccessAndClose?: (data: TData) => void;
 }
 
 const OperationDialog = <
+  TData,
   OperationInputInfoList extends readonly OperationInputInfo[]
 >(
-  props: OperationDialogProps<OperationInputInfoList>
+  props: OperationDialogProps<TData, OperationInputInfoList>
 ): React.ReactElement => {
   const inputScheme = props.inputScheme as readonly OperationInputInfo[];
 
   const { t } = useTranslation();
 
-  type Step = "input" | "process" | OperationResult;
+  type Step =
+    | "input"
+    | "process"
+    | {
+        type: "success";
+        data: TData;
+      }
+    | {
+        type: "failure";
+        data: unknown;
+      };
   const [step, setStep] = useState<Step>("input");
   const [values, setValues] = useState<(boolean | string)[]>(
     inputScheme.map((i) => {
@@ -153,7 +160,7 @@ const OperationDialog = <
         step.type === "success" &&
         props.onSuccessAndClose
       ) {
-        props.onSuccessAndClose();
+        props.onSuccessAndClose(step.data);
       }
     } else {
       console.log("Attempt to close modal when processing.");
@@ -169,7 +176,7 @@ const OperationDialog = <
         >
       )
       .then(
-        (d: unknown) => {
+        (d) => {
           setStep({
             type: "success",
             data: d,
-- 
cgit v1.2.3


From 77223cd9679baefdcc599903cf549dd0467c9dea Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 20 Nov 2020 20:33:01 +0800
Subject: ...

---
 FrontEnd/src/app/locales/en/admin.json       | 16 +++++++++++++++-
 FrontEnd/src/app/locales/en/translation.json |  3 ++-
 FrontEnd/src/app/locales/zh/admin.json       | 16 +++++++++++++++-
 FrontEnd/src/app/locales/zh/translation.json |  3 ++-
 FrontEnd/src/app/views/admin/Admin.tsx       |  4 ++++
 FrontEnd/src/app/views/admin/AdminNav.tsx    |  7 +++++--
 FrontEnd/src/app/views/admin/UserAdmin.tsx   | 25 ++++++++++++++++++-------
 FrontEnd/src/app/views/common/AppBar.tsx     |  2 +-
 8 files changed, 62 insertions(+), 14 deletions(-)

(limited to 'FrontEnd/src/app/views/common')

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


From 34ce9e1c2734a4dc1b364b76c7042839c9172aef 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/app/views/common')

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


From 439b28b8950b3acd34d415ecca2476647cc226f1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 20 Nov 2020 20:56:59 +0800
Subject: ...

---
 FrontEnd/src/app/views/admin/UserAdmin.tsx                  |  8 ++++----
 FrontEnd/src/app/views/common/OperationDialog.tsx           | 13 +++----------
 FrontEnd/src/app/views/home/TimelineCreateDialog.tsx        |  2 +-
 FrontEnd/src/app/views/settings/index.tsx                   |  2 +-
 .../views/timeline-common/TimelinePropertyChangeDialog.tsx  |  1 -
 FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx    |  2 +-
 FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx        |  1 -
 7 files changed, 10 insertions(+), 19 deletions(-)

(limited to 'FrontEnd/src/app/views/common')

diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 3cfd5880..948cbb25 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -34,7 +34,7 @@ const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({
   return (
     <OperationDialog
       title="admin:user.dialog.create.title"
-      titleColor="create"
+      themeColor="success"
       inputPrompt="admin:user.dialog.create.prompt"
       inputScheme={
         [
@@ -71,7 +71,7 @@ const UserDeleteDialog: React.FC<DialogProps<
       open={open}
       close={close}
       title="admin:user.dialog.delete.title"
-      titleColor="dangerous"
+      themeColor="danger"
       inputPrompt={() => (
         <Trans i18nKey="admin:user.dialog.delete.prompt">
           0<UsernameLabel>{username}</UsernameLabel>2
@@ -94,7 +94,7 @@ const UserModifyDialog: React.FC<DialogProps<
       open={open}
       close={close}
       title="admin:user.dialog.modify.title"
-      titleColor="dangerous"
+      themeColor="danger"
       inputPrompt={() => (
         <Trans i18nKey="admin:user.dialog.modify.prompt">
           0<UsernameLabel>{oldUser.username}</UsernameLabel>2
@@ -147,7 +147,7 @@ const UserPermissionModifyDialog: React.FC<DialogProps<
       open={open}
       close={close}
       title="admin:user.dialog.modifyPermissions.title"
-      titleColor="dangerous"
+      themeColor="danger"
       inputPrompt={() => (
         <Trans i18nKey="admin:user.dialog.modifyPermissions.prompt">
           0<UsernameLabel>{username}</UsernameLabel>2
diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx
index bca5cb87..77ed851f 100644
--- a/FrontEnd/src/app/views/common/OperationDialog.tsx
+++ b/FrontEnd/src/app/views/common/OperationDialog.tsx
@@ -99,7 +99,7 @@ export interface OperationDialogProps<
   open: boolean;
   close: () => void;
   title: I18nText | (() => React.ReactNode);
-  titleColor?: "default" | "dangerous" | "create" | string;
+  themeColor?: "danger" | "success" | string;
   onProcess: (
     inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList>
   ) => Promise<TData>;
@@ -313,7 +313,7 @@ const OperationDialog = <
             {t("operationDialog.cancel")}
           </Button>
           <LoadingButton
-            variant="primary"
+            variant={props.themeColor}
             loading={process}
             disabled={!canProcess}
             onClick={() => {
@@ -362,14 +362,7 @@ const OperationDialog = <
     <Modal show={props.open} onHide={close}>
       <Modal.Header
         className={
-          props.titleColor != null
-            ? "text-" +
-              (props.titleColor === "create"
-                ? "success"
-                : props.titleColor === "dangerous"
-                ? "danger"
-                : props.titleColor)
-            : undefined
+          props.themeColor != null ? "text-" + props.themeColor : undefined
         }
       >
         {title}
diff --git a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
index 786ebb5d..12bbfb54 100644
--- a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
@@ -18,7 +18,7 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
     <OperationDialog
       open={props.open}
       close={props.close}
-      titleColor="success"
+      themeColor="success"
       title="home.createDialog.title"
       inputScheme={
         [
diff --git a/FrontEnd/src/app/views/settings/index.tsx b/FrontEnd/src/app/views/settings/index.tsx
index 1e0517d4..cbdae8ac 100644
--- a/FrontEnd/src/app/views/settings/index.tsx
+++ b/FrontEnd/src/app/views/settings/index.tsx
@@ -20,7 +20,7 @@ const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => {
     <OperationDialog
       open={props.open}
       title="settings.dialogChangePassword.title"
-      titleColor="dangerous"
+      themeColor="danger"
       inputPrompt="settings.dialogChangePassword.prompt"
       inputScheme={[
         {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index ee49586e..aae227e6 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -33,7 +33,6 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
   return (
     <OperationDialog
       title={"timeline.dialogChangeProperty.title"}
-      titleColor="default"
       inputScheme={[
         {
           type: "text",
diff --git a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
index 33609158..0d3199d6 100644
--- a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
@@ -22,7 +22,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
       open={props.open}
       close={props.close}
       title="timeline.deleteDialog.title"
-      titleColor="danger"
+      themeColor="danger"
       inputPrompt={() => {
         return (
           <Trans i18nKey="timeline.deleteDialog.inputPrompt">
diff --git a/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx b/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx
index 0e95b05b..f319ac37 100644
--- a/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx
@@ -13,7 +13,6 @@ const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => {
     <OperationDialog
       open={props.open}
       title="userPage.dialogChangeNickname.title"
-      titleColor="default"
       inputScheme={[
         { type: "text", label: "userPage.dialogChangeNickname.inputLabel" },
       ]}
-- 
cgit v1.2.3