@ant-design/icons#EditTwoTone JavaScript Examples

CreateTodo = () => {
  const [text, setText] = useState("");

  const { addTodo } = useContext(GlobalContext);

  const onSubmit = () => {
    addTodo(text);
  };

  return (
    <div className="todoList">
      <Input
        placeholder="Enter Task... "
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <Button onClick={onSubmit} style={{ marginLeft: 10, margin: 5 }}>
      <EditTwoTone />
      </Button>
    </div>
  );
}

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

  const resetPassword = async () => {
    await fetch(`/api/v1/auth/resetPassword/user`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        password,
      }),
    }).then((res) => res.json);
    history.push("/");
  };

  return (
    <div>
      <Input
        placeholder="Enter new Password ... "
        style={{ width: 200 }}
        onChange={(e) => {
          setPassword(e.target.value);
        }}
      />
      <Button onClick={resetPassword} style={{ marginLeft: 10, margin: 5 }}>
        <EditTwoTone />
      </Button>
    </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.previewData.name}</h1>
                            <div>
                                {this.state.challengeTags}
                            </div>
                            <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "2vh", fontSize: "200%" }}>{this.state.previewData.points}</h2>

                            <div className="challengeModal">
                                <MarkdownRender>{this.state.previewData.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: {this.state.challengeData.author}</p>
                                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.previewData.max_attempts}</p>
                            </div>
                        </TabPane>
                    </Tabs>


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

                </div>
                {!this.state.loading && (
                    <CreateChallengeForm IDNameMapping={this.props.IDNameMapping} allCat={this.props.allCat} challenges={this.props.challenges} state={this.state} editLoading={this.state.editLoading} setState={this.setState.bind(this)} previewChallenge={this.previewChallenge.bind(this)} initialData={this.state.challengeData} handleEditChallBack={this.props.handleEditChallBack}></CreateChallengeForm>
                )}

                {this.state.loading && (
                    <div>
                        <div className="demo-loading-container" style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                            <Ellipsis color="#177ddc" size={120} ></Ellipsis>
                        </div>
                    </div>
                )}
            </Layout>
        );
    }

EditNote = (props) => {
  const [visible, setVisible] = useState(false);
  const [note, setNote] = useState(props.notes.note);
  const [id, setId] = useState("");

  const postData = async () => {
    await fetch(`/api/v1/note/updateNote`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        note,
        id,
      }),
    }).then((res) => res.json);
  };

  const onCreate = async (e) => {
    e.stopPropagation();
    setVisible(false);
    await postData();
  };

  const onCancel = (e) => {
    e.stopPropagation();
    setVisible(false);
    setId("");
    setNote("");
  };

  const { TextArea } = Input;

  return (
    <div>
      <Button
        size="xs"
        style={{ float: "right", marginLeft: 5 }}
        onClick={() => {
          setVisible(true);
          setId(props.notes._id);
        }}
      >
        <EditTwoTone />
        <Modal
          keyboard={true}
          visible={visible}
          title={props.notes.title}
          okText="Update"
          cancelText="Cancel"
          onCancel={onCancel}
          onOk={onCreate}
          centered
        >
          <TextArea
            defaultValue={props.notes.note}
            onChange={(e) => setNote(e.target.value)}
            rows={30}
          />
        </Modal>
      </Button>
    </div>
  );
}

