Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
第9回Web分科会 実習
<!DOCTYPE html>
<html>
<head>
<title>CTF Flag Matcher</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" charset="utf-8"></script>
<script type="text/jsx" src="flag-matcher.jsx"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet">
<style>
h1 {
text-align: center;
font-size: 4em;
}
h2 {
margin: 0 0 0.5em;
}
.name-area {
width: 40%;
}
.problems {
padding: 0;
}
.problem {
padding: 1em;
background: #555;
border-radius: 5px;
margin: 1em 0;
list-style: none;
}
</style>
</head>
<body>
<div class="container">
<h1>CTF Flag Matcher</h1>
<div id="container"></div>
</div>
</body>
</html>
class NameInput extends React.Component {
onInput(event) {
}
render() {
return <div className="name-area form-group">
Your Name: <input className="form-control" type="text" onInput={this.onInput}></input>
</div>;
}
}
class Problem extends React.Component {
onClick(event) {
// TODO
alert('ちがうよ');
}
render() {
return <li className="problem">
<h2>[input title here]</h2>
<div className="form-group">
<label className="control-label">Flag</label>
<input className="form-control" type="password"></input>
</div>
<button className="btn btn-default submit-button" onClick={this.onClick}>Check</button>
<h3>Solvers</h3>
<ul></ul>
</li>;
}
}
class Problems extends React.Component {
render() {
return <ul className="problems">
{this.props.problems.map(problem => (
<Problem key={problem.title} problem={problem}/>
))}
</ul>;
}
}
class ProblemForm extends React.Component {
onSubmit(event) {
event.preventDefault();
const title = event.target.title.value;
const flag = event.target.flag.value;
// TODO
}
render() {
return <form className="add-problem" onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="title">Title</label>
<input type="text" className="form-control" id="title" name="title"/>
</div>
<div className="form-group">
<label htmlFor="flag">Flag</label>
<input type="text" className="form-control" id="flag" name="flag" placeholder="flag{xxxxx}"/>
</div>
<button type="submit" className="btn btn-primary">Add Problem</button>
</form>;
}
}
class Matcher extends React.Component {
constructor(props) {
super(props);
this.state = {problems: [], name: 'noname'};
}
render() {
return <div className="matcher">
<NameInput/>
<Problems problems={this.state.problems}/>
<ProblemForm/>
</div>;
}
}
const matcher = ReactDOM.render(<Matcher/>, document.getElementById('container'));
matcher.setState({problems: [{
title: 'sanity check',
flag: 'flag{hogehoge}',
solvers: ['hakatashi', 'cookies'],
}, {
title: 'yet another problem',
flag: 'flag{fugafuga}',
solvers: ['satos'],
}]});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.