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>pull/1886/head
Gabe Kangas
4 years ago
committed by
GitHub
26 changed files with 8007 additions and 238 deletions
@ -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, |
||||||
|
}; |
||||||
@ -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[]; |
||||||
|
} |
||||||
@ -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, |
||||||
|
}; |
||||||
@ -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[]; |
||||||
|
} |
||||||
@ -1,2 +1,3 @@ |
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/types/global" />
|
/// <reference types="next/types/global" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue