diff options
Diffstat (limited to 'FrontEnd/src/app/views/admin/UserAdmin.tsx')
| -rw-r--r-- | FrontEnd/src/app/views/admin/UserAdmin.tsx | 460 |
1 files changed, 460 insertions, 0 deletions
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx new file mode 100644 index 00000000..18b77ca8 --- /dev/null +++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx @@ -0,0 +1,460 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { + ListGroup, + Row, + Col, + Dropdown, + Spinner, + Button, +} from "react-bootstrap"; + +import OperationDialog from "../common/OperationDialog"; +import { User, UserWithToken } from "@/services/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> { + 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, + }); +} + +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"; +const kDelete = "delete"; + +type TChangeUsername = typeof kChangeUsername; +type TChangePassword = typeof kChangePassword; +type TChangePermission = typeof kChangePermission; +type TDelete = typeof kDelete; + +type ContextMenuItem = + | TChangeUsername + | TChangePassword + | TChangePermission + | TDelete; + +interface UserCardProps { + onContextMenu: (item: ContextMenuItem) => void; + user: User; +} + +const UserItem: React.FC<UserCardProps> = (props) => { + const user = props.user; + + const createClickCallback = (item: ContextMenuItem): (() => void) => { + return () => { + props.onContextMenu(item); + }; + }; + + return ( + <ListGroup.Item className="container"> + <Row className="align-items-center"> + <Col> + <p className="mb-0 text-primary">{user.username}</p> + <small + className={user.administrator ? "text-danger" : "text-secondary"} + > + {user.administrator ? "administrator" : "user"} + </small> + </Col> + <Col className="col-auto"> + <Dropdown> + <Dropdown.Toggle variant="warning" className="text-light"> + 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)} + > + Delete + </Dropdown.Item> + </Dropdown.Menu> + </Dropdown> + </Col> + </Row> + </ListGroup.Item> + ); +}; + +interface DialogProps { + open: boolean; + close: () => void; +} + +interface CreateUserDialogProps extends DialogProps { + process: (user: CreateUserInfo) => Promise<void>; +} + +const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => { + return ( + <OperationDialog + title="Create" + titleColor="create" + inputPrompt="You are creating a new user." + inputScheme={[ + { type: "text", label: "Username" }, + { type: "text", label: "Password" }, + { type: "bool", label: "Administrator" }, + ]} + onProcess={([username, password, administrator]) => + props.process({ + username: username as string, + password: password as string, + administrator: administrator as boolean, + }) + } + close={props.close} + open={props.open} + /> + ); +}; + +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) => { + return ( + <OperationDialog + open={props.open} + close={props.close} + title="Dangerous" + titleColor="dangerous" + inputPrompt={() => ( + <> + {"You are deleting user "} + <UsernameLabel>{props.username}</UsernameLabel> + {" !"} + </> + )} + onProcess={props.process} + /> + ); +}; + +interface UserModifyDialogProps<T> extends DialogProps { + username: string; + process: (value: T) => Promise<void>; +} + +const UserChangeUsernameDialog: React.FC<UserModifyDialogProps<string>> = ( + props +) => { + return ( + <OperationDialog + open={props.open} + close={props.close} + title="Caution" + titleColor="dangerous" + inputPrompt={() => ( + <> + {"You are change the username of user "} + <UsernameLabel>{props.username}</UsernameLabel> + {" !"} + </> + )} + inputScheme={[{ type: "text", label: "New Username" }]} + onProcess={([newUsername]) => { + return props.process(newUsername as string); + }} + /> + ); +}; + +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 as string); + }} + /> + ); +}; + +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} + /> + ); +}; + +interface UserAdminProps { + user: UserWithToken; +} + +const UserAdmin: React.FC<UserAdminProps> = (props) => { + type DialogInfo = + | null + | { + type: "create"; + } + | { type: TDelete; username: string } + | { + type: TChangeUsername; + username: string; + } + | { + type: TChangePassword; + username: string; + } + | { + type: TChangePermission; + username: string; + newPermission: boolean; + }; + + const [users, setUsers] = useState<User[] | null>(null); + const [dialog, setDialog] = useState<DialogInfo>(null); + + const token = props.user.token; + + useEffect(() => { + let subscribe = true; + void fetchUserList(props.user.token).then((us) => { + if (subscribe) { + setUsers(us); + } + }); + return () => { + subscribe = false; + }; + }, [props.user]); + + let dialogNode: React.ReactNode; + 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]); + }} + /> + ); + break; + case "delete": + dialogNode = ( + <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; + }); + }} + /> + ); + break; + case kChangePassword: + dialogNode = ( + <UserChangePasswordDialog + open + close={() => setDialog(null)} + username={dialog.username} + process={async (newPassword) => { + await changePassword(dialog.username, newPassword, token); + }} + /> + ); + 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; + } + } + + if (users) { + const userComponents = users.map((user) => { + return ( + <UserItem + key={user.username} + user={user} + onContextMenu={(item) => { + setDialog( + item === kChangePermission + ? { + type: kChangePermission, + username: user.username, + newPermission: !user.administrator, + } + : { + type: item, + username: user.username, + } + ); + }} + /> + ); + }); + + return ( + <> + <Button + variant="success" + onClick={() => + setDialog({ + type: "create", + }) + } + className="align-self-end" + > + Create User + </Button> + {userComponents} + {dialogNode} + </> + ); + } else { + return <Spinner animation="border" />; + } +}; + +export default UserAdmin; |