antd#Form JavaScript Examples

VoterInput = ({ index, voters, setVoters, mainnetProvider }) => {
  return (
    <>
      <Form.Item label={`Voter ${index + 1}`} name={`address[${index}]`} style={{ marginBottom: "16px" }}>
        <Row gutter={8} align="middle">
          <Col span={16}>
            <AddressInput
              autoFocus
              ensProvider={mainnetProvider}
              placeholder="Enter address"
              value={voters[index]}
              onChange={address => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  nextVoters[index] = address;
                  return nextVoters;
                });
              }}
            />
          </Col>
          <Col span={8}>
            <DeleteOutlined
              style={{ cursor: "pointer", color: "#ff6666" }}
              onClick={event => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  return nextVoters.filter((_, i) => i !== index);
                });
              }}
            />
          </Col>
        </Row>
      </Form.Item>
    </>
  );
}

AntdForm = props => {
  const { formRef, children, ...others } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    formRef && formRef(form)
  }, []);
  return (
    <Form form={form} {...others}>{children}</Form>
  );
}

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

	beforeAll(() => {
		store = mockStore({
			User: {
				videoStream: {
					raw: null,
				},
			},
		});
	});

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

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

	test("should render a <Form> with <Input>'s", () => {
		wrapper = shallow(<UploadVideo />).dive();

		expect(wrapper.exists(Form)).toBe(true);
		expect(wrapper.exists(Input)).toBe(true);

	});
});

renderForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="验证状态">
              {getFieldDecorator('status')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="FAIL">失败</Option>
                  <Option value="PASS">成功</Option>
                  <Option value="MISS">未命中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

Page = ({
  data,
  form,
  form: { getFieldDecorator, getFieldValue },
  onUpdateComponentProps
}) => {
  const renderForm = () => {
    switch (data.node.name) {
      case 'button':
        return <ButtonForm getFieldDecorator={getFieldDecorator} data={data.node.data} />;
      case 'table':
        return (
          <TableForm
            getFieldDecorator={getFieldDecorator}
            getFieldValue={getFieldValue}
            form={form}
            data={data.node.data.props}
          />
        );
      default:
        break;
    }
  };

  return <Form layout="inline">{renderForm()}</Form>;
}

InviteModal = (props) => {
	let baseURL = process.env.REACT_APP_FRONT_END_URL || "https://www.alpacavids.com/";
	let URL = baseURL.concat("invite/", props.inviteCode);

	const handleOk = (e) => {
		e.preventDefault();
		props.setVisibility(false);
		CopyClipboard("team-link");
	};

	function handleCancel() {
		props.setVisibility(false);
	}

	return (
		<Modal
			title="Team Invitation Link"
			visible={props.isVisible}
			okText="Copy"
			onOk={handleOk}
			onCancel={handleCancel}
			okButtonProps={{ style: { backgroundColor: "#6954EA", color: "white", border: "none" } }}>
			<Form>
				<Form.Item label="Copy Link">
					<Input readOnly id="team-link" value={URL} />
				</Form.Item>
			</Form>
		</Modal>
	);
}

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>
        );
    }

