antd#PageHeader JavaScript Examples
The following examples show how to use
antd#PageHeader.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Header.jsx From ui with MIT License | 6 votes |
|
Header = (props) => {
const {
experimentId, experimentData, title, extra,
} = props;
const experiment = useSelector((state) => state?.experiments[experimentId]);
const experimentName = experimentData?.experimentName || experiment?.name;
const truncateText = (text) => (
(text && text.length > 28) ? `${text.substr(0, 27)}…` : text
);
return (
<>
<NextSeo
title={experimentData ? `${title} · ${truncateText(experimentName)}` : title}
/>
<PageHeader
className={integrationTestConstants.classes.PAGE_HEADER}
title={title}
style={{ width: '100%', paddingTop: '10px', paddingBottom: '10px' }}
extra={(
<Space size='large'>
<Space>
<HelpButton />
<FeedbackButton />
<ReferralButton />
{extra}
</Space>
<UserButton />
</Space>
)}
/>
</>
);
}
Example #2
| Source File: about.js From hashcat.launcher with MIT License | 6 votes |
|
render() {
return (
<>
<PageHeader
title="About"
/>
<Content style={{ padding: '16px 24px' }}>
<Typography>
<Paragraph>
hashcat.launcher is a cross-platform app that run and control hashcat
</Paragraph>
<Paragraph>
it is designed to make it easier to use hashcat offering a friendly graphical user interface
</Paragraph>
<Title level={5}>Contribute</Title>
<Link target="_blank" href="https://github.com/s77rt/hashcat.launcher/issues/new/">Report a bug / Request a feature</Link>
<Title level={5}>License</Title>
<Paragraph>
hashcat.launcher is licensed under the MIT License
</Paragraph>
<Paragraph>
Copyright © 2021 Abdelhafidh Belalia (s77rt)
</Paragraph>
</Typography>
</Content>
</>
)
}
Example #3
| Source File: index.js From acy-dex-interface with MIT License | 6 votes |
|
AcyPageHeader = ({ onBack, className: styledClassName, ...props }) => {
return (
<PageHeader
{...props}
className={className(styledClassName)}
onBack={() => { onBack ? onBack() : null }}
/>
)
}
Example #4
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/page-header', module).add('basic', () =>
<PageHeader
className="site-page-header"
onBack={() => null}
title="Title"
subTitle="This is a subtitle"
/>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Standard header, suitable for use in scenarios that require a brief description.</p></>) } });
Example #5
| Source File: breadcrumb.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/page-header', module).add('breadcrumb', () =>
<PageHeader
className="site-page-header"
title="Title"
breadcrumb={{ routes }}
subTitle="This is a subtitle"
/>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.</p></>) } });
Example #6
| Source File: content.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/page-header', module).add('content', () =>
<PageHeader
title="Title"
className="site-page-header"
subTitle="This is a subtitle"
tags={<Tag color="blue">Running</Tag>}
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
<DropdownMenu key="more" />,
]}
avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
breadcrumb={{ routes }}
>
<Content
extraContent={
<img
src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
alt="content"
width="100%"
/>
}
>
{content}
</Content>
</PageHeader>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Show all props provided by PageHeader.</p></>) } });
Example #7
| Source File: ghost.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/page-header', module).add('ghost', () =>
<div className="site-page-header-ghost-wrapper">
<PageHeader
ghost={false}
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
]}
>
<Descriptions size="small" column={3}>
<Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
<Descriptions.Item label="Association">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
<Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
<Descriptions.Item label="Remarks">
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
</PageHeader>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.</p></>) } });
Example #8
| Source File: responsive.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/page-header', module).add('responsive', () =>
<>
<PageHeader
className="site-page-header-responsive"
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
]}
footer={
<Tabs defaultActiveKey="1">
<TabPane tab="Details" key="1" />
<TabPane tab="Rule" key="2" />
</Tabs>
}
>
<Content extra={extraContent}>{renderContent()}</Content>
</PageHeader>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Under different screen sizes, there should be different performance</p></>) } });
Example #9
| Source File: Header.jsx From nft-e2e-example with MIT License | 6 votes |
|
// displays a page header
export default function Header() {
return (
<a href="https://nftschool.dev" target="_blank" rel="noopener noreferrer">
<PageHeader
title="? NFT School e2e example"
subTitle="join us at nftschool.dev"
style={{ cursor: "pointer" }}
/>
</a>
);
}
Example #10
| Source File: PageTitle.js From react-portal with MIT License | 6 votes |
|
PageTitle = props => {
return (
<PageHeader
style={{
padding: "8px 16px",
background: props.bgColor,
color: "#fff!important",
marginBottom: 16,
borderRadius: 4,
borderBottom: "1px solid rgb(235, 237, 240)",
textTransform: "capitalize"
}}
title={props.title}
/>
);
}
Example #11
| Source File: Header.jsx From quadratic-diplomacy with MIT License | 6 votes |
|
// displays a page header
export default function Header() {
return (
<a href="https://github.com/carletex/quadratic-diplomacy" target="_blank" rel="noopener noreferrer">
<PageHeader title="Quadratic diplomacy" style={{ cursor: "pointer" }} />
</a>
);
}
Example #12
| Source File: Header.jsx From moonshot with MIT License | 6 votes |
|
// displays a page header
export default function Header() {
return (
<a href="/">
<PageHeader
title={
<div>
<img src="./rocket_2.svg" style={{ maxWidth: 48, marginRight: 8 }} />
MoonshotCollective.space
<span style={{ marginLeft: 16, fontSize: 14 }}>
<a href="https://gov.gitcoin.co/t/workstream-suggestion-public-goods-prototyping/130" target="_blank">
Announcement
</a>
</span>
<span style={{ marginLeft: 16, fontSize: 14 }}>
<a href="https://gitcoin.co/grants/3004/moonshot-collective" target="_blank">
Gitcoin Grant
</a>
</span>
<span style={{ marginLeft: 16, fontSize: 14 }}>Trello (coming soon)</span>
</div>
}
subTitle=""
style={{ cursor: "pointer" }}
/>
</a>
);
}
Example #13
| Source File: Header.jsx From Tai-Shang-NFT-Wallet with MIT License | 6 votes |
|
// displays a page header
export default function Header() {
return (
<a href="https://github.com/leeduckgo/bewater-nft-wallet" target="_blank" rel="noopener noreferrer">
<PageHeader
title="BeWater"
subTitle="? NFT Wallet0x01"
style={{ cursor: "pointer" }}
/>
</a>
);
}
Example #14
| Source File: Broker.js From kafka-map with Apache License 2.0 | 5 votes |
|
render() {
const columns = [{
title: 'ID',
dataIndex: 'id',
key: 'id'
}, {
title: 'Host',
dataIndex: 'host',
key: 'host',
defaultSortOrder: 'ascend',
}, {
title: 'Port',
dataIndex: 'port',
key: 'port',
}, {
title: 'Partitions as Leader',
dataIndex: 'leaderPartitions',
key: 'leaderPartitions',
render: (leaderPartitions, record, index) => {
return <Tooltip title={leaderPartitions.join('、')}>
<Button type="link" size='small'>{leaderPartitions.length}</Button>
</Tooltip>;
}
}, {
title: 'Partitions as Follower',
dataIndex: 'followerPartitions',
key: 'followerPartitions',
render: (followerPartitions, record, index) => {
return <Tooltip title={followerPartitions.join('、')}>
<Button type="link" size='small'>{followerPartitions.length}</Button>
</Tooltip>;
}
}];
return (
<div>
<div className='kd-page-header'>
<PageHeader
className="site-page-header"
onBack={() => {
this.props.history.goBack();
}}
title={this.state.clusterName}
subTitle={<FormattedMessage id="broker-management" />}
/>
</div>
<div className='kd-content'>
<div style={{marginBottom: 20}}>
<Row justify="space-around" align="middle" gutter={24}>
<Col span={8} key={1}>
<Title level={3}>Broker</Title>
</Col>
<Col span={16} key={2} style={{textAlign: 'right'}}>
</Col>
</Row>
</div>
<Table
rowKey='id'
dataSource={this.state.items}
columns={columns}
position={'both'}
size={'small'}
loading={this.state.loading}
pagination={{
showSizeChanger: true,
total: this.state.items.length,
showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
}}
/>
</div>
</div>
);
}
Example #15
| Source File: styles.js From bank-client with MIT License | 5 votes |
|
StyledPageHeader = styled(PageHeader)`
padding-left: 0;
`
Example #16
| Source File: help.js From hashcat.launcher with MIT License | 5 votes |
|
render() {
return (
<>
<PageHeader
title="Help"
/>
<Content style={{ padding: '16px 24px' }}>
<Typography>
<Title level={5}>Frequently Asked Questions</Title>
<Collapse bordered={false}>
<Panel header="What hashcat versions are supported" key="1">
hashcat.launcher supports hashcat v6.2.1 and higher.
</Panel>
<Panel header="How to add hashes, dictionaries, etc..." key="2">
Files are expected to be in the following folders:
<ul>
<li>Hashes: <Text code>/hashcat/hashes</Text></li>
<li>Dictionaries: <Text code>/hashcat/dictionaries</Text></li>
<li>Rules: <Text code>/hashcat/rules</Text></li>
<li>Masks: <Text code>/hashcat/masks</Text></li>
</ul>
</Panel>
<Panel header="Algorithms list is empty" key="3">
Algorithms get loaded automatically and depends on hashcat.
Make sure hashcat exists then go to Settings and click on Rescan.
<br />
hashcat is expected to be in the same directory as hashcat.launcher
inside a subfolder <Text code>/hashcat</Text>.
</Panel>
<Panel header="I added a file but it's not in the list" key="4">
Try perform a manual scan.
Go to Settings then click on Rescan.
</Panel>
<Panel header="What is the difference between an idle task and a queued task" key="5">
An idle task have a priority that is less than zero
<br />
while, a queued task have a priority that is equal or greater than zero.
<br />
<br />
An idle task can only be started manually
<br />
while, a queued task can be started manually or automatically.
</Panel>
</Collapse>
</Typography>
</Content>
</>
)
}
Example #17
| Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
export default function DataTable({ config, DropDownRowMenu, AddNewItem }) {
let { entity, dataTableColumns, dataTableTitle } = config;
dataTableColumns = [
...dataTableColumns,
{
title: "",
render: (row) => (
<Dropdown overlay={DropDownRowMenu({ row })} trigger={["click"]}>
<EllipsisOutlined style={{ cursor: "pointer", fontSize: "24px" }} />
</Dropdown>
),
},
];
const { result: listResult, isLoading: listIsLoading } = useSelector(
selectListItems
);
const { pagination, items } = listResult;
const dispatch = useDispatch();
const handelDataTableLoad = useCallback((pagination) => {
dispatch(crud.list(entity, pagination.current));
}, []);
useEffect(() => {
dispatch(crud.list(entity));
}, []);
return (
<>
<PageHeader
onBack={() => window.history.back()}
title={dataTableTitle}
ghost={false}
extra={[
<Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
Refresh
</Button>,
<AddNewItem key={`${uniqueId()}`} config={config} />,
]}
style={{
padding: "20px 0px",
}}
></PageHeader>
<Table
columns={dataTableColumns}
rowKey={(item) => item._id}
dataSource={items}
pagination={pagination}
loading={listIsLoading}
onChange={handelDataTableLoad}
/>
</>
);
}
Example #18
| Source File: settings.js From hashcat.launcher with MIT License | 5 votes |
|
render() {
return (
<>
<PageHeader
title="Settings"
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={[16, 14]}>
<Col span={12}>
<Statistic title="Hashes" value={this.state._hashes.length} />
</Col>
<Col span={12}>
<Statistic title="Algorithms" value={Object.keys(this.state._algorithms).length} />
</Col>
<Col span={12}>
<Statistic title="Dictionaries" value={this.state._dictionaries.length} />
</Col>
<Col span={12}>
<Statistic title="Rules" value={this.state._rules.length} />
</Col>
<Col span={12}>
<Statistic title="Masks" value={this.state._masks.length} />
</Col>
<Col span={24}>
<Button
icon={<SyncOutlined />}
type="primary"
onClick={this.onClickRescan}
loading={this.state.isLoadingRescan}
>
Rescan
</Button>
</Col>
</Row>
<Row style={{ marginTop: "2rem" }} gutter={[16, 14]}>
<Col span={24}>
<Statistic
title="Task counter"
value={this.state.taskCounter}
/>
<Space>
<Button
style={{ marginTop: 16 }}
type="default"
onClick={this.onClickRefreshTaskCounter}
loading={this.state.isLoadingRefreshTaskCounter}
>
Refresh
</Button>
<Popconfirm
placement="topRight"
title="Are you sure you want to reset the task counter?"
onConfirm={this.onClickResetTaskCounter}
okText="Yes"
cancelText="No"
>
<Button
style={{ marginTop: 16 }}
type="danger"
loading={this.state.isLoadingResetTaskCounter}
>
Reset counter
</Button>
</Popconfirm>
</Space>
</Col>
</Row>
</Content>
</>
)
}
Example #19
| Source File: DataTable.jsx From erp-crm with MIT License | 5 votes |
|
export default function DataTable({ config, DataTableDropMenu }) {
let { entity, dataTableColumns } = config;
const { DATATABLE_TITLE } = config;
dataTableColumns = [
...dataTableColumns,
{
title: '',
render: (row) => (
<Dropdown overlay={DataTableDropMenu({ row, entity })} trigger={['click']}>
<EllipsisOutlined style={{ cursor: 'pointer', fontSize: '24px' }} />
</Dropdown>
),
},
];
const { result: listResult, isLoading: listIsLoading } = useSelector(selectListItems);
const { pagination, items } = listResult;
const dispatch = useDispatch();
const handelDataTableLoad = useCallback((pagination) => {
const options = { page: pagination.current || 1 };
dispatch(erp.list({ entity, options }));
}, []);
// const handelCurrency = () => {
// dispatch(settings.currency({ value: '€' }));
// dispatch(settings.currencyPosition({ position: 'before' }));
// };
useEffect(() => {
dispatch(erp.list({ entity }));
}, []);
return (
<>
<PageHeader
title={DATATABLE_TITLE}
ghost={true}
extra={[
<Button onClick={handelDataTableLoad} key={`${uniqueId()}`} icon={<RedoOutlined />}>
Refresh
</Button>,
// <Button onClick={handelCurrency} key={`${uniqueId()}`} icon={<RedoOutlined />}>
// Change Currency
// </Button>,
<AddNewItem config={config} key={`${uniqueId()}`} />,
]}
style={{
padding: '20px 0px',
}}
></PageHeader>
<Table
columns={dataTableColumns}
rowKey={(item) => item._id}
dataSource={items}
pagination={pagination}
loading={listIsLoading}
onChange={handelDataTableLoad}
/>
</>
);
}
Example #20
| Source File: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function DataTable({ config, DropDownRowMenu, AddNewItem }) {
let { entity, dataTableColumns, dataTableTitle } = config;
dataTableColumns = [
...dataTableColumns,
{
title: '',
render: (row) => (
<Dropdown overlay={DropDownRowMenu({ row })} trigger={['click']}>
<EllipsisOutlined style={{ cursor: 'pointer', fontSize: '24px' }} />
</Dropdown>
),
},
];
const { result: listResult, isLoading: listIsLoading } = useSelector(selectListItems);
const { pagination, items } = listResult;
const dispatch = useDispatch();
const handelDataTableLoad = useCallback((pagination) => {
const options = { page: pagination.current || 1 };
dispatch(crud.list({ entity, options }));
}, []);
useEffect(() => {
dispatch(crud.list({ entity }));
}, []);
return (
<>
<PageHeader
onBack={() => window.history.back()}
title={dataTableTitle}
ghost={false}
extra={[
<Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
Refresh
</Button>,
<AddNewItem key={`${uniqueId()}`} config={config} />,
]}
style={{
padding: '20px 0px',
}}
></PageHeader>
<Table
columns={dataTableColumns}
rowKey={(item) => item._id}
dataSource={items}
pagination={pagination}
loading={listIsLoading}
onChange={handelDataTableLoad}
/>
</>
);
}
Example #21
| Source File: actions.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/page-header', module).add('actions', () =>
<>
<PageHeader
className="site-page-header"
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
]}
>
<Descriptions size="small" column={3}>
<Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
<Descriptions.Item label="Association">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
<Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
<Descriptions.Item label="Remarks">
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
</PageHeader>
<br />
<PageHeader
onBack={() => window.history.back()}
title="Title"
tags={<Tag color="blue">Running</Tag>}
subTitle="This is a subtitle"
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
]}
>
<Row>
<Statistic title="Status" value="Pending" />
<Statistic
title="Price"
prefix="$"
value={568.08}
style={{
margin: '0 32px',
}}
/>
<Statistic title="Balance" prefix="$" value={3345.08} />
</Row>
</PageHeader>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.</p></>) } });
Example #22
| Source File: index.js From online-test-platform with Apache License 2.0 | 5 votes |
|
PageHeaderWrapper = ({
children,
contentWidth,
fluid,
wrapperClassName,
home,
top,
title,
content,
logo,
extraContent,
hiddenBreadcrumb,
...restProps
}) => {
return (
<div style={{ margin: '-24px -24px 0' }} className={classNames(wrapperClassName, styles.main)}>
{top}
<MenuContext.Consumer>
{value => {
return (
<div className={styles.wrapper}>
<div
className={classNames({
[styles.wide]: !fluid && contentWidth === 'Fixed',
})}
>
<PageHeader
title={
<>
{logo && <span className={styles.logo}>{logo}</span>}
<Title
level={4}
style={{
marginBottom: 0,
display: 'inline-block',
}}
>
{title}
</Title>
</>
}
key="pageheader"
{...restProps}
breadcrumb={
!hiddenBreadcrumb &&
conversionBreadcrumbList({
...value,
...restProps,
...(home !== null && {
home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
}),
})
}
className={styles.pageHeader}
linkElement={Link}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
</div>
</div>
);
}}
</MenuContext.Consumer>
{children ? (
<div className={styles['children-content']}>
<GridContent>{children}</GridContent>
</div>
) : null}
</div>
);
}
Example #23
| Source File: Header.js From react-perspective-cropper with MIT License | 5 votes |
|
Header = () => {
return (
<div className='site-page-header'>
<PageHeader ghost={false} title='react-perspective-cropper'>
<Descriptions size='small' column={2}>
<Descriptions.Item label='Package'>
<a href='https://www.npmjs.com/package/react-perspective-cropper'>
<img
alt='npm'
src='https://img.shields.io/npm/v/react-perspective-cropper.svg'
/>
</a>
<a href='https://standardjs.com'>
<img
alt='standardjs'
src='https://img.shields.io/badge/code_style-standard-brightgreen.svg'
/>
</a>
</Descriptions.Item>
<Descriptions.Item label='Description'>
<Paragraph>
React component performing border detection, perspective
correction and simple image filters over a provided image ? ?
</Paragraph>
</Descriptions.Item>
<Descriptions.Item label='Created by'>
Giacomo Cerquone from
<span
aria-label='italy flag'
role='img'
style={{ margin: '0 10px' }}
>
??
</span>
with{' '}
<span aria-label='heart' role='img' style={{ margin: '0 10px' }}>
❤️
</span>
</Descriptions.Item>
<Descriptions.Item label='Info'>
<Paragraph>
Make sure to only use HiRes images!
<br />
<b>
<a
rel='noreferrer'
target='_blank'
href='https://github.com/giacomocerquone/react-perspective-cropper/blob/master/gifs/example-img.jpg?raw=true'
>
You could use this image for example.
</a>
</b>
</Paragraph>
</Descriptions.Item>
</Descriptions>
</PageHeader>
</div>
)
}
Example #24
| Source File: tools.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
return (
<>
<PageHeader
title="Tools"
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={[16, 14]}>
<Col>
<Card
title="Convert cap to hcwpax"
extra={<Button type="link" style={{ padding: '0' }} onClick={this.onClickOpenCapConverterTool}>Open Tool</Button>}
>
<p>Convert a capture file to hcwpax format</p>
<p>Accept a .cap, .pcap or .pcapng file and returns a hash for hashcat mode 22000</p>
</Card>
<Modal
title="Convert cap to hcwpax"
visible={this.state.capConverterToolIsOpen}
onOk={this.onOkCapConverterTool}
onCancel={this.onCancelCapConverterTool}
>
<Row gutter={[16, 14]}>
<Col span={24}>
<Space>
<Upload
accept=".cap,.pcap,.pcapng,.cap.gz,.pcap.gz,.pcapng.gz"
maxCount={1}
showUploadList={false}
onChange={this.onChangeCapConverterToolInput}
disabled={this.state.capConverterToolStatus === "processing"}
beforeUpload={() => {return false;}}
>
<Button type="primary">
Choose a capture file
</Button>
</Upload>
<Checkbox
checked={this.state.capConverterToolSave}
onChange={this.onChangeCapConverterToolSave}
disabled={this.state.capConverterToolStatus === "processing"}
>
Save output to hashes
</Checkbox>
</Space>
</Col>
<Col span={24}>
<Paragraph>
{this.state.capConverterToolStatus === "idle" ? (
<Badge status="default" text="Idle" />
) : this.state.capConverterToolStatus === "processing" ? (
<Badge status="processing" text="Processing" />
) : this.state.capConverterToolStatus === "success" ? (
<Badge status="success" text={"Success ("+Pluralize("network", this.state.capConverterToolOutput.trim().split('\n').length, true)+")"} />
) : this.state.capConverterToolStatus === "error" ? (
this.state.capConverterToolError ? (
<Badge status="error" text={this.state.capConverterToolError} />
) : (
<Badge status="error" text="Unknown Error" />
)
) : (
<Badge status="default" text="Unknown Status" />
)}
{this.state.capConverterToolOutput &&
<>
<pre>
<Text code copyable ellipsis>
{this.state.capConverterToolOutput}
</Text>
</pre>
{this.state.capConverterToolOutput.trim().split('\n').length > 1 &&
<>
<Divider>Separated hashes</Divider>
<pre>
{this.state.capConverterToolOutput.trim().split('\n').map(wpahash => (
<Text code copyable ellipsis>
{wpahash}
</Text>
))}
</pre>
</>
}
</>
}
</Paragraph>
</Col>
</Row>
</Modal>
</Col>
</Row>
</Content>
</>
)
}
Example #25
| Source File: tasks.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
const { taskKey, task } = this.state;
return (
<>
<PageHeader
title="Tasks"
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={16} className="height-100 tree-height-100">
<Col className="max-height-100" span={5}>
<Tree
showIcon
blockNode
treeData={this.state.data}
onSelect={this.onSelect}
selectedKeys={[taskKey]}
style={{
height: '100%',
paddingRight: '.5rem',
overflow: 'auto',
background: '#0a0a0a',
border: '1px solid #303030'
}}
/>
</Col>
<Col className="max-height-100" span={19}>
{task ? (
<Row gutter={[16, 14]} className="height-100" style={{ flexDirection: "column", flexWrap: "nowrap" }}>
<Col flex="0 0 auto">
<Row gutter={[16, 14]}>
<Col span={24}>
<PageHeader
title={task.id}
tags={
task.stats.hasOwnProperty("status") ? (
HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="warning">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="processing">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Tag color="error">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Tag color="success">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Tag color="pink">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Tag color="yellow">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : (
<Tag color="default">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
)
) : null
}
style={{ padding: 0 }}
extra={
<Form layout="inline">
<Form.Item
label="Priority"
>
<InputNumber
min={-1}
max={999}
value={task.priority}
onChange={this.onChangePriority}
readOnly={this.state.isReadOnlyPriority}
bordered={false}
/>
</Form.Item>
<Button
icon={<ControlOutlined />}
onClick={this.onClickArguments}
style={{ marginRight: '1rem' }}
>
Arguments
</Button>
<Popconfirm
placement="topRight"
title="Are you sure you want to delete this task?"
onConfirm={this.onClickDelete}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<DeleteOutlined />}
loading={this.state.isLoadingDelete}
>
Delete
</Button>
</Popconfirm>
</Form>
}
/>
</Col>
<Col span={24}>
{task.stats.hasOwnProperty("progress") ? (
<Progress type="line" percent={Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100)} />
) : (
<Progress type="line" percent={0} />
)}
</Col>
<Col span={24}>
<Row gutter={[12, 10]}>
<Col>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={this.onClickStart}
loading={this.state.isLoadingStart}
>
Start
</Button>
</Col>
<Col>
<Button
icon={<ReloadOutlined />}
onClick={this.onClickRefresh}
loading={this.state.isLoadingRefresh}
>
Refresh
</Button>
</Col>
<Col>
<Button
icon={<PauseOutlined />}
onClick={this.onClickPause}
loading={this.state.isLoadingPause}
>
Pause
</Button>
</Col>
<Col>
<Button
icon={<CaretRightOutlined />}
onClick={this.onClickResume}
loading={this.state.isLoadingResume}
>
Resume
</Button>
</Col>
<Col>
<Button
icon={<EnvironmentOutlined />}
onClick={this.onClickCheckpoint}
loading={this.state.isLoadingCheckpoint}
>
Checkpoint
</Button>
</Col>
<Col>
<Button
icon={<StepForwardOutlined />}
onClick={this.onClickSkip}
loading={this.state.isLoadingSkip}
>
Skip
</Button>
</Col>
<Col>
<Popconfirm
placement="topRight"
title="Are you sure you want to quit this task?"
onConfirm={this.onClickQuit}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<CloseOutlined />}
loading={this.state.isLoadingQuit}
>
Quit
</Button>
</Popconfirm>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col flex="1 1 auto">
<Row gutter={[16, 14]} className="height-100">
<Col className="max-height-100" span={16}>
<Descriptions
column={2}
layout="horizontal"
bordered
>
{task.stats.hasOwnProperty("status") && (
<Descriptions.Item label="Status" span={2}>
{HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="warning" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="processing" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Badge status="error" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Badge status="success" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Badge color="pink" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Badge color="yellow" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : (
<Badge status="default" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("target") && (
<Descriptions.Item label="Target" span={2}>
{task.stats["target"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("progress") && (
<Descriptions.Item label="Progress" span={2}>
{task.stats["progress"][0] + " / " + task.stats["progress"][1] + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"}
{task.stats.hasOwnProperty("guess") && (
<Tooltip title={
<Descriptions bordered size="small" column={1} layout="horizontal">
{task.stats.guess.guess_base !== null ? (
<Descriptions.Item label="Guess Base">{task.stats.guess.guess_base} ({task.stats.guess.guess_base_offset}/{task.stats.guess.guess_base_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Base">-</Descriptions.Item>
)}
{task.stats.guess.guess_mod !== null ? (
<Descriptions.Item label="Guess Mod">{task.stats.guess.guess_mod} ({task.stats.guess.guess_mod_offset}/{task.stats.guess.guess_mod_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Mod">-</Descriptions.Item>
)}
</Descriptions>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("rejected") && (
<Descriptions.Item label="Rejected" span={1}>
{task.stats["rejected"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("restore_point") && (
<Descriptions.Item label="Restore point" span={1}>
{task.stats["restore_point"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_hashes") && (
<Descriptions.Item label="Recovered hashes" span={1}>
{task.stats["recovered_hashes"][0] + " / " + task.stats["recovered_hashes"][1] + " (" + Math.trunc((task.stats["recovered_hashes"][0] / task.stats["recovered_hashes"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_salts") && (
<Descriptions.Item label="Recovered salts" span={1}>
{task.stats["recovered_salts"][0] + " / " + task.stats["recovered_salts"][1] + " (" + Math.trunc((task.stats["recovered_salts"][0] / task.stats["recovered_salts"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("devices") && (
<Descriptions.Item label="Speed" span={2}>
{humanizeSpeed(totalSpeed(task.stats["devices"]))}
<Tooltip title={
<Table
columns={[
{
title: 'ID',
dataIndex: 'id',
key: 'ID'
},
{
title: 'Speed',
dataIndex: 'speed',
key: 'Speed'
},
{
title: 'Temp',
dataIndex: 'temp',
key: 'Temp'
},
{
title: 'Util',
dataIndex: 'util',
key: 'Util'
}
]}
dataSource={task.stats["devices"].map(device =>
({
key: device.device_id,
id: device.device_id,
speed: humanizeSpeed(device.speed),
temp: device.hasOwnProperty("temp") ? device.temp + " °C": "-",
util: device.util + "%",
})
)}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("time_start") && (
<Descriptions.Item label="Started" span={1}>
<Tooltip title={moment.unix(task.stats["time_start"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["time_start"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("estimated_stop") && (
<Descriptions.Item label="ETA" span={1}>
<Tooltip title={moment.unix(task.stats["estimated_stop"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["estimated_stop"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
</Descriptions>
</Col>
<Col className="max-height-100" span={8}>
<div className="height-100" style={{ display: "flex", flexDirection: "column" }}>
<span><CodeOutlined /> Terminal</span>
<pre style={{
flex: 'auto',
overflow: 'auto',
padding: '.5rem',
margin: '0',
border: '1px solid #303030'
}}>
{task.journal.map(j => j.message + "\n")}
</pre>
</div>
</Col>
</Row>
</Col>
</Row>
) : (
"No selected task."
)}
</Col>
</Row>
</Content>
</>
)
}
Example #26
| Source File: newtask.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
return (
<>
<PageHeader
title="New Task"
extra={[
<Upload
key="Import Config"
accept=".json"
maxCount={1}
showUploadList={false}
onChange={this.onClickImportConfig}
beforeUpload={() => {return false;}}
>
<Button
type="text"
icon={<ImportOutlined />}
loading={this.state.isLoadingImportConfig}
>
Import Config
</Button>
</Upload>,
<Button
key="Export Config"
type="text"
icon={<ExportOutlined />}
onClick={this.onClickExportConfig}
loading={this.state.isLoadingExportConfig}
>
Export Config
</Button>
]}
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={[16]}>
<Col span={4}>
<Steps direction="vertical" current={this.state.step} onChange={this.onChangeStep}>
<Step title="Target" icon={<AimOutlined />} description="Select Target" />
<Step title="Attack" icon={<ToolOutlined />} description="Configure Attack" />
<Step title="Advanced" icon={<ExperimentOutlined />} description="Advanced Options" />
<Step title="Output" icon={<ExportOutlined />} description="Set Output" />
<Step title="Finalize" icon={<FileDoneOutlined />} description="Review and Finalize" />
</Steps>
</Col>
<Col span={20}>
<div className="steps-content">
{this.state.step === 0 ? (
<Form layout="vertical">
<Form.Item
label="Hash"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Hash"
value={this.state.hash}
onChange={this.onChangeHash}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._hashes.map(hash =>
<Option value={hash} key={hash} title={hash}>{filename(hash)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Algorithm"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Algorithm"
value={this.state.algorithm}
onChange={this.onChangeAlgorithm}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(this.state._algorithms).map(key =>
<Option value={Number(key)} key={Number(key)}>{key + " - " + this.state._algorithms[key]}</Option>
)}
</Select>
</Form.Item>
</Form>
) : this.state.step === 1 ? (
<Form layout="vertical" requiredMark="optional">
<Form.Item
label="Attack Mode"
required
>
<Radio.Group value={this.state.attackMode} onChange={this.onChangeAttackMode}>
<Radio value={0}>Dictionary Attack</Radio>
<Radio value={1}>Combinator Attack</Radio>
<Radio value={3}>Mask Attack</Radio>
<Radio value={6}>Hybrid1 (Dictionary + Mask)</Radio>
<Radio value={7}>Hybrid2 (Mask + Dictionary)</Radio>
</Radio.Group>
</Form.Item>
{this.state.attackMode === 0 ? (
<>
<Form.Item
label="Dictionaries"
required
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionaries"
size="large"
onChange={this.onChangeDictionaries}
value={this.state.dictionaries}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Rules"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder={"Select Rules [max. "+maxRules+"]"}
size="large"
onChange={this.onChangeRules}
value={this.state.rules}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._rules.map(rule =>
<Option value={rule} key={rule} title={rule}>{filename(rule)}</Option>
)}
</Select>
</Form.Item>
</>
) : this.state.attackMode === 1 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Left Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Left Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Left Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Left Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Right Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Right Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Right Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Right Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : this.state.attackMode === 3 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 6 ? (
<Row gutter={[18, 16]}>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 7 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : (
"Select Attack Mode"
)}
</Form>
) : this.state.step === 2 ? (
<Form layout="vertical">
<Collapse ghost onChange={this.onChangeAdvancedOptionsCollapse} activeKey={this.state.advancedOptionsCollapse}>
<Panel header="General" key="General">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.quiet}
onChange={this.onChangeQuiet}
>
Quiet
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disablePotFile}
onChange={this.onChangeDisablePotFile}
>
Disable Pot File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableLogFile}
onChange={this.onChangeDisableLogFile}
>
Disable Log File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableOptimizedKernel}
onChange={this.onChangeEnableOptimizedKernel}
>
Enable optimized kernel
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableSlowerCandidateGenerators}
onChange={this.onChangeEnableSlowerCandidateGenerators}
>
Enable slower candidate generators
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.removeFoundHashes}
onChange={this.onChangeRemoveFoundHashes}
>
Remove found hashes
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreUsernames}
onChange={this.onChangeIgnoreUsernames}
>
Ignore Usernames
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableSelfTest}
onChange={this.onChangeDisableSelfTest}
>
Disable self-test (Not Recommended)
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreWarnings}
onChange={this.onChangeIgnoreWarnings}
>
Ignore warnings (Not Recommended)
</Checkbox>
</Col>
</Row>
</Panel>
<Panel header="Devices" key="Devices">
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Devices IDs"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices IDs"
size="large"
onChange={this.onChangeDevicesIDs}
value={this.state.devicesIDs}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Array.from(Array(16)).map((x,i) =>
<Option value={i+1} key={i+1}>{"Device #"+(i+1)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Devices Types"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices Types"
size="large"
onChange={this.onChangeDevicesTypes}
value={this.state.devicesTypes}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>CPU</Option>
<Option value={2} key={2}>GPU</Option>
<Option value={3} key={3}>FPGA, DSP, Co-Processor</Option>
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Workload Profile"
tooltip={
<Table
columns={[
{
title: 'Performance',
dataIndex: 'performance',
key: 'Performance'
},
{
title: 'Runtime',
dataIndex: 'runtime',
key: 'Runtime'
},
{
title: 'Power Consumption',
dataIndex: 'powerConsumption',
key: 'Power Consumption'
},
{
title: 'Desktop Impact',
dataIndex: 'desktopImpact',
key: 'Desktop Impact'
}
]}
dataSource={[
{
key: '1',
performance: 'Low',
runtime: '2 ms',
powerConsumption: 'Low',
desktopImpact: 'Minimal'
},
{
key: '2',
performance: 'Default',
runtime: '12 ms',
powerConsumption: 'Economic',
desktopImpact: 'Noticeable'
},
{
key: '3',
performance: 'High',
runtime: '96 ms',
powerConsumption: 'High',
desktopImpact: 'Unresponsive'
},
{
key: '4',
performance: 'Nightmare',
runtime: '480 ms',
powerConsumption: 'Insane',
desktopImpact: 'Headless'
}
]}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Workload Profile"
size="large"
onChange={this.onChangeWorkloadProfile}
value={this.state.workloadProfile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>Low</Option>
<Option value={2} key={2}>Default</Option>
<Option value={3} key={3}>High</Option>
<Option value={4} key={4}>Nightmare</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={[18, 16]}>
<Col>
<Button
loading={this.state.isLoadingDevicesInfo}
onClick={this.onClickDevicesInfo}
>
Devices Info
</Button>
</Col>
<Col>
<Button
loading={this.state.isLoadingBenchmark}
onClick={this.onClickBenchmark}
>
Benchmark
</Button>
</Col>
</Row>
</Panel>
<Panel header="Markov" key="Markov">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.markovDisable}
onChange={this.onChangeMarkovDisable}
>
Disables markov-chains, emulates classic brute-force
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.markovClassic}
onChange={this.onChangeMarkovClassic}
>
Enables classic markov-chains, no per-position
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Threshold X when to stop accepting new markov-chains"
>
<InputNumber
value={this.state.markovThreshold}
onChange={this.onChangeMarkovThreshold}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Monitor" key="Monitor">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.disableMonitor}
onChange={this.onChangeDisableMonitor}
>
Disable Monitor
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Temp Abort (°C)"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Temp Abort (°C)"
size="large"
onChange={this.onChangeTempAbort}
value={this.state.tempAbort}
disabled={this.state.disableMonitor}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={60} key={60}>60 °C</Option>
<Option value={65} key={65}>65 °C</Option>
<Option value={70} key={70}>70 °C</Option>
<Option value={75} key={75}>75 °C</Option>
<Option value={80} key={80}>80 °C</Option>
<Option value={85} key={85}>85 °C</Option>
<Option value={90} key={90}>90 °C</Option>
<Option value={95} key={95}>95 °C</Option>
<Option value={100} key={100}>100 °C</Option>
</Select>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Extra Arguments" key="Extra Arguments">
<Form.Item
label="Extra Arguments"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Extra Arguments"
size="large"
onChange={this.onChangeExtraArguments}
value={this.state.extraArguments.join(" ")}
/>
</Form.Item>
</Panel>
<Panel header="Misc" key="Misc">
<Form.Item
label="Status Timer"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Status Timer"
size="large"
onChange={this.onChangeStatusTimer}
value={this.state.statusTimer}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={10} key={10}>10 Seconds</Option>
<Option value={20} key={20}>20 Seconds</Option>
<Option value={30} key={30}>30 Seconds</Option>
<Option value={45} key={45}>45 Seconds</Option>
<Option value={60} key={60}>60 Seconds</Option>
<Option value={90} key={90}>90 Seconds</Option>
<Option value={120} key={120}>120 Seconds</Option>
<Option value={300} key={300}>300 Seconds</Option>
</Select>
</Form.Item>
</Panel>
</Collapse>
</Form>
) : this.state.step === 3 ? (
<Form layout="vertical">
<Form.Item
label="Output File"
extra={this.state.outputFile ? this.state.outputFile : null}
>
<Button
type="primary"
onClick={this.onChangeOutputFile}
loading={this.state.isLoadingSetOutputFile}
>
Set Output File
</Button>
</Form.Item>
<Form.Item
label="Output Format"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Output Format"
size="large"
onChange={this.onChangeOutputFormat}
value={this.state.outputFormat}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>hash[:salt]</Option>
<Option value={2} key={2}>plain</Option>
<Option value={3} key={3}>hex_plain</Option>
<Option value={4} key={4}>crack_pos</Option>
<Option value={5} key={5}>timestamp absolute</Option>
<Option value={6} key={6}>timestamp relative</Option>
</Select>
</Form.Item>
</Form>
) : this.state.step === 4 ? (
<Space direction="vertical">
<Form layout="vertical">
<Form.Item
label="Priority"
tooltip={
<Typography>
Tasks are started automatically in a descending order of priority.
<br />
Set to -1 to disable auto-start.
</Typography>
}
>
<InputNumber
min={-1}
max={999}
value={this.state.priority}
onChange={this.onChangePriority}
bordered={true}
/>
</Form.Item>
</Form>
<Space size="large" direction="horizontal">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={this.onClickCreateTask}
loading={this.state.isLoadingCreateTask}
>
Create Task
</Button>
<Checkbox
checked={this.state.preserveTaskConfig}
onChange={this.onChangePreserveTaskConfig}
>
Preserve task config
</Checkbox>
</Space>
</Space>
) : null }
</div>
</Col>
</Row>
</Content>
</>
)
}
Example #27
| Source File: Payment.jsx From erp-crm with MIT License | 4 votes |
|
export default function Payment({ config }) {
const { entity, ENTITY_NAME } = config;
const { erpContextAction } = useErpContext();
const { current: currentItem } = useSelector(selectRecordPaymentItem);
const { readPanel, recordPanel } = erpContextAction;
const money = useMoney();
const [itemslist, setItemsList] = useState([]);
const [currentErp, setCurrentErp] = useState({
status: '',
client: {
company: '',
email: '',
phone: '',
address: '',
},
subTotal: 0,
taxTotal: 0,
taxRate: 0,
total: 0,
credit: 0,
number: 0,
year: 0,
});
useEffect(() => {
if (currentItem) {
const { items } = currentItem;
setItemsList(items);
setCurrentErp(currentItem);
}
}, [currentItem]);
useEffect(() => {
console.info('itemslist', itemslist);
}, [itemslist]);
return (
<>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 24 }}
lg={{ span: 20, push: 2 }}
>
<PageHeader
onBack={() => readPanel.close()}
title={`Record Payment for ${ENTITY_NAME} # ${currentErp.number}/${
currentErp.year || ''
}`}
ghost={false}
tags={<Tag color="volcano">{currentErp.status}</Tag>}
// subTitle="This is cuurent erp page"
extra={[
<Button
key={`${uniqueId()}`}
onClick={() => recordPanel.close()}
icon={<CloseCircleOutlined />}
>
Cancel
</Button>,
<Button
key={`${uniqueId()}`}
onClick={() => readPanel.open()}
icon={<FileTextOutlined />}
>
Show Invoice
</Button>,
]}
style={{
padding: '20px 0px',
}}
></PageHeader>
<Divider dashed />
</Col>
</Row>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24, order: 2 }}
sm={{ span: 24, order: 2 }}
md={{ span: 10, order: 2, push: 2 }}
lg={{ span: 10, order: 2, push: 4 }}
>
<div className="space50"></div>
<Descriptions title={`Client : ${currentErp.client.company}`} column={1}>
<Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
<Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
<Divider dashed />
<Descriptions.Item label="Payment Status">{currentErp.paymentStatus}</Descriptions.Item>
<Descriptions.Item label="SubTotal">
{money.amountFormatter({ amount: currentErp.subTotal })}
</Descriptions.Item>
<Descriptions.Item label="Total">
{money.amountFormatter({ amount: currentErp.total })}
</Descriptions.Item>
<Descriptions.Item label="Discount">
{money.amountFormatter({ amount: currentErp.discount })}
</Descriptions.Item>
<Descriptions.Item label="Balance">
{money.amountFormatter({ amount: currentErp.credit })}
</Descriptions.Item>
</Descriptions>
</Col>
<Col
className="gutter-row"
xs={{ span: 24, order: 1 }}
sm={{ span: 24, order: 1 }}
md={{ span: 12, order: 1 }}
lg={{ span: 10, order: 1, push: 2 }}
>
<RecordPayment config={config} />
</Col>
</Row>
</>
);
}
Example #28
| Source File: index.js From pretty-derby with GNU General Public License v3.0 | 4 votes |
|
SeedInput = (props) => {
const [form] = Form.useForm();
const [seed, setSeed] = useState({});
const onFinish = async (value) => {
let tmpSeed = seed;
tmpSeed = Object.assign({}, seed, value);
setSeed(tmpSeed);
// 修整成需要的数据
const formData = { ...tmpSeed };
formData.userId = userId || dbL.get("userId").value();
let updateTime = new Date().getTime();
formData.updateTime = updateTime;
formData["playerId0"] = value["player0"].id;
formData["playerId1"] = value["player1"].id;
formData["playerId2"] = value["player2"].id;
formData["supportId"] = value["support"].id;
delete formData["support"];
delete formData["player0"];
delete formData["player1"];
delete formData["player2"];
// formData[formData['blue0']]=formData['blueLevel0']
// formData[formData['red0']]=formData['redLevel0']
let list = ["0", "1", "2"];
list.forEach((i) => {
//统计蓝色因子
if (formData[formData[`blue${i}`]] !== undefined) {
formData[formData[`blue${i}`]] += formData[`blueLevel${i}`];
} else {
formData[formData[`blue${i}`]] = formData[`blueLevel${i}`];
}
//统计红色因子
if (formData[formData[`red${i}`]] !== undefined) {
formData[formData[`red${i}`]] += formData[`redLevel${i}`];
} else {
formData[formData[`red${i}`]] = formData[`redLevel${i}`];
}
//统计红色因子
if (formData["white"] !== undefined) {
formData["white"] += formData[`whiteNum${i}`];
} else {
formData["white"] = formData[`whiteNum${i}`];
}
//统计ura
if (formData["uraLevel"] !== undefined) {
formData["uraLevel"] += formData[`uraLevel${i}`];
} else {
formData["uraLevel"] = formData[`uraLevel${i}`];
}
});
const res = await axios.post("https://urarawin.com/api/sqlite/add", formData);
if (res.data && res.data.success) {
message.info("成功添加");
props.onFinish();
} else {
message.info("有地方出错了");
}
};
const list = ["主要", "父辈1", "父辈2"];
const getFields = () => {
const children = [];
for (let i = 0; i < 3; i++) {
children.push(
<Col span={8} key={i}>
<PageHeader title={`${list[i]}`} />
<Row>
<Col span={6} offset={4}>
<Form.Item label="角色" name={`player${i}`} rules={[{ required: true }]}>
<PlayerInput />
</Form.Item>
</Col>
</Row>
<Form.Item label="蓝色因子" name={`blue${i}`} rules={[{ required: true }]}>
<Radio.Group>
<Radio.Button value={"speed"}>{"速度"}</Radio.Button>
<Radio.Button value={"stamina"}>{"耐力"}</Radio.Button>
<Radio.Button value={"power"}>{"力量"}</Radio.Button>
<Radio.Button value={"guts"}>{"根性"}</Radio.Button>
<Radio.Button value={"wisdom"}>{"智力"}</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="蓝色因子星数" name={`blueLevel${i}`} rules={[{ required: true }]}>
<Rate count={3} />
</Form.Item>
<Form.Item label="红色因子" name={`red${i}`} rules={[{ required: true }]}>
<Radio.Group>
<Radio.Button value={"grass"}>{"草地/芝"}</Radio.Button>
<Radio.Button value={"dirt"}>{"泥地/ダート"}</Radio.Button>
<hr />
<Radio.Button value={"shortDistance"}>{"短距离"}</Radio.Button>
<Radio.Button value={"mile"}>{"英里"}</Radio.Button>
<Radio.Button value={"mediumDistance"}>{"中距离"}</Radio.Button>
<Radio.Button value={"longDistance"}>{"长距离"}</Radio.Button>
<hr />
<Radio.Button value={"escapeR"}>{"逃"}</Radio.Button>
<Radio.Button value={"leadingR"}>{"先"}</Radio.Button>
<Radio.Button value={"insertR"}>{"差"}</Radio.Button>
<Radio.Button value={"trackingR"}>{"追"}</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="红色因子星数" name={`redLevel${i}`} rules={[{ required: true }]}>
<Rate count={3} />
</Form.Item>
<Form.Item label="绿色因子星数" name={`greenLevel${i}`} initialValue={0}>
<Rate count={3} />
</Form.Item>
<Form.Item label="URA因子星数" name={`uraLevel${i}`} initialValue={0}>
<Rate count={3} />
</Form.Item>
<Form.Item label="白色因子个数" name={`whiteNum${i}`} initialValue={0}>
<Slider min={0} max={10} dots={true} tooltipPlacement={"left"} />
</Form.Item>
</Col>
);
}
return children;
};
return (
<Form name={"因子信息"} form={form} onFinish={onFinish}>
<Alert
message="目前每人只能配置一个种子 自觉维护自己的信息；第一次添加前先刷新 否则可能失败"
type="info"
/>
<Row gutter={24}>{getFields()}</Row>
<Row justify="end">
<Col span={3}>
<Form.Item label="辅助卡" name={"support"} rules={[{ required: true }]}>
<SupportInput />
</Form.Item>
</Col>
<Col span={4} offset={1}>
<Form.Item label="辅助卡突破" name={"supportLevel"} initialValue={0}>
<Rate count={4} />
</Form.Item>
</Col>
<Col span={4} offset={1}>
<Form.Item
label="玩家id"
name="gameId"
rules={[
{ required: true },
({ getFieldValue }) => ({
validator(_, value) {
if (value.match(/^[0-9]\d*$/g) && value.length === 9) {
return Promise.resolve();
}
return Promise.reject(new Error("输入正确的9位数id"));
},
}),
]}
>
<Input placeholder="id" style={{ width: "100%" }} />
</Form.Item>
</Col>
<Col span={2} offset={2}>
<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Col>
</Row>
</Form>
);
}
Example #29
| Source File: new_run.js From screenshot-tracker with MIT License | 4 votes |
|
render() {
const {
runIsSaved,
newRunId,
name,
urls,
delay,
resolutions,
options
} = this.state
if (runIsSaved) {
return <Redirect to={`/result/${newRunId}`} />
}
return (
<Layout style={{ padding: 20 }}>
<PageHeader
title="New Run"
style={{
padding: 0,
marginBottom: 20
}}
// extra={(
// <Button type="default" onClick={this.copySettingsFromLastRun.bind(this)}>
// Copy From Last Run
// </Button>
// )}
/>
<Form layout="vertical">
<Form.Item label="Run Name">
<Input
onChange={(e) => { this.setState({ name: e.target.value }) }}
value={name}
/>
</Form.Item>
<Form.Item label="URLs">
<Input.TextArea
placeholder="One url each line"
rows={6}
onChange={(e) => { this.setState({ urls: e.target.value }) }}
value={urls}
/>
</Form.Item>
<Form.Item label="Screen Sizes">
<Button.Group style={{ width: '100%', justifyItems: 'space-between' }}>
<Button
style={resolutionButtonStyle}
type={resolutions.desktopLarge ? 'primary' : 'default'}
onClick={() => { this.handleResolutionOptionChange('desktopLarge') }}
>
<Icon type="desktop" style={resolutionButtonIconStyle} />
<br />
<b>Desktop (Large)</b>
<br />
1920px
</Button>
<Button
style={resolutionButtonStyle}
type={resolutions.desktop ? 'primary' : 'default'}
onClick={() => { this.handleResolutionOptionChange('desktop') }}
>
<Icon type="laptop" style={resolutionButtonIconStyle} />
<br />
<b>Desktop</b>
<br />
1440px
</Button>
<Button
style={resolutionButtonStyle}
type={resolutions.tabletLandscape ? 'primary' : 'default'}
onClick={() => { this.handleResolutionOptionChange('tabletLandscape') }}
>
<Icon
type="tablet"
style={{ ...resolutionButtonIconStyle, transform: 'rotate(90deg)' }}
/>
<br />
<b>Tablet Landscape</b>
<br />
1024px
</Button>
<Button
style={resolutionButtonStyle}
type={resolutions.tabletPortrait ? 'primary' : 'default'}
onClick={() => { this.handleResolutionOptionChange('tabletPortrait') }}
>
<Icon type="tablet" style={resolutionButtonIconStyle} />
<br />
<b>Tablet Portrait</b>
<br />
768px
</Button>
<Button
style={resolutionButtonStyle}
type={resolutions.mobile ? 'primary' : 'default'}
onClick={() => { this.handleResolutionOptionChange('mobile') }}
>
<Icon type="mobile" style={resolutionButtonIconStyle} />
<br />
<b>Mobile</b>
<br />
350px
</Button>
</Button.Group>
</Form.Item>
<Form.Item label="Delay (seconds)">
<Input
onChange={(e) => { this.setState({ delay: e.target.value }) }}
value={delay}
/>
</Form.Item>
<Form.Item label="Other Options">
{/* <Checkbox onChange={() => { this.handleOptionsChange('meta') }} checked={options.meta}>
<b>Page Meta Tags</b>
<i>(Page Title, Meta Description, Keywords)</i>
</Checkbox>
<br />
<Checkbox onChange={() => { this.handleOptionsChange('og') }} checked={options.og}>
<b>OG Tags</b>
<i>(Share Title, Message, Image)</i>
</Checkbox>
<br /> */}
<Checkbox
onChange={() => { this.handleOptionsChange('lighthouse') }}
checked={options && options.lighthouse}
>
<b>Run Lighthouse Report</b>
<i>(Performance, SEO, Accesibility)</i>
</Checkbox>
</Form.Item>
<Form.Item>
<Button
type="primary"
size="large"
icon="caret-right"
onClick={this.handleSubmit.bind(this)}
>
Start Run
</Button>
</Form.Item>
{/* <pre>{JSON.stringify(this.state, null, 4)}</pre> */}
</Form>
</Layout>
)
}
