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 vote down vote up
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 vote down vote up
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 &copy; 2021 Abdelhafidh Belalia (s77rt)
							</Paragraph>
					</Typography>
				</Content>
			</>
		)
	}
Example #3
Source File: index.js    From acy-dex-interface with MIT License 6 votes vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
// 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 vote down vote up
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 vote down vote up
// 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 vote down vote up
// 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 vote down vote up
// 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 vote down vote up
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 vote down vote up
StyledPageHeader = styled(PageHeader)`
  padding-left: 0;
`
Example #16
Source File: help.js    From hashcat.launcher with MIT License 5 votes vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
							&nbsp;
							<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>
		)
	}