p59342861
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Migration to bootstrap v4 started, Registration UI finished

This commit is contained in:
VakarisZ 2020-06-15 11:04:25 +03:00
parent 1b98080102
commit ac83d7fc48
7 changed files with 4856 additions and 5345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9920
monkey/monkey_island/cc/ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
monkey/monkey_island/cc/ui/package.json
View File

@ -63,7 +63,7 @@
"@fortawesome/free-solid-svg-icons": "^5.11.2", "@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.7", "@fortawesome/react-fontawesome": "^0.1.7",
"@kunukn/react-collapse": "^1.2.7", "@kunukn/react-collapse": "^1.2.7",
"bootstrap": "^3.4.1", "bootstrap": "^4.5.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"core-js": "^2.6.10", "core-js": "^2.6.10",
"d3": "^5.14.1", "d3": "^5.14.1",
@ -80,19 +80,20 @@
"rainge": "^1.0.1", "rainge": "^1.0.1",
"rc-progress": "^2.5.2", "rc-progress": "^2.5.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-bootstrap": "^0.32.4", "react-bootstrap": "^1.0.1",
"react-copy-to-clipboard": "^5.0.2", "react-copy-to-clipboard": "^5.0.2",
"react-data-components": "^1.2.0", "react-data-components": "^1.2.0",
"react-desktop-notification": "^1.0.9", "react-desktop-notification": "^1.0.9",
"react-dimensions": "^1.3.0", "react-dimensions": "^1.3.0",
"react-event-timeline": "^1.6.3",
"react-hot-loader": "^4.12.20",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-event-timeline": "^1.6.3",
"react-fa": "^5.0.0", "react-fa": "^5.0.0",
"react-filepond": "^7.0.1", "react-filepond": "^7.0.1",
"react-graph-vis": "^1.0.5", "react-graph-vis": "^1.0.5",
"react-hot-loader": "^4.12.20",
"react-json-tree": "^0.11.2", "react-json-tree": "^0.11.2",
"react-jsonschema-form": "^1.8.0", "react-jsonschema-form": "^1.8.0",
"react-particles-js": "^3.2.1",
"react-redux": "^5.1.2", "react-redux": "^5.1.2",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-spinners": "^0.5.13", "react-spinners": "^0.5.13",

