Show ban reason in Web UI

Show and update live the reason given for someone being banned in the
Web UI.

packages/lib/link/messages.js

@@ -801,6 +801,7 @@ const userProperties = {
 	"is_admin": { type: "boolean" },
 	"is_banned": { type: "boolean" },
 	"is_whitelisted": { type: "boolean" },
+	"ban_reason": { type: "string" },
 	"instances": { type: "array", items: { type: "integer" }},
 	"is_deleted": { type: "boolean" },
 	"player_stats": PlayerStats.jsonSchema,

packages/master/src/ControlConnection.js

@@ -577,6 +577,7 @@ class ControlConnection extends BaseConnection {
 			is_admin: user.isAdmin,
 			is_banned: user.isBanned,
 			is_whitelisted: user.isWhitelisted,
+			ban_reason: user.banReason,
 			instances: [...user.instances],
 			player_stats: user.playerStats,
 			instance_stats: [...user.instanceStats],
@@ -614,6 +615,7 @@ class ControlConnection extends BaseConnection {
 				is_admin: user.isAdmin,
 				is_banned: user.isBanned,
 				is_whitelisted: user.isWhitelisted,
+				ban_reason: user.banReason,
 				instances: [...user.instances],
 				player_stats: user.playerStats,
 				instance_stats: [...user.instanceStats],

packages/web_ui/src/components/UserViewPage.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useContext, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import {
 	Button, Col, Descriptions, Form, Input, PageHeader, Popconfirm,
-	Popover, Row, Table, Tag, Select, Space, Spin, Switch,
+	Row, Table, Tag, Select, Space, Spin, Switch,
 } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
@@ -34,9 +34,9 @@ export default function UserViewPage() {
 	let [roles, setRoles] = useState(null);
 	let [form] = Form.useForm();
 	let [rolesDirty, setRolesDirty] = useState(false);
+	let [banReasonDirty, setBanReasonDirty] = useState(false);
 	let [applyingRoles, setApplyingRoles] = useState(false);
 	let [rolesError, setRolesError] = useState();
-	let [banUserPopover, setBanUserPopover] = useState(false);
 
 	useEffect(() => {
 		libLink.messages.listRoles.send(control).then(result => {
@@ -46,6 +46,16 @@ export default function UserViewPage() {
 		});
 	}, []);
 
+	useEffect(() => {
+		if (
+			account.hasPermission("core.user.set_banned")
+			&& !banReasonDirty
+			&& user["ban_reason"] !== form.getFieldValue("ban_reason")
+		) {
+			form.setFieldsValue({ "ban_reason": user["ban_reason"] });
+		}
+	}, [account, form, user, banReasonDirty]);
+
 	let nav = [{ name: "Users", path: "/users" }, { name: userName }];
 	if (user.loading) {
 		return <PageLayout nav={nav}>
@@ -215,64 +225,65 @@ export default function UserViewPage() {
 					}}
 				/>
 			</Form.Item>
-			<Form.Item label="Banned">
-				<Space>
-					{user["is_banned"] ? "Yes" : "No"}
-					{account.hasPermission("core.user.set_banned") && <Popover
-						title="Ban user"
-						visible={banUserPopover}
-						trigger="click"
-						onVisibleChange={() => {
-							if (!user["is_banned"]) {
-								setBanUserPopover(!banUserPopover);
-							}
-						}}
-						content={<Form.Item label="Reason">
-							<Row gutter={8}>
-								<Col flex="auto">
-									<Form.Item noStyle name="reason">
-										<Input/>
-									</Form.Item>
-								</Col>
-								<Col flex="0 0 auto">
+			{account.hasPermission("core.user.set_banned")
+				? <Form.Item label="Ban reason">
+					<Row gutter={[8, 8]} justify={"end"}>
+						<Col flex="auto" style={{ minWidth: "20em" }}>
+							<Form.Item noStyle name="ban_reason" initialValue={user["ban_reason"]}>
+								<Input
+									onChange={e => {
+										setBanReasonDirty(e.target.value !== user["ban_reason"]);
+									}}
+								/>
+							</Form.Item>
+						</Col>
+						<Col flex="0 0 auto">
+							{user["is_banned"]
+								? <Space>
 									<Button
-										type="primary"
+										type={banReasonDirty ? "primary" : "default"}
 										onClick={() => {
-											let reason = form.getFieldValue("reason");
 											libLink.messages.setUserBanned.send(control, {
 												name: userName,
 												create: false,
 												banned: true,
-												reason,
+												reason: form.getFieldValue("ban_reason"),
 											}).then(() => {
-												setBanUserPopover(false);
-												updateUser();
-											}).catch(notifyErrorHandler("Error banning user"));
+												setBanReasonDirty(false);
+											}).catch(notifyErrorHandler("Error updating ban"));
 										}}
-									>Ban</Button>
-								</Col>
-							</Row>
-						</Form.Item>}
-					>
-						<Button
-							type="primary"
-							size="small"
-							onClick={() => {
-								if (user["is_banned"]) {
-									libLink.messages.setUserBanned.send(control, {
-										name: userName,
-										create: false,
-										banned: false,
-										reason: "",
-									}).then(() => {
-										updateUser();
-									}).catch(notifyErrorHandler("Error pardoning user"));
-								}
-							}}
-						>{user["is_banned"] ? "Pardon User" : "Ban User"}</Button>
-					</Popover>}
-				</Space>
-			</Form.Item>
+									>Update</Button>
+									<Button
+										onClick={() => {
+											libLink.messages.setUserBanned.send(control, {
+												name: userName,
+												create: false,
+												banned: false,
+												reason: "",
+											}).catch(notifyErrorHandler("Error unbanning user"));
+										}}
+									>Unban</Button>
+								</Space>
+								: <Button
+									type={banReasonDirty ? "primary" : "default"}
+									onClick={() => {
+										libLink.messages.setUserBanned.send(control, {
+											name: userName,
+											create: false,
+											banned: true,
+											reason: form.getFieldValue("ban_reason"),
+										}).then(() => {
+											setBanReasonDirty(false);
+										}).catch(notifyErrorHandler("Error banning user"));
+									}}
+								>Ban</Button>
+							}
+						</Col>
+					</Row>
+				</Form.Item>
+				: user["is_banned"]
+					&& <Form.Item label="Ban reason">{user["ban_reason"]}</Form.Item>
+			}
 		</Form>
 		<SectionHeader title="Player stats" />
 		<Descriptions size="small" bordered column={{ xs: 1, sm: 2, lg: 3 }}>