TicketTime = (props) => {
  const [date, setDate] = useState(moment().format("MM/DD/YYYY"));
  const [time, setTime] = useState();
  const [activity, setActivity] = useState("");
  const [log, setLog] = useState([]);

  const format = "HH:mm";

  function onChangeDate(date, dateString) {
    const d = moment(date).format("MM/DD/YYYY");
    setDate(d);
  }

  function onChangeTime(time) {
    const t = time;
    const m = moment(t).format("hh:mm");
    setTime(m);
  }

  async function postData() {
    await fetch(`/api/v1/time/createTime`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        ticket: props.ticket._id,
        date,
        time,
        activity,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          console.log(data.error);
        } else {
          console.log("Congrats it worked");
        }
      });
  }

  async function getLogById() {
    const id = props.ticket._id;
    await fetch(`/api/v1/time/getLog/${id}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        setLog(res.log);
      });
  }

  async function deleteLog(id) {
    await fetch(`/api/v1/time/deleteLog/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
  }

  useEffect(() => {
    getLogById();
  }, []);

  return (
    <div>
      <div className="ticket-log">
      <DatePicker onChange={onChangeDate} defaultValue={moment} />
        <TimePicker format={format} onChange={onChangeTime} />
        <Input
          style={{ width: 300 }}
          placeholder="Enter activity here"
          onChange={(e) => setActivity(e.target.value)}
        />
        <Button onClick={postData}>
          <EditTwoTone />
        </Button>
      </div>
      <div className="ticket-logs">
        {log.map((log) => {
          return (
            <div key={log._id}>
              <ul>
                <li>
                  <span>{log.date} | </span>
                  <span>{log.time} | </span>
                  <span>{log.user.name} | </span>
                  <span>{log.activity}</span>
                  <Tooltip placement="right" title="Delete">
                    <Button
                      onClick={() => deleteLog(log._id)}
                    >
                      <DeleteTwoTone twoToneColor="#FF0000" />
                    </Button>
                  </Tooltip>
                </li>
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/**
     * 显示右键菜单
     *
     * @returns
     * @memberof ResourceTree
     */
    showTreeRightClickMenu() {
        let keys = resourceTreeSelectKeys;
        // 0:新建连接;1:修改连接;2:删除连接;3:新建目录;4:修改目录;5:删除目录;6:删除;7:打开命令行;8:打开新窗口;9:断开连接;10:新建根目录;11:复制链接
        let showMenuItem = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER_ON_ROOT] = 1;
        if (typeof keys === "undefined") {
            showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
            showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
        } else {
            let nodeTypeList = [];
            for (let i = 0; i < keys.length; i++) {
                let node = this.findNodeByNodeKey(this.props.hosts, keys[i]);
                if (node == null || typeof node === "undefined") {
                    continue;
                }
                nodeTypeList.push(node.isLeaf);
                if (nodeTypeList.length >= 2) {
                    break;
                }
            }
            if (nodeTypeList.length === 2) {
                // 选择了多个类型的节点
                showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_ALL] = 1;
            } else if (nodeTypeList.length === 1) {
                let nodeType = nodeTypeList[0];
                if (nodeType === false) {
                    // 文件夹
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_FOLDER] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_FOLDER] = 1;
                } else {
                    // 连接
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_CONN] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_CONN] = 1;
                    showMenuItem[
                        HOSTS_TREEE_MENU_TYPE.CREATE_CONN_TERMINAL
                    ] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN_MUTI] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.DISCONNECT_CONN] = 1;
                    showMenuItem[HOSTS_TREEE_MENU_TYPE.COPY_CONN] = 1;
                }
            } else {
                // 没有选择节点
                showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
                showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
            }
        }

        return (
            <Menu
                onClick={this.clickTreeRightClickMenu.bind(this)}
                style={{ width: 200 }}
            >
                {showMenuItem[0] === 1 ? (
                    <Menu.Item key="0">
                        <FolderAddTwoTone /> {intl.get("Tree.Menu.CREATE_CONN")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[1] === 1 ? (
                    <Menu.Item key="1">
                        <EditTwoTone /> {intl.get("Tree.Menu.UPDATE_CONN")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[2] === 1 ? (
                    <Menu.Item key="2">
                        <DeleteTwoTone /> {intl.get("Tree.Menu.DEL_CONN")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[3] === 1 ? (
                    <Menu.Item key="3">
                        <FolderAddTwoTone />{" "}
                        {intl.get("Tree.Menu.CREATE_FOLDER")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[4] === 1 ? (
                    <Menu.Item key="4">
                        <EditTwoTone /> {intl.get("Tree.Menu.UPDATE_FOLDER")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[5] === 1 ? (
                    <Menu.Item key="5">
                        <DeleteTwoTone /> {intl.get("Tree.Menu.DEL_FOLDER")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[6] === 1 ? (
                    <Menu.Item key="6">
                        <DeleteTwoTone /> {intl.get("Tree.Menu.DEL_ALL")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[7] === 1 ? (
                    <Menu.Item key="7">
                        <CodeTwoTone />{" "}
                        {intl.get("Tree.Menu.CREATE_CONN_TERMINAL")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[8] === 1 ? (
                    <Menu.Item key="8">
                        <PlusSquareTwoTone />{" "}
                        {intl.get("Tree.Menu.CREATE_CONN_MUTI")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[9] === 1 ? (
                    <Menu.Item key="9">
                        <ApiTwoTone /> {intl.get("Tree.Menu.DISCONNECT_CONN")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[10] === 1 ? (
                    <Menu.Item key="10">
                        <FolderAddTwoTone />{" "}
                        {intl.get("Tree.Menu.CREATE_FOLDER_ON_ROOT")}
                    </Menu.Item>
                ) : (
                    ""
                )}
                {showMenuItem[11] === 1 ? (
                    <Menu.Item key="11">
                        <CopyTwoTone /> {intl.get("Tree.Menu.COPY_CONN")}
                    </Menu.Item>
                ) : (
                    ""
                )}
            </Menu>
        );
    }