99
monkey/monkey_island/cc/ui/src/components/Main.js
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'; import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom';
import {Col, Grid, Row} from 'react-bootstrap'; import {Container, Row} from 'react-bootstrap';
import SideNavComponent from 'components/SideNavComponent';
import RunServerPage from 'components/pages/RunServerPage'; import RunServerPage from 'components/pages/RunServerPage';
import ConfigurePage from 'components/pages/ConfigurePage'; import ConfigurePage from 'components/pages/ConfigurePage';
import RunMonkeyPage from 'components/pages/RunMonkeyPage'; import RunMonkeyPage from 'components/pages/RunMonkeyPage';
@ -127,57 +126,55 @@ class AppComponent extends AuthComponent {
render() { render() {
return ( return (
<Router> <Router>
<Grid fluid={true}> <Container fluid>
<Row> <Row>
<Col sm={9} md={10} smOffset={3} mdOffset={2} className='main'> <Switch>
<Switch> <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
<Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/> <Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
<Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/> {this.renderRoute('/',
{this.renderRoute('/', <StandardLayoutComponent component={RunServerPage}
<StandardLayoutComponent component={RunServerPage} completedSteps={this.state.completedSteps}
completedSteps={this.state.completedSteps} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} />,
/>, true)}
true)} {this.renderRoute('/configure',
{this.renderRoute('/configure', <StandardLayoutComponent component={ConfigurePage}
<StandardLayoutComponent component={ConfigurePage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/run-monkey',
{this.renderRoute('/run-monkey', <StandardLayoutComponent component={RunMonkeyPage}
<StandardLayoutComponent component={RunMonkeyPage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/infection/map',
{this.renderRoute('/infection/map', <StandardLayoutComponent component={MapPage}
<StandardLayoutComponent component={MapPage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/infection/telemetry',
{this.renderRoute('/infection/telemetry', <StandardLayoutComponent component={TelemetryPage}
<StandardLayoutComponent component={TelemetryPage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/start-over',
{this.renderRoute('/start-over', <StandardLayoutComponent component={StartOverPage}
<StandardLayoutComponent component={StartOverPage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.redirectTo('/report', '/report/security')}
{this.redirectTo('/report', '/report/security')} {this.renderRoute('/report/security',
{this.renderRoute('/report/security', <StandardLayoutComponent component={ReportPage}
<StandardLayoutComponent component={ReportPage} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/report/attack',
{this.renderRoute('/report/attack', <StandardLayoutComponent component={ReportPage}
<StandardLayoutComponent component={ReportPage} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/report/zeroTrust',
{this.renderRoute('/report/zeroTrust', <StandardLayoutComponent component={ReportPage}
<StandardLayoutComponent component={ReportPage} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} {this.renderRoute('/license',
{this.renderRoute('/license', <StandardLayoutComponent component={LicensePage}
<StandardLayoutComponent component={LicensePage} onStatusChange={this.updateStatus}
onStatusChange={this.updateStatus} completedSteps={this.state.completedSteps}/>)}
completedSteps={this.state.completedSteps}/>)} <Route component={NotFoundPage}/>
<Route component={NotFoundPage}/> </Switch>
</Switch>
</Col>
</Row> </Row>
</Grid> </Container>
</Router> </Router>
); );
} }

11
monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js
View File

@ -1,12 +1,13 @@
import React from "react" import React from 'react'
import {Route} from "react-router-dom" import {Route} from 'react-router-dom'
import SideNavComponent from "../SideNavComponent" import SideNavComponent from '../SideNavComponent'
import {Col} from 'react-bootstrap';
export const StandardLayoutComponent = ({component: Component, ...rest}) => ( export const StandardLayoutComponent = ({component: Component, ...rest}) => (
<Route {...rest} render={() => ( <Route {...rest} render={() => (
<> <Col sm={9} md={10} smOffset={3} mdOffset={2} className='main'>
<SideNavComponent completedSteps={rest['completedSteps']}/> <SideNavComponent completedSteps={rest['completedSteps']}/>
<Component {...rest} /> <Component {...rest} />
</> </Col>
)}/> )}/>
) )

82
monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
View File

@ -1,21 +1,28 @@
import React from 'react'; import React from 'react';
import {Col} from 'react-bootstrap'; import {Row, Col, Container, Form, Button} from 'react-bootstrap';
import Particles from 'react-particles-js';
import AuthService from '../../services/AuthService'; import AuthService from '../../services/AuthService';
import '../../styles/RegisterPage.scss';
import {particleParams} from '../../styles/particle-component/RegistrationPageParams';
import monkeyDetective from '../../images/detective-monkey.svg';
class RegisterPageComponent extends React.Component { class RegisterPageComponent extends React.Component {
register = () => { register = () => {
this.auth.register(this.username, this.password).then(res => { this.auth.register(this.username, this.password).then(res => {
this.setState({failed: false, error: ""}); this.setState({failed: false, error: ''});
if (res['result']) { if (res['result']) {
this.redirectToHome(); this.redirectToHome();
} else { } else {
this.setState({failed: true, this.setState({
error: res['error']}); failed: true,
error: res['error']
});
} }
}); });
}; };
updateUsername = (evt) => { updateUsername = (evt) => {
this.username = evt.target.value; this.username = evt.target.value;
}; };
@ -23,6 +30,7 @@ class RegisterPageComponent extends React.Component {
updatePassword = (evt) => { updatePassword = (evt) => {
this.password = evt.target.value; this.password = evt.target.value;
}; };
redirectToHome = () => { redirectToHome = () => {
window.location.href = '/'; window.location.href = '/';
}; };
@ -39,7 +47,7 @@ class RegisterPageComponent extends React.Component {
this.auth.needsRegistration() this.auth.needsRegistration()
.then(result => { .then(result => {
if(!result){ if (!result) {
this.redirectToHome() this.redirectToHome()
} }
}) })
@ -47,37 +55,39 @@ class RegisterPageComponent extends React.Component {
render() { render() {
return ( return (
<Col xs={12} lg={8}> <Container fluid className={'registration-container'}>
<h1 className="page-title">First time?</h1> <Particles className={'particle-background'} params={particleParams}/>
<h3 className="page-title">Let's secure your island</h3> <Row>
<div className="col-sm-6 col-sm-offset-3" style={{'fontSize': '1.2em'}}> <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}} className={'registration-block'}>
<div className="panel panel-default"> <Row>
<div className="panel-heading text-center"> <Col lg={8} md={8} sm={8}>
<b>Register</b> <h1 className='reg-title'>First time?</h1>
</div> <h3 className='reg-subtitle'>Let's secure your island!</h3>
<div className="panel-body"> <div>
<div className="input-group center-block text-center"> <Form className={'registration-form'}>
<input type="text" className="form-control" placeholder="Username" <Form.Control type='text' placeholder='Username'/>
onChange={evt => this.updateUsername(evt)}/> <Form.Control type='password' placeholder='Password'/>
<input type="password" className="form-control" placeholder="Password" <Button id={'registration-button'} onClick={() => {
onChange={evt => this.updatePassword(evt)}/> this.register()
<button type="button" className="btn btn-primary btn-lg" style={{margin: '5px'}} }}>
onClick={() => { Lets Go!
this.register() </Button>
}}> {
Lets Go! this.state.failed ?
</button> <div className='alert alert-danger' role='alert'>{this.state.error}</div>
{ :
this.state.failed ? ''
<div className="alert alert-danger" role="alert">{this.state.error}</div> }
: </Form>
'' </div>
} </Col>
</div> <Col lg={4} md={4} sm={4}>
</div> <img alt="infection monkey" className={'monkey-detective'} src={monkeyDetective}/>
</div> </Col>
</div> </Row>
</Col> </Col>
</Row>
</Container>
); );
} }
} }

62
monkey/monkey_island/cc/ui/src/styles/RegisterPage.scss Normal file
View File

@ -0,0 +1,62 @@
.registration-container {
margin-top: 1em;
}
.registration-form input {
margin-bottom: 1em;
}
.registration-form input:focus {
border-color: #ffcc00;
box-shadow: 0 0 0 0.2rem rgba(255, 230, 0, 0.25);
}
.registration-form .alert {
margin-top: 20px;
}
#registration-button {
border-color: #3f3f3f;
font-size: 1.3em;
width: 100%;
background-color: #3f3f3f;
color: #ffde00;
}
#registration-button:hover {
border-color: #ffde00;
font-size: 1.3em;
font-weight: bold;
width: 100%;
background-color: #ffde00;
color: #000000;
}
.monkey-detective {
max-height: 500px;
}
.particle-background {
position: absolute;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
background-color: #1a1a1a;
}
.registration-block {
padding: 10px;
background-color: rgba(255, 255, 255, 0.89);
border-radius: 10px;
}
.registration-block h1 {
font-size: 4.5em;
margin-bottom: 0;
}
.registration-block h3 {
margin-bottom: 20px;
}

18
monkey/monkey_island/cc/ui/src/styles/particle-component/RegistrationPageParams.js Normal file
View File

@ -0,0 +1,18 @@
export const particleParams = {
particles: {
color: {
value: "#ffcc00"
},
line_linked: {
color: {
value: "#a08100"
}
},
number: {
value: 150
},
size: {
value: 3
}
}
}