antd#Button JavaScript Examples

action = (
  <Fragment>
    <ButtonGroup>
      <Button>操作</Button>
      <Button>操作</Button>
      <Dropdown overlay={menu} placement="bottomRight">
        <Button>
          <Icon type="ellipsis" />
        </Button>
      </Dropdown>
    </ButtonGroup>
    <Button type="primary">主操作</Button>
  </Fragment>
)

noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

OrderSuccessPage = (props) => {
  const storeDetails = useSelector((state) => state.user.user);
  const storeUrl = `/store/${
    storeDetails &&
    storeDetails.storeName &&
    storeDetails.storeName.toLowerCase().split(' ').join('-')
  }-${storeDetails && storeDetails._id}`;

  return (
    <div className='cover' 
    data-testid='orderSuccessMainDiv'
    >
      <div className='store-logo'>
        {storeDetails && storeDetails.imageUrl === null ? undefined : (
          <img
            alt='logo'
            src={storeDetails && storeDetails.imageUrl}
            className='image'
            width='150'
            style={{ borderRadius: '50%' }}
          />
        )}
      </div>
      <h2 className='text'>Order confirmed Successfully!</h2>
      <p className='text'>Your order for the item was successfully processed</p>
      <p className='text'>
        Arrangements are being made for you to receive your product
      </p>

      <Button id='delete-btn' type='link' htmltype='button'>
        <Link onClick={() => localStorage.clear()} to={storeUrl}>
          Back to {storeDetails && storeDetails.storeName}
        </Link>
      </Button>
    </div>
  );
}

describe("<DownloadVideo>", () => {
	let wrapper;

	afterEach(() => {
		wrapper.unmount();
	});

	test("should render self without error", () => {
		wrapper = shallow(<DownloadVideo />);
	});

	test("should have a download button", () => {
		wrapper = shallow(<DownloadVideo />);

		expect(wrapper.exists(Button)).toBe(true);
	});

	test("should have a hidden anchor element to hold download blob ref", () => {
		wrapper = shallow(<DownloadVideo />);

		expect(wrapper.exists("a")).toBe(true);
	});
});

TodoListUI = (props) => {
  return (
    <div style={{ margin: '10px' }}>
      <div>
        <Input
          placeholder={props.inputValue}
          style={{ width: '250px', marginRight: '10px' }}
          onChange={props.changeInputValue}
          value={props.inputValue}
        />
        <Button
          type="primary"
          onClick={props.clickBtn}
        >增加</Button>
      </div>
      <div style={{ margin: '10px', width: '300px' }}>
        <List
          bordered
          dataSource={props.list}
          renderItem={(item, index) => (<List.Item onClick={() => { props.deleteItem(index) }}>{item}</List.Item>)}
        ></List>
      </div>
    </div>
  );
}

render() {
        return (
         
            <Row className="login" justify="center" align="middle"	>
                <Col span={8}>
                    <h1>欢迎登录后台管理系统</h1>
                    <Form className="login-form" initialValues={{ remember: true }}>
                        <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!!!' }]}>
                            <Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
                        </Form.Item>

                        <Form.Item  name="password" rules={[{ required: true, message: '请输入密码!!!' }]}>
                            <Input name="password" prefix={<LockOutlined className="site-form-item-icon" />}type="password" placeholder="请输入密码" onChange={this.onInputChange} />
                        </Form.Item>

                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住用户和密码</Checkbox>
                            </Form.Item>
                            <a className="login-form-forgot" >
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onSubmit} >
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        );
    }

function InfoItem(props) {
    const handleCorrection = () => {
        if (props.handleCorrection) {
            props.handleCorrection(props.info)
        }
    }

    let link_section = null
    const showCorrection = typeof (props.hideCorrection) === 'undefined' || props.hideCorrection === false
    if (props.info.isWeibo) {
        link_section = <>
            <a className="info-item-link" href={props.info.link} target="_blank" rel="noopener noreferrer">原微博</a>
            {showCorrection ? <Button type="link" className="info-item-link" onClick={handleCorrection}>纠错</Button> : null}
        </>
    }

    return <div className={ `info-item ${!props.info.isWeibo ? 'info-sheet-item' : ''}` }>
        <div className="info-item-content">{props.info.post}</div>
        <div className="info-item-footer">
            <label className="info-item-date">{props.info.formatTime || props.info.time}</label>
            {link_section}
            <div className="info-item-tag-list">
              <Tag color={props.info.color}>{props.info.category}</Tag>
                { props.info.types.length > 0 ? props.info.types.map(type => <Tag color={props.info.color} key={type}>{type}</Tag>) : null }
            </div>
        </div>
    </div>
}

