@ant-design/icons#FlagTwoTone JavaScript Examples

The following examples show how to use @ant-design/icons#FlagTwoTone. 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: adminChallengeCreate.js    From ctf_platform with MIT License 5 votes vote down vote up
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>
        );
    }
Example #2
Source File: userChallengeCreate.js    From ctf_platform with MIT License 5 votes vote down vote up
render() {
        return (

            <Layout style={{ margin: "20px", backgroundColor: "rgba(0, 0, 0, 0)" }}>
                <div style={{ padding: "10px", backgroundColor: "rgba(0, 0, 0, 0.5)", border: "5px solid transparent", borderRadius: "20px" }}>
                    <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"
                            >
                                <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" }}>
                        <h1 style={{ fontSize: "180%" }}> <FlagTwoTone /> Create New Challenge</h1>

                    </div>
                    {!this.state.mainLoading && this.state.allCat !== [] && (
                        <CreateChallengeForm allCat={this.state.allCat} state={this.state} setState={this.setState.bind(this)} previewChallenge={this.previewChallenge.bind(this)} loadingStatus={this.state.loading}></CreateChallengeForm>
                    )}
                    {this.state.mainLoading && (
                        <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>
                    )}
                </div>
            </Layout>

        );
    }
Example #3
Source File: App.js    From ctf_platform with MIT License 4 votes vote down vote up
render() {
    return (
      <div style={{ position: "fixed" }}>
        <Transition
          items={this.state.logined}
          native
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0, display: "none" }}
        >
          {(styles, item) => {
            if (item && !this.state.loading) {
              return (
                <animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
                  <Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
                    <Sider
                      className={this.state.mobileBreakpoint ? "mobileSider" : ""}
                      breakpoint="md"
                      collapsedWidth={0}
                      onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
                      style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
                    >
                      <div className="overflow-handle">
                        <div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
                          <img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
                        </div>
                        <Dropdown overlay={
                          <Menu>
                            {this.state.team != "teams-disabled" && this.state.team != "loading" && (
                              <div>
                                <Menu.Item key="Team">
                                  <NavLink to="/Team">
                                    <span>
                                      <b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
                                      <br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
                                    </span>
                                    <TeamOutlined />
                                  </NavLink>
                                </Menu.Item>
                                <Menu.Divider />
                              </div>
                            )}

                            <Menu.Item key="Profile">
                              <NavLink to="/Profile">
                                <span>Profile </span>
                                <UserOutlined />
                              </NavLink>
                            </Menu.Item>
                            <Menu.Item key="Settings">
                              <NavLink to="/Settings">
                                <span>Settings </span>
                                <SettingOutlined />
                              </NavLink>
                            </Menu.Item>
                            <Menu.Divider />
                            <Menu.Item key="logout" onClick={() => {
                              confirm({
                                title: 'Are you sure you want to logout?',
                                icon: <ExclamationCircleOutlined />,
                                onOk: (close) => { this.handleLogout(); close(); },
                                onCancel: () => { },
                              });
                            }}>
                              <span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
                            </Menu.Item>
                          </Menu>}
                          trigger={['click']}>
                          <div className="buttonHover"
                            style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
                            <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
                              <h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
                              <Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
                            </div>
                            <div>
                              <h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
                            </div>
                          </div>
                        </Dropdown>

                        <Menu
                          selectedKeys={[this.state.current]}
                          onSelect={(selection) => { this.setState({ current: selection.key }) }}
                          mode="inline"
                          theme="dark"

                        > {/*
        defaultSelectedKeys - default selected menu items
        defaultOpenKeys - default opened sub menus
        inline - Sidebar Menu

        */}



                          <Menu.Item key="" className="menu-item">
                            <NavLink to="/">
                              <HomeTwoTone className="menu-item-icon" />
                              <span>Home</span>
                            </NavLink>
                          </Menu.Item>

                          <Menu.Item key="Challenges" className="menu-item">
                            <NavLink to="/Challenges">
                              <FlagTwoTone className="menu-item-icon" />
                              <span>Challenges</span>
                            </NavLink>
                          </Menu.Item>

                          <Menu.Item key="Scoreboard" className="menu-item">
                            <NavLink to="/Scoreboard">
                              <FundTwoTone className="menu-item-icon" />
                              <span>Scoreboard</span>
                            </NavLink>
                          </Menu.Item>

                          <Menu.Divider />

                          {this.state.permissions === 1 && (
                            <Menu.Item key="CreateChallenge" className="menu-item">
                              <NavLink to="/CreateChallenge">
                                <PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
                                <span>Create Challenge</span>
                              </NavLink>
                            </Menu.Item>
                          )}

                          {this.state.permissions === 2 && (

                            <Menu.Item key="Admin" className="menu-item">
                              <NavLink to="/Admin">
                                <CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
                                <span>Admin Panel</span>
                              </NavLink>
                            </Menu.Item>
                          )}


                        </Menu>
                        <div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
                          <p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
                        </div>
                      </div>
                    </Sider>

                    <Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
                      <Route
                        render={({ location, ...rest }) => (
                          <Transition
                            native
                            items={location.pathname.split("/")[1]}
                            trail={5}
                            key={location.pathname.split("/")[1]}
                            from={{ opacity: 0 }}
                            enter={{ opacity: 1 }}
                            leave={{ opacity: 0, display: "none" }}>
                            {(style, loc) => (
                              <animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
                                <Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
                                  <Ellipsis color="#177ddc" size={120} ></Ellipsis>
                                </div>}>
                                  <Switch>
                                    <Route exact path='/' render={(props) => <Home {...props} transition={style} />} />

                                    <Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
                                    <Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />

                                    <Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
                                    <Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
                                    <Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
                                    <Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />

                                    {this.state.permissions >= 1 ? (
                                      <Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
                                    ) : (
                                      <Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
                                    )}

                                    {this.state.permissions === 2 ? (
                                      <Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
                                    ) : (
                                      <Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
                                    )}
                                    <Route path='/*' render={(props) => <Oops {...props} transition={style} />} />

                                  </Switch>
                                </Suspense>
                              </animated.div>

                            )}
                          </Transition>
                        )}
                      />

                    </Content>
                  </Layout>
                </animated.div>
              )
            }
            else {

              if (!this.state.loading && !item && !this.state.token) {
                return (
                  <animated.div style={{ ...styles, position: "absolute" }}>
                    <Suspense fallback={<div className="loading-style">
                      <Ellipsis color="#177ddc" size={120} ></Ellipsis>
                    </div>}>
                      <Login handleLogin={this.handleLogin.bind(this)}></Login>
                    </Suspense>
                  </animated.div>)
              }
              else {
                return (
                  <animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
                    <Ellipsis color="#177ddc" size={120} ></Ellipsis>
                  </animated.div>
                )
              }

            }
          }
          }
        </Transition>
      </div >
    );
  }