render() {
    const { getFieldDecorator } = this.props.form
    const { id, visible } = this.state

    return (
      <Modal
        title={id ? '编辑报警计划' : '添加报警计划'}
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        maskClosable={false}
      >
        <Form {...formItemLayout} layout="horizontal">
          <Form.Item label="名称">
            {getFieldDecorator('description', {
              rules: [
                { required: true, message: '请输入报警计划名称' },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label="描述">
            {getFieldDecorator('rule_labels', {})(<Input />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

render(){
        return (
            <>
            <Navbar_student/>
            <section className="image width height">
                                 <h3 className="card-title card_us"><strong>Delete Education</strong></h3>
                                    <Form className="addjb margin-top" >
                                        <FormItem >
                                        <div className="form-group margin-t ">
                                            <Input type="TEXT" className="form-control" placeholder="Course" onChange={this.updateInput} required />
                                        </div>
                                        </FormItem>
                                        <FormItem>
                                        <div className="form-group margin-t">
                                            <Input type="TEXT" className="form-control" placeholder="Institute" onChange={this.updateinstitute} required/>
                                        </div>
                                        </FormItem>
                                        <input type= "submit" className="btn margin-top margin-b" onClick={this.del_edu} id='button'  value="delete"/>
                                    </Form>
            </section>
            </>
        );
    }

SubmitFlagForm = (props) => {
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      name="submit-flag"
      className="submit-flag-form"
      onFinish={(values) => { props.submitFlag(values); form.resetFields() }}
      style={{ display: "flex", justifyContent: "center", width: "100%", marginTop: "2vh" }}
    >
      <Form.Item
        name="flag"
        rules={[{ required: true, message: 'Hint: Flags are not blank.' }]}>
        <Input disabled={props.currentChallengeSolved} style={{ width: "45ch" }} placeholder={props.currentChallengeStatus} />
      </Form.Item>
      <Form.Item>
        <Button disabled={props.currentChallengeSolved} type="primary" htmlType="submit" icon={<FlagOutlined />}>Submit</Button>
      </Form.Item>
    </Form>
  );
}

render(){
        return (
            <>
            <Navbar_student/>
            <section className="image width height">
                                 <h3 className="card-title card_us"><strong>Add New Education</strong></h3>
                                    <Form className="addjb margin-top" >
                                        <FormItem >
                                        <div className="form-group margin-t ">
                                            <Input type="TEXT" className="form-control" placeholder="Course" onChange={this.updateInput} required />
                                        </div>
                                        </FormItem>
                                        <FormItem>
                                        <div className="form-group margin-t">
                                            <Input type="TEXT" className="form-control" placeholder="Institute" onChange={this.updateinstitute} />
                                        </div>
                                        </FormItem>
                                        <FormItem>
                                        <div className="form-group margin-t">
                                            <Input type="TEXT" className="form-control" placeholder="Marks" onChange={this.updatemarks} />
                                        </div>
                                        </FormItem>
                                        <input type= "submit" className="btn margin-top margin-b" onClick={this.add_edu} id='button'  value="Add"/>
                                    </Form>
            </section>
            </>
        );
    }

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>
  );
}

WrappedLinkForm = Form.create({ name: 'link' })(LinkModal)

Login = () => {
  const history = useHistory();
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const { signin } = useContext(GlobalContext);

  const onSubmit = async () => {
    signin(email, password);
  };

  return (
    <div>
      <Form
        style={{ position: "absolute" }}
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
      >
        <div className="logo-login">
          <Image alt="logo" src={logo} width={300} preview={false} />
        </div>
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your Email!",
            },
          ]}
        >
          <Input
            style={{ width: 300 }}
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Email"
            onChange={(e) => setEmail(e.target.value)}
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "Please input your Password!",
            },
          ]}
        >
          <Input.Password
            style={{ width: 300 }}
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            onClick={() => {
              onSubmit();
              setTimeout(() => history.push("/"), 1000);
            }}
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

login = props => {
  const { form, dispatch } = props;
  const { getFieldDecorator } = form;

  const submitFormResigster = e => {
    console.log(e);
    const {
      form: { validateFields },
    } = props;
    validateFields((err, values) => {
      if (!err) {
        const payload = {
          username: values.username,
          password: values.password,
        };
        dispatch({
          type: 'user/register',
          payload,
        });
      }
    });
  };

  return (
    <>
      <div className={styles.container}>
        <div className={styles.title}>
          <h2>react-drag 前端可视化构建平台</h2>
        </div>
        <div className={styles.logForm}>
          <h2>注册</h2>
          <div className={styles.form}>
            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
              <Form.Item label="用户名">
                {getFieldDecorator('username', {
                  rules: [{ required: true, message: '请输入用户名' }],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="密码">
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码' }],
                })(<Input.Password />)}
              </Form.Item>
              <Form.Item label="再次输入密码">
                {getFieldDecorator('repassword', {
                  rules: [{ required: true, message: '请输入二次确认密码' }],
                })(<Input.Password />)}
              </Form.Item>

              <Button
                type="primary"
                htmlType="submit"
                onClick={submitFormResigster}
                className={styles.btn}
              >
                注册
              </Button>
              <Link to="/login" className={styles.link}>
                登陆
              </Link>
            </Form>
          </div>
        </div>
      </div>
    </>
  );
}

export default function QuadraticDiplomacyCreate({ mainnetProvider, tx, writeContracts }) {
  const [voters, setVoters] = useState([""]);
  const [voteAllocation, setVoteAllocation] = useState(0);
  const [isSendingTx, setIsSendingTx] = useState(false);
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    // ToDo. Check if addresses are valid.
    setIsSendingTx(true);
    const filteredVoters = voters.filter(voter => voter);
    await tx(writeContracts.QuadraticDiplomacyContract.addMembersWithVotes(filteredVoters, voteAllocation), update => {
      if (update && (update.status === "confirmed" || update.status === 1)) {
        setVoters([""]);
        setVoteAllocation(0);
        form.resetFields();
        setIsSendingTx(false);
      } else if (update.error) {
        setIsSendingTx(false);
      }
    });
  };

  return (
    <div style={{ border: "1px solid", padding: "40px", width: "800px", margin: "64px auto 0px auto", textAlign: "left" }}>
      <Title level={3} style={{ fontFamily: "Space Mono" }}>Add members</Title>
      <Divider />
      <Form form={form} name="basic" onFinish={handleSubmit} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} layout="horizontal">
        <Form.Item label="Vote Allocation" name="voteCredit" style={{ textAlign: "left" }} tooltip="Number of votes each voter will have">
          <Input
            type="number"
            placeholder="100"
            style={{ width: "30%" }}
            onChange={event => setVoteAllocation(event.target.value)}
          />
        </Form.Item>
        <Divider />
        {voters.map((_, index) => (
          <VoterInput
            key={index}
            index={index}
            setVoters={setVoters}
            voters={voters}
            mainnetProvider={mainnetProvider}
          />
        ))}
        <Form.Item style={{ justifyContent: "center", marginTop: 24 }}>
          {/*ToDo. Restart ant form state (the browser is keeping filled-removed elements)*/}
          <Button
            type="dashed"
            block
            icon={<PlusOutlined />}
            onClick={() => setVoters(prevVoters => [...prevVoters, ""])}
          >
            Add Voter
          </Button>
        </Form.Item>
        <Divider />
        <Form.Item wrapperCol={{ offset: 16, span: 8 }}>
          {/*ToDo Disable if empty members */}
          {!isSendingTx ? (
            <Button type="primary" htmlType="submit" block disabled={!voteAllocation}>
              Submit
            </Button>
          ) : (
            <Spin size="small" />
          )}
        </Form.Item>
      </Form>
    </div>
  );
}

