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/pages/access-tokens.tsx

@@ -23,17 +23,17 @@ const { Title, Paragraph } = Typography;
 const availableScopes = {
   CAN_SEND_SYSTEM_MESSAGES: {
     name: 'System messages',
-    description: 'You can send official messages on behalf of the system',
+    description: 'Can send official messages on behalf of the system.',
     color: 'purple',
   },
   CAN_SEND_MESSAGES: {
     name: 'User chat messages',
-    description: 'You can send messages on behalf of a username',
+    description: 'Can send chat messages on behalf of the owner of this token.',
     color: 'green',
   },
   HAS_ADMIN_ACCESS: {
     name: 'Has admin access',
-    description: 'Can perform administrative actions such as moderation, get server statuses, etc',
+    description: 'Can perform administrative actions such as moderation, get server statuses, etc.',
     color: 'red',
   },
 };
@@ -101,9 +101,12 @@ function NewTokenModal(props: Props) {
       okButtonProps={okButtonProps}
     >
       <p>
+        <p>
+          The name will be displayed as the chat user when sending messages with this access token.
+        </p>
         <Input
           value={name}
-          placeholder="Access token name/description"
+          placeholder="Name of bot, service, or integration"
           onChange={input => setName(input.currentTarget.value)}
         />
       </p>
@@ -131,7 +134,6 @@ export default function AccessTokens() {
 
   function handleError(error) {
     console.error('error', error);
-    alert(error);
   }
 
   async function getAccessTokens() {
@@ -176,26 +178,27 @@ export default function AccessTokens() {
       key: 'delete',
       render: (text, record) => (
         <Space size="middle">
-          <Button onClick={() => handleDeleteToken(record.token)} icon={<DeleteOutlined />} />
+          <Button onClick={() => handleDeleteToken(record.accessToken)} icon={<DeleteOutlined />} />
         </Space>
       ),
     },
     {
       title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'displayName',
+      key: 'displayName',
     },
     {
       title: 'Token',
-      dataIndex: 'token',
-      key: 'token',
+      dataIndex: 'accessToken',
+      key: 'accessToken',
       render: text => <Input.Password size="small" bordered={false} value={text} />,
     },
     {
       title: 'Scopes',
       dataIndex: 'scopes',
       key: 'scopes',
-      render: ({ map }: string[]) => <>{map(scope => convertScopeStringToTag(scope))}</>,
+      // eslint-disable-next-line react/destructuring-assignment
+      render: scopes => <>{scopes.map(scope => convertScopeStringToTag(scope))}</>,
     },
     {
       title: 'Last Used',