LogalDeveloper/owncast
0
Fork 0
Code Activity

Admin support for managing users (#245)

Browse Source 
* 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>
This commit is contained in:
Gabe Kangas
2021-07-19 22:02:02 -07:00
committed by GitHub
parent 4aac80196d
commit b10ba1dcc2
26 changed files with 8007 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/pages/access-tokens.tsx
View File

@@ -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',

34
web/pages/chat/messages.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Table, Typography, Tooltip, Button } from 'antd';
import { Table, Typography, Button } from 'antd';
import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
import classNames from 'classnames';
import { ColumnsType } from 'antd/es/table';
@@ -9,12 +9,13 @@ import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from
import { MessageType } from '../../types/chat';
import { isEmptyObject } from '../../utils/format';
import MessageVisiblityToggle from '../../components/message-visiblity-toggle';
import UserPopover from '../../components/user-popover';
const { Title } = Typography;
function createUserNameFilters(messages: MessageType[]) {
const filtered = messages.reduce((acc, curItem) => {
const curAuthor = curItem.author;
const curAuthor = curItem.user.id;
if (!acc.some(item => item.text === curAuthor)) {
acc.push({ text: curAuthor, value: curAuthor });
}
@@ -149,19 +150,18 @@ export default function Chat() {
},
{
title: 'User',
dataIndex: 'author',
key: 'author',
dataIndex: 'user',
key: 'user',
className: 'name-col',
filters: nameFilters,
onFilter: (value, record) => record.author === value,
sorter: (a, b) => a.author.localeCompare(b.author),
onFilter: (value, record) => record.user.id === value,
sorter: (a, b) => a.user.displayName.localeCompare(b.user.displayName),
sortDirections: ['ascend', 'descend'],
ellipsis: true,
render: author => (
<Tooltip placement="topLeft" title={author}>
{author}
</Tooltip>
),
render: user => {
const { displayName } = user;
return <UserPopover user={user}>{displayName}</UserPopover>;
},
width: 110,
},
{
@@ -180,16 +180,16 @@ export default function Chat() {
},
{
title: '',
dataIndex: 'visible',
key: 'visible',
dataIndex: 'hiddenAt',
key: 'hiddenAt',
className: 'toggle-col',
filters: [
{ text: 'Visible messages', value: true },
{ text: 'Hidden messages', value: false },
],
onFilter: (value, record) => record.visible === value,
render: (visible, record) => (
<MessageVisiblityToggle isVisible={visible} message={record} setMessage={updateMessage} />
render: (hiddenAt, record) => (
<MessageVisiblityToggle isVisible={!hiddenAt} message={record} setMessage={updateMessage} />
),
width: 30,
},
@@ -234,10 +234,10 @@ export default function Chat() {
</div>
<Table
size="small"
className="messages-table"
className="table-container"
pagination={{ pageSize: 100 }}
scroll={{ y: 540 }}
rowClassName={record => (!record.visible ? 'hidden' : '')}
rowClassName={record => (record.hiddenAt ? 'hidden' : '')}
dataSource={messages}
columns={chatColumns}
rowKey={row => row.id}

117
web/pages/chat/users.tsx
View File

@@ -1,25 +1,25 @@
import React, { useState, useEffect, useContext } from 'react';
import { Table, Typography } from 'antd';
import { formatDistanceToNow } from 'date-fns';
import { SortOrder } from 'antd/lib/table/interface';
import { Typography } from 'antd';
import { ServerStatusContext } from '../../utils/server-status-context';
import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS } from '../../utils/apis';
import UserTable from '../../components/user-table';
import ClientTable from '../../components/client-table';
import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../../utils/apis';
const { Title } = Typography;
const FETCH_INTERVAL = 60 * 1000; // 1 min
export const FETCH_INTERVAL = 10 * 1000; // 10 sec
export default function ChatUsers() {
const context = useContext(ServerStatusContext);
const { online } = context || {};
const [viewerInfo, setViewerInfo] = useState([]);
const [disabledUsers, setDisabledUsers] = useState([]);
const [clients, setClients] = useState([]);
const getInfo = async () => {
try {
const result = await fetchData(VIEWERS_OVER_TIME);
setViewerInfo(result);
const result = await fetchData(DISABLED_USERS);
setDisabledUsers(result);
} catch (error) {
console.log('==== error', error);
}
@@ -36,79 +36,42 @@ export default function ChatUsers() {
let getStatusIntervalId = null;
getInfo();
if (online) {
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
};
}
return () => [];
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
};
}, [online]);
// todo - check to see if broadcast active has changed. if so, start polling.
if (!viewerInfo.length) {
return 'no info';
}
const columns = [
{
title: 'User name',
dataIndex: 'username',
key: 'username',
render: username => username || '-',
sorter: (a, b) => a.username - b.username,
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'Messages sent',
dataIndex: 'messageCount',
key: 'messageCount',
sorter: (a, b) => a.messageCount - b.messageCount,
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'Connected Time',
dataIndex: 'connectedAt',
key: 'connectedAt',
render: time => formatDistanceToNow(new Date(time)),
sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'User Agent',
dataIndex: 'userAgent',
key: 'userAgent',
},
{
title: 'Location',
dataIndex: 'geo',
key: 'geo',
render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
},
];
const connectedUsers = online ? (
<>
<ClientTable data={clients} />
<p className="description">
Visit the{' '}
<a
href="https://owncast.online/docs/viewers/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
documentation
</a>{' '}
to configure additional details about your viewers.
</p>
</>
) : (
<p className="description">
When a stream is active and chat is enabled, connected chat clients will be displayed here.
</p>
);
return (
<>
<div>
<Typography.Title>Connected</Typography.Title>
<Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
<p>
<Typography.Text type="secondary">
Visit the{' '}
<a
href="https://owncast.online/docs/viewers/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
documentation
</a>{' '}
to configure additional details about your viewers.
</Typography.Text>{' '}
</p>
</div>
<Title>Connected Chat Participants</Title>
{connectedUsers}
<br />
<br />
<Title>Banned Users</Title>
<UserTable data={disabledUsers} />
</>
);
}

32
web/pages/config-chat.tsx
View File

@@ -6,7 +6,8 @@ import ToggleSwitch from '../components/config/form-toggleswitch';
import { UpdateArgs } from '../types/config-section';
import {
FIELD_PROPS_DISABLE_CHAT,
TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST,
TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES,
TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,
} from '../utils/config-constants';
import { ServerStatusContext } from '../utils/server-status-context';
@@ -16,8 +17,9 @@ export default function ConfigChat() {
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
const { chatDisabled } = serverConfig;
const { usernameBlocklist } = serverConfig;
const { chatDisabled, forbiddenUsernames } = serverConfig;
const { instanceDetails } = serverConfig;
const { welcomeMessage } = instanceDetails;
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
@@ -30,14 +32,16 @@ export default function ConfigChat() {
handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
}
function handleChatUsernameBlockListChange(args: UpdateArgs) {
handleFieldChange({ fieldName: 'usernameBlocklist', value: args.value });
function handleChatForbiddenUsernamesChange(args: UpdateArgs) {
const updatedForbiddenUsernameList = args.value.split(',');
handleFieldChange({ fieldName: args.fieldName, value: updatedForbiddenUsernameList });
}
useEffect(() => {
setFormDataValues({
chatDisabled,
usernameBlocklist,
forbiddenUsernames,
welcomeMessage,
});
}, [serverConfig]);
@@ -56,12 +60,18 @@ export default function ConfigChat() {
onChange={handleChatDisableChange}
/>
<TextFieldWithSubmit
fieldName="usernameBlocklist"
{...TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST}
fieldName="forbiddenUsernames"
{...TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES}
type={TEXTFIELD_TYPE_TEXTAREA}
value={formDataValues.usernameBlocklist}
initialValue={usernameBlocklist}
onChange={handleChatUsernameBlockListChange}
value={formDataValues.forbiddenUsernames}
onChange={handleChatForbiddenUsernamesChange}
/>
<TextFieldWithSubmit
fieldName="welcomeMessage"
{...TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE}
type={TEXTFIELD_TYPE_TEXTAREA}
value={formDataValues.welcomeMessage}
onChange={handleFieldChange}
/>
</div>
</div>

34
web/pages/offline-notice.tsx
View File

@@ -66,11 +66,6 @@ export default function Offline({ logs = [], config }: OfflineProps) {
</div>
),
},
{
icon: <MessageTwoTone twoToneColor="#0366d6" />,
title: 'Chat is disabled',
content: 'Chat will continue to be disabled until you begin a live stream.',
},
{
icon: <PlaySquareTwoTone twoToneColor="#f9826c" />,
title: 'Embed your video onto other sites',
@@ -86,18 +81,16 @@ export default function Offline({ logs = [], config }: OfflineProps) {
</div>
),
},
{
icon: <QuestionCircleTwoTone twoToneColor="#ffd33d" />,
title: 'Not sure what to do next?',
content: (
<div>
If you&apos;re having issues or would like to know how to customize and configure your
Owncast server visit <Link href="/help">the help page.</Link>
</div>
),
},
];
if (!config?.chatDisabled) {
data.push({
icon: <MessageTwoTone twoToneColor="#0366d6" />,
title: 'Chat is disabled',
content: <span>Chat will continue to be disabled until you begin a live stream.</span>,
});
}
if (!config?.yp?.enabled) {
data.push({
icon: <ProfileTwoTone twoToneColor="#D18BFE" />,
@@ -111,6 +104,17 @@ export default function Offline({ logs = [], config }: OfflineProps) {
});
}
data.push({
icon: <QuestionCircleTwoTone twoToneColor="#ffd33d" />,
title: 'Not sure what to do next?',
content: (
<div>
If you&apos;re having issues or would like to know how to customize and configure your
Owncast server visit <Link href="/help">the help page.</Link>
</div>
),
});
return (
<>
<Row>

13
web/pages/webhooks.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react/destructuring-assignment */
import { DeleteOutlined } from '@ant-design/icons';
import {
Button,
@@ -128,7 +129,6 @@ export default function Webhooks() {
function handleError(error) {
console.error('error', error);
alert(error);
}
async function getWebhooks() {
@@ -197,7 +197,16 @@ export default function Webhooks() {
title: 'Events',
dataIndex: 'events',
key: 'events',
render: ({ map }: string[]) => <>{map(event => convertEventStringToTag(event))}</>,
render: events => (
<>
{
// eslint-disable-next-line arrow-body-style
events.map(event => {
return convertEventStringToTag(event);
})
}
</>
),
},
];