b10ba1dcc2
* 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>
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
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,
|
|
};
|