2021-02-10 11:17:16 +03:00
|
|
|
import React, { useState, useEffect } from 'react';
|
2021-07-09 21:42:01 +03:00
|
|
|
import {
|
|
|
|
Table,
|
|
|
|
Tag,
|
|
|
|
Space,
|
|
|
|
Button,
|
|
|
|
Modal,
|
|
|
|
Checkbox,
|
|
|
|
Input,
|
|
|
|
Typography,
|
|
|
|
Tooltip,
|
|
|
|
Row,
|
|
|
|
Col,
|
|
|
|
} from 'antd';
|
2021-02-14 12:30:42 +03:00
|
|
|
import { DeleteOutlined } from '@ant-design/icons';
|
2021-01-05 04:49:45 +03:00
|
|
|
|
2021-02-10 11:17:16 +03:00
|
|
|
import format from 'date-fns/format';
|
2021-01-05 04:49:45 +03:00
|
|
|
|
2022-04-20 05:57:27 +03:00
|
|
|
import {
|
|
|
|
fetchData,
|
|
|
|
ACCESS_TOKENS,
|
|
|
|
DELETE_ACCESS_TOKEN,
|
|
|
|
CREATE_ACCESS_TOKEN,
|
|
|
|
} from '../../utils/apis';
|
2021-01-05 04:49:45 +03:00
|
|
|
|
2021-02-14 12:30:42 +03:00
|
|
|
const { Title, Paragraph } = Typography;
|
|
|
|
|
2021-01-06 03:51:57 +03:00
|
|
|
const availableScopes = {
|
2021-02-10 11:17:16 +03:00
|
|
|
CAN_SEND_SYSTEM_MESSAGES: {
|
|
|
|
name: 'System messages',
|
2021-07-20 08:02:02 +03:00
|
|
|
description: 'Can send official messages on behalf of the system.',
|
2021-02-10 11:17:16 +03:00
|
|
|
color: 'purple',
|
|
|
|
},
|
|
|
|
CAN_SEND_MESSAGES: {
|
|
|
|
name: 'User chat messages',
|
2021-07-20 08:02:02 +03:00
|
|
|
description: 'Can send chat messages on behalf of the owner of this token.',
|
2021-02-10 11:17:16 +03:00
|
|
|
color: 'green',
|
|
|
|
},
|
|
|
|
HAS_ADMIN_ACCESS: {
|
|
|
|
name: 'Has admin access',
|
2021-07-20 08:02:02 +03:00
|
|
|
description: 'Can perform administrative actions such as moderation, get server statuses, etc.',
|
2021-02-10 11:17:16 +03:00
|
|
|
color: 'red',
|
|
|
|
},
|
2021-01-05 22:29:45 +03:00
|
|
|
};
|
|
|
|
|
2021-07-09 21:42:01 +03:00
|
|
|
function convertScopeStringToTag(scopeString: string) {
|
2021-02-10 11:17:16 +03:00
|
|
|
if (!scopeString || !availableScopes[scopeString]) {
|
|
|
|
return null;
|
|
|
|
}
|
2021-01-05 22:29:45 +03:00
|
|
|
|
2021-02-10 11:17:16 +03:00
|
|
|
const scope = availableScopes[scopeString];
|
2021-01-06 03:51:57 +03:00
|
|
|
|
2021-02-10 11:17:16 +03:00
|
|
|
return (
|
|
|
|
<Tooltip key={scopeString} title={scope.description}>
|
|
|
|
<Tag color={scope.color}>{scope.name}</Tag>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
2021-01-05 22:29:45 +03:00
|
|
|
}
|
|
|
|
|
2021-02-15 11:36:06 +03:00
|
|
|
interface Props {
|
|
|
|
onCancel: () => void;
|
|
|
|
onOk: any; // todo: make better type
|
|
|
|
visible: boolean;
|
|
|
|
}
|
2022-09-07 10:00:28 +03:00
|
|
|
const NewTokenModal = (props: Props) => {
|
2021-02-15 11:36:06 +03:00
|
|
|
const { onOk, onCancel, visible } = props;
|
2021-02-10 11:17:16 +03:00
|
|
|
const [selectedScopes, setSelectedScopes] = useState([]);
|
|
|
|
const [name, setName] = useState('');
|
|
|
|
|
2021-07-09 21:42:01 +03:00
|
|
|
const scopes = Object.keys(availableScopes).map(key => ({
|
|
|
|
value: key,
|
|
|
|
label: availableScopes[key].description,
|
|
|
|
}));
|
2021-02-10 11:17:16 +03:00
|
|
|
|
|
|
|
function onChange(checkedValues) {
|
|
|
|
setSelectedScopes(checkedValues);
|
|
|
|
}
|
|
|
|
|
|
|
|
function saveToken() {
|
2021-02-15 11:36:06 +03:00
|
|
|
onOk(name, selectedScopes);
|
2021-02-10 11:17:16 +03:00
|
|
|
|
|
|
|
// Clear the modal
|
|
|
|
setSelectedScopes([]);
|
|
|
|
setName('');
|
|
|
|
}
|
|
|
|
|
|
|
|
const okButtonProps = {
|
|
|
|
disabled: selectedScopes.length === 0 || name === '',
|
|
|
|
};
|
|
|
|
|
|
|
|
function selectAll() {
|
|
|
|
setSelectedScopes(Object.keys(availableScopes));
|
|
|
|
}
|
2021-07-09 21:42:01 +03:00
|
|
|
const checkboxes = scopes.map(singleEvent => (
|
|
|
|
<Col span={8} key={singleEvent.value}>
|
|
|
|
<Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox>
|
|
|
|
</Col>
|
|
|
|
));
|
2021-02-10 11:17:16 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Modal
|
|
|
|
title="Create New Access token"
|
2021-02-15 11:36:06 +03:00
|
|
|
visible={visible}
|
2021-02-10 11:17:16 +03:00
|
|
|
onOk={saveToken}
|
2021-02-15 11:36:06 +03:00
|
|
|
onCancel={onCancel}
|
2021-02-10 11:17:16 +03:00
|
|
|
okButtonProps={okButtonProps}
|
|
|
|
>
|
|
|
|
<p>
|
2021-07-20 08:02:02 +03:00
|
|
|
<p>
|
|
|
|
The name will be displayed as the chat user when sending messages with this access token.
|
|
|
|
</p>
|
2021-02-10 11:17:16 +03:00
|
|
|
<Input
|
|
|
|
value={name}
|
2021-07-20 08:02:02 +03:00
|
|
|
placeholder="Name of bot, service, or integration"
|
2021-02-10 11:17:16 +03:00
|
|
|
onChange={input => setName(input.currentTarget.value)}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p>
|
2021-02-15 11:36:06 +03:00
|
|
|
Select the permissions this access token will have. It cannot be edited after it's
|
|
|
|
created.
|
2021-02-10 11:17:16 +03:00
|
|
|
</p>
|
2021-04-20 03:59:04 +03:00
|
|
|
<Checkbox.Group style={{ width: '100%' }} value={selectedScopes} onChange={onChange}>
|
2021-07-09 21:42:01 +03:00
|
|
|
<Row>{checkboxes}</Row>
|
2021-04-20 03:59:04 +03:00
|
|
|
</Checkbox.Group>
|
2021-02-14 12:30:42 +03:00
|
|
|
|
|
|
|
<p>
|
|
|
|
<Button type="primary" onClick={selectAll}>
|
|
|
|
Select all
|
|
|
|
</Button>
|
|
|
|
</p>
|
2021-02-10 11:17:16 +03:00
|
|
|
</Modal>
|
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
2021-01-05 22:29:45 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
const AccessTokens = () => {
|
2021-02-10 11:17:16 +03:00
|
|
|
const [tokens, setTokens] = useState([]);
|
|
|
|
const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
|
|
|
|
|
2021-02-15 11:36:06 +03:00
|
|
|
function handleError(error) {
|
|
|
|
console.error('error', error);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function getAccessTokens() {
|
|
|
|
try {
|
|
|
|
const result = await fetchData(ACCESS_TOKENS);
|
|
|
|
setTokens(result);
|
|
|
|
} catch (error) {
|
|
|
|
handleError(error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
getAccessTokens();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
async function handleDeleteToken(token) {
|
|
|
|
try {
|
|
|
|
await fetchData(DELETE_ACCESS_TOKEN, {
|
|
|
|
method: 'POST',
|
|
|
|
data: { token },
|
|
|
|
});
|
|
|
|
getAccessTokens();
|
|
|
|
} catch (error) {
|
|
|
|
handleError(error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function handleSaveToken(name: string, scopes: string[]) {
|
|
|
|
try {
|
|
|
|
const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
|
|
|
|
method: 'POST',
|
|
|
|
data: { name, scopes },
|
|
|
|
});
|
|
|
|
setTokens(tokens.concat(newToken));
|
|
|
|
} catch (error) {
|
|
|
|
handleError(error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-10 11:17:16 +03:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: '',
|
|
|
|
key: 'delete',
|
|
|
|
render: (text, record) => (
|
|
|
|
<Space size="middle">
|
2021-07-20 08:02:02 +03:00
|
|
|
<Button onClick={() => handleDeleteToken(record.accessToken)} icon={<DeleteOutlined />} />
|
2021-02-10 11:17:16 +03:00
|
|
|
</Space>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Name',
|
2021-07-20 08:02:02 +03:00
|
|
|
dataIndex: 'displayName',
|
|
|
|
key: 'displayName',
|
2021-02-10 11:17:16 +03:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Token',
|
2021-07-20 08:02:02 +03:00
|
|
|
dataIndex: 'accessToken',
|
|
|
|
key: 'accessToken',
|
2021-02-15 11:36:06 +03:00
|
|
|
render: text => <Input.Password size="small" bordered={false} value={text} />,
|
2021-02-10 11:17:16 +03:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Scopes',
|
|
|
|
dataIndex: 'scopes',
|
|
|
|
key: 'scopes',
|
2021-07-20 08:02:02 +03:00
|
|
|
// eslint-disable-next-line react/destructuring-assignment
|
|
|
|
render: scopes => <>{scopes.map(scope => convertScopeStringToTag(scope))}</>,
|
2021-02-10 11:17:16 +03:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Last Used',
|
|
|
|
dataIndex: 'lastUsed',
|
|
|
|
key: 'lastUsed',
|
|
|
|
render: lastUsed => {
|
|
|
|
if (!lastUsed) {
|
|
|
|
return 'Never';
|
2021-01-05 04:49:45 +03:00
|
|
|
}
|
2021-02-10 11:17:16 +03:00
|
|
|
const dateObject = new Date(lastUsed);
|
|
|
|
return format(dateObject, 'P p');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const showCreateTokenModal = () => {
|
|
|
|
setIsTokenModalVisible(true);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleTokenModalSaveButton = (name, scopes) => {
|
|
|
|
setIsTokenModalVisible(false);
|
|
|
|
handleSaveToken(name, scopes);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleTokenModalCancel = () => {
|
|
|
|
setIsTokenModalVisible(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Title>Access Tokens</Title>
|
|
|
|
<Paragraph>
|
|
|
|
Access tokens are used to allow external, 3rd party tools to perform specific actions on
|
|
|
|
your Owncast server. They should be kept secure and never included in client code, instead
|
|
|
|
they should be kept on a server that you control.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
Read more about how to use these tokens, with examples, at{' '}
|
2021-02-26 23:38:55 +03:00
|
|
|
<a
|
2021-03-04 11:53:50 +03:00
|
|
|
href="https://owncast.online/docs/integrations/?source=admin"
|
2021-02-26 23:38:55 +03:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
our documentation
|
|
|
|
</a>
|
|
|
|
.
|
2021-02-10 11:17:16 +03:00
|
|
|
</Paragraph>
|
|
|
|
|
|
|
|
<Table rowKey="token" columns={columns} dataSource={tokens} pagination={false} />
|
|
|
|
<br />
|
|
|
|
<Button type="primary" onClick={showCreateTokenModal}>
|
|
|
|
Create Access Token
|
|
|
|
</Button>
|
|
|
|
<NewTokenModal
|
|
|
|
visible={isTokenModalVisible}
|
|
|
|
onOk={handleTokenModalSaveButton}
|
|
|
|
onCancel={handleTokenModalCancel}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
|
|
|
export default AccessTokens;
|