@ant-design/icons#UnlockOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#UnlockOutlined.
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: challengesTagSort.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="pageTransition" style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title="Hint"
visible={this.state.hintModal}
onCancel={() => { this.setState({ hintModal: false }) }}
footer={null}
>
<p>{this.state.hintContent}</p>
</Modal>
<Modal
title={null}
visible={this.state.challengeModal}
footer={null}
bodyStyle={{ textAlign: "center" }}
onCancel={() => { this.setState({ challengeModal: false }); this.props.history.push("/Challenges/" + this.props.category); }}
>
<Tabs defaultActiveKey="challenge">
<TabPane
tab={<span><ProfileOutlined /> Challenge</span>}
key="challenge"
>
{this.state.challengeWriteup !== "" && this.state.challengeWriteup !== "CompleteFirst" && (
<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>
)}
{this.state.challengeWriteup === "CompleteFirst" && (
<Tooltip title="Writeups are available for this challenge but you must complete the challenge first to view it.">
<Button shape="circle" size="large" style={{ position: "absolute", right: "2ch", color: "#13a8a8" }} icon={<SolutionOutlined />} />
</Tooltip>
)}
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<div style={{ display: "flex", justifyContent: "center" }}>
<h1 style={{ fontSize: "150%", maxWidth: "35ch", whiteSpace: "initial" }}>{this.state.viewingChallengeDetails.name}
<Tooltip title="Copy challenge link to clipboard.">
<LinkOutlined style={{ color: "#1890ff", marginLeft: "0.5ch" }} onClick={
async () => {
await navigator.clipboard.writeText(window.location.href);
message.success("Challenge link copied to clipboard.")
}} /></Tooltip>
</h1>
</div>
<div>
{this.state.challengeTags}
</div>
<h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.viewingChallengeDetails.points}</h2>
<div className="challengeModal">
<MarkdownRender >{this.state.viewingChallengeDetails.description}</MarkdownRender>
</div>
<div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
{this.state.challengeHints}
</div>
</Suspense>
<div style={{ display: "flex" }}>
<SubmitFlagForm submitFlag={this.submitFlag.bind(this)} currentChallengeStatus={this.state.currentChallengeStatus} currentChallengeSolved={this.state.currentChallengeSolved}></SubmitFlagForm>
</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "-1vh" }}>
<p>Challenge Author: <em>{this.state.viewingChallengeDetails.author}</em></p>
<p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.viewingChallengeDetails.max_attempts}</p>
</div>
</TabPane>
<TabPane
tab={<span><UnlockOutlined /> Solves ({this.state.viewingChallengeDetails.solves.length}) </span>}
key="solves"
>
<List
itemLayout="horizontal"
dataSource={this.state.viewingChallengeDetails.solves}
locale={{
emptyText: (
<div>
<SmileOutlined style={{ fontSize: "500%" }} />
<br />
<br />
<p style={{ fontSize: "150%" }}>No solves yet. Maybe you can be the first!</p>
</div>
)
}}
renderItem={item => {
return (
<List.Item key={item}>
<List.Item.Meta
avatar={<Avatar src={"/static/profile/" + item + ".webp"} />}
title={<Link to={"/Profile/" + item}><a style={{ fontSize: "110%", fontWeight: 700 }} onClick={() => { this.setState({ challengeModal: false }) }}>{item}</a></Link>}
/>
</List.Item>
)
}
} />
</TabPane>
</Tabs>
</Modal>
<Divider style={{ marginTop: "0px" }}>Select Tags</Divider>
<span className="tag-holder" >
{Object.keys(this.state.tag).map((tag) => {
return (
<CheckableTag className="tag-select-style" key={tag} checked={this.state.selectedTags.indexOf(tag) !== -1}
onChange={(checked) => {
let selectedTags = this.state.selectedTags
if (!checked) selectedTags.splice(selectedTags.indexOf(tag), 1)
else selectedTags.push(tag)
if (selectedTags.length === 0) this.sortCats(this.state.sortType, true)
this.setState({ selectedTags: selectedTags })
}}>{tag} <span style={{ color: "#d89614" }}>({this.state.tag[tag].length})</span></CheckableTag>
)
})}
</span>
<Divider />
{this.state.tag && this.state.selectedTags.length > 0 ? (
<ChallengesTagSortList tag={this.state.tag} selectedTags={this.state.selectedTags} permissions={this.props.permissions} loadChallengeDetails={this.loadChallengeDetails.bind(this)} loadingChallenge={this.state.loadingChallenge} currentChallenge={this.state.currentChallenge} />
) : (
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
gutter: 20
}}
dataSource={this.state.challenges}
locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No challenges have been released yet</h1>
</div>
)
}}
renderItem={item => {
if (item.solves.length === 0) item.firstBlood = "No First Blood Yet!"
else {
if (this.props.disableNonCatFB) {
item.firstBlood = "No First blood Yet"
for (let i = 0; i < item.solves.length; i++) {
if (this.props.userCategories[item.solves[i]] !== "none") {
item.firstBlood = item.solves[i]
break
}
}
}
else item.firstBlood = item.solves[0]
}
if (item.requires && !item.requiresSolved && this.props.permissions < 2) {
return (
<List.Item key={item._id}>
<Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
<div id={item._id}>
<Card
type="inner"
bordered={true}
className="card-design"
>
<Meta
description={
<div className="card-design-body" >
<LockOutlined className="disabled-style" />
<h1 className="card-design-name" >{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Tooltip>
</List.Item>
)
}
else if (!item.solved) {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved, item.firstBlood) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
>
<Meta
description={
<div className="card-design-body">
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
else {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design solved hover"
>
<Meta
description={
<div className="card-design-body">
<CheckOutlined className="correct-style" />
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
}
}
/>)}
</Layout>
);
}