PageNotFound = () => {
  return (
    <Row style={{ marginTop: 60, textAlign: 'center', width: '100%' }}>
      <Col span={12} offset={6} >
        <h1 className='f48'> 404 </h1>
        <h2 className='f36'> PAGE NOT FOUND </h2>
        <h3 className='text-light-grey'> &quot; Not all those who wander are lost &quot; </h3>
        <Button type='primary'>
          <Link to="/"> Go to Homepage </Link>
        </Button>
      </Col>
    </Row>
  )
}

handleBuyHint(close, id, challID) {
    fetch(window.ipAddress + "/v1/challenge/hint", {
      method: 'post',
      headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
      body: JSON.stringify({
        "id": parseInt(id),
        "chall": challID,
      })
    }).then((results) => {
      return results.json(); //return data in JSON (since its JSON data)
    }).then((data) => {
      //console.log(data)
      if (data.success === true) {
        message.success({ content: "Purchashed hint " + String(id + 1) + " successfully!" })
        let challengeHints = this.state.challengeHints
        challengeHints[id] = (
          <Button type="primary" key={"hint" + String(id) + challID} style={{ marginBottom: "1.5vh", backgroundColor: "#49aa19" }} onClick={() => { this.handleHint(id, challID, true) }}>Hint {id + 1} - Purchased</Button>
        )
        this.setState({ hintModal: true, hintContent: data.hint, challengeHints: challengeHints })
        this.props.obtainScore()
        close()
      }
    }).catch((error) => {
      console.log(error)
      message.error({ content: "Oops. There was an issue connecting to the server" });
      close()
    })
  }

NavButtonWrapper = styled(Button)`
  background-color: transparent !important;
  height: 46px !important;
  margin-right: 10px !important;
  margin-left: 10px !important;
  color: ${(props) => props.theme.textDim}!important;
  border-width: 0 !important;
  border-style: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;

  &:hover {
    color: ${(props) => props.theme.primary}!important;
  }
  &[disabled] {
    cursor: pointer !important;
    color: ${(props) => props.theme.primary}!important;
  }
`

MutiFormBox = (props) => {
  const { option, value, onChange } = props;
  const [opts, setOpts] = useState(option || []);
  const tpl = [...value];
  const addRow = () => {
    let base = {label: '', value: ''}
    setOpts(prev => [...prev, base])
    onChange([...tpl, base])
  }
  const delRow = (index) => {
    opts.splice(index, 1)
    setOpts([...opts])
  }
  const handleChange = (index, e) => {
    // console.log(index, e.target.value)
    tpl[index].label = tpl[index].value = e.target.value
    onChange(tpl)
  }
  return <div className={styles.mutiRow}>
    {
      opts.map((item, i) => {
        return <div key={i} className={styles.mutiItem}>
                <span className={styles.label}>{`选项${i}：`}</span>
                <div className={styles.formItem}><Input defaultValue={value[i] ? value[i].label : ''} onChange={handleChange.bind(this, i)} /><MinusCircleOutlined onClick={delRow.bind(this, i)} /></div>
               </div>
      })
    }
    <Button type="primary" onClick={addRow} block>
      <PlusOutlined />
    </Button>
  </div>
}

