Add support for managing IP-based bans. For https://github.com/owncast/owncast/issues/1534 (#434)

web/components/banned-ips-table.tsx

@@ -0,0 +1,75 @@
+import { Table, Button } from 'antd';
+import format from 'date-fns/format';
+import { SortOrder } from 'antd/lib/table/interface';
+import React from 'react';
+import { StopTwoTone } from '@ant-design/icons';
+import { User } from '../types/chat';
+import { BANNED_IP_REMOVE, fetchData } from '../utils/apis';
+
+function formatDisplayDate(date: string | Date) {
+  return format(new Date(date), 'MMM d H:mma');
+}
+
+async function removeIPAddressBan(ipAddress: String) {
+  try {
+    await fetchData(BANNED_IP_REMOVE, {
+      data: { value: ipAddress },
+      method: 'POST',
+      auth: true,
+    });
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+}
+
+export default function BannedIPsTable({ data }: UserTableProps) {
+  const columns = [
+    {
+      title: 'IP Address',
+      dataIndex: 'ipAddress',
+      key: 'ipAddress',
+    },
+    {
+      title: 'Reason',
+      dataIndex: 'notes',
+      key: 'notes',
+    },
+    {
+      title: 'Created',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (date: Date) => formatDisplayDate(date),
+      sorter: (a: any, b: any) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: '',
+      key: 'block',
+      className: 'actions-col',
+      render: (_, ip) => (
+        <Button
+          title="Remove IP Address Ban"
+          onClick={() => removeIPAddressBan(ip.ipAddress)}
+          icon={<StopTwoTone twoToneColor="#ff4d4f" />}
+          className="block-user-button"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      pagination={{ hideOnSinglePage: true }}
+      className="table-container"
+      columns={columns}
+      dataSource={data}
+      size="large"
+      rowKey="ipAddress"
+    />
+  );
+}
+
+interface UserTableProps {
+  data: User[];
+}

web/pages/chat/users.tsx

@@ -1,9 +1,16 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Tabs } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
-import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
+import {
+  CONNECTED_CLIENTS,
+  fetchData,
+  DISABLED_USERS,
+  MODERATORS,
+  BANNED_IPS,
+} from '../../utils/apis';
 import UserTable from '../../components/user-table';
 import ClientTable from '../../components/client-table';
+import BannedIPsTable from '../../components/banned-ips-table';
 
 const { TabPane } = Tabs;
 
@@ -14,6 +21,7 @@ export default function ChatUsers() {
   const { online } = context || {};
 
   const [disabledUsers, setDisabledUsers] = useState([]);
+  const [ipBans, setIPBans] = useState([]);
   const [clients, setClients] = useState([]);
   const [moderators, setModerators] = useState([]);
 
@@ -38,6 +46,13 @@ export default function ChatUsers() {
     } catch (error) {
       console.error('error fetching moderators', error);
     }
+
+    try {
+      const result = await fetchData(BANNED_IPS);
+      setIPBans(result);
+    } catch (error) {
+      console.error('error fetching banned ips', error);
+    }
   };
 
   useEffect(() => {
@@ -78,10 +93,13 @@ export default function ChatUsers() {
       <TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
         {connectedUsers}
       </TabPane>
-      <TabPane tab={<span>Banned {online ? `(${disabledUsers.length})` : null}</span>} key="2">
+      <TabPane tab={<span>Banned Users ({disabledUsers.length})</span>} key="2">
         <UserTable data={disabledUsers} />
       </TabPane>
-      <TabPane tab={<span>Moderators {online ? `(${moderators.length})` : null}</span>} key="3">
+      <TabPane tab={<span>IP Bans ({ipBans.length})</span>} key="3">
+        <BannedIPsTable data={ipBans} />
+      </TabPane>
+      <TabPane tab={<span>Moderators ({moderators.length})</span>} key="4">
         <UserTable data={moderators} />
       </TabPane>
     </Tabs>

web/utils/apis.ts

@@ -37,6 +37,12 @@ export const DISABLED_USERS = `${API_LOCATION}chat/users/disabled`;
 // Disable/enable a single user
 export const USER_ENABLED_TOGGLE = `${API_LOCATION}chat/users/setenabled`;
 
+// Get banned IP addresses
+export const BANNED_IPS = `${API_LOCATION}chat/users/ipbans`;
+
+// Remove IP ban
+export const BANNED_IP_REMOVE = `${API_LOCATION}chat/users/ipbans/remove`;
+
 // Disable/enable a single user
 export const USER_SET_MODERATOR = `${API_LOCATION}chat/users/setmoderator`;