{ useForm } = Form

function UserStreamPanel({ actions }) {
  const [key, setKey] = useState('');
  const handleKeyInput = e => {
    setKey(e.target.value);
  };

  const onSelectChange = value => {
    actions.selectUserStream(value);
  };

  const onClickSubscribe = env => {
    actions.subscribeUserStream(key, env);
  };

  return (
    <>
      <Title level={5}>{i18n.t('label.userStream')}</Title>
      <Form>
        <Form.Item label="Listen key">
          <Input onChange={handleKeyInput} />
        </Form.Item>
        <Form.Item label="Source">
          <Select placeholder={i18n.t('message.selectStream')} onChange={onSelectChange}>
            {allUserStreams.map(stream => (
              <Option key={stream} value={stream}>
                {i18n.t(`label.${stream}`)}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
      <Button type="default" style={{ margin: '5px' }} onClick={() => onClickSubscribe(TESTNET)}>
        {i18n.t('label.testSubscribe')}
      </Button>
      <Button type="primary" style={{ margin: '5px' }} onClick={() => onClickSubscribe(PROD)}>
        {i18n.t('label.prodSubscribe')}
      </Button>
    </>
  );
}

{ Item: FormItem } = Form

CreateForm = Form.create()(props => {
  const { current, modalVisible, form, handleAdd, handleUpdate, handleModalVisible } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      if (current && current.id) {
        handleUpdate({ ...fieldsValue, id: current.id });
      }
      handleAdd(fieldsValue);
    });
  };
  return (
    <Modal
      destroyOnClose
      title={current && current.id ? '编辑任务' : '新建任务'}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="任务名称">
        {form.getFieldDecorator('taskInfo', {
          rules: [{ required: true, message: '请输入任务名称！' }],
          initialValue: current.taskInfo,
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="测试地址">
        {form.getFieldDecorator('host', {
          rules: [{ required: true, message: '请输入机器IP！' }],
          initialValue: current.host,
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="测试数据路径">
        {form.getFieldDecorator('testData', {
          rules: [{ required: true, message: '请输入测试数据路径！' }],
          initialValue: current.testData,
        })(<Input placeholder="请输入" />)}
      </FormItem>
    </Modal>
  );
})

StyledForm = styled(Form)`
    padding: 16px;
`

Table = ({ getFieldDecorator, getFieldValue, data, form }) => {
  getFieldDecorator('keys', { initialValue: [] });

  const renderForm = () => {
    getFieldDecorator('keys', { initialValue: data.columns });
    const keys = getFieldValue('keys');
    return keys.map((item, idx) => (
      <div key={idx}>
        <Col span={12}>
          <Form.Item>
            {getFieldDecorator(`title[${idx}]`, {
              initialValue: item.title
            })(<Input  placeholder="请填写title" />)}
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item>
            {getFieldDecorator(`key[${idx}]`, {
              initialValue: item.key
            })(<Input  placeholder="请填写key" />)}
          </Form.Item>
        </Col>
      </div>
    ));
  };

  const onHandleAdd = () => {
    const keys = getFieldValue('keys');
    const nextKeys = keys.concat(id++);
    form.setFieldsValue({
      keys: nextKeys
    });
  };

  return (
    <>
      <Col span={24}>
        <Form.Item label="表格大小">
          {getFieldDecorator('size', {
            initialValue: data.size || 'default'
          })(
            <Select style={{ width: 200 }}>
              <Select.Option value="middle" key="middle">
                middle
              </Select.Option>
              <Select.Option value="default" key="default">
                default
              </Select.Option>
              <Select.Option value="small" key="small">
                small
              </Select.Option>
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={24}>
        <Form.Item label="表头数据:">
        </Form.Item>
      </Col>
      {renderForm()}
      <Col span={24}>
        <Form.Item>
          <Button type="primary" size="small" icon="plus" style={{ marginLeft: 20, width: 250 }} onClick={() => onHandleAdd()}>
            新增
          </Button>
        </Form.Item>
      </Col>
    </>
  );
}

render() {
    const { data } = this.props.loginData
    const { getFieldDecorator } = this.props.form
    const { chooseMethod, defaultName } = this.state
    return (
      <div className="login-container">
        <div className="login-bg" />
        <div className="login-content">
          <div className="login-title">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
          <Form
            {...layout}
            name="basic"
          >
            {
              (chooseMethod === 'local' || chooseMethod === 'ldap') && (<div>
                <Form.Item label="用户名">
                  {getFieldDecorator('username', {
                    initialValue: defaultName,
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(<Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                  />)}
                </Form.Item>
                <Form.Item label="密码">
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: 'Please input your Password!' }],
                  })(<Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="Password"
                  />)}
                </Form.Item>
                <div style={{ height: '20px' }} />
              </div>)
            }
            <Form.Item
              wrapperCol={{ offset: 2, span: 20 }}
            >
              {chooseMethod === 'none' && <p className="choose-text">请选择登录方式 ：</p>}
              {
                (data && chooseMethod === 'none') && (<Button type="primary" block onClick={() => this.onFinish()} style={{ marginBottom: '15px' }}>
                  已有账号，直接登录<Icon type="right" />
                </Button>)
              }
              <Row type="flex" justify="space-between" style={{ color: 'white' }}>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={(chooseMethod !== 'none' && chooseMethod !== 'local') ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('local')} className="login-form-button">
                    本地
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'ldap' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('ldap')} className="login-form-button">
                    LDAP
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'oauth' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('oauth')} className="login-form-button">
                    OAuth
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }

FormItem = Form.Item

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="请输入文件名(默认file)"
                  onChange={this.filenameChange}
                />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-zip"
                  onClick={this.handleDownload.bind(null, "all")}
                >
                  全部导出
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-zip"
                  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>
    );
  }

render() {
    return (
      <>
        <Navbar />
        <div className="pop image width height">
          <img
            src={web5}
            className="image-fluid animated size_img margin-l-lg"
            alt="login img"
          />
          <div className="col-md-4 col-10 left_margin">
            <div className="margin-t-lg">
              <div className="card-body card_us">
                <h3 className="card-title card_us">
                  <strong>Student Login</strong>
                </h3>
                <Form>
                  <FormItem>
                    <div className="form-group margin-t">
                      <Input
                        type="text"
                        id="email"
                        className="form-control"
                        onChange={this.updateInput}
                        placeholder="Username"
                        required
                      />
                    </div>
                  </FormItem>
                  <FormItem>
                    <div className="form-group margin-t">
                      <Input
                        type="password"
                        id="password"
                        className="form-control"
                        onChange={this.updatePassword}
                        placeholder="password"
                        required
                      />
                    </div>
                  </FormItem>
                  <input
                    type="submit"
                    className="btn margin-t"
                    value="Login"
                    onClick={this.login_link}
                  ></input>
                </Form>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }

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>
  );
}

CreateTeamForm = (props) => {
    const [form] = Form.useForm()
    const [loading, setLoading] = React.useState(false)

    return (
        <Form
            form={form}
            name="createTeam"
            onFinish={async (values) => {
                setLoading(true)
                await fetch(window.ipAddress + "/v1/team/create", {
                    method: 'post',
                    headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
                    body: JSON.stringify({
                        "name": values.name,
                    })
                }).then((results) => {
                    return results.json(); //return data in JSON (since its JSON data)
                }).then((data) => {
                    if (data.success === true) {
                        message.success({ content: "Created the team " + values.name + " successfully!" })
                        form.resetFields()
                        props.loadTeamDetails(values.name)
                        props.setTeam(values.name)
                        props.obtainScore()
                        props.setState({ createTeamModal: false })
                    }
                    else if (data.error === "name-taken") {
                        message.error("Team name has been taken. Please select another name.")
                    }
                    else if (data.error === "in-team") {
                        message.error("Already in a team. Please leave your team to create a new team")
                    }
                    else if (data.error === "same-name-as-user") {
                        message.error("The team name you have chosen is the same as a username. Please choose another name instead.")
                    }
                    else if (data.error === "team-full") {
                        message.error("This team is full and is unable to take anymore members.")
                    }
                    else {
                        message.error({ content: "Oops. Unknown error." })
                    }

                }).catch((error) => {
                    console.log(error)
                    message.error({ content: "Oops. There was an issue connecting with the server" });
                })
                setLoading(false)
            }}
            style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%" }}
        >
            <h3>Team Name:</h3>
            <Form.Item
                name="name"
                rules={[
                    {
                        required: true,
                        message: 'Please input a valid team name that is alphanumeric with spaces or underscores',
                        pattern: /^[a-zA-Z0-9_ ]+$/
                    },
                ]}
            >

                <Input icon={<IdcardOutlined />}  allowClear placeholder="Enter a team name" />
            </Form.Item>

            <Form.Item>
                <Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ createTeamModal: false }) }}>Cancel</Button>
                <Button type="primary" htmlType="submit" icon={<UsergroupAddOutlined />} loading={loading}>Create Team</Button>
            </Form.Item>
        </Form>
    );
}