render() {
    const cardContent = `此页面是用来展示通过项目内埋点收集到的异常信息。你可以点击不同种类的异常按钮，来观察捕获到的异常信息。`;
    const { bugList } = this.props
    return (
      <div className="app-container">
        <TypingCard title="Bug收集" source={cardContent} />
        <br />
        <Collapse defaultActiveKey={["1"]}> 
          <Panel header="报错" key="1">
            <Button type="primary" onClick={this.jsError}>jsError</Button>
            <Button type="primary" onClick={this.loadResourceError} style={{marginLeft:"20px"}}>资源加载异常</Button>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          rowKey={(record) => record.timestamp}
          dataSource={bugList}
          pagination={false}
        >
          <Column title="序号" dataIndex="id" key="id" width={60} render={(text,record,index) => index+1}/>
          <Column title="监控指标" dataIndex="kind" key="kind" width={80} />
          <Column title="异常类型" dataIndex="errorType" key="errorType" width={160} />
          <Column title="url" dataIndex="url" key="url" width={150} />
          <Column title="异常信息" dataIndex="desc" key="desc" width={300} ellipsis={true}/>  
          <Column title="异常堆栈" dataIndex="stack" key="stack" width={300} ellipsis={true}/>  
          <Column title="操作元素" dataIndex="selector" key="selector" width={195} ellipsis={true}/>
          <Column title="userAgent" dataIndex="userAgent" key="userAgent" width={100} />
          <Column title="时间" dataIndex="timestamp" key="timestamp" width={100} render={(value) => timestampToTime(value)}/>
        </Table>
      </div>
    );
  }

render() {
    return (
      <div id="works" className="block worksBlock">
        <div className="container-fluid">
          <div className="titleHolder">
            <h2>How it works</h2>
            <p>Click below to see a video how the app works and about its insights</p>
          </div>
          <div className="contentHolder">
            <Button size="large" onClick={this.showModal}><i className="fas fa-play"></i></Button>
          </div>
          <Modal
            title="App Tutorial"
            visible={this.state.visible}
            onCancel={this.handleCancel}
            footer={null}
            destroyOnClose = {true}
          >
          <iframe width="100%" height="350" src="https://www.youtube.com/embed/fvXABkXucr0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          </Modal>
        </div>
      </div>
    );
  }

render() {
    const { list } = this.state
    return (
      <Modal
        title="机器列表"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={this.handleOk}
        footer={[
          <Button key="submit" type="primary" onClick={this.handleOk}>
            确定
          </Button>,
        ]}
      >
        {
          list && list.map(item => (<p>{item}</p>))
        }
      </Modal>
    )
  }

render() {
    const {
      className,
      backText,
      linkElement = 'a',
      type,
      title,
      desc,
      img,
      actions,
      redirect,
      ...rest
    } = this.props;
    const pageType = type in config ? type : '404';
    const clsString = classNames(styles.exception, className);
    return (
      <div className={clsString} {...rest}>
        <div className={styles.imgBlock}>
          <div
            className={styles.imgEle}
            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
          />
        </div>
        <div className={styles.content}>
          <h1>{title || config[pageType].title}</h1>
          <div className={styles.desc}>{desc || config[pageType].desc}</div>
          <div className={styles.actions}>
            {actions ||
              createElement(
                linkElement,
                {
                  to: redirect,
                  href: redirect,
                },
                <Button type="primary">{backText}</Button>
              )}
          </div>
        </div>
      </div>
    );
  }

TradeListCell = props => {
  const { item, admin, buyClick, sellClick, editClick, closeClick } = props;
  return (
    <div className={styles.tradeListCell}>
      <Row>
        <Col span={12}>{`账户地址：${item.address}`}</Col>
        <Col span={8}>{`交易时间：${item.latest}`}</Col>
        <Col span={4}>{`成交额：${item.total}`}</Col>
      </Row>
      <br/>
      <Row>
        <Col span={2} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
          <img alt="logo" width="100px" src={item.logo} />
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.name}</span>
              <p>{`类型: ${item.type}`}</p>
              <span>{`邮编: ${item.code}`}</span>
              <p>{`线损: ${item.loss}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`可销售度数: ${item.canSell}`}</span>
              <p>{`售价: ${item.sellPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`需购买度数: ${item.needBuy}`}</span>
              <p>{`售价: ${item.buyPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.status}</span>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <>
            <Button type="primary" size="default" onClick={buyClick}>购买</Button>
            <Divider orientation="center" type="vertical"/>
            <Button type="primary" danger size="default" onClick={sellClick}>出售</Button>
          </>
          {
            admin ?
              <div style={{marginTop: 10, hidden: true}}>
                <Button type="primary" size="default" onClick={editClick}>编辑</Button>
                <Divider orientation="center" type="vertical"/>
                <Button type="primary" danger size="default" onClick={() => closeClick(item.status === '歇业' ? "开业" : "歇业")}>{item.status === '歇业' ? "开业" : "歇业"}</Button>
              </div>
              :
              null
          }
        </Col>
      </Row>
      <Divider type="horizontal"/>
    </div>
  );
}

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

//* Satisfies the requirement for:
//* start / stop / pause / continue stream
//* Toggle live feed visibility

function StreamControls({ mediaRecorder, toggleFeedVisibility, visibleFeed, startCountdown, toggleStreamPlayback, isActive }) {
	const [recording, setRecording] = useState(false);
	const [paused, setPaused] = useState(false);

	function startRecording() {
		if (mediaRecorder && mediaRecorder.state === "inactive") {
			startCountdown()
			setTimeout(() => {
				setRecording(true);
				mediaRecorder.start();
			}, 3000)
		}
	}

	function stopRecording() {
		if ((mediaRecorder && mediaRecorder.state === "recording") || (mediaRecorder && mediaRecorder.state === "paused")) {
			setRecording(false);
			mediaRecorder.stop();
			toggleStreamPlayback();
		}
	}

	function pauseRecording() {
		if (mediaRecorder && mediaRecorder.state === "recording") {
			setPaused(true);
			mediaRecorder.pause();
		}
	}

	function resumeRecording() {
		if (mediaRecorder && mediaRecorder.state === "paused") {
			setPaused(false);
			mediaRecorder.resume();
		}
	}

	return (
		<>
			{recording && !paused ? <button className="Rec">Recording</button> : null}
			{recording ? 
			<Timer recording={recording} paused={paused}/> : null}
			<div className="record-stream-controls">
				<Button className="start-recording" onClick={startRecording} style={{display: recording === true ? "none" : "flex", margin: "8px"}} disabled={isActive && !recording ? true : null}>
					<Icon type="video-camera" theme="filled" />
					<span>Start Recording</span>
				</Button>
				<Button className="pause-recording" onClick={pauseRecording} style={{display: recording === true && paused === false ? "flex" : "none", margin: "8px"}}>
				<Icon type="pause-circle" theme="filled" />
				 <span>Pause Recording</span>
				</Button>
				<Button className="resume-recording" onClick={resumeRecording} style={{display: recording === true && paused === true ? "flex" : "none", margin: "8px"}}>
					<Icon type="play-circle" theme="filled" />
					<span>Resume Recording</span>
				</Button>
				<Button className="stop-recording" onClick={stopRecording} style={{display: recording === true ? "flex" : "none", margin: "8px"}}>
				<	Icon type="stop" theme="filled" />
					<span>End Recording</span>
				</Button>
				<Button className="live-feed" onClick={toggleFeedVisibility} style={{ margin: "8px" }}>
				{visibleFeed ? <Icon type="eye-invisible" theme="filled" /> : <Icon type="eye" theme="filled" />}
					<span>Toggle Live Feed</span>
				</Button>
			</div>
		</>
	);
}

render() {
        return (
            <div>
                <Card title="内敛表单" className="card-wrap-login">
                    <Form  name="horizontal_login" layout="inline">
                        <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
                            <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
                <Card title="外联表单" className="card-wrap">
                    <Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
                        <Form.Item  rules={[{ required: true, message: '请输入用户名！！！' }]}>
                            <Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
                        </Form.Item>
                        <Form.Item rules={[{ required: true, message: '请输入密码！！！' }]}>
                            <Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>
                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onhandleSubmit}>
                             登录
                            </Button>
                        
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }

function ForgetPassword() {
  const loggedIn = Object.keys(authHeader()).length ? true : false;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const handleForgetPassword = (data) => {
    setLoading(true);
    postForgetPassword(data).then((res) => {
      alert(res.data);
      setLoading(false);
    });
  };

  if (loggedIn) return <Redirect to="/" />;

  return (
    <div className="container login-container">
      <h1 className="login-header">Forget Password</h1>

      <div className="login-form">
        <Form form={form} onFinish={handleForgetPassword} autoComplete="off">
          <Form.Item
            name={"email"}
            label="Enter your Email"
            style={{ display: "block" }}
            rules={[
              {
                type: "email",
                message: "Please enter a valid email",
              },
              {
                required: true,
                message: "Please enter your email",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <div className="login-submit-container">
            <Form.Item className="login-submit">
              <Button
                type="secondary"
                htmlType="submit"
                size="large"
                className="bbs"
                disabled={loading}
              >
                Send Link
              </Button>
            </Form.Item>
            <Link to="/login" style={{ display: "block" }}>
              <small>Back to Login</small>
            </Link>
          </div>
        </Form>
      </div>
    </div>
  );
}

render() {
        return (

            <Layout className="form-style">

                <Modal
                    title={null}
                    visible={this.state.previewModal}
                    footer={null}
                    bodyStyle={{ textAlign: "center" }}
                    onCancel={() => { this.setState({ previewModal: false }) }}
                >
                    <Tabs defaultActiveKey="challenge">
                        <TabPane
                            tab={<span><ProfileOutlined /> Challenge</span>}
                            key="challenge"
                        >
                            {this.state.challengeWriteup !== "" && (
                                <Tooltip title="View writeups for this challenge">
                                    <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
                                </Tooltip>
                            )}
                            {this.state.challengeWriteup === "" && (
                                <Tooltip title="Writeups are not available for this challenge">
                                    <Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
                                </Tooltip>
                            )}
                            <h1 style={{ fontSize: "150%" }}>{this.state.previewChallenge.name}</h1>
                            <div>
                                {this.state.challengeTags}
                            </div>
                            <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.previewChallenge.points}</h2>

                            <div className="challengeModal">
                                <MarkdownRender>{this.state.previewChallenge.description}</MarkdownRender>
                            </div>

                            <div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
                                {this.state.challengeHints}
                            </div>
                            <div style={{ display: "flex", justifyContent: "center" }}>
                                <Input style={{ width: "45ch" }} defaultValue="" placeholder={"Enter a flag"} />
                                <Button type="primary" icon={<FlagOutlined />}>Submit</Button>
                            </div>
                            <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "2vh" }}>
                                <p>Challenge Author: <em>You</em></p>
                                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.previewChallenge.max_attempts}</p>
                            </div>
                        </TabPane>
                    </Tabs>


                </Modal>
                <div style={{ display: "flex", alignItems: "center", alignContent: "center" }}>
                    <Button type="primary" onClick={this.props.handleBack} icon={<LeftOutlined />} style={{ maxWidth: "20ch", marginBottom: "3vh", marginRight: "2vw" }}>Back</Button>
                    <h1 style={{ fontSize: "180%" }}> <FlagTwoTone /> Create New Challenge</h1>

                </div>
                <CreateChallengeForm allCat={this.props.allCat} challenges={this.props.challenges} handleCreateBack={this.props.handleCreateBack.bind(this)} previewChallenge={this.previewChallenge.bind(this)} state={this.state} loadingStatus={this.state.loading} setState={this.setState.bind(this)}></CreateChallengeForm>
            </Layout>
        );
    }

export function Login({ login, user, loggedIn, loginError }) {
  useInjectReducer({ key: 'login', reducer });
  useInjectSaga({ key: 'login', saga });

  const onFinish = values => {
    const { username, password } = values;
    login(username, password);
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  console.log(loginError)

  return (
    <Card title="Login form" style={{ marginTop: 20}}>
      <Form
        {...layout}
        name="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="Username"
          name="username"
          validateStatus={loginError ? 'error' : ''}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          validateStatus={loginError ? 'error' : ''}
          help={loginError ? 'Invalid login or password' : ''}
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            Login
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

render() {
    // Hide some pages if the account is not logged in.
    let subPages = [];
    if (this.props.subPages && this.props.exchange.isInitialized) {
      for (let i = 0; i < this.props.subPages.length; i++) {
        if (this.props.dexAccount.account.state !== 'LOGGED_IN') {
          if (this.props.subPages[i].url === '/liquidity-mining/rewards') {
            continue;
          }
        }
        subPages.push(this.props.subPages[i]);
      }
    }

    return (
      <div
        style={{
          paddingLeft: '260px',
          paddingRight: '60px',
          paddingBottom: '0px',
          borderWidth: '0px',
          height: '46px',
          backgroundColor: this.props.theme.secondaryNavbarBackground,
        }}
      >
        <Button.Group
          style={{
            borderRadius: '0px',
            borderWidth: '0px',
            paddingBottom: '0px',
          }}
        >
          {subPages.map((config, i) => (
            <NavButton
              key={i}
              selected={this.props.selected}
              id={config.id}
              href={config.url}
              label={<I s={config.label} />}
            />
          ))}
        </Button.Group>
      </div>
    );
  }

render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className="app-container">
        <Collapse defaultActiveKey={["1"]}>
          <Panel header="导出选项" key="1">
            <Form layout="inline">
              <Form.Item label="文件名:">
                <Input
                  style={{ width: "250px" }}
                  prefix={
                    <Icon type="file" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="请输入文件名(默认excel-file)"
                  onChange={this.filenameChange}
                />
              </Form.Item>
              <Form.Item label="单元格宽度是否自适应:">
                <Radio.Group
                  onChange={this.autoWidthChange}
                  value={this.state.autoWidth}
                >
                  <Radio value={true}>是</Radio>
                  <Radio value={false}>否</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="文件类型:">
                <Select
                  defaultValue="xlsx"
                  style={{ width: 120 }}
                  onChange={this.bookTypeChange}
                >
                  <Select.Option value="xlsx">xlsx</Select.Option>
                  <Select.Option value="csv">csv</Select.Option>
                  <Select.Option value="txt">txt</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "all")}
                >
                  全部导出
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "selected")}
                >
                  导出已选择项
                </Button>
              </Form.Item>
            </Form>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          columns={columns}
          rowKey={(record) => record.id}
          dataSource={this.state.list}
          pagination={false}
          rowSelection={rowSelection}
          loading={this.state.downloadLoading}
        />
      </div>
    );
  }

function LoginPage() {
  const loader = useSelector(state => state.authentication.loader)

  const dispatch = useDispatch();

  return (
    <div className="container">
      <Form
        name="normal_login"
        className="form"
        initialValues={{
          remember: true,
        }}
        onFinish={() => dispatch(login(
          {'email': '[email protected]', 'password': 'cityslicka'},
        ))
        }
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input size="large"
            prefix={<UserOutlined className="site-form-item-icon"/>}
            placeholder="Username"
            autoComplete="username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon"/>}
            type="password"
            placeholder="Password"
            size="large"
            autoComplete="current-password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button loading={loader} type="primary" htmlType="submit" className="login-form-button"
            size="large">Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

function AppFaq() {
    return (
        <div id="faq" className="block faqBlock">
            <div className="container-fluid">
                <div className="titleHolder">
                    <h2>Frequently Asked Questions</h2>
                    <p>This are some of the frequently asked question</p>
                </div>
                <Collapse defaultActiveKey={["1"]}>
                    <Panel
                        header="How can I access my Portfolyo after completion?"
                        key="1"
                    >
                        <p>
                            We'll provide you the link where your portfolyo is
                            hosted once you are finished building! (Watch the
                            walk-though for aditional information).
                        </p>
                    </Panel>
                    <Panel header="How to customize components?" key="2">
                        <p>
                            We have an edit option for you to edit at each and
                            every component.
                        </p>
                    </Panel>
                    <Panel
                        header="Can we use Mobile or small screen devices to make my portfolio?"
                        key="3"
                    >
                        <p>
                            We highly recommend you to use any larger screen
                            devices such as laptop (or) tablets, because some of
                            the editing features might break in small screen
                            devices!
                        </p>
                    </Panel>
                    <Panel
                        header="How much is the cost to build and deploy my personnel portfolio?"
                        key="4"
                    >
                        <p>
                            You can build and deploy you portfolio's for
                            absolutely free of cost on our website!
                        </p>
                    </Panel>
                    <Panel header="Can I make more than one Portfolio?" key="5">
                        <p>
                            Yes you can make more than one portfolio!
                        </p>
                    </Panel>
                </Collapse>
                <div className="quickSupport">
                    <h3>Want quick support?</h3>
                    <p>
                        Please send an message to our Email provided below ⬇️
                    </p>
                    <Button type="primary" size="large">
                        <i className="fas fa-envelope"></i> Email your question
                    </Button>
                </div>
            </div>
        </div>
    );
}