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>
This commit is contained in:
Gabe Kangas
146
web/components/user-popover.tsx
Normal file
146
web/components/user-popover.tsx
Normal file
@@ -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,
|
||||
};
|
||||
Reference in New Issue
Block a user