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/http/user.ts | 46 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

(limited to 'FrontEnd/src/app/http')

diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts
index a0a02cce..9ba6508f 100644
--- a/FrontEnd/src/app/http/user.ts
+++ b/FrontEnd/src/app/http/user.ts
@@ -12,10 +12,18 @@ import {
   convertToNotModified,
 } from "./common";
 
+export const kUserPermissionList = [
+  "UserManagement",
+  "AllTimelineManagement",
+  "HighlightTimelineManagement",
+] as const;
+
+export type UserPermission = typeof kUserPermissionList[number];
+
 export interface HttpUser {
   uniqueId: string;
   username: string;
-  administrator: boolean;
+  permissions: UserPermission[];
   nickname: string;
 }
 
@@ -54,6 +62,16 @@ export interface IHttpUserClient {
   ): Promise<BlobWithEtag | NotModified>;
   putAvatar(username: string, data: Blob, token: string): Promise<void>;
   changePassword(req: HttpChangePasswordRequest, token: string): Promise<void>;
+  putUserPermission(
+    username: string,
+    permission: UserPermission,
+    token: string
+  ): Promise<void>;
+  deleteUserPermission(
+    username: string,
+    permission: UserPermission,
+    token: string
+  ): Promise<void>;
 }
 
 export class HttpUserClient implements IHttpUserClient {
@@ -119,6 +137,32 @@ export class HttpUserClient implements IHttpUserClient {
       .catch(convertToNetworkError)
       .then();
   }
+
+  putUserPermission(
+    username: string,
+    permission: UserPermission,
+    token: string
+  ): Promise<void> {
+    return axios
+      .put(
+        `${apiBaseUrl}/users/${username}/permissions/${permission}?token=${token}`
+      )
+      .catch(convertToNetworkError)
+      .then();
+  }
+
+  deleteUserPermission(
+    username: string,
+    permission: UserPermission,
+    token: string
+  ): Promise<void> {
+    return axios
+      .delete(
+        `${apiBaseUrl}/users/${username}/permissions/${permission}?token=${token}`
+      )
+      .catch(convertToNetworkError)
+      .then();
+  }
 }
 
 let client: IHttpUserClient = new HttpUserClient();
-- 
cgit v1.2.3


From 711a148fbbf4361f9c0632eff973c2f240a67c5d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 16 Nov 2020 17:20:42 +0800
Subject: ...

---
 FrontEnd/src/app/http/user.ts                 |  8 +++
 FrontEnd/src/app/views/admin/Admin.tsx        | 64 ++++-----------------
 FrontEnd/src/app/views/admin/AdminSubPage.tsx | 44 +++++++++++++++
 FrontEnd/src/app/views/admin/UserAdmin.tsx    | 80 ++++++---------------------
 4 files changed, 80 insertions(+), 116 deletions(-)
 create mode 100644 FrontEnd/src/app/views/admin/AdminSubPage.tsx

(limited to 'FrontEnd/src/app/http')

diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts
index 9ba6508f..92a6433e 100644
--- a/FrontEnd/src/app/http/user.ts
+++ b/FrontEnd/src/app/http/user.ts
@@ -49,6 +49,7 @@ export class HttpChangePasswordBadCredentialError extends Error {
 }
 
 export interface IHttpUserClient {
+  list(): Promise<HttpUser[]>;
   get(username: string): Promise<HttpUser>;
   patch(
     username: string,
@@ -75,6 +76,13 @@ export interface IHttpUserClient {
 }
 
 export class HttpUserClient implements IHttpUserClient {
+  list(): Promise<HttpUser[]> {
+    return axios
+      .get<HttpUser[]>(`${apiBaseUrl}/users`)
+      .then(extractResponseData)
+      .catch(convertToNetworkError);
+  }
+
   get(username: string): Promise<HttpUser> {
     return axios
       .get<HttpUser>(`${apiBaseUrl}/users/${username}`)
diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx
index a64a9bc0..e17da5bc 100644
--- a/FrontEnd/src/app/views/admin/Admin.tsx
+++ b/FrontEnd/src/app/views/admin/Admin.tsx
@@ -1,12 +1,5 @@
 import React, { Fragment } from "react";
-import {
-  Redirect,
-  Route,
-  Switch,
-  useRouteMatch,
-  useHistory,
-} from "react-router";
-import { Nav } from "react-bootstrap";
+import { Redirect, Route, Switch, useRouteMatch, match } from "react-router";
 
 import { AuthUser } from "@/services/user";
 
@@ -16,57 +9,22 @@ interface AdminProps {
   user: AuthUser;
 }
 
-const Admin: React.FC<AdminProps> = (props) => {
+const Admin: React.FC<AdminProps> = ({ user }) => {
   const match = useRouteMatch();
-  const history = useHistory();
-  type TabNames = "users" | "more";
-
-  const tabName = history.location.pathname.replace(match.path + "/", "");
-
-  function toggle(newTab: TabNames): void {
-    history.push(`${match.url}/${newTab}`);
-  }
-
-  const createRoute = (
-    name: string,
-    body: React.ReactNode
-  ): React.ReactNode => {
-    return (
-      <Route path={`${match.path}/${name}`}>
-        <div style={{ height: 56 }} className="flex-fix-length" />
-        <Nav variant="tabs">
-          <Nav.Item>
-            <Nav.Link
-              active={tabName === "users"}
-              onClick={() => {
-                toggle("users");
-              }}
-            >
-              Users
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link
-              active={tabName === "more"}
-              onClick={() => {
-                toggle("more");
-              }}
-            >
-              More
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-        {body}
-      </Route>
-    );
-  };
 
   return (
     <Fragment>
       <Switch>
         <Redirect from={match.path} to={`${match.path}/users`} exact />
-        {createRoute("users", <UserAdmin user={props.user} />)}
-        {createRoute("more", <div>More Page Works</div>)}
+        <Route path={`${match.path}/:name`}>
+          {(p) => {
+            const match = p.match as match<{ name: string }>;
+            const name = match.params["name"];
+            if (name === "users") {
+              return <UserAdmin user={user} />;
+            }
+          }}
+        </Route>
       </Switch>
     </Fragment>
   );
diff --git a/FrontEnd/src/app/views/admin/AdminSubPage.tsx b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
new file mode 100644
index 00000000..5d2df13c
--- /dev/null
+++ b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { useHistory, useRouteMatch } from "react-router";
+
+const AdminSubPage: React.FC = ({ children }) => {
+  const match = useRouteMatch<{ name: string }>();
+  const history = useHistory();
+
+  const name = match.params.name;
+
+  function toggle(newTab: string): void {
+    history.push(`/admin/${newTab}`);
+  }
+
+  return (
+    <>
+      <Nav variant="tabs">
+        <Nav.Item>
+          <Nav.Link
+            active={name === "users"}
+            onClick={() => {
+              toggle("users");
+            }}
+          >
+            Users
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link
+            active={name === "more"}
+            onClick={() => {
+              toggle("more");
+            }}
+          >
+            More
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+      {children}
+    </>
+  );
+};
+
+export default AdminSubPage;
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 4ad9ed09..856e6136 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -10,19 +10,16 @@ import {
 } from "react-bootstrap";
 
 import OperationDialog from "../common/OperationDialog";
+import AdminSubPage from "./AdminSubPage";
+
 import { User, AuthUser } from "@/services/user";
+import { getHttpUserClient } from "@/http/user";
 
 const apiBaseUrl = "/api";
 
-async function fetchUserList(_token: string): Promise<User[]> {
-  const res = await axios.get<User[]>(`${apiBaseUrl}/users`);
-  return res.data;
-}
-
 interface CreateUserInfo {
   username: string;
   password: string;
-  administrator: boolean;
 }
 
 async function createUser(user: CreateUserInfo, token: string): Promise<User> {
@@ -57,16 +54,6 @@ function changePassword(
   });
 }
 
-function changePermission(
-  username: string,
-  newPermission: boolean,
-  token: string
-): Promise<void> {
-  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {
-    administrator: newPermission,
-  });
-}
-
 const kChangeUsername = "changeusername";
 const kChangePassword = "changepassword";
 const kChangePermission = "changepermission";
@@ -103,9 +90,9 @@ const UserItem: React.FC<UserCardProps> = (props) => {
         <Col>
           <p className="mb-0 text-primary">{user.username}</p>
           <small
-            className={user.administrator ? "text-danger" : "text-secondary"}
+            className={user.permissions ? "text-danger" : "text-secondary"}
           >
-            {user.administrator ? "administrator" : "user"}
+            {user.permissions ? "administrator" : "user"}
           </small>
         </Col>
         <Col className="col-auto">
@@ -156,14 +143,12 @@ const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {
         [
           { type: "text", label: "Username" },
           { type: "text", label: "Password" },
-          { type: "bool", label: "Administrator" },
         ] as const
       }
-      onProcess={([username, password, administrator]) =>
+      onProcess={([username, password]) =>
         props.process({
           username: username,
           password: password,
-          administrator: administrator,
         })
       }
       close={props.close}
@@ -316,15 +301,17 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
 
   useEffect(() => {
     let subscribe = true;
-    void fetchUserList(props.user.token).then((us) => {
-      if (subscribe) {
-        setUsers(us);
-      }
-    });
+    void getHttpUserClient()
+      .list()
+      .then((us) => {
+        if (subscribe) {
+          setUsers(us);
+        }
+      });
     return () => {
       subscribe = false;
     };
-  }, [props.user]);
+  }, []);
 
   let dialogNode: React.ReactNode;
   if (dialog)
@@ -389,26 +376,6 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         );
         break;
       case kChangePermission: {
-        const newPermission = dialog.newPermission;
-        dialogNode = (
-          <UserChangePermissionDialog
-            open
-            close={() => setDialog(null)}
-            username={dialog.username}
-            newPermission={newPermission}
-            process={async () => {
-              await changePermission(dialog.username, newPermission, token);
-              setUsers((oldUsers) => {
-                const users = (oldUsers ?? []).slice();
-                const findedUser = users.find(
-                  (u) => u.username === dialog.username
-                );
-                if (findedUser) findedUser.administrator = newPermission;
-                return users;
-              });
-            }}
-          />
-        );
         break;
       }
     }
@@ -419,26 +386,13 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         <UserItem
           key={user.username}
           user={user}
-          onContextMenu={(item) => {
-            setDialog(
-              item === kChangePermission
-                ? {
-                    type: kChangePermission,
-                    username: user.username,
-                    newPermission: !user.administrator,
-                  }
-                : {
-                    type: item,
-                    username: user.username,
-                  }
-            );
-          }}
+          onContextMenu={(item) => {}}
         />
       );
     });
 
     return (
-      <>
+      <AdminSubPage>
         <Button
           variant="success"
           onClick={() =>
@@ -452,7 +406,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         </Button>
         {userComponents}
         {dialogNode}
-      </>
+      </AdminSubPage>
     );
   } else {
     return <Spinner animation="border" />;
-- 
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/http')

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 517101c4475498976fbf4a3cacf8b408cee545e8 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 20 Nov 2020 20:14:12 +0800
Subject: ...

---
 FrontEnd/src/app/http/user.ts              |  10 +-
 FrontEnd/src/app/views/admin/UserAdmin.tsx | 213 +++++++++++++++++++++--------
 2 files changed, 165 insertions(+), 58 deletions(-)

(limited to 'FrontEnd/src/app/http')

diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts
index 243846d1..929956d0 100644
--- a/FrontEnd/src/app/http/user.ts
+++ b/FrontEnd/src/app/http/user.ts
@@ -12,10 +12,14 @@ import {
   convertToNotModified,
 } from "./common";
 
+export const kUserManagement = "UserManagement";
+export const kAllTimelineManagement = "AllTimelineManagement";
+export const kHighlightTimelineManagement = "HighlightTimelineManagement";
+
 export const kUserPermissionList = [
-  "UserManagement",
-  "AllTimelineManagement",
-  "HighlightTimelineManagement",
+  kUserManagement,
+  kAllTimelineManagement,
+  kHighlightTimelineManagement,
 ] as const;
 
 export type UserPermission = typeof kUserPermissionList[number];
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 65cd3b74..bd60381f 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -1,64 +1,20 @@
 import React, { useState, useEffect } from "react";
+import clsx from "clsx";
 import { ListGroup, Row, Col, Spinner, Button } from "react-bootstrap";
 import InlineSVG from "react-inlinesvg";
 import PencilSquareIcon from "bootstrap-icons/icons/pencil-square.svg";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog, {
+  OperationBoolInputInfo,
+} from "../common/OperationDialog";
 
 import { User, AuthUser } from "@/services/user";
-import { getHttpUserClient, HttpUser } from "@/http/user";
-import clsx from "clsx";
-
-const kModify = "modify";
-const kDelete = "delete";
-
-type TModify = typeof kModify;
-type TDelete = typeof kDelete;
-
-type ContextMenuItem = TModify | TDelete;
-
-interface UserCardProps {
-  on: { [key in ContextMenuItem]: () => void };
-  user: User;
-}
-
-const UserItem: React.FC<UserCardProps> = ({ user, on }) => {
-  const [editMaskVisible, setEditMaskVisible] = React.useState<boolean>(false);
-
-  return (
-    <ListGroup.Item className="admin-user-item">
-      <InlineSVG
-        src={PencilSquareIcon}
-        className="float-right icon-button text-warning"
-        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:{" "}
-        {user.permissions.map((permission) => {
-          return (
-            <span key={permission} className="text-danger">
-              {permission}{" "}
-            </span>
-          );
-        })}
-      </div>
-      <div
-        className={clsx("edit-mask", !editMaskVisible && "d-none")}
-        onClick={() => setEditMaskVisible(false)}
-      >
-        <button className="text-button primary" onClick={on["modify"]}>
-          Modify
-        </button>
-        <button className="text-button danger" onClick={on["delete"]}>
-          Delete
-        </button>
-      </div>
-    </ListGroup.Item>
-  );
-};
+import {
+  getHttpUserClient,
+  HttpUser,
+  kUserPermissionList,
+  UserPermission,
+} from "@/http/user";
 
 interface DialogProps<TData = undefined, TReturn = undefined> {
   open: boolean;
@@ -167,6 +123,127 @@ const UserModifyDialog: React.FC<DialogProps<
   );
 };
 
+const UserPermissionModifyDialog: React.FC<DialogProps<
+  {
+    username: string;
+    permissions: UserPermission[];
+  },
+  UserPermission[]
+>> = ({ open, close, token, data: { username, permissions }, onSuccess }) => {
+  const oldPermissionBoolList: boolean[] = kUserPermissionList.map(
+    (permission) => permissions.includes(permission)
+  );
+
+  return (
+    <OperationDialog
+      open={open}
+      close={close}
+      title="Caution"
+      titleColor="dangerous"
+      inputPrompt={() => (
+        <>
+          You are modify permission of user
+          <UsernameLabel>{username}</UsernameLabel> !
+        </>
+      )}
+      inputScheme={kUserPermissionList.map<OperationBoolInputInfo>(
+        (permission, index) => ({
+          type: "bool",
+          label: permission,
+          initValue: oldPermissionBoolList[index],
+        })
+      )}
+      onProcess={async (newPermissionBoolList): Promise<boolean[]> => {
+        for (let index = 0; index < kUserPermissionList.length; index++) {
+          const oldValue = oldPermissionBoolList[index];
+          const newValue = newPermissionBoolList[index];
+          const permission = kUserPermissionList[index];
+          if (oldValue === newValue) continue;
+          if (newValue) {
+            await getHttpUserClient().putUserPermission(
+              username,
+              permission,
+              token
+            );
+          } else {
+            await getHttpUserClient().deleteUserPermission(
+              username,
+              permission,
+              token
+            );
+          }
+        }
+        return newPermissionBoolList;
+      }}
+      onSuccessAndClose={(newPermissionBoolList: boolean[]) => {
+        const permissions: UserPermission[] = [];
+        for (let index = 0; index < kUserPermissionList.length; index++) {
+          if (newPermissionBoolList[index]) {
+            permissions.push(kUserPermissionList[index]);
+          }
+        }
+        onSuccess(permissions);
+      }}
+    />
+  );
+};
+
+const kModify = "modify";
+const kModifyPermission = "permission";
+const kDelete = "delete";
+
+type TModify = typeof kModify;
+type TModifyPermission = typeof kModifyPermission;
+type TDelete = typeof kDelete;
+
+type ContextMenuItem = TModify | TModifyPermission | TDelete;
+
+interface UserItemProps {
+  on: { [key in ContextMenuItem]: () => void };
+  user: User;
+}
+
+const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
+  const [editMaskVisible, setEditMaskVisible] = React.useState<boolean>(false);
+
+  return (
+    <ListGroup.Item className="admin-user-item">
+      <InlineSVG
+        src={PencilSquareIcon}
+        className="float-right icon-button text-warning"
+        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:{" "}
+        {user.permissions.map((permission) => {
+          return (
+            <span key={permission} className="text-danger">
+              {permission}{" "}
+            </span>
+          );
+        })}
+      </div>
+      <div
+        className={clsx("edit-mask", !editMaskVisible && "d-none")}
+        onClick={() => setEditMaskVisible(false)}
+      >
+        <button className="text-button primary" onClick={on[kModify]}>
+          Modify
+        </button>
+        <button className="text-button primary" onClick={on[kModifyPermission]}>
+          Modify Permission
+        </button>
+        <button className="text-button danger" onClick={on[kDelete]}>
+          Delete
+        </button>
+      </div>
+    </ListGroup.Item>
+  );
+};
+
 interface UserAdminProps {
   user: AuthUser;
 }
@@ -181,6 +258,11 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         type: TModify;
         user: HttpUser;
       }
+    | {
+        type: TModifyPermission;
+        username: string;
+        permissions: UserPermission[];
+      }
     | { type: TDelete; username: string };
 
   const [users, setUsers] = useState<User[] | null>(null);
@@ -220,7 +302,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
           />
         );
         break;
-      case "delete":
+      case kDelete:
         dialogNode = (
           <UserDeleteDialog
             open
@@ -242,6 +324,20 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
           />
         );
         break;
+      case kModifyPermission:
+        dialogNode = (
+          <UserPermissionModifyDialog
+            open
+            close={() => setDialog(null)}
+            token={token}
+            data={{
+              username: dialog.username,
+              permissions: dialog.permissions,
+            }}
+            onSuccess={updateUsers}
+          />
+        );
+        break;
     }
   }
 
@@ -258,6 +354,13 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
                 user,
               });
             },
+            permission: () => {
+              setDialog({
+                type: kModifyPermission,
+                username: user.username,
+                permissions: user.permissions,
+              });
+            },
             delete: () => {
               setDialog({
                 type: "delete",
-- 
cgit v1.2.3