TokenTradeModal = props => {
  const [form] = Form.useForm();
  const { visible, operation, onCancel, onSubmit } = props;
  useEffect(() => {
    if (form && !visible) {
      form.resetFields();
    }
  }, [props.visible]);

  const handleSubmit = () => {
    if (!form) return;
    form.submit();
  };

  const handleFinish = values => {
    if (onSubmit) {
      onSubmit(values);
    }
  };

  const modalFooter = {
    okText: '确认',
    onOk: handleSubmit,
    onCancel,
  };

  const getModalContent = () => {
    return (
      <Form {...formLayout} form={form} onFinish={handleFinish} onValuesChange={(changedValues , allValues) => {
        if (changedValues.buy_token) {
          form.setFieldsValue({ amount_price: changedValues.buy_token });
        }
      }}>
        <Form.Item
          name="buy_token"
          label= {operation === 1 ? "兑换数量" : "提现数量"}
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input placeholder="请输入数量" />
        </Form.Item>
        <Form.Item
          name="amount_price"
          label= {operation === 1 ? "支付金额" : "实际提现"}
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input placeholder="请输入数量" />
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      title={operation === 1 ? '充值提示' : `提现提示`}
      className={styles.standardListForm}
      width={640}
      bodyStyle={
        {
          padding: '28px 0 0',
        }
      }
      destroyOnClose
      visible={visible}
      {...modalFooter}
    >
      {getModalContent()}
    </Modal>
  );
}