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,
+};