mirror of
				https://github.com/owncast/owncast.git
				synced 2025-11-04 13:27:21 +08:00 
			
		
		
		
	* 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,
 | 
						|
};
 |