Skip to content

Commit 1d21424

Browse files
betarixmbetarixm
committed
front styled
1 parent f7596c9 commit 1d21424

File tree

13 files changed

+291
-89
lines changed

13 files changed

+291
-89
lines changed

‎.idea/workspace.xml

+32-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front/src/App.scss

+52-7
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,22 @@ $margin-tiny: 5px;
7272
background-color: rgba(255,255,255,0.1);
7373
backdrop-filter: blur(5px);
7474
padding: $margin-big;
75+
input {
76+
box-sizing: border-box;
77+
width: 100%;
78+
}
79+
}
80+
81+
@keyframes slideUp {
82+
from {
83+
transform: translateY(20px);
84+
opacity: 0;
85+
}
86+
87+
to {
88+
transform: translateY(0px);
89+
opacity: 1;
90+
}
7591
}
7692

7793
* {
@@ -124,6 +140,8 @@ button {
124140

125141
.alert {
126142
@include flex-center-row;
143+
animation-duration: 0.5s;
144+
animation-name: slideUp;
127145
background-color: black;
128146
border-radius: $border-radius;
129147
padding: $margin-big;
@@ -293,6 +311,10 @@ button {
293311
margin-left: $margin-tiny;
294312
font-size: $font-body;
295313
}
314+
&.disabled {
315+
background-color: grey;
316+
pointer-events: none;
317+
}
296318
}
297319
}
298320
@include mobile {
@@ -311,6 +333,7 @@ button {
311333
@extend .inputBox;
312334
min-width: 50vw;
313335
.description {
336+
font-size: $font-body;
314337
margin-bottom: $margin-medium;
315338
}
316339
.chips {
@@ -357,12 +380,15 @@ button {
357380
}
358381

359382
.scoreBox {
383+
display: flex;
384+
flex-wrap: wrap;
385+
width: 70vw;
386+
justify-content: center;
360387
.scoreEle {
361388
@include flex-center-column;
362389
justify-content: space-between;
363390
@include blur-box;
364-
margin-bottom: $margin-medium;
365-
min-width: 25vw;
391+
margin: $margin-medium;
366392
.row {
367393
@include flex-center-row;
368394
justify-content: space-between;
@@ -378,25 +404,44 @@ button {
378404
.attackBox {
379405
@include flex-center-column;
380406
margin-top: $margin-medium;
381-
width: 100%;
407+
width: 240px;
408+
.keys {
409+
display: flex;
410+
flex-direction: row;
411+
}
412+
.row {
413+
box-sizing: border-box;
414+
}
382415
.attack {
383416
@include flex-row;
384417
@include e-border-radius;
385-
justify-content: space-between;
386-
align-items: center;
387418
width: 100%;
388419
box-sizing: border-box;
420+
justify-content: space-between;
421+
align-items: center;
389422
background-color: black;
423+
390424
margin: $margin-tiny;
391425
padding: $margin-tiny $margin-small;
392426
* {
393-
font-size: $font-small;
427+
font-size: $font-body;
394428
}
395429
.key {
396-
margin: $margin-tiny;
430+
margin: $margin-tiny $margin-tiny $margin-tiny 0;
397431
padding: $margin-tiny $margin-small;
398432
border-radius: $margin-small;
399433
border: solid 1px white;
434+
font-size: $font-small;
435+
&.success {
436+
background-color: rgba(0,0,0,0);
437+
color: $color-blue;
438+
border: solid 1px $color-blue;
439+
}
440+
&.fail {
441+
background-color: rgba(0,0,0,0);
442+
color: $color-red;
443+
border: solid 1px $color-red;
444+
}
400445
}
401446
}
402447
}

‎front/src/App.tsx

+42-2
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,64 @@ import Item from "./content/shop/item";
2727
import Dashboard from "./content/Dashboard";
2828
import Navigation from "./component/Navigation";
2929
import Scoreboard from "./content/scoreboard";
30+
import {ping} from "./env/api";
31+
import Loading from "./component/Loading";
3032

3133
interface AppProps {
3234

3335
}
3436

3537
interface AppStates {
36-
38+
status: "loading"|"login"|"logout"
3739
}
3840

3941
class App extends React.Component<AppProps, AppStates> {
42+
state: AppStates = {
43+
status: "loading"
44+
}
45+
46+
componentDidMount() {
47+
console.log("wow")
48+
ping().then((res) => {
49+
this.setState({
50+
status: "login"
51+
})
52+
}).catch((err) => {
53+
this.setState({
54+
status: "logout"
55+
})
56+
})
57+
}
58+
59+
componentWillUnmount() {
60+
61+
}
62+
63+
onLoginSuccess = () => {
64+
this.setState({
65+
status: "login"
66+
});
67+
}
68+
4069
render() {
70+
if (this.state.status === "loading") {
71+
return (
72+
<Loading description={"지구 무결성 검증 중..."} />
73+
)
74+
}
75+
4176
return (
4277
<Router>
4378
<div className="App">
4479
<Navigation />
4580
<Switch>
81+
{this.state.status === "logout" && (
82+
<Route path={"*"}>
83+
<Login onLogin={this.onLoginSuccess}/>
84+
</Route>
85+
)}
4686
<Route exact path={PATH_LOGIN}>
47-
<Login />
87+
<Login onLogin={this.onLoginSuccess}/>
4888
</Route>
4989
<Route exact path={PATH_SQLI}>
5090
<Sqli />

‎front/src/component/Flag.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {authFlag} from "../env/api";
44
import Alert from "./Alert";
55

66
interface FlagProps {
7-
7+
onSuccess(score: number, point: number): void;
88
}
99

1010
interface FlagStates {
@@ -41,9 +41,10 @@ class Flag extends React.Component<FlagProps, FlagStates> {
4141
})
4242
authFlag(this.state.flag)
4343
.then((res) => {
44+
this.props.onSuccess(res, res);
4445
this.setState({
4546
status: "success",
46-
message: res
47+
message: `ECHO-INDEX/POINT: ${res} 상승`
4748
});
4849
})
4950
.catch((err) => {

‎front/src/component/Navigation.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,22 @@ class NavigationInner extends React.Component<NavigationProps, NavigationStates>
2828
})
2929
}
3030

31+
scrollToTop = () => {
32+
window.scrollTo(0, 0);
33+
}
34+
3135
render() {
3236
return (
3337
<div id="nav" className={"navigation"}>
3438
<Link to={PATH_DASHBOARD} className={"title"}>
3539
<img src={"/static/img/logo-white.png"} />
3640
</Link>
3741
<div className={"links"}>
38-
<Link className={this.props.location.pathname === PATH_DASHBOARD ? "selected" : ""} to={PATH_DASHBOARD}>Dashboard</Link>
39-
<Link className={this.props.location.pathname.startsWith(PATH_SCOREBOARD) ? "selected" : ""} to={PATH_SCOREBOARD}>Scoreboard</Link>
40-
<Link className={this.props.location.pathname.startsWith(PATH_SQLI) ? "selected" : ""} to={PATH_SQLI}>SQL Injection</Link>
41-
<Link className={this.props.location.pathname.startsWith(PATH_XSS) ? "selected" : ""} to={PATH_XSS}>XSS</Link>
42-
<Link className={this.props.location.pathname.startsWith(PATH_SHOP) ? "selected" : ""} to={PATH_SHOP}>Shop</Link>
42+
<Link onClick={this.scrollToTop} className={this.props.location.pathname === PATH_DASHBOARD ? "selected" : ""} to={PATH_DASHBOARD}>Dashboard</Link>
43+
<Link onClick={this.scrollToTop} className={this.props.location.pathname.startsWith(PATH_SCOREBOARD) ? "selected" : ""} to={PATH_SCOREBOARD}>Scoreboard</Link>
44+
<Link onClick={this.scrollToTop} className={this.props.location.pathname.startsWith(PATH_SQLI) ? "selected" : ""} to={PATH_SQLI}>SQL Injection</Link>
45+
<Link onClick={this.scrollToTop} className={this.props.location.pathname.startsWith(PATH_XSS) ? "selected" : ""} to={PATH_XSS}>XSS</Link>
46+
<Link onClick={this.scrollToTop} className={this.props.location.pathname.startsWith(PATH_SHOP) ? "selected" : ""} to={PATH_SHOP}>Shop</Link>
4347
</div>
4448
</div>
4549
)

‎front/src/component/Query.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ class Query extends React.Component<QueryProps, QueryStates> {
4949
}
5050

5151
onSubmit = () => {
52-
this.props.onSubmit(this.state.query, this.state.target)
52+
this.setState({
53+
status: "querying"
54+
})
55+
56+
this.props.onSubmit(this.state.target, this.state.query)
5357
.then((res) => {
5458
this.setState({
5559
status: "success",
@@ -100,7 +104,7 @@ class Query extends React.Component<QueryProps, QueryStates> {
100104
<div className={"queryBox"}>
101105
<input placeholder={this.props.title + " Query"} className={"query"} type={"text"} onChange={this.onQueryChange} value={this.state.query}/>
102106
{this.TeamSelector()}
103-
<button onClick={this.onSubmit}>ATTACK</button>
107+
<button className={this.state.status === "querying" ? "disabled" : ""} onClick={this.onSubmit}>{this.state.status === "querying" ? "지구-"+this.state.target+" 해킹 시도 중..." : "ATTACK"}</button>
104108
</div>
105109
);
106110
}

0 commit comments

Comments
 (0)