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