Admin support for managing users (#245)

* First pass at displaying user data in admin

* Hide chat blurb on home page if chat is disabled

* Hide sidebar chat section if chat is disabled

* Block/unblock user interface for https://github.com/owncast/owncast/issues/1096

* Simplify past display name handling

* Updates to reflect the api access token change

* Update paths

* Clean up the new access token page

* Fix linter

* Update linter workflow action

* Cleanup

* Fix exception rendering table row

* Commit next-env file that seems to be required with next 11

* chat refactor - admin adjustments (#250)

* add useragent parser; clean up some html;

* some ui changes
- use modal instead of popover to confirm block/unblock user
- update styles, table styles for consistency
- rename some user/chat labels in nav and content

* format user info modal a bit

* add some sort of mild treatment and delay while processing ban of users

* rename button to 'ban'

* add some notes

* Prettified Code!

* fix disableChat toggle for nav bar

* Support sorting the disabled user list

* Fix linter error around table sorting

* No longer restoring messages on unban so change message prompt

* Standardize on forbiddenUsername terminology

* The linter broke the webhooks page. Fixed it. Linter is probably pissed.

* Move chat welcome message to chat config

* Other submenus don't have icons so remove these ones

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>

web/components/ban-user-button.tsx

@@ -0,0 +1,85 @@
+import { Modal, Button } from 'antd';
+import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
+import { USER_ENABLED_TOGGLE, fetchData } from '../utils/apis';
+import { User } from '../types/chat';
+
+interface BanUserButtonProps {
+  user: User;
+  isEnabled: Boolean; // = this user's current status
+  label?: string;
+  onClick?: () => void;
+}
+export default function BanUserButton({ user, isEnabled, label, onClick }: BanUserButtonProps) {
+  async function buttonClicked({ id }): Promise<Boolean> {
+    const data = {
+      userId: id,
+      enabled: !isEnabled, // set user to this value
+    };
+    try {
+      const result = await fetchData(USER_ENABLED_TOGGLE, {
+        data,
+        method: 'POST',
+        auth: true,
+      });
+      return result.success;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+    return false;
+  }
+
+  const actionString = isEnabled ? 'ban' : 'unban';
+  const icon = isEnabled ? (
+    <ExclamationCircleFilled style={{ color: 'var(--ant-error)' }} />
+  ) : (
+    <QuestionCircleFilled style={{ color: 'var(--ant-warning)' }} />
+  );
+
+  const content = (
+    <>
+      Are you sure you want to {actionString} <strong>{user.displayName}</strong>
+      {isEnabled ? ' and remove their messages?' : '?'}
+    </>
+  );
+
+  const confirmBlockAction = () => {
+    Modal.confirm({
+      title: `Confirm ${actionString}`,
+      content,
+      onCancel: () => {},
+      onOk: () =>
+        new Promise((resolve, reject) => {
+          const result = buttonClicked(user);
+          if (result) {
+            // wait a bit before closing so the user/client tables repopulate
+            // GW: TODO: put users/clients data in global app context instead, then call a function here to update that state. (current in another branch)
+            setTimeout(() => {
+              resolve(result);
+              onClick?.();
+            }, 3000);
+          } else {
+            reject();
+          }
+        }),
+      okType: 'danger',
+      okText: isEnabled ? 'Absolutely' : null,
+      icon,
+    });
+  };
+
+  return (
+    <Button
+      onClick={confirmBlockAction}
+      size="small"
+      icon={isEnabled ? <StopTwoTone twoToneColor="#ff4d4f" /> : null}
+      className="block-user-button"
+    >
+      {label || actionString}
+    </Button>
+  );
+}
+BanUserButton.defaultProps = {
+  label: '',
+  onClick: null,
+};

web/components/client-table.tsx

@@ -0,0 +1,80 @@
+import { Table } from 'antd';
+import { SortOrder } from 'antd/lib/table/interface';
+import { ColumnsType } from 'antd/es/table';
+import { formatDistanceToNow } from 'date-fns';
+import { Client } from '../types/chat';
+import UserPopover from './user-popover';
+import BanUserButton from './ban-user-button';
+import { formatUAstring } from '../utils/format';
+
+export default function ClientTable({ data }: ClientTableProps) {
+  const columns: ColumnsType<Client> = [
+    {
+      title: 'Display Name',
+      key: 'username',
+      // eslint-disable-next-line react/destructuring-assignment
+      render: (client: Client) => {
+        const { user, connectedAt, messageCount, userAgent } = client;
+        const connectionInfo = { connectedAt, messageCount, userAgent };
+        return (
+          <UserPopover user={user} connectionInfo={connectionInfo}>
+            <span className="display-name">{user.displayName}</span>
+          </UserPopover>
+        );
+      },
+      sorter: (a: any, b: any) => a.user.displayName - b.user.displayName,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'Messages sent',
+      dataIndex: 'messageCount',
+      key: 'messageCount',
+      className: 'number-col',
+      sorter: (a: any, b: any) => a.messageCount - b.messageCount,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'Connected Time',
+      dataIndex: 'connectedAt',
+      key: 'connectedAt',
+      defaultSortOrder: 'ascend',
+      render: (time: Date) => formatDistanceToNow(new Date(time)),
+      sorter: (a: any, b: any) =>
+        new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      key: 'userAgent',
+      render: (ua: string) => formatUAstring(ua),
+    },
+    {
+      title: 'Location',
+      dataIndex: 'geo',
+      key: 'geo',
+      render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
+    },
+    {
+      title: '',
+      key: 'block',
+      className: 'actions-col',
+      render: (_, row) => <BanUserButton user={row.user} isEnabled={!row.user.disabledAt} />,
+    },
+  ];
+
+  return (
+    <Table
+      className="table-container"
+      pagination={{ hideOnSinglePage: true }}
+      columns={columns}
+      dataSource={data}
+      size="small"
+      rowKey="id"
+    />
+  );
+}
+
+interface ClientTableProps {
+  data: Client[];
+}

web/components/config/edit-instance-details.tsx

@@ -12,7 +12,6 @@ import {
   TEXTFIELD_PROPS_INSTANCE_URL,
   TEXTFIELD_PROPS_SERVER_NAME,
   TEXTFIELD_PROPS_SERVER_SUMMARY,
-  TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,
   API_YP_SWITCH,
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
@@ -97,14 +96,6 @@ export default function EditInstanceDetails() {
         initialValue={instanceDetails.summary}
         onChange={handleFieldChange}
       />
-      <TextFieldWithSubmit
-        fieldName="welcomeMessage"
-        {...TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE}
-        type={TEXTFIELD_TYPE_TEXTAREA}
-        value={formDataValues.welcomeMessage}
-        initialValue={instanceDetails.welcomeMessage}
-        onChange={handleFieldChange}
-      />
 
       {/* Logo section */}
       <EditLogo />

web/components/main-layout.tsx

@@ -16,7 +16,6 @@ import {
   QuestionCircleOutlined,
   MessageOutlined,
   ExperimentOutlined,
-  UserOutlined,
 } from '@ant-design/icons';
 import classNames from 'classnames';
 import { upgradeVersionAvailable } from '../utils/apis';
@@ -36,7 +35,7 @@ export default function MainLayout(props) {
 
   const context = useContext(ServerStatusContext);
   const { serverConfig, online, broadcaster, versionNumber } = context || {};
-  const { instanceDetails } = serverConfig;
+  const { instanceDetails, chatDisabled } = serverConfig;
 
   const [currentStreamTitle, setCurrentStreamTitle] = useState('');
 
@@ -78,8 +77,7 @@ export default function MainLayout(props) {
   const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
   const upgradeVersionString = `${upgradeVersion}` || '';
   const upgradeMessage = `Upgrade to v${upgradeVersionString}`;
-
-  const chatMenuItemStyle = 'block'; // upgradeVersion ? 'block' : 'none';
+  const chatMenuItemStyle = chatDisabled ? 'none' : 'block';
 
   const clearAlertMessage = () => {
     alertMessage.setMessage(null);
@@ -129,7 +127,7 @@ export default function MainLayout(props) {
       <Sider width={240} className="side-nav">
         <Menu
           defaultSelectedKeys={[route.substring(1) || 'home']}
-          defaultOpenKeys={['current-stream-menu', 'utilities-menu', 'configuration']}
+          defaultOpenKeys={[]}
           mode="inline"
           className="menu-container"
         >
@@ -149,15 +147,15 @@ export default function MainLayout(props) {
 
           <SubMenu
             key="chat-config"
-            title="Chat"
+            title="Chat &amp; Users"
             icon={<MessageOutlined />}
             style={{ display: chatMenuItemStyle }}
           >
-            <Menu.Item key="messages" icon={<MessageOutlined />} title="Chat utilities">
+            <Menu.Item key="messages" title="Chat utilities">
               <Link href="/chat/messages">Messages</Link>
             </Menu.Item>
 
-            <Menu.Item key="chat-users" icon={<UserOutlined />} title="Chat utilities">
+            <Menu.Item key="chat-users" title="Chat utilities">
               <Link href="/chat/users">Users</Link>
             </Menu.Item>
           </SubMenu>

web/components/user-popover.tsx

@@ -0,0 +1,146 @@
+// This displays a clickable user name (or whatever children element you provide), and displays a simple tooltip of created time. OnClick a modal with more information about the user is displayed.
+
+import { useState } from 'react';
+import { Divider, Modal, Tooltip, Typography, Row, Col } from 'antd';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import format from 'date-fns/format';
+import { ReactNode } from 'react-markdown';
+import BlockUserbutton from './ban-user-button';
+
+import { User, UserConnectionInfo } from '../types/chat';
+import { formatDisplayDate } from './user-table';
+import { formatUAstring } from '../utils/format';
+
+interface UserPopoverProps {
+  user: User;
+  connectionInfo?: UserConnectionInfo | null;
+  children: ReactNode;
+}
+
+export default function UserPopover({ user, connectionInfo, children }: UserPopoverProps) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const handleShowModal = () => {
+    setIsModalVisible(true);
+  };
+  const handleCloseModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const { displayName, createdAt, previousNames, nameChangedAt, disabledAt } = user;
+  const { connectedAt, messageCount, userAgent } = connectionInfo || {};
+
+  let lastNameChangeDate = null;
+  const nameList = previousNames && [...previousNames];
+
+  if (previousNames && previousNames.length > 1 && nameChangedAt) {
+    lastNameChangeDate = new Date(nameChangedAt);
+    // reverse prev names for display purposes
+    nameList.reverse();
+  }
+
+  const dateObject = new Date(createdAt);
+  const createdAtDate = format(dateObject, 'PP pp');
+
+  const lastNameChangeDuration = lastNameChangeDate
+    ? formatDistanceToNow(lastNameChangeDate)
+    : null;
+
+  return (
+    <>
+      <Tooltip
+        title={
+          <>
+            Created at: {createdAtDate}.
+            <br /> Click for more info.
+          </>
+        }
+        placement="bottomLeft"
+      >
+        <button
+          type="button"
+          aria-label="Display more details about this user"
+          className="user-item-container"
+          onClick={handleShowModal}
+        >
+          {children}
+        </button>
+      </Tooltip>
+
+      <Modal
+        destroyOnClose
+        width={600}
+        cancelText="Close"
+        okButtonProps={{ style: { display: 'none' } }}
+        title={`User details: ${displayName}`}
+        visible={isModalVisible}
+        onOk={handleCloseModal}
+        onCancel={handleCloseModal}
+      >
+        <div className="user-details">
+          <Typography.Title level={4}>{displayName}</Typography.Title>
+          <p className="created-at">User created at {createdAtDate}.</p>
+          <Row gutter={16}>
+            {connectionInfo && (
+              <Col md={lastNameChangeDate ? 12 : 24}>
+                <Typography.Title level={5}>
+                  This user is currently connected to Chat.
+                </Typography.Title>
+                <ul className="connection-info">
+                  <li>
+                    <strong>Active for:</strong> {formatDistanceToNow(new Date(connectedAt))}
+                  </li>
+                  <li>
+                    <strong>Messages sent:</strong> {messageCount}
+                  </li>
+                  <li>
+                    <strong>User Agent:</strong>
+                    <br />
+                    {formatUAstring(userAgent)}
+                  </li>
+                </ul>
+              </Col>
+            )}
+            {lastNameChangeDate && (
+              <Col md={connectionInfo ? 12 : 24}>
+                <Typography.Title level={5}>This user is also seen as:</Typography.Title>
+                <ul className="previous-names-list">
+                  {nameList.map((name, index) => (
+                    <li className={index === 0 ? 'latest' : ''}>
+                      <span className="user-name-item">{name}</span>
+                      {index === 0 ? ` (Changed ${lastNameChangeDuration} ago)` : ''}
+                    </li>
+                  ))}
+                </ul>
+              </Col>
+            )}
+          </Row>
+          <Divider />
+          {disabledAt ? (
+            <>
+              This user was banned on <code>{formatDisplayDate(disabledAt)}</code>.
+              <br />
+              <br />
+              <BlockUserbutton
+                label="Unban this user"
+                user={user}
+                isEnabled={false}
+                onClick={handleCloseModal}
+              />
+            </>
+          ) : (
+            <BlockUserbutton
+              label="Ban this user"
+              user={user}
+              isEnabled
+              onClick={handleCloseModal}
+            />
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+UserPopover.defaultProps = {
+  connectionInfo: null,
+};

web/components/user-table.tsx

@@ -0,0 +1,64 @@
+import { Table } from 'antd';
+import format from 'date-fns/format';
+import { SortOrder } from 'antd/lib/table/interface';
+import { User } from '../types/chat';
+import UserPopover from './user-popover';
+import BanUserButton from './ban-user-button';
+
+export function formatDisplayDate(date: string | Date) {
+  return format(new Date(date), 'MMM d H:mma');
+}
+export default function UserTable({ data }: UserTableProps) {
+  const columns = [
+    {
+      title: 'Last Known Display Name',
+      dataIndex: 'displayName',
+      key: 'displayName',
+      // eslint-disable-next-line react/destructuring-assignment
+      render: (displayName: string, user: User) => (
+        <UserPopover user={user}>
+          <span className="display-name">{displayName}</span>
+        </UserPopover>
+      ),
+    },
+    {
+      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: 'Disabled at',
+      dataIndex: 'disabledAt',
+      key: 'disabledAt',
+      defaultSortOrder: 'descend' as SortOrder,
+      render: (date: Date) => (date ? formatDisplayDate(date) : null),
+      sorter: (a: any, b: any) =>
+        new Date(a.disabledAt).getTime() - new Date(b.disabledAt).getTime(),
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: '',
+      key: 'block',
+      className: 'actions-col',
+      render: (_, user) => <BanUserButton user={user} isEnabled={!user.disabledAt} />,
+    },
+  ];
+
+  return (
+    <Table
+      pagination={{ hideOnSinglePage: true }}
+      className="table-container"
+      columns={columns}
+      dataSource={data}
+      size="small"
+      rowKey="id"
+    />
+  );
+}
+
+interface UserTableProps {
+  data: User[];
+}