Files
CHOMPStation2/tgui/packages/tgui_ch/interfaces/MessageMonitor.jsx
CHOMPStation2 85ca379bb2 [MIRROR] [TGUI 5.0 Prep] JS to JSX (#7414)
Co-authored-by: Selis <sirlionfur@hotmail.de>
Co-authored-by: Selis <selis@xynolabs.com>
2023-12-13 23:23:03 +01:00

423 lines
12 KiB
JavaScript

import { decodeHtmlEntities } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend, useLocalState } from '../backend';
import { Box, Button, Dropdown, Flex, Icon, Input, LabeledList, Section, Tabs } from '../components';
import { Window } from '../layouts';
import { TemporaryNotice } from './common/TemporaryNotice';
import { FullscreenNotice } from './common/FullscreenNotice';
export const MessageMonitor = (props, context) => {
const { act, data } = useBackend(context);
const { auth, linkedServer, message, hacking, emag } = data;
let body;
if (hacking || emag) {
body = <MessageMonitorHack />;
} else if (!auth) {
body = <MessageMonitorLogin />;
} else if (linkedServer) {
body = <MessageMonitorContent />;
} else {
body = <Box color="bad">ERROR</Box>;
}
return (
<Window width={670} height={450} resizable>
<Window.Content scrollable>
<TemporaryNotice />
{body}
</Window.Content>
</Window>
);
};
const MessageMonitorHack = (props, context) => {
const { act, data } = useBackend(context);
const { isMalfAI } = data;
return (
<FullscreenNotice title="ERROR">
{isMalfAI ? (
<Box>
Brute-forcing for server key. It will take 20 seconds for every
character that the password has.
</Box>
) : (
<Box>
01000010011100100111010101110100011001010010110
<br />
10110011001101111011100100110001101101001011011100110011
<br />
10010000001100110011011110111001000100000011100110110010
<br />
10111001001110110011001010111001000100000011010110110010
<br />
10111100100101110001000000100100101110100001000000111011
<br />
10110100101101100011011000010000001110100011000010110101
<br />
10110010100100000001100100011000000100000011100110110010
<br />
10110001101101111011011100110010001110011001000000110011
<br />
00110111101110010001000000110010101110110011001010111001
<br />
00111100100100000011000110110100001100001011100100110000
<br />
10110001101110100011001010111001000100000011101000110100
<br />
00110000101110100001000000111010001101000011001010010000
<br />
00111000001100001011100110111001101110111011011110111001
<br />
00110010000100000011010000110000101110011001011100010000
<br />
00100100101101110001000000111010001101000011001010010000
<br />
00110110101100101011000010110111001110100011010010110110
<br />
10110010100101100001000000111010001101000011010010111001
<br />
10010000001100011011011110110111001110011011011110110110
<br />
00110010100100000011000110110000101101110001000000111001
<br />
00110010101110110011001010110000101101100001000000111100
<br />
10110111101110101011100100010000001110100011100100111010
<br />
10110010100100000011010010110111001110100011001010110111
<br />
00111010001101001011011110110111001110011001000000110100
<br />
10110011000100000011110010110111101110101001000000110110
<br />
00110010101110100001000000111001101101111011011010110010
<br />
10110111101101110011001010010000001100001011000110110001
<br />
10110010101110011011100110010000001101001011101000010111
<br />
00010000001001101011000010110101101100101001000000111001
<br />
10111010101110010011001010010000001101110011011110010000
<br />
00110100001110101011011010110000101101110011100110010000
<br />
00110010101101110011101000110010101110010001000000111010
<br />
00110100001100101001000000111001001101111011011110110110
<br />
10010000001100100011101010111001001101001011011100110011
<br />
10010000001110100011010000110000101110100001000000111010
<br />
001101001011011010110010100101110
</Box>
)}
</FullscreenNotice>
);
};
const MessageMonitorLogin = (props, context) => {
const { act, data } = useBackend(context);
const { isMalfAI } = data;
return (
<FullscreenNotice title="Welcome">
<Box fontSize="1.5rem" bold>
<Icon
name="exclamation-triangle"
verticalAlign="middle"
size={3}
mr="1rem"
/>
Unauthorized
</Box>
<Box color="label" my="1rem">
Decryption Key:
<Input
placeholder="Decryption Key"
ml="0.5rem"
onChange={(e, val) => act('auth', { key: val })}
/>
</Box>
{!!isMalfAI && (
<Button icon="terminal" content="Hack" onClick={() => act('hack')} />
)}
<Box color="label">
Please authenticate with the server in order to show additional options.
</Box>
</FullscreenNotice>
);
};
const MessageMonitorContent = (props, context) => {
const { act, data } = useBackend(context);
const { linkedServer } = data;
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
let body;
if (tabIndex === 0) {
body = <MessageMonitorMain />;
} else if (tabIndex === 1) {
body = <MessageMonitorLogs logs={linkedServer.pda_msgs} pda />;
} else if (tabIndex === 2) {
body = <MessageMonitorLogs logs={linkedServer.rc_msgs} rc />;
} else if (tabIndex === 3) {
body = <MessageMonitorAdmin />;
} else if (tabIndex === 4) {
body = <MessageMonitorSpamFilter />;
}
return (
<Fragment>
<Tabs>
<Tabs.Tab
key="Main"
selected={0 === tabIndex}
onClick={() => setTabIndex(0)}>
<Icon name="bars" /> Main Menu
</Tabs.Tab>
<Tabs.Tab
key="MessageLogs"
selected={1 === tabIndex}
onClick={() => setTabIndex(1)}>
<Icon name="font" /> Message Logs
</Tabs.Tab>
<Tabs.Tab
key="RequestLogs"
selected={2 === tabIndex}
onClick={() => setTabIndex(2)}>
<Icon name="bold" /> Request Logs
</Tabs.Tab>
<Tabs.Tab
key="AdminMessage"
selected={3 === tabIndex}
onClick={() => setTabIndex(3)}>
<Icon name="comment-alt" /> Admin Messaging
</Tabs.Tab>
<Tabs.Tab
key="SpamFilter"
selected={4 === tabIndex}
onClick={() => setTabIndex(4)}>
<Icon name="comment-slash" /> Spam Filter
</Tabs.Tab>
<Tabs.Tab key="Logout" color="red" onClick={() => act('deauth')}>
<Icon name="sign-out-alt" /> Log Out
</Tabs.Tab>
</Tabs>
<Box m={2}>{body}</Box>
</Fragment>
);
};
const MessageMonitorMain = (props, context) => {
const { act, data } = useBackend(context);
const { linkedServer } = data;
return (
<Section
title="Main Menu"
buttons={
<Fragment>
<Button
icon="link"
content="Server Link"
onClick={() => act('find')}
/>
<Button
icon="power-off"
content={'Server ' + (linkedServer.active ? 'Enabled' : 'Disabled')}
selected={linkedServer.active}
onClick={() => act('active')}
/>
</Fragment>
}>
<LabeledList>
<LabeledList.Item label="Server Status">
<Box color="good">Good</Box>
</LabeledList.Item>
</LabeledList>
<Button
mt={1}
icon="key"
content="Set Custom Key"
onClick={() => act('pass')}
/>
<Button.Confirm
color="red"
confirmIcon="exclamation-triangle"
icon="exclamation-triangle"
content="Clear Message Logs"
/>
<Button.Confirm
color="red"
confirmIcon="exclamation-triangle"
icon="exclamation-triangle"
content="Clear Request Logs"
/>
</Section>
);
};
const MessageMonitorLogs = (props, context) => {
const { act, data } = useBackend(context);
const { logs, pda, rc } = props;
return (
<Section
title={pda ? 'PDA Logs' : rc ? 'Request Logs' : 'Logs'}
buttons={
<Button.Confirm
color="red"
icon="trash"
confirmIcon="trash"
content="Delete All"
onClick={() => act(pda ? 'del_pda' : 'del_rc')}
/>
}>
<Flex wrap="wrap">
{logs.map((log, i) => (
<Flex.Item m="2px" key={log.ref} basis="49%" grow={i % 2}>
<Section
title={log.sender + ' -> ' + log.recipient}
buttons={
<Button.Confirm
confirmContent="Delete Log?"
color="bad"
icon="trash"
confirmIcon="trash"
onClick={() =>
act('delete', {
id: log.ref,
type: rc ? 'rc' : 'pda',
})
}
/>
}>
{rc ? (
<LabeledList>
<LabeledList.Item label="Message">
{log.message}
</LabeledList.Item>
<LabeledList.Item
label="Verification"
color={log.id_auth === 'Unauthenticated' ? 'bad' : 'good'}>
{decodeHtmlEntities(log.id_auth)}
</LabeledList.Item>
<LabeledList.Item label="Stamp">{log.stamp}</LabeledList.Item>
</LabeledList>
) : (
log.message
)}
</Section>
</Flex.Item>
))}
</Flex>
</Section>
);
};
const MessageMonitorAdmin = (props, context) => {
const { act, data } = useBackend(context);
const {
possibleRecipients,
customsender,
customrecepient,
customjob,
custommessage,
} = data;
const recipientOptions = Object.keys(possibleRecipients);
return (
<Section title="Admin Messaging">
<LabeledList>
<LabeledList.Item label="Sender">
<Input
fluid
value={customsender}
onChange={(e, val) => act('set_sender', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Sender's Job">
<Input
fluid
value={customjob}
onChange={(e, val) => act('set_sender_job', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Recipient">
<Dropdown
value={customrecepient}
options={recipientOptions}
width="100%"
mb={-0.7}
onSelected={(key) =>
act('set_recipient', {
'val': possibleRecipients[key],
})
}
/>
</LabeledList.Item>
<LabeledList.Item label="Message" verticalAlign="top">
<Input
fluid
mb={0.5}
value={custommessage}
onChange={(e, val) => act('set_message', { val: val })}
/>
</LabeledList.Item>
</LabeledList>
<Button
fluid
icon="comment"
content="Send Message"
onClick={() => act('send_message')}
/>
</Section>
);
};
const MessageMonitorSpamFilter = (props, context) => {
const { act, data } = useBackend(context);
const { linkedServer } = data;
return (
<Section title="Spam Filtering">
<LabeledList>
{linkedServer.spamFilter.map((spam) => (
<LabeledList.Item
key={spam.index}
label={spam.index}
buttons={
<Button
icon="trash"
color="bad"
content="Delete"
onClick={() => act('deltoken', { deltoken: spam.index })}
/>
}>
{spam.token}
</LabeledList.Item>
))}
</LabeledList>
<Button
icon="plus"
content="Add New Entry"
onClick={() => act('addtoken')}
/>
</Section>
);
};